/* Generated from design/v9-combined.html. Do not hand-edit: regenerate with
   scripts/build-theme-css.py so the theme and the reference page cannot drift. */

/* =====================================================================
   HERO

   THE NAME. Deduced from what the eight sessions actually do, not from
   search volume. Every session takes one marketing discipline, shows what
   the technology changes about it, and has the participant produce their
   own output. That is application, not strategy, and it runs the whole
   cycle rather than one stage. "Applied AI for Marketing" says both, and it
   drops into the playbook's qualifier and subject slots without forcing,
   which "Go To Market, with AI" never did. The differentiating detail sits
   in the line beneath, which is how Kellogg and Columbia both handle it.
   ===================================================================== */
.hero{background:var(--ink); color:var(--stock); position:relative; overflow:hidden}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.12;
  background-image:radial-gradient(var(--stock) 1px, transparent 1.1px);
  background-size:7px 7px;
  mask-image:linear-gradient(to bottom, transparent, #000 60%, #000);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 60%, #000);
}
.hero .wrap{position:relative; z-index:2}
.herobody{padding-block:clamp(44px,6vw,84px) clamp(48px,6.5vw,96px)}
.eyebrow{color:var(--stock); display:inline-block}
.datum{width:56px; height:3px; background:var(--ion); margin:calc(var(--u)*3) auto}
.hero h1{
  font-size:clamp(44px,7.8vw,116px); line-height:.94; letter-spacing:-.042em;
  text-wrap:balance; max-width:17ch; margin-inline:auto;
}
.hero .standfirst{
  color:var(--grey); font-size:clamp(17px,1.5vw,23px); line-height:1.4;
  margin-top:clamp(16px,2vw,26px); max-width:46ch; margin-inline:auto;
}
.hero .lede{
  font-size:clamp(16.5px,1.25vw,20px); line-height:1.5; color:var(--on-dark);
  margin-top:clamp(20px,2.4vw,30px);
}
.offer{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:calc(var(--u)*2) clamp(24px,3.4vw,64px);
  margin-top:clamp(28px,3.4vw,44px); padding-top:calc(var(--u)*3);
  border-top:1px solid var(--on-dark-rule);
}
.offer div{text-align:center}
.offer dt{color:var(--grey); margin-bottom:calc(var(--u)*.75)}
.offer dd{font-weight:600; font-size:clamp(19px,1.7vw,26px); letter-spacing:-.025em; font-variant-numeric:tabular-nums}

/* =============================================================== STATEMENT */
.statement{background:var(--ink); color:var(--stock); padding-block:clamp(64px,8.6vw,140px)}
.statement .line{
  font-style:italic; font-weight:500;
  font-size:clamp(32px,5.2vw,76px); line-height:1.04; letter-spacing:-.038em;
  text-wrap:balance;
}
/* the second sentence carries the accent. Two playbook notes, both deliberate
   overrides rather than oversights: the playbook says italic and colour do not
   stack, and it allows one accent element per surface, where the 6 per cent
   figure below is already one. Ion Blue reads 13.1:1 on off-black, so the
   legibility is not in question. */
.statement .hl{color:var(--ion)}
/* the paragraphs share the title's measure. 74ch at body size rendered far
   narrower than 26ch at display size, which read as an unexplained indent. */
.statement .line, .statement .after{max-width:min(100%, 980px); margin-inline:auto}
.statement .after{
  color:var(--on-dark); margin-top:clamp(28px,3.4vw,48px);
  font-size:clamp(17px,1.3vw,20px); line-height:1.55;
}
.statement .after + .after{margin-top:1em}

