/* home2.css — Home below the opening, on one dark ground (rebuilt overnight 12 to 13 Oct on Tony's words:
   "too many text", "the structure is still a lot", "things coming out of the / containers", "I want some bold text").
   13 Oct, morning: three sections came back in the new look ("You cut it a lot of other sections"; cut words, never showcase).
     2 Three projects   .stg      the stage: the mark's three signals as windows, one project at a time coming out
     3 All twelve       .h2-all   the names only
     2b The wall film   .h2-wall  the ZEISS 74-ft wall film, whole, in a straight frame; it plays                          [came back]
     4 In numbers       .h2-proof four figures, their sentences in Read more; then his years (.h2-time) and Trusted by, Venues (.h2-trust)      [4b and 4c came back]
     5 How I work       .h2-lead  the title, the three moves, his system in one line, the link; the rest in Read more   [came back]
     6 Films            .films    four films, covers whole, each plays in the site's player                             [came back]
     7 Say hello        .h2-hi    one line and his email (the page's footer)
   Type, the five styles only: Jost Light 300 (quiet part of a big title, 40 px and up), Jost Semibold 600 (the point, names, numbers,
   calls to action), Jost Medium 500 (list names), Inter Regular 400 (reading), Inter Semibold 600 (labels, the fact).
   Colour: ground #0B0C10, paper #F7F5F1, quiet 72 % paper, lines 18 % paper; the energy line's cyan and warm only in the line itself. */
