@font-face{font-family:"Plus Jakarta Sans";src:url("fonts/jakarta.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
/* =====================================================================
   DESIGN SYSTEM · "Studio seamless"
   Two tones like a photo studio: seamless paper + ink.
   Colour on the page comes from the photographs and the work itself.
   Type: Plus Jakarta Sans (display + UI) / Newsreader (anything you read as a story)
   ===================================================================== */
:root{
  --seamless:#E6E5E0;   /* page, like studio backdrop paper */
  --print:#F2F1ED;      /* raised surface: mats behind prints */
  --ink:#151514;        /* text, buttons, inverted sections */
  --ink-soft:#2A2A27;   /* long-form reading text */
  --graphite:#4E4D48;   /* secondary text */
  --stone:#62615B;      /* labels and metadata */
  --rule:rgba(21,21,20,.14);
  --rule-2:rgba(21,21,20,.30);
  --on-ink:#E6E5E0; --on-ink-2:#A3A29B; --rule-ink:rgba(230,229,224,.18);
  --stage:#151514;      /* dark "screening room" sections */
  --bg-rgb:230,229,224; /* page colour, for fades */
  --hl:rgba(21,21,20,.1); --track:rgba(21,21,20,.13); --btn-hover:#393935;
  --col-gap:clamp(20px,2.6vw,40px);
  --err:#A4262C;
  color-scheme:light;

  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;

  --maxw:1320px;
  --gutter:clamp(20px,4.4vw,64px);
  --pad:max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  --r:4px;
  --sec:clamp(96px,11vw,168px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
/* dark theme: chosen with the toggle, or the visitor's system setting */
:root[data-theme="dark"]{
  --seamless:#141413; --print:#1E1E1C; --ink:#E6E5E0; --ink-soft:#CFCEC8; --graphite:#AEADA6; --stone:#8E8D86;
  --rule:rgba(230,229,224,.14); --rule-2:rgba(230,229,224,.28); --rule-ink:rgba(230,229,224,.14);
  --stage:#0B0B0A; --bg-rgb:20,20,19; --hl:rgba(230,229,224,.16); --track:rgba(230,229,224,.16); --btn-hover:#FFFFFF; --err:#F2A9A4;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --seamless:#141413; --print:#1E1E1C; --ink:#E6E5E0; --ink-soft:#CFCEC8; --graphite:#AEADA6; --stone:#8E8D86;
  --rule:rgba(230,229,224,.14); --rule-2:rgba(230,229,224,.28); --rule-ink:rgba(230,229,224,.14);
  --stage:#0B0B0A; --bg-rgb:20,20,19; --hl:rgba(230,229,224,.16); --track:rgba(230,229,224,.16); --btn-hover:#FFFFFF; --err:#F2A9A4;
  color-scheme:dark;
}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--seamless);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;word-spacing:.03em}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--ink);color:var(--seamless)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec);scroll-margin-top:56px}
.ink{background:var(--stage);color:var(--on-ink);border-block:1px solid var(--rule-ink)}