/* ------------------------------------------------------------ THE FIGURES */
.figures{
  max-width:900px; margin:clamp(40px,5vw,72px) auto 0;
  display:grid; gap:clamp(24px,3vw,40px); text-align:left;
}
.figures p{margin-inline:0}
.fig{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,2.6vw,40px); align-items:center}
@media (max-width:640px){ .fig{grid-template-columns:1fr; gap:calc(var(--u)*1.5)} }
.fig .val{
  font-weight:600; font-size:clamp(42px,5.4vw,72px); line-height:.9;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums; min-width:3.4ch;
}
.fig .val.point{color:var(--ion)}
.fig .say{color:var(--on-dark); font-size:16.5px; line-height:1.45; margin-bottom:calc(var(--u)*1.5)}
.meter{height:10px; background:rgba(242,240,236,.14); position:relative; overflow:hidden}
.meter i{display:block; height:100%; width:var(--w); background:var(--grey); transform-origin:0 50%; transform:scaleX(0)}
.meter.point i{background:var(--ion)}
.figures.on .meter i{transform:scaleX(1); transition:transform 1.1s var(--expo) var(--d,0ms)}
@media (prefers-reduced-motion:reduce){ .meter i{transform:scaleX(1)} .figures.on .meter i{transition:none} }
.source{
  color:var(--on-dark-soft); font-size:13px; line-height:1.5;
  margin-top:clamp(20px,2.4vw,30px); max-width:900px; margin-inline:auto;
  text-align:left; text-wrap:balance;
}
.source cite{font-style:italic}

/* ================================================================= SECTIONS */
.sec{padding-block:clamp(56px,7vw,112px)}
.sec + .sec{border-top:1px solid var(--rule-soft)}
.tint{background:var(--stock-2); border-top:0}
.dark{background:var(--ink); color:var(--stock); border-top:0}
.dark h2{color:var(--stock)}
.head{margin-bottom:clamp(32px,4vw,60px)}
.head h2{font-size:clamp(30px,4.4vw,66px); letter-spacing:-.035em; max-width:20ch; text-wrap:balance}
.mid h2{margin-inline:auto}
.head .sub{margin-top:calc(var(--u)*2.5); color:var(--ink-soft); max-width:66ch}
.dark .head .sub{color:var(--on-dark)}
.head .spec{color:var(--ink-soft); display:block; margin-bottom:calc(var(--u)*2.5)}
.dark .head .spec{color:var(--grey)}

/* ============================================================== PROGRAMME */
.days{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(30px,3.8vw,72px); text-align:left}
@media (max-width:880px){ .days{grid-template-columns:1fr; row-gap:clamp(36px,4vw,56px)} }
.dayhead{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-bottom:calc(var(--u)*1.75); border-bottom:2px solid var(--ink)}
.dayhead h3{font-size:clamp(18px,1.5vw,24px); letter-spacing:-.025em}
.dayhead .spec{color:var(--ink-soft); margin:0}
.dayline{color:var(--ink-soft); font-size:15px; padding-block:calc(var(--u)*1.75); border-bottom:1px solid var(--rule-soft)}
/* no session numbers and no clock. The times were never confirmed, and a
   published timetable commits the programme to a shape it has not agreed. */
.sess{padding:calc(var(--u)*2.75) 0; border-bottom:1px solid var(--rule-soft)}
.sess h4{font-weight:600; font-size:clamp(18px,1.45vw,23px); letter-spacing:-.024em; margin-bottom:calc(var(--u)*.75)}
.sess p{color:var(--ink-soft); font-size:16px; line-height:1.5; max-width:52ch}

/* ============================================== WHAT YOU LEAVE WITH
   Four documents rather than eight competencies. Each names the artifact and
   the application, because the previous list managed not to mention AI once.
   Numbered because they are produced in that order across the two days. */
/* ================================================================ THE TOOLS
   A dark band between the programme and the outcomes, which gives the two
   light sections either side something to sit against. Every mark is knocked
   to a single off-white value, exactly as the client wall is, so ten different
   brand palettes cannot fight each other or the page. */