body.home2{background:#0B0C10}
.h2{background:#0B0C10;color:#F7F5F1;padding:clamp(84px,10.5vw,168px) 0 0}
.h2 .wrap{position:relative}
.h2 a,.stg a{color:inherit}
.h2-k{display:flex;align-items:center;gap:12px;font:600 13px/1 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,241,.72);margin:0 0 clamp(26px,3vw,44px)}
.h2-k .mvt{font-size:17px}
.home2 :is(.stg,.h2,.end) a:focus-visible{outline:2px solid #F7F5F1;outline-offset:6px;border-radius:2px}

/* ============================================================================================================================
   2 · THREE PROJECTS: THE STAGE
   One screen, pinned for three screens of scroll (one for each project), three states (data-state on .stg; assets/brand.js writes it, and --p).
   The three signals stand together at the right as in the mark: each the mark's first signal at its own ratio (assets/signal.css),
   one every 0.36646 of their height. Slot 0, the head of the line, is ON: its window's subject comes far out to the left over open
   ground, above the project's name, the biggest thing on the screen. Next state: the subject goes back into its window, the head
   slides to the back of the line, the other two step one place left, and the new head's subject comes out.
   ONE variable sizes everything: --u, a hundredth of the screen's height, held back by the width (the frame is drawn 160 x 100 u).
   ============================================================================================================================ */
.stg{--vh:100vh;--p:3;position:relative;height:calc(var(--vh) * 4);background:#0B0C10;color:#F7F5F1;padding:0}        /* 4: one screen of scroll for each project (it was 2.2, and one ordinary flick passed Liwa and Cityscape before they had come out) */
@supports (height:100svh){.stg{--vh:100svh}}
.stg-pin{position:sticky;top:0;height:var(--vh);overflow:hidden}
.stg-bd{--cw:min(100vw,var(--max,1680px));--u:min(calc(var(--vh) / 100),calc(var(--cw) * .00625));
  --h:calc(var(--u) * 67);--w:calc(var(--h) * .49928);--pitch:calc(var(--h) * .36646);
  --gx:max(var(--g,40px),calc((100vw - var(--max,1680px)) / 2 + var(--g,40px)));--cap:calc(var(--u) * 78.8);
  --t:clamp(15px,calc(var(--u) * 1.9),19px);
  position:absolute;left:0;right:0;top:calc((var(--vh) - var(--u) * 100) / 2);height:calc(var(--u) * 100)}

/* which project is on, and where each stands in the line */
.stg[data-state="1"] [data-p="1"],.stg[data-state="2"] [data-p="2"],.stg[data-state="3"] [data-p="3"]{--on:1;--slot:0}
.stg[data-state="1"] [data-p="2"],.stg[data-state="2"] [data-p="3"],.stg[data-state="3"] [data-p="1"]{--on:0;--slot:1}
.stg[data-state="1"] [data-p="3"],.stg[data-state="2"] [data-p="1"],.stg[data-state="3"] [data-p="2"]{--on:0;--slot:2}
/* --p runs 0 to 3 over the screen's whole passage: 0 to 1 while the first project is on (it starts when the top of the screen enters,
   so the first subject is already travelling out as the stage arrives), 1 to 2 the second, 2 to 3 the third. Each project reads its own share. */
.stg .p1{--pp:clamp(0,var(--p),1)}
.stg .p2{--pp:clamp(0,var(--p) - 1,1)}
.stg .p3{--pp:clamp(0,var(--p) - 2,1)}

/* the head: the small label and the short title */
.stg-hd{position:absolute;left:var(--gx);top:calc(var(--u) * 7.4);z-index:4}
.stg-hd .h2-k{margin:0 0 calc(var(--u) * 1.5)}
.stg-hd h2{margin:0;font:300 clamp(34px,calc(var(--u) * 4.9),58px)/1 "Jost",system-ui,sans-serif;letter-spacing:-.012em}
.stg-hd h2 b{font-weight:600;letter-spacing:-.024em}

/* the energy line: once, behind the stage and the windows, never behind a word */
.stg-sweep{position:absolute;left:0;top:calc(var(--u) * 50);width:100%;height:calc(var(--u) * 22.2);overflow:hidden;z-index:1;pointer-events:none}
.stg-sweep img{position:absolute;top:0;left:calc(50% - var(--u) * 306);width:calc(var(--u) * 474);height:100%;max-width:none;opacity:.9;display:block;
  transform:translate3d(calc((3 - var(--p)) * var(--u) * -5),0,0)}        /* the line runs a little with the scroll (it stands still at --p:3, the value without script or with reduced motion) */

/* the three signals */
.stg-trio{position:absolute;right:var(--gx);top:calc(var(--u) * 6.4);width:calc(var(--pitch) * 2 + var(--w));height:var(--h);z-index:3}
.stg-w{--sgw-h:var(--h);position:absolute;left:0;top:0;z-index:calc(3 - var(--slot));transform:translate3d(calc(var(--slot) * var(--pitch)),0,0);pointer-events:none}
.stg-w .sgw-in{background:#0B0C10;pointer-events:auto;cursor:pointer}       /* only the slash itself takes the pointer; never see-through, so the energy line stays behind it */
.stg-su{will-change:transform}
/* the scene inside: drifts a little one way while its subject goes out the other way (depth) */
.stg-sc{transform:translate3d(calc((1 - var(--on,0) * var(--pp)) * var(--drift,0px)),0,0)}        /* a waiting window stands still, at its starting place */
/* the subject: .stg-3d is the named slot (see the comment in the page); it carries the change of state, the picture inside carries the scroll */
.stg-3d{position:absolute;inset:0;translate:calc((1 - var(--on,0)) * var(--back,150%)) 0}
.stg-su{transform:translate3d(calc((1 - var(--on,0) * var(--pp)) * var(--reach,0px)),0,0)}
.stg-w .sgw-out{opacity:var(--on,0)}
.stg-twin{opacity:calc(1 - var(--on,0))}

/* 1 · ZEISS Vision Care. Inside: the launch wall as built, the great eye, placed so the iris fills the upper half of the window (13 Oct: it was the
   launch-night dinner photograph, the same one that stands in the opening's first slash one screen above; the wall is also what the fact speaks of).
   Out, at the top of the window: the campaign athlete (mirrored file, see build_home_next.py). His raised shoe is whole inside the window;
   his leg crosses the near edge. While ZEISS waits he is out of sight: the hall is alive enough. */
.p1{--reach:calc(var(--h) * .1);--drift:calc(var(--h) * -.024);--back:150%}
.p1 .stg-sc{left:-60%;top:-1%;width:330%;height:auto}
.p1 .stg-su{left:-150%;top:5%;width:236%;height:auto}
/* 2 · Liwa International Festival. Inside: the dunes. Out, low at the foot of the window: the rally car of the key visual. The rear of the car is INSIDE
   the window and its dust lies over the sand (--in: how far it stands in; 13 Oct, it used to stand wholly outside, only touching the edge: the slash law
   and the kit want the subject inside and past one edge). While Liwa waits the car's nose shows inside the window (.stg-twin), where it always did. */
.p2{--cw2:min(calc(var(--w) * 2.9),900px);--in:calc(var(--w) * .6);--reach:calc(var(--h) * .09);--drift:calc(var(--h) * -.024);--back:calc(var(--cw2) * .37 - var(--in))}
.p2 .stg-sc{left:-96%;top:-2%;width:auto;height:104%}
.p2 .stg-su{left:calc(var(--w) * .2 + var(--in) - var(--cw2) * .64);top:auto;bottom:1.5%;width:var(--cw2);height:auto}
/* 3 · Cityscape Abu Dhabi. One photograph, in register: the rig stays inside, the lit spheres float out, in the middle of the window's
   height. Scene and cut-out share one box and move together; the spheres appear from the window outwards (a wipe, not a slide). */
.p3{--reach:calc(var(--h) * .04);--back:0%}
.p3 .stg-sc,.p3 .stg-su{left:-170%;top:-9%;width:400%;height:auto}
.p3 .stg-sc{transform:translate3d(calc((1 - var(--on,0) * var(--pp)) * var(--reach)),0,0)}
.p3 .stg-3d{translate:none;clip-path:inset(-60% -60% -60% calc(46% - var(--on,0) * 110%))}        /* 46 %: nothing past the window; -64 %: the whole cluster */

/* the words of the project that is on: the name lock-up. The famous word in Semibold, line-height .7 so its box is the capitals;
   the rest of the name in Light, hung from the cap line; one line and one fact standing on the baseline; the link under the fact. */
.stg-say{position:absolute;left:var(--gx);top:var(--cap);z-index:4}
.stg-s{position:absolute;left:0;top:0;display:grid;grid-template-columns:auto auto;grid-template-rows:auto 1fr auto auto auto;column-gap:calc(var(--u) * 3.3);justify-content:start;
  white-space:nowrap;text-decoration:none;color:#F7F5F1;opacity:0;visibility:hidden}
.stg[data-state="1"] .stg-s[data-p="1"],.stg[data-state="2"] .stg-s[data-p="2"],.stg[data-state="3"] .stg-s[data-p="3"]{opacity:1;visibility:visible}
.stg-s>.mvt{position:absolute;left:0;top:calc(var(--u) * -3.6);font-size:clamp(15px,calc(var(--u) * 2),20px)}
.stg-nm{display:contents;margin:0;font:inherit}
.stg-nm b{grid-area:1/1/5/2;font:600 calc(var(--u) * 17.8)/.7 "Jost",system-ui,sans-serif;letter-spacing:-.03em}
.stg-nm span{grid-area:1/2;margin-top:-.036em;font:300 max(40px,calc(var(--u) * 6))/.7 "Jost",system-ui,sans-serif;letter-spacing:-.012em}        /* -.036em: the Light capitals meet the Semibold cap line exactly (measured) */
.stg-ln{grid-area:3/2;margin:0;font:400 var(--t)/1.36 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
.stg-ft{grid-area:4/2;margin:0 0 -.24em;font:600 var(--t)/1.36 "Inter",system-ui,sans-serif}        /* -.24em: the fact's baseline is the big word's baseline (measured) */
.stg-go{grid-area:5/2;margin-top:calc(var(--u) * 2.2);font:600 var(--t)/1.3 "Jost",system-ui,sans-serif}
/* optical left edge: each capital is pulled out by its own side bearing, so Z, L and C all stand on the gutter (measured in Jost) */
.stg-s[data-p="1"] .stg-nm b{margin-left:-.011em}
.stg-s[data-p="2"] .stg-nm b{margin-left:-.076em}
.stg-s[data-p="3"] .stg-nm b{margin-left:-.036em}
.stg-s[data-p="2"] .stg-nm span{margin-left:-.082em}
.stg-nm b,.stg-nm span,.stg-ln,.stg-ft,.stg-go,.stg-nx,.stg-all{white-space:nowrap}        /* said on each piece, so a later text-wrap rule (assets/type.css) cannot fold the lock-up */
.stg-go i,.stg-all i{font-style:normal;display:inline-block;margin-left:.2em;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.stg-s:hover .stg-go i,.stg-all:hover i{transform:translateX(5px)}

/* the line of those who wait: names only, and the way to all twelve */
.stg-q{position:absolute;left:calc(100% - var(--gx) - var(--w));top:calc(var(--cap) - var(--u) * .22 - 2px);z-index:4;white-space:nowrap}        /* its label's capitals on the name's cap line; its left edge is the foot of the last window */
.stg-q .h2-k{margin:0 0 calc(var(--u) * 1.7)}
.stg-q ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u) * .8)}
.stg-q li{order:var(--slot);font-family:inherit}
.stg[data-state="1"] .stg-q li[data-p="1"],.stg[data-state="2"] .stg-q li[data-p="2"],.stg[data-state="3"] .stg-q li[data-p="3"]{display:none}
.stg-nx{display:inline-flex;align-items:center;gap:12px;font:500 clamp(16px,calc(var(--u) * 2),21px)/1.3 "Jost",system-ui,sans-serif;color:rgba(247,245,241,.72);text-decoration:none;cursor:pointer;transition:color .25s}
.stg-nx .mvt{font-size:.82em;flex:none;color:#F7F5F1}
.stg-nx:hover{color:#F7F5F1}
.stg-all{position:absolute;left:0;top:calc(var(--u) * 14.88 + 2px);font:600 var(--t)/1.3 "Jost",system-ui,sans-serif;text-decoration:none;color:#F7F5F1}

/* ---------- movement. Only after the first change of state (.stg-live), and never under reduced motion. ----------
   0 s the subject goes back into its own window · .05 s the line steps · .2 s the next subject comes out · .12 s the name arrives.
   (13 Oct: the waits were .2, .62 and .5 s; a change needed 1.2 to 1.5 s and a steady scroll gave it 0.5 s.)
   The picture inside each slot follows --p with a short ease, so the scroll reads as weight, not as a jump. */
@media (prefers-reduced-motion:no-preference){
  .stg-sc,.stg-su,.stg-sweep img{transition:transform .28s cubic-bezier(.2,.7,.3,1)}
  .stg-w .sgw-in .stg-sc{transition:transform .28s cubic-bezier(.2,.7,.3,1),scale .9s cubic-bezier(.2,.8,.2,1)}
  .stg-live .stg-w{transition:transform .5s cubic-bezier(.3,.76,.2,1) .05s}
  .stg-live .stg-3d{transition:translate calc(.34s + var(--on,0) * .56s) cubic-bezier(.3,.1,.3,1) calc(var(--on,0) * .2s),clip-path calc(.34s + var(--on,0) * .7s) cubic-bezier(.3,.1,.3,1) calc(var(--on,0) * .2s)}
  .stg[data-state="1"] .p1 .stg-3d,.stg[data-state="2"] .p2 .stg-3d,.stg[data-state="3"] .p3 .stg-3d{transition-timing-function:cubic-bezier(.16,.84,.24,1)}
  .stg-live .stg-w .sgw-out,.stg-live .stg-twin{transition:opacity 0s linear calc(.34s - var(--on,0) * .14s)}
  .stg-live .stg-s{transition:opacity .2s ease-in,transform .2s ease-in,visibility 0s .2s;transform:translate3d(7px,-24px,0)}
  .stg-live[data-state="1"] .stg-s[data-p="1"],.stg-live[data-state="2"] .stg-s[data-p="2"],.stg-live[data-state="3"] .stg-s[data-p="3"]{transform:none;transition:none;animation:stg-in .45s cubic-bezier(.16,.84,.24,1) .12s backwards}
  .stg-live[data-state="1"] .stg-q ol{animation:stg-q1 .9s ease-out}        /* the names under "Next" change with the state: three names for one fade, so it plays again each time */
  .stg-live[data-state="2"] .stg-q ol{animation:stg-q2 .9s ease-out}
  .stg-live[data-state="3"] .stg-q ol{animation:stg-q3 .9s ease-out}
  @media (hover:hover){.stg-w .sgw-in:hover .stg-sc{scale:1.03}}
}
@keyframes stg-in{from{opacity:0;transform:translate3d(-7px,24px,0)}}
@keyframes stg-q1{0%,40%{opacity:0}}@keyframes stg-q2{0%,40%{opacity:0}}@keyframes stg-q3{0%,40%{opacity:0}}

/* ---------- phones and upright tablets: the same stage, stacked. The trio stays at the right with open ground at its left;
   the name is set in the screen's width (the famous word about a fifth of it); the reading text is 17 px from 400 px wide and never
   under 15 px, so the line and the fact each keep to one line. ---------- */
@media (max-width:760px),(max-aspect-ratio:11/10){
  .stg-bd{--u:min(calc(var(--vh) / 100),2.164vw);--gx:var(--g,16px);--h:min(calc(var(--vh) * .255),calc((100vw - 2 * var(--gx)) * .6));--t:clamp(15px,4.26vw,17px);
    top:0;height:100%;display:flex;flex-direction:column;padding:calc(var(--u) * 7.6) var(--gx) calc(var(--u) * 3.4)}
  .stg-hd,.stg-trio,.stg-say,.stg-q{position:relative;left:auto;right:auto;top:auto}
  .stg-hd .h2-k{margin-bottom:calc(var(--u) * 1.4)}
  .stg-hd h2{font-size:clamp(34px,calc(var(--u) * 4.74),48px)}
  .stg-trio{align-self:flex-end;flex:none;margin-top:auto}        /* the room a tall screen leaves is shared out above the trio, the name and "Next": no single empty band */
  .stg-hd{padding-bottom:calc(var(--u) * 2.2)}
  .stg-sweep{top:calc(var(--u) * 28.4);height:calc(var(--u) * 10.4)}
  .stg-sweep img{left:-152%;width:296.3%}
  .p1 .stg-su{left:-87%;top:5%;width:180%}
  .p2{--cw2:calc(var(--w) * 2.3);--in:calc(var(--w) * .46);--back:calc(var(--cw2) * .4 - var(--in))}
  .p2 .stg-su{left:calc(var(--w) * .34 + var(--in) - var(--cw2) * .64);bottom:3%}
  .p3 .stg-sc,.p3 .stg-su{left:-150%;top:-6%;width:370%}
  .stg-say{display:grid;margin-top:auto;padding-top:calc(var(--u) * 4.6)}
  .stg-s{position:relative;grid-area:1/1;display:block;white-space:normal}
  .stg-nm span,.stg-ln,.stg-ft{white-space:normal}
  .stg-s>.mvt{position:static;display:flex;font-size:17px;margin-bottom:calc(var(--u) * 1.7)}
  .stg-nm{display:block}
  .stg-nm b{display:block;font-size:min(21.2vw,calc(var(--vh) * .112));line-height:.7}
  .stg-nm span{display:block;margin-top:calc(min(21.2vw,calc(var(--vh) * .112)) * .27);font-size:min(10.9vw,calc(var(--vh) * .058));line-height:.86}       /* room for the y and the p of Cityscape */
  .stg-ln{margin-top:calc(var(--u) * 1.9)}
  .stg-ft{margin:1px 0 0}
  .stg-go{display:inline-block;margin-top:calc(var(--u) * 1.6);font-size:17px}
  .stg-q{margin-top:auto;padding-top:calc(var(--u) * 2.6);white-space:normal}
  .stg-q .h2-k{margin-bottom:calc(var(--u) * 1.3)}
  .stg-q ol{gap:0}
  .stg-nx{font-size:17px;min-height:44px}        /* 44 px for a finger (they were 30 and 24) */
  .stg-all{position:absolute;left:auto;right:0;top:calc(var(--u) * 2.6 - 16px);font-size:15px;line-height:44px}
}
/* an upright tablet: the same stack with a bigger trio */
@media (min-width:600px) and (max-aspect-ratio:11/10){
  .stg-bd{--h:min(calc(var(--vh) * .29),60vw);--t:clamp(17px,calc(var(--u) * 1.9),20px)}
  .stg-nx,.stg-go{font-size:var(--t)}
  .stg-all{font-size:var(--t)}
}
/* a short phone (under about 700 px tall): the label gives its room to the pictures */
@media (max-width:760px) and (max-height:700px){
  .stg-hd .h2-k{display:none}
}
/* a screen too low to hold the frame (a phone on its side): no pinning; the frame takes the room it needs and the three change by tap */
@media (min-width:761px) and (max-height:520px){
  .stg{--vh:560px;height:auto}
  .stg-pin{position:relative}
}
html.no-js:not(.js) .stg{height:auto}        /* .js is set in the head before the first paint (build_home_next.py), so the stage has its pinned height from the start */
html.no-js:not(.js) .stg-pin{position:relative}

/* ============================================================================================================================
   2b · THE ZEISS 74-FT WALL FILM (came back 13 Oct, the second fixing pass). Straight after the stage: the film WHOLE in a straight frame
   at its own ratio (2816 x 648, the wall's), as wide as the page allows; on a phone from edge to edge. It runs silently in the frame while
   it is on screen (assets/site.js, video[data-clip]); the whole frame is the button that opens it large. Above it, a drawn measure
   that says the caption's one fact, 74 ft. No box, no glow, nothing over the picture.
   ============================================================================================================================ */
.home2 .h2-wall{padding-top:clamp(56px,6.4vw,104px)}
.wl{display:block;width:100%;margin:0;padding:0;border:0;border-radius:0;background:none;color:#F7F5F1;font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.wl-dim{display:flex;align-items:center;gap:16px;margin:0 0 14px;font:600 12px/1 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,241,.72);white-space:nowrap}
.wl-dim::before,.wl-dim::after{content:"";flex:none;width:1px;height:13px;background:rgba(247,245,241,.6)}
.wl-dim i{flex:1;height:1px;background:rgba(247,245,241,.3)}
.wl-dim::before{margin-right:-16px}.wl-dim::after{margin-left:-16px}
.wl-dim b{font:inherit;letter-spacing:inherit}
.wl-pic{display:block;aspect-ratio:var(--ar,2816/648);background:#0B0C10}
.wl-pic video{display:block;width:100%;height:100%;object-fit:contain}
.wl-cap{display:flex;align-items:center;gap:16px;padding-top:clamp(14px,1.4vw,20px)}
.wl-cap>span{display:block;min-width:0}
.wl-cap b{display:block;font:600 clamp(20px,1.75vw,27px)/1.14 "Jost",system-ui,sans-serif;letter-spacing:-.018em}
.wl-cap span span{display:block;margin-top:6px;font:400 15px/1.4 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
.wl-pl{flex:none;width:48px;height:48px;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wl:hover .wl-pl,.wl:focus-visible .wl-pl{transform:scale(1.1)}
.home2 .wl:focus-visible{outline:2px solid #F7F5F1;outline-offset:6px}
.wl-nojs{margin:10px 0 0;font:600 17px/1.3 "Jost",system-ui,sans-serif}
@media (prefers-reduced-motion:reduce){.wl-pl{transition:none}}
@media (max-width:760px){
  .wl-dim{display:none}                                                   /* the film runs from edge to edge: the measure would be shorter than the wall */
  .wl-pic{width:100vw;margin-left:calc(50% - 50vw)}
  .wl-cap{gap:14px}
  .wl-pl{width:44px;height:44px}
  .wl-cap span span{font-size:14px;text-wrap:balance}
}

/* ============================================================================================================================
   3 · ALL TWELVE: the names only, one row that wraps. Each is a link to its project; the mark's signal stands between them.
   ============================================================================================================================ */
.all12{--s:.9em;list-style:none;margin:0 0 0 calc(var(--s) * -1);padding:0;font:600 clamp(26px,3.6vw,60px)/1.2 "Jost",system-ui,sans-serif;letter-spacing:-.024em;
  clip-path:inset(-.5em -2em -.5em calc(var(--s) - 5px))}        /* each name carries the signal in a slot at its LEFT; the slot of the first name on a line falls in the clipped margin, so no line starts or ends with a hanging slash (13 Oct) */
.all12 li{position:relative;display:inline-block;box-sizing:border-box;max-width:100%;padding-left:var(--s);font-family:inherit}        /* a name goes to the next line whole; site.css sets every li in Inter */
.all12 li::before{content:"";position:absolute;left:.3em;top:.36em;width:.26em;height:.52em;background:rgba(247,245,241,.3);-webkit-mask:var(--sig) center/contain no-repeat;mask:var(--sig) center/contain no-repeat}
.all12 a{color:#F7F5F1;text-decoration:none;transition:color .3s}
@media (min-width:761px){.all12 a{white-space:nowrap}}
.home2 .all12 a:focus-visible{outline-offset:2px}        /* the ring stays inside the 5 px of margin the clip leaves */
@media (max-width:760px){.all12{font-size:6vw;line-height:1.32}}        /* 6vw: "National Bullying Prevention Week" keeps to one line (at 7.2vw it left "Week" alone) */
@media (hover:hover){.all12:hover a{color:rgba(247,245,241,.38)}.all12 a:hover{color:#F7F5F1}}
@media (prefers-reduced-motion:reduce){.all12 a{transition:none}}

/* ============================================================================================================================
   4 · IN NUMBERS: four figures, each with a label of a few words. No paragraphs.
   ============================================================================================================================ */
.h2-nums{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:clamp(36px,4vw,64px) clamp(24px,3vw,56px)}
.h2-num b{display:flex;align-items:flex-end;position:relative;font:600 clamp(60px,7.6vw,132px)/.74 "Jost",system-ui,sans-serif;letter-spacing:-.035em;font-variant-numeric:lining-nums}
.h2-num b .un{width:min-content;margin:0 0 .04em .34em;font:500 clamp(15px,.2em,24px)/1.08 "Jost",system-ui,sans-serif;letter-spacing:0;color:#F7F5F1}
.h2-num b .pre{position:absolute;left:.06em;bottom:calc(100% + .16em);font:600 13px/1 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,241,.72)}
.h2-num .cp{margin:clamp(16px,1.6vw,24px) 0 0;font:400 17px/1.4 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
/* 4 (the second fixing pass, 13 Oct): the sentence under each figure and what he did, behind ONE closed Read more under the four figures. Opened, it is
   four short columns in the order of the figures, each headed by its figure; what he did is the Semibold line. */
.h2-nrm{margin-top:clamp(8px,1vw,14px)}
.home2 .h2-nrm .rm-b{max-width:none;padding:10px 0 4px}
.h2-nmore{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px clamp(24px,3vw,56px)}
.h2-nmore>div{border-top:1px solid rgba(247,245,241,.18);padding-top:14px}
.h2-nmore dt{margin:0 0 10px;font:600 12px/1.4 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,241,.72)}
.h2-nmore dd{margin:0;max-width:34ch;font:400 16px/1.56 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.86)}
.h2-nmore dd.rl{margin-top:8px;font-weight:600;color:#F7F5F1}
@media (max-width:900px){.h2-nrm{margin-top:22px}.h2-nmore{grid-template-columns:1fr;gap:0}.h2-nmore>div{padding:14px 0 16px}.h2-nmore dd{max-width:none}}
@media (max-width:900px){
  .h2-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:44px 20px}
  .h2-num b{display:block;font-size:clamp(46px,13.4vw,96px);line-height:.8}        /* 13.4vw: "$10M+" keeps inside its column on a phone */
  .h2-num b .un{width:auto;margin:0 0 0 .22em;font-size:18px}
  .h2-num b .un-w{display:block;margin:12px 0 0;font-size:17px}
  .h2-num .cp{margin-top:4px;font-size:16px}
  .h2-num b .pre{font-size:12px}
}

/* ============================================================================================================================
   4b · HIS YEARS (came back 13 Oct): one line from Cairo to Tampa. The mark's signal stands on the line at each stop.
   The name is the point (Jost Semibold); the year is quiet above it and the role quiet under it (Inter Regular). No paragraphs.
   4c · TRUSTED BY and VENUES: the label as small capitals in the first column of the years, the names in Semibold from the second.
   ============================================================================================================================ */
.h2-proof{--yg:clamp(16px,2.2vw,36px)}
.h2-yrs{margin-top:clamp(40px,4.6vw,72px)}        /* 13 Oct, the second fixing pass: the section stood 910 px tall on a 900 px screen, so Venues sat on the fold under the guide. The inner gaps are
                                                     tighter (the years 130 to 66 px under the Read more line, Trusted by 107 to 66, Venues 34 to 26) and the section starts 39 px higher: at 1440 x 900 Venues ends clear above the guide. */
@media (min-width:901px){.h2.h2-proof{padding-top:clamp(72px,7.8vw,124px)}}
.h2-time{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 var(--yg);border-top:1px solid rgba(247,245,241,.18)}
.h2-time li{position:relative;padding-top:clamp(26px,2.5vw,38px);font-family:inherit}
.h2-time li::before{content:"";position:absolute;left:0;top:-14px;width:14px;height:28px;background:#F7F5F1;-webkit-mask:var(--sig) center/contain no-repeat;mask:var(--sig) center/contain no-repeat}
.h2-time b{display:block;font:400 15px/1 "Inter",system-ui,sans-serif;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em;color:rgba(247,245,241,.72)}
.h2-time span{display:block;margin-top:12px;font:600 clamp(19px,2.02vw,33px)/1.06 "Jost",system-ui,sans-serif;letter-spacing:-.022em;white-space:nowrap}        /* 2.02vw: "Mission Control X" keeps to one line in its fifth of the row */
.h2-time i{display:block;max-width:23ch;margin-top:9px;font:400 15px/1.42 "Inter",system-ui,sans-serif;font-style:normal;color:rgba(247,245,241,.72)}
.h2-trust{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px var(--yg);align-items:baseline;margin-top:clamp(44px,4.6vw,72px)}
.h2-trust.h2-venue{margin-top:clamp(16px,1.8vw,28px)}
.h2-trust .h2-k{grid-column:1;margin:0}
.h2-trust .tl{grid-column:2/-1;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.34em 1.5em;font:600 clamp(20px,1.95vw,30px)/1.2 "Jost",system-ui,sans-serif;letter-spacing:-.016em}
.h2-trust .tl li{font-family:inherit;max-width:100%}        /* site.css sets every li in Inter */
@media (max-width:900px){
  /* a phone: the line of years runs down the page; each stop is the year, then the name with its role under it */
  .h2-time{display:block;border-top:0}
  .h2-time li{display:grid;grid-template-columns:3.6em minmax(0,1fr);align-items:baseline;padding:20px 0 22px;border-top:1px solid rgba(247,245,241,.18)}
  .h2-time li::before{top:-11px;width:11px;height:22px}
  .h2-time b{grid-area:1/1/3/2}
  .h2-time span{grid-area:1/2;margin:0;font-size:24px}
  .h2-time i{grid-area:2/2;max-width:none;margin-top:6px}
  .h2-trust{display:block;margin-top:56px}
  .h2-trust.h2-venue{margin-top:36px}
  .h2-trust .h2-k{margin-bottom:16px}
  .h2-trust .tl{display:block;font-size:21px;line-height:1.22}
  .h2-trust .tl li{padding:5px 0}
}

/* ============================================================================================================================
   5 · HOW I WORK (came back 13 Oct): the idea, and the three moves as three strong lines, each counted in the mark's signals
   (one lit, two lit, three lit). His system is one line of four names; the link leads on. The paragraphs are behind Read more.
   ============================================================================================================================ */
.h2-lead .hw{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);gap:clamp(40px,4.8vw,80px) clamp(32px,5vw,96px);align-items:end}
.h2-lead h2{grid-area:1/1;margin:0 0 -.08em -.04em;font:300 clamp(52px,7.3vw,124px)/.98 "Jost",system-ui,sans-serif;letter-spacing:-.02em}
.h2-lead h2 b{display:block;font-weight:600;letter-spacing:-.035em;white-space:nowrap}
.hw-moves{grid-area:1/2;list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,1.9vw,30px)}
.hw-moves li{display:flex;align-items:center;gap:.52em;font:600 clamp(25px,3vw,50px)/1.04 "Jost",system-ui,sans-serif;letter-spacing:-.026em}
.hw-moves li b{font:inherit;letter-spacing:inherit;white-space:nowrap}
.hw-moves .mvt{flex:none;font-size:.8em}
.hw-more{grid-area:2/1;align-self:start}
.hw-on{grid-area:2/2;align-self:start;padding-top:8px}
.hw-sys{margin:0}
.hw-sys .h2-k{margin:0 0 14px}
.hw-sys b{display:block;font:600 clamp(20px,1.95vw,30px)/1.2 "Jost",system-ui,sans-serif;letter-spacing:-.016em;white-space:nowrap}
.hw-sys b i{font-style:normal;color:rgba(247,245,241,.38)}
.hw-go{display:inline-block;margin-top:clamp(20px,2.2vw,34px);padding:11px 0;font:600 clamp(17px,1.3vw,19px)/1.3 "Jost",system-ui,sans-serif;color:#F7F5F1;text-decoration:none;white-space:nowrap}
.hw-go i{font-style:normal;display:inline-block;margin-left:.2em;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hw-go:hover i{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){.hw-go i{transition:none}}
@media (max-width:900px){
  .h2-lead .hw{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .h2-lead h2{margin:0 0 0 -.03em;font-size:clamp(46px,13.4vw,96px)}
  .hw-moves{margin-top:clamp(40px,10vw,64px);gap:16px}
  .hw-moves li{font-size:clamp(23px,6.5vw,44px)}
  .hw-on{order:3;padding-top:clamp(40px,10vw,64px)}
  .hw-sys b{font-size:clamp(19px,5.4vw,28px)}
  .hw-more{order:4;margin-top:10px}
}

/* Read more: the closed line the inner pages use (assets/shell2.css; the same markup and the same values, copied because Home does not load that sheet).
   A quiet line with the mark's single signal as its sign. Closed by default; never a box. */
.sg1{display:inline-block;flex:none;height:1em;aspect-ratio:25.68/51.46;background:currentColor;-webkit-mask:var(--sig) center/contain no-repeat;mask:var(--sig) center/contain no-repeat}
.home2 .rm>summary{list-style:none;cursor:pointer}
.home2 .rm>summary::-webkit-details-marker{display:none}
.home2 .rm>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 12px/1 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,241,.72);white-space:nowrap}
.home2 .rm>summary .sg1{font-size:15px;color:#F7F5F1}
.home2 .rm>summary::after{content:"";width:clamp(28px,3.4vw,52px);height:1px;background:currentColor;opacity:.5;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.home2 .rm>summary:hover{color:#F7F5F1}
.home2 .rm>summary:hover::after,.home2 .rm[open]>summary::after{width:clamp(48px,6vw,96px)}
.home2 .rm-c,.home2 .rm[open]>summary .rm-o{display:none}
.home2 .rm[open]>summary .rm-c{display:inline}
.home2 .rm>summary:focus-visible{outline:2px solid #F7F5F1;outline-offset:4px}
.home2 .rm-b{padding:6px 0 12px;max-width:62ch}
.home2 .rm-b p{margin:0 0 14px;font:400 clamp(16px,1.15vw,17.5px)/1.62 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.86)}
@media (prefers-reduced-motion:reduce){.home2 .rm>summary::after{transition:none}}

/* ============================================================================================================================
   6 · THE FILMS (came back 13 Oct): four films, each plays in the site's film player (assets/films.js reads data-film).
   Every cover is WHOLE, at its own ratio: the frame of a film (--ar, written on the button) is the ratio of its cover, and the two
   films of a row share one height, so each is as wide as its own picture (--n). Nothing here is fitted with object-fit:cover.
   The covers are stills (see build_home_next.py for why the muted previews of 12 October did not come back with them).
   ============================================================================================================================ */
.home2 .films{padding:clamp(84px,10.5vw,168px) 0 0;background:#0B0C10;color:#F7F5F1}
.home2 .films .fh{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 48px;margin:0 0 clamp(30px,3.4vw,54px)}
.home2 .films .fh .h2-k{margin-bottom:clamp(16px,1.7vw,26px)}
.home2 .films h2{margin:0;font:300 clamp(34px,4.45vw,64px)/1 "Jost",system-ui,sans-serif;letter-spacing:-.012em}
.home2 .films h2::before{content:none}        /* the three signals stand in the label above, once */
.home2 .films h2 b{font-weight:600;letter-spacing:-.024em}
@media (max-width:899px){body.home2 .films h2{font-weight:400!important}}        /* under 40 px the quiet part of a title is Regular, never Light (assets/type.css, part 1); 4.45vw crosses 40 px at 899 px */
.home2 .films .fh>p{max-width:31ch;margin:0 0 .2em;text-align:right;font:400 17px/1.42 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
.home2 .films .fgrid{display:flex;flex-wrap:wrap;gap:clamp(36px,3.6vw,58px) clamp(16px,2vw,28px)}
.home2 .films .film{flex:var(--n,1.778) 1 calc(var(--n,1.778) * 18%);min-width:0;padding:0;border:0;border-radius:0;background:none;overflow:visible;color:#F7F5F1;text-align:left;cursor:pointer}        /* 18 % a unit of ratio: two films to a row, each as wide as its own picture */
.home2 .films .fpic{display:block;aspect-ratio:var(--ar,16/9);background:#0B0C10}
.home2 .films .fpic img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:none}
.home2 .films .film .fcap{position:static;display:flex;align-items:center;gap:16px;padding:clamp(14px,1.4vw,20px) 0 0;background:none}
.home2 .films .film .fcap>span:not(.pl){display:block;min-width:0;margin:0;font-size:inherit;color:inherit}
.home2 .films .film b{display:block;font:600 clamp(20px,1.75vw,27px)/1.14 "Jost",system-ui,sans-serif;letter-spacing:-.018em}
.home2 .films .film .fcap span span{display:block;margin-top:6px;font:400 15px/1.4 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
.home2 .films .film .pl{width:48px;height:48px;background:#F7F5F1;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.home2 .films .film:hover .pl,.home2 .films .film:focus-visible .pl{background:#F7F5F1;transform:scale(1.1)}        /* paper only: the line's cyan stays in the line */
.home2 .films .film:focus-visible{outline:2px solid #F7F5F1;outline-offset:6px}
@media (prefers-reduced-motion:reduce){.home2 .films .film .pl{transition:none}}
@media (max-width:760px){
  .home2 .films .fh{display:block}
  .home2 .films .fh>p{max-width:none;margin:16px 0 0;text-align:left;font-size:16px}
  .home2 .films .fgrid{gap:36px 0}
  .home2 .films .film{flex:0 0 100%}
  .home2 .films .film .fcap{gap:14px}
  .home2 .films .film .pl{width:44px;height:44px}
  .home2 .films .film .fcap span span{font-size:14px;text-wrap:balance}        /* 14 px: "Dubai · 2022 · 2:34 · with Mission Control X" keeps to one line at 390 px; a longer line breaks in two even halves */
}

/* ============================================================================================================================
   7 · SAY HELLO: one line and his email, big; the other ways to reach him, small. Then the sign-off.
   ============================================================================================================================ */
.home2 .end.h2-hi{background:#0B0C10;color:#F7F5F1;padding:clamp(96px,12vw,190px) 0 44px}
.home2 .end.h2-hi h2{max-width:none;margin:0 0 clamp(26px,3.2vw,52px);font:300 clamp(40px,4.45vw,64px)/1.05 "Jost",system-ui,sans-serif;letter-spacing:-.012em}
.home2 .end.h2-hi h2 b{font-weight:600;letter-spacing:-.024em}
.hi-mail{display:inline-block;margin-left:-.026em;font:600 min(9.6vw,148px)/1 "Jost",system-ui,sans-serif;letter-spacing:-.04em;white-space:nowrap;color:#F7F5F1;text-decoration:none}
.home2 .end.h2-hi .eline{margin:clamp(8px,1.2vw,18px) 0 clamp(16px,2vw,30px)}
.home2 .end.h2-hi .eline path:first-child{stroke:#FF8A5C}        /* the warm strand in the brand's own warm, as in the stage's line (site.js draws it a shade redder) */
.hi-links{display:flex;flex-wrap:wrap;gap:0 30px;margin:0;font:500 17px/1.4 "Jost",system-ui,sans-serif}
.hi-links a{--ul:rgba(247,245,241,.18);color:#F7F5F1;text-decoration:none;padding:11px 0;background:linear-gradient(var(--ul),var(--ul)) 0 calc(100% - 7px)/100% 1px no-repeat}        /* 46 px tall for a finger; the line stays 3 px under the words */
.hi-links a:hover{--ul:#F7F5F1}
.home2 .end .row nav a{padding:10px 0}
/* a phone: "For the idea." / "And everything after.", one phrase to a line. At 40 px the bold phrase is wider than the column, so the title is set at
   8.9vw (the quiet part is then Regular, by the rule for a title under 40 px: assets/type.css, part 1) */
@media (max-width:760px){.home2 .end.h2-hi h2{font-size:8.9vw;line-height:1.1}.home2 .end.h2-hi h2 b{display:block}}
@media (max-width:760px){.hi-mail{padding:5px 0;margin-top:-5px;margin-bottom:-5px}}        /* 44 px for a finger; nothing moves */
.home2 .end .row{margin-top:clamp(72px,9vw,140px);border-top-color:rgba(247,245,241,.18);color:rgba(247,245,241,.72)}
.home2 .end .row>span{display:inline-flex;align-items:center;gap:10px}
.home2 .end .mk{color:#F7F5F1;flex:none}                                 /* his mark is black or white only */
/* 14 Oct, evening: six headline numbers (three a row on a wide screen) */
.h2-nums:has(.h2-num:nth-child(6)) .h2-num{flex:1 1 28%}
.h2-nums:has(.h2-num:nth-child(6)) .h2-num b{font-size:clamp(54px,6vw,108px)}