/* ---------- type ---------- */
.h2{font-weight:700;font-size:clamp(2.5rem,5.8vw,5.25rem);line-height:.96;letter-spacing:-.048em;word-spacing:.1em}
.h3{font-weight:700;font-size:clamp(2.1rem,4.8vw,4.4rem);line-height:1;letter-spacing:-.045em;word-spacing:.1em}
.h4{font-weight:700;font-size:1.0625rem;letter-spacing:-.01em;margin-bottom:14px}
.lead{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.5;color:var(--graphite);max-width:40ch}
.ink .lead{color:var(--on-ink-2)}
.label{font-size:.8125rem;font-weight:600;color:var(--stone)}
.read{font-family:var(--serif);font-optical-sizing:auto;font-size:clamp(1.125rem,1.3vw,1.25rem);line-height:1.58;color:var(--ink-soft)}
.read p+p{margin-top:.9em}
.read b{font-weight:500;color:var(--ink);background:linear-gradient(transparent 62%,var(--hl) 62%)}
.num{font-variant-numeric:tabular-nums lining-nums}
/* headings break into even lines instead of leaving one word alone on the last line; paragraphs avoid a lone last word */
.h2,.h3,.case-title,.ix-title,.film-title,.contact-h,.cpage-h,.hero-lede,.statement,.disc h3,.cert-t{text-wrap:balance}
.read p,.lead,.res-lbl,.film-desc,.disc p,.step p,.hero-sub{text-wrap:pretty}
.g12,.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.sec-head{row-gap:20px;align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.sec-head>:first-child,.c-a{grid-column:1 / 7}
.sec-head .lead,.c-b{grid-column:7 / -1}

/* ---------- links & buttons ---------- */
.link{display:inline-flex;align-items:center;gap:.35em;font-weight:600;padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .35s var(--ease)}
.link:hover{background-size:100% 2px}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.9375rem;line-height:1;padding:16px 22px;border-radius:var(--r);background:var(--ink);color:var(--seamless);white-space:nowrap;transition:background-color .3s var(--ease)}
.btn:hover{background:var(--btn-hover)}
.ink .btn{background:var(--on-ink);color:var(--stage)}
.ink .btn:hover{background:#FFF}
.arw,.ico{display:inline-block;width:.95em;height:.95em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;vertical-align:-.1em}
.arw{transition:transform .35s var(--ease)}
.btn:hover .arw,.link:hover .arw{transform:translate(2px,-2px)}
.link:hover .arw--down{transform:translateY(3px)}
.link:hover .arw--up{transform:translateY(-3px)}
.btn:hover .arw--r,.link:hover .arw--r{transform:translateX(3px)}
.btn:hover .arw--l,.link:hover .arw--l{transform:translateX(-3px)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;transition:background-color .35s,border-color .35s}
.nav.scrolled{background:rgba(var(--bg-rgb),.95);border-color:var(--rule)}
.nav-in{max-width:var(--maxw);margin-inline:auto;padding:16px var(--gutter);display:flex;align-items:center;gap:32px}
.nav-id{position:relative;flex:1 1 0;min-width:0;height:28px}
.nav-id>*{position:absolute;left:0;top:50%;white-space:nowrap;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.brand{font-weight:800;font-size:1.3rem;letter-spacing:-.045em;opacity:0;transform:translateY(-10%);pointer-events:none}
.nav-id .brand{padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;transition:opacity .4s var(--ease),transform .4s var(--ease),background-size .45s var(--ease-out)}
@media (hover:hover){.nav-id .brand:hover{background-position:0 100%;background-size:100% 1px}}
.nav-id .brand:focus-visible{background-position:0 100%;background-size:100% 1px}
.dateline{font-size:.875rem;font-weight:500;color:var(--graphite);transform:translateY(-50%)}
.nav.scrolled .brand,.nav.menu-open .brand{opacity:1;transform:translateY(-50%);pointer-events:auto}
.nav.scrolled .dateline,.nav.menu-open .dateline{opacity:0;transform:translateY(-90%);pointer-events:none}
.nav-links{display:flex;gap:30px;font-size:.9375rem;font-weight:500}
.nav-links a{color:var(--graphite);padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;transition:color .2s,background-size .45s var(--ease-out)}
.nav-links a:hover{color:var(--ink)}
/* header links: an underline draws in from the left under the link you point at and slides out to the
   right when you leave, the same 1px line the Resume link carries, so the whole header moves alike */
@media (hover:hover){.nav-links a:hover{background-position:0 100%;background-size:100% 1px}}
.nav-links a:focus-visible{background-position:0 100%;background-size:100% 1px}
.nav-cta{flex:1 1 0;display:flex;justify-content:flex-end;align-items:center;gap:24px}
.nav-cta .btn{padding:12px 16px;font-size:.875rem}
.nav-cta .link{font-size:.9375rem}
.theme-btn{display:grid;place-items:center;width:40px;height:40px;margin:-4px 0;border-radius:50%;transition:background-color .25s}
.theme-btn:hover{background:var(--hl)}
.theme-btn svg{width:20px;height:20px;transition:transform .6s var(--ease-out)}
:root[data-theme="dark"] .theme-btn svg{transform:rotate(180deg)}
/* theme switch: one cross-fade of the whole page, done by the browser's View Transitions (a single GPU fade),
   instead of transitioning the colours of every element (which recalculated styles for the whole page each frame) */
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s;animation-timing-function:var(--ease)}
.menu-btn{display:none;font-weight:600;font-size:.9375rem;padding:8px 0;min-width:48px;text-align:right}

/* ---------- mobile menu ---------- */
.menu{position:fixed;inset:0;z-index:55;overscroll-behavior:contain;background:var(--seamless);display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:104px var(--gutter) 32px;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateY(-100%);visibility:hidden;transition:transform .55s var(--ease-out),visibility 0s linear .55s}
.menu.open{transform:none;visibility:visible;transition:transform .55s var(--ease-out),visibility 0s}
.menu-links a{display:block;font-weight:700;font-size:clamp(2.4rem,11vw,4rem);letter-spacing:-.045em;word-spacing:.1em;line-height:1.1;padding:4px 0}
.menu-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.menu-note{width:100%;font-size:.875rem;color:var(--stone)}
/* menu link hover, the same language as the work index: the other links fade back, the one under the
   pointer slides right and an arrow draws in after it. Mouse/trackpad only, so a tap on a phone never
   leaves a link stuck in its hover state; keyboard focus gets the same treatment everywhere. */
.menu-links a{transition:color .3s var(--ease)}
.menu-links .ml{display:inline-block;white-space:nowrap;transition:transform .5s var(--ease-out)}
.ml-arw{display:inline-block;width:.52em;height:.52em;margin-left:.24em;vertical-align:.09em;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:square;opacity:0;transform:translateX(-.35em);transition:opacity .25s var(--ease),transform .5s var(--ease-out)}
.menu-links a:focus-visible .ml{transform:translateX(.2em)}
.menu-links a:focus-visible .ml-arw{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .menu-links a{width:fit-content}
  .menu-links:has(a:hover) a{color:var(--stone)}
  .menu-links:has(a:hover) a:hover{color:var(--ink)}
  .menu-links a:hover .ml{transform:translateX(.2em)}
  .menu-links a:hover .ml-arw{opacity:1;transform:none;transition-delay:.05s}
}

/* ---------- hero: magazine-cover masthead behind the portrait ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
.mast{position:absolute;left:0;right:0;bottom:clamp(16px,3.6vh,40px);z-index:1;pointer-events:none}
.masthead{font-weight:800;font-size:min(24vw,42svh);line-height:.8;letter-spacing:-.055em;margin-left:-.05em;white-space:nowrap;color:var(--ink);user-select:none;clip-path:inset(-30% -5% -2% -5%)}
.masthead .l{display:inline-block}
.hero-photo{position:absolute;right:-6%;bottom:0;z-index:2;height:min(88svh,53vw);width:auto;max-width:none;transform:scaleX(-1);pointer-events:none}
.hero-scrim{display:none;position:absolute;inset:0;z-index:3;pointer-events:none}
.hero-inner{position:relative;z-index:4;width:100%;max-width:var(--maxw);margin-inline:auto;padding:clamp(108px,16vh,164px) var(--gutter) 40px}
.hero-copy{max-width:min(540px,44%)}
.hero-lede{font-weight:700;font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.02;letter-spacing:-.042em;word-spacing:.1em}
.hero-sub{margin-top:22px;font-size:clamp(1rem,1.2vw,1.125rem);color:var(--graphite);max-width:40ch}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:32px}

/* ---------- work index ---------- */
.work{padding-bottom:0}
.index{border-top:1px solid var(--rule-2)}
.ix-row{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:baseline;padding:26px 0;border-bottom:1px solid var(--rule-2);transition:color .3s}
.ix-title{font-weight:600;font-size:clamp(1.25rem,2vw,1.75rem);letter-spacing:-.025em;word-spacing:.06em;line-height:1.2;transition:transform .45s var(--ease)}
.ix-title{grid-column:1 / 7}
.ix-org{grid-column:7 / 10}
.ix-fmt{grid-column:10 / 12}
.ix-go{grid-column:12 / 13}
.ix-org,.ix-fmt{font-size:.9375rem;color:var(--graphite);transition:color .3s}
.ix-go{justify-self:end;font-weight:600;transition:transform .35s var(--ease)}
.ix-row:hover .ix-go{transform:translateY(3px)}
.ix-thumb{display:none}
@media (hover:hover) and (pointer:fine){
  .index:hover .ix-row{color:var(--stone)}
  .index:hover .ix-row .ix-org,.index:hover .ix-row .ix-fmt{color:var(--stone)}
  .index .ix-row:hover{color:var(--ink)}
  .index .ix-row:hover .ix-org,.index .ix-row:hover .ix-fmt{color:var(--graphite)}
  .ix-row:hover .ix-title{transform:translateX(12px)}
}
.ix-preview{position:fixed;left:0;top:0;z-index:40;width:260px;pointer-events:none;opacity:0;transition:opacity .25s var(--ease)}
.ix-preview.on{opacity:1}
.ix-preview img{width:100%;border-radius:var(--r);box-shadow:0 24px 60px rgba(21,21,20,.25)}

/* ---------- case studies ---------- */
.case{padding-top:clamp(104px,12vw,176px);scroll-margin-top:40px}
.case-title{max-width:15ch}
.meta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:18px;margin-top:clamp(32px,4vw,52px);padding-top:18px;border-top:1px solid var(--rule)}
.meta>div{grid-column:span 3}
.meta dt{font-size:.8125rem;font-weight:600;color:var(--stone);margin-bottom:3px}
.meta dd{font-size:.9375rem;font-weight:500;line-height:1.4}