.tools{background:var(--ink); color:var(--stock); padding-block:calc(var(--u)*8)}
.tools .datum{margin-block:0 calc(var(--u)*3)}
.tools .spec{color:var(--grey); display:block; margin-bottom:calc(var(--u)*1.5)}
.tools .say{color:var(--on-dark); max-width:56ch; margin-inline:auto; font-size:16.5px}
.tools ul{
  list-style:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(26px,3.6vw,56px); margin-top:clamp(32px,4vw,56px);
}
.tools img{height:clamp(22px,2.3vw,30px); width:auto; filter:brightness(0) invert(1); opacity:.88}
.tools li{display:flex; align-items:center; gap:calc(var(--u)*1.25)}
.tools li span{font-size:15px; color:var(--on-dark-soft); white-space:nowrap}
@media (max-width:620px){ .tools li span{display:none} }

/* .mid p carries an auto inline margin, which would centre these inside their
   own columns and read as a stray indent */
.docs p, .roles p{margin-inline:0}
.docs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3.4vw,56px); text-align:left}
@media (max-width:820px){ .docs{grid-template-columns:1fr; gap:clamp(26px,3.2vw,40px)} }
.doc{padding-top:calc(var(--u)*2.5); border-top:2px solid var(--ink)}
.doc h3{font-size:clamp(21px,1.9vw,28px); letter-spacing:-.025em; margin-bottom:calc(var(--u)*1.5)}
.doc p{color:var(--ink-soft); font-size:16px; line-height:1.5; max-width:44ch}

/* ================================================== WHO IT IS FOR, ON BLACK
   No bullets. Each audience is a role and a qualifying line, set as its own
   block, which reads faster than a list and does not need a marker. */
.roles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,3.4vw,56px) clamp(32px,4.4vw,88px); text-align:left}
@media (max-width:780px){ .roles{grid-template-columns:1fr; gap:calc(var(--u)*4)} }
.role-t{font-weight:600; font-size:clamp(19px,1.7vw,25px); letter-spacing:-.025em; line-height:1.15; margin-bottom:calc(var(--u)*1.25)}
.role-n{color:var(--grey); font-size:16px; line-height:1.45; max-width:40ch}

/* ================================================================= TRAINER */
.trainer .grid{
  display:grid; grid-template-columns:minmax(0,.56fr) minmax(0,1fr);
  gap:clamp(32px,4.4vw,76px); align-items:stretch; text-align:left;
}
@media (max-width:880px){ .trainer .grid{grid-template-columns:1fr; gap:calc(var(--u)*4)} }
.portrait{max-width:400px}
.portrait img{width:100%; height:auto; filter:saturate(.5) contrast(1.02)}
.tcol{display:flex; flex-direction:column; justify-content:center; gap:calc(var(--u)*2); min-width:0}
.trainer h2{font-size:clamp(30px,3.2vw,50px); margin-bottom:calc(var(--u)*1)}
.trainer .role{color:var(--ink-soft); margin-bottom:calc(var(--u)*2)}
.trainer p{color:var(--ink-soft); max-width:56ch}
.trainer p + p{margin-top:.85em}

/* ------------------------------------------------------------- CLIENT WALL
   Playbook: marks together, in white, at equal cap height, on the off-black
   ground, no mark scaled for emphasis, never longer than one row on screen.
   The artwork is colour, so it is knocked to white with a filter, which keeps
   every mark at the same value regardless of the file it came from. */
.wall{background:var(--ink); color:var(--stock); padding-block:calc(var(--u)*6); overflow:hidden}
.wall .spec{color:var(--grey); display:block; margin-bottom:calc(var(--u)*4); text-align:center}
/* the strip runs edge to edge and loops. Two identical lists sit side by side
   and the track travels exactly half its width, so the seam never shows. The
   edges are masked to alpha, not tinted, so no colour is blended. */