.slides-wrap{margin-top:clamp(40px,5vw,64px)}
.slides{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding-inline:var(--pad);scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.slides::-webkit-scrollbar{display:none}
.slides.dragging{cursor:grabbing;scroll-snap-type:none}
.slides.dragging .slide{pointer-events:none}
.slide{flex:0 0 auto;width:clamp(232px,25vw,330px);scroll-snap-align:start}
.slide img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);user-select:none;-webkit-user-drag:none}
.slides-ui{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px}
.counter{font-weight:600;font-size:.9375rem}
.counter span{color:var(--stone);font-weight:500}
.arrows{display:flex;gap:8px}
.arrow{width:46px;height:46px;border:1px solid var(--rule-2);border-radius:var(--r);display:grid;place-items:center;font-size:1.05rem;transition:background-color .25s,color .25s,opacity .25s}
.arrow:hover{background:var(--ink);color:var(--seamless);border-color:var(--ink)}
.arrow:disabled{opacity:.3;pointer-events:none}

.story{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:40px;margin-top:clamp(56px,7vw,96px)}

.story>:first-child{grid-column:1 / 7}
.story>:last-child{grid-column:7 / -1}
.results{margin-top:clamp(64px,8vw,112px);padding-top:26px;border-top:1px solid var(--rule-2)}
.res-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:40px;margin-top:26px}
.res-grid>:nth-child(1){grid-column:1 / 7}
.res-grid>:nth-child(2){grid-column:7 / 10}
.res-grid>:nth-child(3){grid-column:10 / 13}
.res-num{font-weight:700;font-size:clamp(3rem,5.6vw,5.25rem);line-height:.9;letter-spacing:-.05em}
.res--main .res-num{font-size:clamp(3.6rem,8.4vw,7.75rem)}
.res-lbl{margin-top:14px;font-size:1rem;color:var(--graphite);max-width:32ch}
.res-lbl b{color:var(--ink);font-weight:600}
.bar{position:relative;height:14px;margin-top:26px;background:var(--track);border-radius:2px;overflow:hidden}
.bar span{position:absolute;top:0;bottom:0;left:0;width:var(--v);background:var(--ink);transform-origin:left center}
.js .bar span{transform:scaleX(0);transition:transform 1.5s var(--ease-out) .2s}
.js .bar.in span{transform:scaleX(1)}
.bar-key{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font-size:.875rem;color:var(--graphite)}
.bar-key b{color:var(--ink);font-weight:600}
.case-link{margin-top:44px}

/* KKN: full-width photo band, same treatment as the About photo.
   The file is pre-cropped (full width, top 77% of the original) so the back row's eyes sit on the upper third
   and Daffa's on the lower third, and it never crops tighter than the reference Daffa approved. */
.kkn-band{margin-top:clamp(40px,5vw,64px)}
.kkn-band img{width:100%;height:auto;aspect-ratio:1641/1578;object-fit:cover;border-radius:var(--r)}
.kkn-band figcaption{margin-top:12px;font-size:.875rem;color:var(--stone)}
.kkn-row{margin-top:clamp(40px,5vw,72px);row-gap:clamp(36px,5vw,48px);align-items:start}
.kkn-row .read{max-width:34em}
.kkn-note{font-size:.875rem;font-weight:600;color:var(--stone)}
.kkn-note+.statement{margin-top:10px}
.statement{margin-top:clamp(40px,5vw,64px);font-weight:600;font-size:clamp(1.8rem,3.4vw,3.1rem);line-height:1.1;letter-spacing:-.04em;word-spacing:.1em;color:var(--stone)}
.statement b{color:var(--ink);font-weight:800}
.source{margin-top:22px;font-size:.875rem;color:var(--stone)}

/* ---------- films (dark: a screening room) ---------- */
.films{margin-top:var(--sec)}
.films-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:56px;align-items:start}
.film:nth-child(1){grid-column:1 / 7}
.film:nth-child(2){grid-column:7 / -1;margin-top:clamp(0px,9vw,150px)}
.film-img{position:relative;display:block;overflow:hidden;border-radius:var(--r)}
.film-img img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 1.1s var(--ease)}
.film-img:hover img{transform:scale(1.04)}
.film-play{position:absolute;left:16px;bottom:16px;padding:11px 14px;background:var(--on-ink);color:var(--stage);font-weight:600;font-size:.875rem;line-height:1;border-radius:var(--r);opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.film-img:hover .film-play,.film-img:focus-visible .film-play{opacity:1;transform:none}
.film-rank{margin-top:22px;font-size:.875rem;font-weight:600;color:var(--on-ink-2)}
.film-title{margin-top:6px;font-weight:700;font-size:clamp(1.5rem,2.4vw,2.125rem);letter-spacing:-.032em;word-spacing:.08em;line-height:1.1}
.film-desc{margin-top:10px;color:var(--on-ink-2);max-width:44ch}
.film-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:18px;font-size:.9375rem}
.film-meta span{color:var(--on-ink-2)}

/* ---------- testimonial ---------- */
.quote-fig{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.quote-text{grid-column:2 / span 10;font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(1.6rem,3.2vw,2.85rem);line-height:1.24;letter-spacing:-.012em;text-indent:-.42em}
.quote-by{grid-column:2 / span 10;display:flex;align-items:center;gap:14px;margin-top:36px}
.quote-by img{width:52px;height:52px;border-radius:var(--r);object-fit:cover}
.quote-by b{display:block;font-weight:700}
.quote-by span{font-size:.9375rem;color:var(--graphite);line-height:1.4}

/* ---------- what I do ---------- */
.disc{border-top:1px solid var(--rule-2)}
.disc li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:12px;align-items:baseline;padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--rule-2)}
.disc h3{font-weight:700;font-size:clamp(2rem,4.4vw,3.9rem);line-height:1;letter-spacing:-.047em}
.disc h3{grid-column:1 / 7}
.disc p{grid-column:7 / -1;font-size:1.0625rem;color:var(--graphite);max-width:40ch}
.kit{display:grid;grid-template-columns:minmax(0,1fr);row-gap:22px;padding-top:22px;border-top:1px solid var(--rule)}
.kit+.kit{margin-top:clamp(40px,4.4vw,64px)}
.kits{margin-top:clamp(72px,9vw,120px)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:clamp(40px,5vw,72px);padding-right:clamp(40px,5vw,72px);width:max-content;animation:scroll var(--dur,44s) linear infinite}
.marquee-track>*{flex:none}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.tool-logo{height:40px;width:auto}
.org-logo{width:auto;height:var(--h,48px)}
/* logos: all desaturated, colour comes back on hover. Single-colour marks follow the theme instead */
.logo{flex:none;transition:filter .45s var(--ease),opacity .45s var(--ease)}
.logo.c{filter:grayscale(1);opacity:.78}
:root[data-theme="dark"] .logo.c{filter:grayscale(1) brightness(1.55);opacity:.82}
:root[data-theme="dark"] .logo.c.dim{filter:grayscale(1) brightness(3.4)}
:root[data-theme="dark"] .logo.c:hover{filter:none;opacity:1}
.logo.m{filter:brightness(0);opacity:.6}
:root[data-theme="dark"] .logo.m{filter:brightness(0) invert(1)}
.logo.c:hover{filter:none;opacity:1}
.logo.m:hover{opacity:1}
.only-dark{display:none!important}
:root[data-theme="dark"] .only-dark{display:block!important}
:root[data-theme="dark"] .only-light{display:none!important}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(20px,2.4vw,36px)}
.step{position:relative;padding-top:26px;border-top:2px solid var(--ink)}
.step::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.step-n{font-weight:600;font-size:.875rem;color:var(--stone)}
.step h3{margin-top:6px;font-weight:700;font-size:clamp(1.3rem,1.8vw,1.6rem);letter-spacing:-.03em;line-height:1.15}
.step p{margin-top:10px;font-size:.975rem;color:var(--graphite)}
.loop{position:relative;height:34px;margin:34px 0 0 4px;border:1.5px solid var(--ink);border-top:0;border-radius:0 0 10px 10px}
.loop::before{content:"";position:absolute;left:-7px;top:-9px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid var(--ink)}
.loop-label{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);background:var(--seamless);padding:0 14px;font-size:.9375rem;font-weight:600;white-space:nowrap}