.marquee-wrap{
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee{display:flex; width:max-content; animation:slide 44s linear infinite}
.wall:hover .marquee, .wall:focus-within .marquee{animation-play-state:paused}
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.wall ul{
  list-style:none; display:flex; align-items:center;
  gap:clamp(36px,5vw,84px); padding-right:clamp(36px,5vw,84px);
}
@media (prefers-reduced-motion:reduce){
  .marquee{animation:none; width:100%; justify-content:center}
  .marquee ul:last-child{display:none}
  .wall ul{flex-wrap:wrap; justify-content:center; padding-right:0}
  .marquee-wrap{mask-image:none; -webkit-mask-image:none}
}
/* Every mark is pre-trimmed to its own alpha bounding box, so a shared height
   already lands close. What remains is genuinely optical: a stacked lockup or a
   bare symbol does not read at the same size as a single-line wordmark, and the
   playbook asks for equal cap height, not equal box height. */
.wall img{height:var(--lh, clamp(19px,2vw,28px)); width:auto; filter:brightness(0) invert(1); opacity:.92}
.wall img[alt="Mondelez"]{--lh:clamp(28px,2.9vw,41px)}   /* two-line lockup */
.wall img[alt="Qatar Airways"]{--lh:clamp(23px,2.4vw,33px)} /* Latin over Arabic */
.wall img[alt="Shell"]{--lh:clamp(24px,2.5vw,35px)}      /* symbol, no wordmark */
.wall img[alt="Unilever"]{--lh:clamp(25px,2.6vw,36px)}   /* symbol over wordmark */
.wall img[alt="USAID"]{--lh:clamp(23px,2.4vw,33px)}      /* seal beside wordmark */
.wall .note{color:var(--on-dark-soft); font-size:13px; text-align:center; margin-top:calc(var(--u)*4)}

/* ============================================================== ENROLMENT
   On the off-black ground so it runs into the footer as one dark close. The
   form sits in a single column: taller, but the fields get room and the eye has
   one path down. Inputs are filled off-white for contrast against the ground,
   square and unbordered, which keeps them fields rather than boxes. */
.enrol{background:var(--ink); color:var(--stock)}
.enrol .head h2{color:var(--stock)}
.enrol .head .spec{color:var(--grey)}
.enrol-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:clamp(36px,5vw,100px); align-items:start; text-align:left}
@media (max-width:900px){ .enrol-grid{grid-template-columns:1fr; gap:calc(var(--u)*6)} }
.bigprice{font-weight:600; font-size:clamp(52px,7vw,104px); line-height:.86; letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.bigprice sup{font-size:.24em; vertical-align:super; letter-spacing:.02em; margin-right:.12em; font-weight:500}
.pricenote{position:relative; margin-top:calc(var(--u)*3); padding-top:calc(var(--u)*2.5); color:var(--on-dark); max-width:44ch}
.pricenote::before{content:""; position:absolute; top:0; left:0; width:56px; height:3px; background:var(--ion)}
.terms{list-style:none; margin-top:calc(var(--u)*4); border-top:1px solid var(--on-dark-rule)}
.terms li{display:flex; justify-content:space-between; gap:20px; align-items:baseline; padding-block:calc(var(--u)*2); border-bottom:1px solid var(--on-dark-rule)}
.terms li span:first-child{color:var(--on-dark-soft)}
.terms li span:last-child{font-weight:600; text-align:right}
.enrol .fine{color:var(--on-dark-soft); font-size:14.5px; margin-top:calc(var(--u)*2.5); max-width:46ch}

.form{display:grid; grid-template-columns:1fr; gap:clamp(18px,2.2vw,26px)}
.field{display:flex; flex-direction:column; gap:calc(var(--u)*1.25); min-width:0}
.field label{color:var(--grey)}
.field .opt{text-transform:none; letter-spacing:0; font-variation-settings:'wdth' 100}
.field input, .field select{
  font-family:'Archivo',sans-serif; font-size:17px; font-weight:400; color:var(--ink);
  background:var(--stock); border:0; border-radius:0;
  padding:14px 16px; min-height:54px; width:100%;
  -webkit-appearance:none; appearance:none;
  box-shadow:inset 0 -2px 0 transparent;
  transition:box-shadow .2s var(--out);
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 26px, calc(100% - 15px) 26px;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:38px;
}
.field input:focus, .field select:focus{box-shadow:inset 0 -3px 0 var(--ink); outline:none}
.field input:focus-visible, .field select:focus-visible{outline:3px solid var(--ion); outline-offset:3px}
.field.bad input, .field.bad select{box-shadow:inset 0 -3px 0 var(--ink), inset 3px 0 0 var(--ink)}
.err{font-size:14.5px; display:none; color:var(--stock)}
.err::before{content:"\2715"; margin-right:.5em; font-size:.9em}
.field.bad .err{display:block}
.form .submit{display:flex; align-items:center; gap:calc(var(--u)*2); flex-wrap:wrap; margin-top:calc(var(--u)*2)}
.form .note{color:var(--on-dark-soft); font-size:15px; max-width:40ch}
.formstate{font-size:16px; line-height:1.5; color:var(--stock)}
.formstate:empty{display:none}

/* ========================================================== STANDING BAR */
.standing{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--ink); color:var(--stock); border-top:1px solid var(--on-dark-rule);
  transform:translateY(101%); transition:transform .34s var(--out);
  padding-bottom:env(safe-area-inset-bottom);
}
.standing.on{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){ .standing{transition:none} }
.standing .inner{display:flex; align-items:center; justify-content:space-between; gap:calc(var(--u)*3); padding-block:calc(var(--u)*1.75)}
.standing dl{display:flex; gap:clamp(16px,3vw,48px); align-items:baseline; min-width:0}
.standing dt{color:var(--grey); margin-bottom:4px}
.standing dd{font-weight:600; font-size:17px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
@media (max-width:820px){ .standing .drop{display:none} }
@media (max-width:460px){ .standing dd{font-size:15px} .standing .btn{padding-inline:18px; font-size:11.5px} }

/* =================================================================== FOOTER */
footer{background:var(--ink); color:var(--stock); padding-block:calc(var(--u)*8) calc(var(--u)*7); border-top:1px solid var(--ion)}
.footgrid{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2, minmax(0,1fr)) minmax(0,1.1fr); gap:clamp(28px,3.6vw,64px); align-items:start}
@media (max-width:900px){ .footgrid{grid-template-columns:1fr 1fr; gap:calc(var(--u)*5)} }
@media (max-width:560px){ .footgrid{grid-template-columns:1fr} }
.footgrid h3{font-size:12.5px; font-weight:500; font-variation-settings:'wdth' 88; letter-spacing:.15em; text-transform:uppercase; color:var(--grey); margin-bottom:calc(var(--u)*2.5)}
.footgrid ul{list-style:none; display:grid; gap:calc(var(--u)*1.5)}
.footgrid a{color:var(--on-dark); text-decoration:none; font-size:16px}
.footgrid a:hover{color:var(--stock); text-decoration:underline; text-underline-offset:4px}
.footbrand p{color:var(--on-dark-soft); font-size:15px; margin-top:calc(var(--u)*2.5); max-width:34ch}
.social{display:flex; gap:calc(var(--u)*2); align-items:center; margin-top:calc(var(--u)*1)}
.social a{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px}
.social img{width:20px; height:20px; filter:brightness(0) invert(1); opacity:.6; transition:opacity .2s var(--out)}
.social a:hover img, .social a:focus-visible img{opacity:1}
.footrow{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center;
  margin-top:clamp(40px,5vw,72px); padding-top:calc(var(--u)*3); border-top:1px solid var(--on-dark-rule);
}
.footrow p, .footrow a{color:var(--on-dark-soft); font-size:14.5px}
.footrow nav{display:flex; gap:calc(var(--u)*3); flex-wrap:wrap}

@media (prefers-reduced-motion:no-preference){
  .js .rv{display:inline-block; overflow:hidden; vertical-align:bottom}
  .js .rv > i{display:inline-block; font-style:inherit; transform:translateY(100%); will-change:transform}
  .js .rv.on > i{transform:translateY(0); transition:transform .62s var(--expo) var(--d,0ms)}
  .js .up{opacity:0; transform:translateY(12px); transition:opacity .6s var(--out), transform .6s var(--out)}
  .js .up.on{opacity:1; transform:none}
}