/* ---------- about ---------- */
.about-band img{width:100%;height:clamp(420px,68vh,680px);object-fit:cover;object-position:50% 10%;border-radius:var(--r)}
.about-row{margin-top:clamp(40px,5vw,72px);row-gap:28px;align-items:start}
.about-body .read{max-width:34em}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);margin-top:40px;border-top:1px solid var(--rule)}
.facts div{padding:14px 0;border-bottom:1px solid var(--rule)}
.facts dt{font-size:.8125rem;font-weight:600;color:var(--stone)}
.facts dd{font-weight:600;margin-top:2px}
.training{margin-top:clamp(80px,10vw,136px)}
.training-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-bottom:26px}
.training-head .h4{margin:0;font-size:1.375rem;letter-spacing:-.025em}
.certs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:28px}
.certs>li{grid-column:span 3}
.cert{display:block;width:100%;text-align:left;cursor:zoom-in}
.cert-img{position:relative;aspect-ratio:4/3;background:var(--print);border-radius:var(--r);display:grid;place-items:center;padding:11%;overflow:hidden}
.cert-img img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 10px 26px rgba(21,21,20,.14);transition:transform .5s var(--ease)}
.cert:hover .cert-img img{transform:scale(1.045)}
.cert-view{position:absolute;right:10px;bottom:10px;font-size:.75rem;font-weight:600;line-height:1;background:var(--ink);color:var(--seamless);padding:7px 9px;border-radius:3px;opacity:0;transition:opacity .3s}
.cert:hover .cert-view,.cert:focus-visible .cert-view{opacity:1}
.cert-t{display:block;margin-top:12px;font-weight:600;font-size:.9375rem;line-height:1.35}
.cert-s{display:block;margin-top:2px;font-size:.875rem;color:var(--stone)}

/* ---------- contact + footer (dark) ---------- */
.contact{padding-bottom:0}
.contact-h{font-weight:800;font-size:clamp(3rem,8.4vw,8.2rem);line-height:.92;letter-spacing:-.055em;word-spacing:.12em;max-width:13ch}
.contact-row{row-gap:28px;align-items:end;margin-top:clamp(40px,5vw,64px)}
.contact-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.cta-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;margin-top:clamp(96px,11vw,160px);padding-top:24px;padding-bottom:32px;background:linear-gradient(var(--rule-ink),var(--rule-ink)) var(--gutter) 0/calc(100% - 2 * var(--gutter)) 1px no-repeat;font-size:.875rem;color:var(--on-ink-2)}
.footer .brand-f{font-weight:800;font-size:1.25rem;color:var(--on-ink);letter-spacing:-.045em}
.footer .link{color:var(--on-ink)}

/* ---------- certificate viewer ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(21,21,20,.93);display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vw,64px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s;cursor:zoom-out}
.lb.open{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
.lb figure{display:flex;flex-direction:column;align-items:center;max-width:100%}
.lb img{max-width:min(1000px,92vw);max-height:80vh;width:auto;border-radius:var(--r);box-shadow:0 30px 80px rgba(0,0,0,.45);transform:scale(.97);transition:transform .35s var(--ease-out)}
.lb.open img{transform:none}
.lb figcaption{margin-top:16px;font-size:.9375rem;color:var(--on-ink-2);text-align:center}
.lb-close{position:absolute;top:18px;right:var(--gutter);color:var(--on-ink);font-weight:600;font-size:.9375rem;padding:8px 0}

/* ---------- contact page ---------- */
.nav--page .brand{opacity:1;transform:translateY(-50%);pointer-events:auto}
.nav--page .dateline{display:none}
.nav--page .nav-links a[aria-current]{color:var(--ink)}
.cpage{padding-top:clamp(120px,15vh,168px);padding-bottom:clamp(72px,9vw,128px)}
.cpage-grid{grid-template-rows:auto 1fr;row-gap:0;align-items:start}
.cpage-intro{grid-column:1 / 7;grid-row:1}
.cpage-alt{grid-column:1 / 7;grid-row:2;align-self:start}
.cpage-form{grid-column:7 / -1;grid-row:1 / 3}
.cpage-h{font-weight:800;font-size:clamp(3rem,6.6vw,6.4rem);line-height:.92;letter-spacing:-.055em;word-spacing:.12em}
.cpage-intro .lead{margin-top:28px;max-width:34ch}
.cpage-alt{margin-top:clamp(40px,5vw,64px);padding-top:18px;border-top:1px solid var(--rule);display:grid;gap:18px}
.cpage-alt dt{font-size:.8125rem;font-weight:600;color:var(--stone);margin-bottom:4px}
.cpage-alt dd{font-size:.9375rem;font-weight:500;overflow-wrap:anywhere}
.cpage-alt dd .link+.link{margin-left:22px}
.cpage-alt .link--mail{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cform{display:grid;gap:24px}
.cform-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px var(--col-gap)}
.field{display:grid;gap:8px;align-content:start}
.field label{font-size:.875rem;font-weight:600;color:var(--ink)}
.field .opt{font-weight:500;color:var(--stone)}
.field input,.field textarea{width:100%;font:inherit;font-size:1rem;line-height:1.4;color:var(--ink);background:var(--print);border:1px solid var(--rule-2);border-radius:var(--r);padding:15px 16px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);-webkit-appearance:none;appearance:none}
.field textarea{min-height:176px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--stone);opacity:1}
.field input:hover,.field textarea:hover{border-color:var(--graphite)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.field.bad input,.field.bad textarea{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.field-err{font-size:.8125rem;font-weight:500;color:var(--err)}
.field-err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:4px}
.cform-foot .btn{padding:18px 26px;font-size:1rem}
.cform-foot .btn[disabled]{opacity:.6;pointer-events:none}
.cform-note{font-size:.8125rem;color:var(--stone);max-width:36ch}
.cform-status{font-size:.9375rem;font-weight:500}
.cform-status:empty{display:none}
.cform-status.is-err{color:var(--err)}
.cform-status a{text-decoration:underline;text-underline-offset:3px}
.cdone{padding:clamp(24px,3.4vw,40px);background:var(--print);border:1px solid var(--rule);border-radius:var(--r)}
.cdone-k{display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600;color:var(--ink)}
.cdone-k .ico{width:1.05em;height:1.05em;stroke-width:2}
.cdone-q{margin-top:18px;font-family:var(--serif);font-optical-sizing:auto;font-size:clamp(1.125rem,1.4vw,1.3rem);line-height:1.5;color:var(--ink-soft);overflow-wrap:anywhere}
.cdone-q::before{content:"\201C"}
.cdone-q::after{content:"\201D"}
.cdone-by{margin-top:12px;font-size:.875rem;color:var(--stone)}
.cdone-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px;padding-top:24px;border-top:1px solid var(--rule)}
/* the heading and intro swap with a short fade when the message goes out */
html .cpage-intro.swap .cpage-h,html .cpage-intro.swap .lead{opacity:0;transform:translateY(8px);transition:opacity .26s var(--ease),transform .26s var(--ease)}
.cpage-h:focus{outline:none}
.footer--page{margin-top:0;background-image:linear-gradient(var(--rule),var(--rule));color:var(--stone)}
.footer--page .brand-f{color:var(--ink)}
.footer--page .link{color:var(--ink)}
@media (max-width:900px){
  .cpage-intro,.cpage-alt,.cpage-form{grid-column:1 / -1;grid-row:auto}
  .cpage-intro{order:1}
  .cpage-form{order:2;margin-top:44px}
  .cpage-alt{order:3;margin-top:56px}
}
@media (max-width:560px){
  .cform-row{grid-template-columns:minmax(0,1fr)}
  .cform-foot .btn{width:100%;justify-content:center}
}

/* ---------- intro: viewfinder focus, then the aperture opens (home page, first visit of a session) ---------- */
.loader{display:none}
html.is-intro body{overflow:hidden}
html.is-intro .loader{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;color:var(--on-ink);animation:loaderFailsafe .01s linear 5s forwards}
/* the dark screen is two shutter curtains; on "open" they part from the middle, like a camera's focal-plane shutter.
   Only transform and opacity move, so the whole exit runs on the GPU and can't stutter while the page loads. */
.shutter{position:absolute;left:0;right:0;height:50.5%;background:var(--stage);will-change:transform;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.shutter--t{top:0}
.shutter--b{bottom:0}
.loader-frame,.loader-meta{z-index:1}
.loader.open{pointer-events:none}
.loader.open .shutter--t{transform:translateY(-101%)}
.loader.open .shutter--b{transform:translateY(101%)}
.loader.open .loader-frame,.loader.open .loader-meta{opacity:0;transform:scale(.96);transition:opacity .28s var(--ease),transform .4s var(--ease)}
@keyframes loaderFailsafe{to{opacity:0;visibility:hidden}}
.loader-frame{position:relative;display:grid;place-items:center;width:min(86vw,760px);height:min(46vw,300px);animation:frameIn 1.1s var(--ease-out) backwards}
@keyframes frameIn{from{transform:scale(1.28);opacity:0}40%{opacity:1}to{transform:none;opacity:1}}
.af{position:absolute;width:clamp(18px,2.4vw,30px);height:clamp(18px,2.4vw,30px);border:0 solid currentColor;opacity:.9;transition:border-width .15s,transform .35s var(--spring)}
.af-tl{left:0;top:0;border-left-width:1.5px;border-top-width:1.5px}
.af-tr{right:0;top:0;border-right-width:1.5px;border-top-width:1.5px}
.af-bl{left:0;bottom:0;border-left-width:1.5px;border-bottom-width:1.5px}
.af-br{right:0;bottom:0;border-right-width:1.5px;border-bottom-width:1.5px}
/* focus confirmed: the brackets snap in a touch and thicken, like a camera's AF lock */
.loader-frame.lock .af{border-width:0}
.loader-frame.lock .af-tl{border-left-width:3px;border-top-width:3px;transform:translate(10px,10px)}
.loader-frame.lock .af-tr{border-right-width:3px;border-top-width:3px;transform:translate(-10px,10px)}
.loader-frame.lock .af-bl{border-left-width:3px;border-bottom-width:3px;transform:translate(10px,-10px)}
.loader-frame.lock .af-br{border-right-width:3px;border-bottom-width:3px;transform:translate(-10px,-10px)}
.loader-word{font-weight:800;font-size:clamp(2.4rem,8vw,6rem);line-height:1;letter-spacing:-.05em;word-spacing:.08em;white-space:nowrap}
/* each greeting starts out of focus and sharpens */
.loader-word.focus{animation:pull .42s var(--ease-out) both}
@keyframes pull{from{filter:blur(8px);opacity:.25;transform:scale(1.04)}to{filter:none;opacity:1;transform:none}}
.loader-meta{position:absolute;bottom:clamp(20px,4vh,36px);font-size:.8125rem;font-weight:500;color:var(--on-ink-2);font-variant-numeric:tabular-nums}
.loader-meta--l{left:var(--gutter)}
.loader-meta--r{right:var(--gutter);display:flex;align-items:center;gap:8px}
.loader-rec{width:7px;height:7px;border-radius:50%;background:#E5484D;animation:rec 1s steps(1) infinite}
@keyframes rec{50%{opacity:.15}}

/* note shown to the site owner after ?me / ?me=off (see assets/track.js) */
.me-toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));z-index:3000;max-width:min(92vw,420px);padding:12px 16px;border-radius:var(--r);background:var(--ink);color:var(--seamless);font-size:.875rem;font-weight:500;line-height:1.4;box-shadow:0 12px 30px rgba(0,0,0,.18);opacity:0;transform:translate(-50%,12px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.me-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- custom cursor: an inverting disc (built by JS, only for a mouse or trackpad) ---------- */
html.has-cursor,html.has-cursor *{cursor:none!important}
.cur{--cs:12px;--s:1;position:fixed;left:0;top:0;z-index:1000;width:0;height:0;pointer-events:none;mix-blend-mode:difference;opacity:0;will-change:transform;transition:opacity .25s var(--ease)}
html.cur-in .cur{opacity:1}
.cur-disc{position:absolute;left:0;top:0;display:grid;place-items:center;width:var(--cs);height:var(--cs);border-radius:50%;background:#fff;border:1.5px solid #fff;transform:translate(-50%,-50%) scale(var(--s));transition:width .45s var(--spring),height .45s var(--spring),transform .2s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease)}
.cur-t{font-size:.6875rem;font-weight:600;line-height:1;letter-spacing:.01em;white-space:nowrap;color:var(--seamless);opacity:0;transform:scale(.5);transition:opacity .2s var(--ease),transform .4s var(--spring)}
.cur.is-link{--cs:34px}
.cur.is-text{--cs:60px}
.cur.is-mast{--cs:110px}
/* over photos an inverted disc would turn faces into negatives, so it becomes a thin white ring */
.cur.is-media{--cs:40px;mix-blend-mode:normal}
.cur.is-media .cur-disc{background:transparent;box-shadow:0 0 0 1px rgba(0,0,0,.22),inset 0 0 0 1px rgba(0,0,0,.22)}
/* over things you can drag, play or open, it says so */
.cur.is-label{--cs:54px;mix-blend-mode:normal}
.cur.is-label .cur-disc{background:var(--ink);border-color:var(--ink)}
.cur.is-label .cur-t{opacity:1;transform:none}
.cur.is-down{--s:.75}
/* in form fields the disc steps aside and the normal text cursor comes back */
.cur.is-field{opacity:0!important}
html.has-cursor input,html.has-cursor textarea,html.has-cursor select{cursor:text!important}
html.has-cursor .cert:hover .cert-view,html.has-cursor .film-img:hover .film-play{opacity:0}

/* ---------- motion: one orchestrated load, quiet reveals ---------- */
.js .masthead .l{transform:translateY(110%);transition:transform 1.15s var(--ease-out);transition-delay:calc(.08s + var(--i) * 70ms)}
.js .hero-photo{opacity:0;transform:scaleX(-1) translateY(28px);transition:opacity 1.1s var(--ease) .35s,transform 1.4s var(--ease-out) .35s}
.js .hero .hl{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(.55s + var(--i) * 90ms)}
.js .hero.in .masthead .l{transform:none}
.js .hero.in .hero-photo{opacity:1;transform:scaleX(-1)}
.js .hero.in .hl{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js .rv.in{opacity:1;transform:none}
/* photo reveal: a cover in the page colour slides off the photo while the photo settles from a slight zoom.
   Only transform is animated, so the phone's GPU does the work (animating clip-path repainted the whole photo every frame). */
.rvm{position:relative;display:block;overflow:hidden;border-radius:var(--r)}
.js .rv-img .rvm::after{content:"";position:absolute;inset:-1px;background:var(--seamless);transform-origin:50% 100%;transition:transform 1.2s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}
.js .rv-img.in .rvm::after{transform:scaleY(0)}
.js .rv-img img{transform:scale(1.06);transition:transform 1.6s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}
.js .rv-img.in img{transform:none}
.js .rv-img figcaption{opacity:0;transition:opacity .8s var(--ease) .6s}
.js .rv-img.in figcaption{opacity:1}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1200px){
  .dateline .dl-2{display:none}
}
@media (max-width:1024px){
  .steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 18px}
  .step p{font-size:.9rem}
}
/* portrait tablets & phones: cover layout — masthead on top, portrait in front, copy at the foot */
@media (orientation:portrait) and (max-width:1024px){
  .hero{justify-content:flex-end}
  .mast{top:var(--mast-top);bottom:auto}
  .masthead{font-size:36vw}
  .hero-photo{top:auto;right:0;left:0;width:100%;max-height:none;object-fit:cover;bottom:var(--ph-b);height:var(--ph-h);object-position:var(--ph-x) 0}
  .hero-scrim{display:block;background:linear-gradient(0deg,var(--seamless) 0%,var(--seamless) var(--scrim-solid),rgba(var(--bg-rgb),.92) calc(var(--scrim-solid) + 7%),rgba(var(--bg-rgb),0) calc(var(--scrim-solid) + 19%))}
  .hero-inner{padding-top:0;padding-bottom:clamp(36px,5vh,64px)}
  .hero-copy{max-width:600px}
  .hero{--mast-top:92px;--ph-b:10%;--ph-h:80%;--ph-x:12%;--scrim-solid:30%}
}
@media (orientation:portrait) and (max-width:600px) and (max-height:780px){
  .hero{--ph-h:76%;--mast-top:84px}
}
@media (orientation:portrait) and (min-width:601px) and (max-width:1024px){
  .hero{--mast-top:110px;--ph-b:14%;--ph-h:72%;--ph-x:14%;--scrim-solid:27%}
  .hero-copy{max-width:640px}
  .hero-lede{font-size:clamp(2.4rem,5.4vw,3.4rem)}
  .hero-sub{font-size:1.125rem}
}
@media (max-width:900px){
  .nav-links,.nav-cta .btn,.nav-cta .link{display:none}
  .menu-btn{display:block}
  .nav-cta{gap:14px}
  .meta>div{grid-column:span 6}
  .res-grid>:nth-child(1){grid-column:1 / -1}
  .res-grid>:nth-child(2){grid-column:1 / 7}
  .res-grid>:nth-child(3){grid-column:7 / -1}
  .steps{grid-template-columns:1fr;gap:0}
  .step{border-top:0;border-left:2px solid var(--ink);padding:0 0 30px 26px}
  .step:last-child{padding-bottom:0}
  .step::before{top:2px;left:-6px}
  .step h3{margin-top:2px}
  .step p{font-size:1rem;max-width:46ch}
  .loop{display:none}
  .loop-label{position:static;transform:none;display:inline-block;margin-top:26px;padding:0}
  .certs>li{grid-column:span 6}
}
@media (max-width:760px){
  .sec-head>:first-child,.sec-head .lead,.c-a,.c-b,
  .story>:first-child,.story>:last-child,
  .film:nth-child(1),.film:nth-child(2),
  .disc h3,.disc p{grid-column:1 / -1}
  .film:nth-child(2){margin-top:0}
  .quote-text,.quote-by{grid-column:1 / -1}
  .ix-row{grid-template-columns:60px minmax(0,1fr) 20px;grid-template-areas:"thumb title go" "thumb org go";gap:4px 16px;align-items:center;padding:16px 0}
  .ix-thumb{display:block;grid-area:thumb;width:60px;height:75px;object-fit:cover;border-radius:3px}
  .ix-title{grid-area:title;font-size:1.0625rem;line-height:1.3}
  .ix-org{grid-area:org;font-size:.875rem}
  .ix-fmt{display:none}
  .ix-go{grid-area:go}
  .contact-cta{margin-top:4px}
}
@media (max-width:560px){
  body{font-size:1rem}
  .hero-lede{font-size:clamp(1.7rem,7.4vw,2.3rem)}
  .hero-sub{font-size:.9375rem;margin-top:14px}
  .hero-cta{margin-top:22px;gap:12px 22px}
  .btn{padding:14px 18px;font-size:.9rem}
  .meta{row-gap:14px}
  .res-grid>:nth-child(2),.res-grid>:nth-child(3){grid-column:1 / -1}
  .bar-key{flex-direction:column;gap:2px}
  .facts{grid-template-columns:1fr}
  .certs{row-gap:22px}
  .cert-t{font-size:.875rem}
  .tool-logo{height:34px}
  .org-logo{height:calc(var(--h,48px) * .82)}
  .about-band img{height:min(118vw,560px);object-position:50% 0}
  .footer{flex-direction:column;align-items:flex-start}
}
/* landscape screens: the name sits in the normal flow under the copy (pushed to the bottom when there's room),
   and the hero is never taller than a 16:10 frame. Narrowing a desktop window used to leave the photo and name
   stranded at the bottom of a full-height hero, with a big empty gap under the title. */
@media (orientation:landscape){
  .hero{min-height:min(100svh,62.5vw)}
  .mast{position:relative;left:auto;right:auto;bottom:auto;order:2;margin-top:auto;padding-bottom:clamp(16px,3.6vh,40px)}
  .hero-inner{order:1}
}
/* short landscape screens (phones on their side) */
@media (orientation:landscape) and (max-height:600px) and (max-width:1024px){
  .nav-links,.nav-cta .btn,.nav-cta .link{display:none}
  .menu-btn{display:block}
  /* the open menu is laid out in two columns so every item (including Contact me, LinkedIn and Resume)
     fits on one landscape screen; before, the lower items sat below the fold of a short phone screen */
  .menu{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(24px,5vw,56px);padding-top:76px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .menu-links a{font-size:clamp(1.25rem,3.8vw,2rem);padding:5px 0}
  .menu-foot{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:6px}
  .menu-note{width:auto;max-width:24ch}
  .masthead{font-size:min(26vw,44svh)}
  .hero-inner{padding-top:76px;padding-bottom:24px}
  .hero-lede{font-size:clamp(1.3rem,3vw,1.8rem)}
  .hero-sub{margin-top:10px;font-size:.875rem;max-width:44ch}
  .hero-cta{margin-top:16px}
  .btn{padding:12px 16px;font-size:.875rem}
}
/* short landscape screens of any width (phones on their side, big phones, short windows):
   the name moves into normal flow under the copy, so the two can never overlap.
   On a very short screen the hero grows a few pixels instead of stacking text on the name. */
@media (orientation:landscape) and (max-height:500px){
  .mast{position:relative;left:auto;right:auto;bottom:auto;order:2;margin-top:auto;padding-bottom:clamp(8px,3svh,18px)}
  .hero-inner{order:1;padding-top:72px;padding-bottom:clamp(12px,4svh,22px)}
  .hero-copy{max-width:min(600px,62%)}
  .masthead{font-size:clamp(84px,calc((100svh - 270px) * 1.25),22vw)}
  .hero-lede{font-size:clamp(1.3rem,3vw,1.8rem)}
  .hero-sub{margin-top:8px;font-size:.875rem;max-width:58ch}
  .hero-cta{margin-top:14px}
  .hero-cta .btn{padding:12px 16px;font-size:.875rem}
}
/* ...and on the wider ones the portrait gets bigger and moves in toward the copy: sized from the screen height,
   head kept just under the nav, face at ~85% of the width, legs and chair cropped by the bottom edge */
@media (orientation:landscape) and (max-height:500px) and (min-width:700px){
  .hero{--phh:calc(100svh * var(--ph-scale,1.22))}
  .hero-photo{height:var(--phh);top:calc(78px - var(--phh) * .124);bottom:auto;right:calc(var(--ph-face,15vw) - var(--phh) * .355)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .masthead .l,.js .hero .hl,.js .rv{transform:none!important;opacity:1!important;transition:none!important}
  .js .hero-photo{opacity:1!important;transform:scaleX(-1)!important;transition:none!important}
  .js .rv-img img{transform:none!important;transition:none!important}
  .js .rv-img .rvm::after{display:none}
  .js .rv-img figcaption{opacity:1!important;transition:none!important}
  .js .bar span{transform:none!important;transition:none!important}
  .marquee-track{animation:none}
  .cur{transition:opacity .2s}
  .cur-disc{transition:none}
  .menu-links .ml,.ml-arw{transform:none!important}
  .nav-links a{transition:color .2s}
  .nav-id .brand{transition:opacity .4s var(--ease)}
}