/* ==========================================================================
   URBAN PRESTIGE — shared design system
   Ibrahim Muhammad Naeem · v2 · REV 00 2026-08-13

   One stylesheet for every page. No build step, no dependencies, opens from
   disk. Palette locked from the Urban Prestige reference swatch.

   CONTRAST RULES (measured, do not eyeball these):
     raw --gold on --bone .............. 2.16:1  MATERIAL ONLY, never text
     --gold-ink on --bone .............. 5.61:1  AA pass, use for gold text
     --charcoal-soft on --bone ......... 4.82:1  AA pass (#6b6f74 was 4.02, failed)
     --charcoal on --bone .............. 8.96:1
     --bone on --obsidian ............. 15.65:1
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* fixed palette */
  --gold:#c1972f;
  --gold-lift:#e8ce86;
  --foil:linear-gradient(100deg,#8c6520 0%,#e8ce86 26%,#b8862b 48%,#f0dca0 70%,#9a7024 100%);

  /* semantic — light. Every rule below uses these, never the raw values, so a
     theme is a token swap rather than a second stylesheet. */
  --ground:#e9e5dc;
  --ground-dp:#ded9cd;
  --panel:#fbfaf7;
  --panel-2:#f4f1ea;
  --ink:#383b3f;
  --ink-hi:#0b0b0c;
  --ink-soft:#5f6367;
  --gold-ink:#6e5518;
  --band:#0b0b0c;
  --band-ink:rgba(233,229,220,.86);
  --band-ink-hi:#fbfaf7;
  --hair:rgba(11,11,12,.11);
  --hair-lt:rgba(255,255,255,.14);
  --nav-bg:rgba(233,229,220,.82);
  --pill-bg:#0b0b0c;
  --pill-ink:#e9e5dc;
  --lift:0 1px 2px rgba(11,11,12,.04), 0 10px 30px rgba(11,11,12,.07);
  --lift-hi:0 2px 6px rgba(11,11,12,.06), 0 24px 60px rgba(11,11,12,.13);
  --logo-rest:grayscale(1);
  --logo-hover:grayscale(0);

  --display:Bahnschrift,"DIN Alternate","DIN Condensed","Avenir Next Condensed",
   "Roboto Condensed","Liberation Sans Narrow","Segoe UI Variable Display",system-ui,sans-serif;
  --body:Corbel,Candara,"Avenir Next",Avenir,"Segoe UI",Roboto,"Noto Sans",
   "Helvetica Neue",system-ui,sans-serif;
  --data:Consolas,"SF Mono",ui-monospace,Menlo,"Roboto Mono","Noto Sans Mono",
   "DejaVu Sans Mono",monospace;

  --gutter:clamp(20px,3vw,48px);
  --measure:min(1480px,100%);
  --nav-h:74px;
}

/* Dark is a real second palette, not an inversion. The bands stay the darkest
   surface so the page keeps its light/dark rhythm either way. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#101013; --ground-dp:#17171b; --panel:#191920; --panel-2:#1f1f27;
    --ink:#c7c4bc; --ink-hi:#f5f3ee; --ink-soft:#9a978f;
    --gold-ink:#d9b25f;
    --band:#07070a; --band-ink:rgba(233,229,220,.84); --band-ink-hi:#fbfaf7;
    --hair:rgba(255,255,255,.13); --hair-lt:rgba(255,255,255,.1);
    --nav-bg:rgba(16,16,19,.86);
    --pill-bg:#e9e5dc; --pill-ink:#0b0b0c;
    --lift:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
    --lift-hi:0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.6);
    --logo-rest:grayscale(1) brightness(0) invert(1) opacity(.62);
    --logo-hover:brightness(0) invert(1) opacity(.95);
  }
}
:root[data-theme="dark"]{
  --ground:#101013; --ground-dp:#17171b; --panel:#191920; --panel-2:#1f1f27;
  --ink:#c7c4bc; --ink-hi:#f5f3ee; --ink-soft:#9a978f;
  --gold-ink:#d9b25f;
  --band:#07070a; --band-ink:rgba(233,229,220,.84); --band-ink-hi:#fbfaf7;
  --hair:rgba(255,255,255,.13); --hair-lt:rgba(255,255,255,.1);
  --nav-bg:rgba(16,16,19,.86);
  --pill-bg:#e9e5dc; --pill-ink:#0b0b0c;
  --lift:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  --lift-hi:0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.6);
  --logo-rest:grayscale(1) brightness(0) invert(1) opacity(.62);
  --logo-hover:brightness(0) invert(1) opacity(.95);
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);color-scheme:light dark;font-family:var(--body);
 font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
::selection{background:var(--gold);color:var(--ink-hi)}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.04;
 color:var(--ink-hi);text-wrap:balance}
section[id],div[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* ---------- layout ---------- */
.wrap{width:var(--measure);margin:0 auto;padding:0 var(--gutter)}
section{padding:clamp(56px,8vw,110px) 0}
section.tight{padding-top:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--band);color:var(--band-ink-hi);
 padding:12px 20px;font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:10px;top:10px}

/* ---------- primitives ---------- */
.label{font-family:var(--data);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
 color:var(--gold-ink)}
.label.dim{color:var(--ink-soft)}
.label.on-dark{color:var(--gold)}
.foil{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.foil-rule{height:2px;background:var(--foil);border:0;width:100%}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.eyebrow .bar{height:1.5px;width:44px;background:var(--foil);flex:none}

.head{max-width:62ch;margin-bottom:clamp(32px,4.5vw,58px)}
.head h1,.head h2{font-size:clamp(30px,4.2vw,54px);margin:16px 0}
.head p{color:var(--ink-soft);max-width:58ch}
.head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- buttons ---------- */
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--pill-bg);color:var(--pill-ink);
 font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
 padding:13px 22px;border-radius:999px;
 transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,background .22s,border-color .22s}
.pill:hover{transform:translateY(-2px);box-shadow:var(--lift-hi)}
.pill .arw{display:inline-block;transition:transform .22s}
.pill:hover .arw{transform:translate(3px,-3px)}
.pill.ghost{background:transparent;color:var(--ink-hi);border:1.5px solid var(--hair)}
.pill.ghost:hover{border-color:var(--gold);box-shadow:none}
.pill.foilbtn{background:linear-gradient(100deg,#d9b45c 0%,#f0dca0 42%,#e0bb6a 68%,#cfa544 100%);
 color:#0b0b0c;font-weight:700}
.pill.on-dark{background:var(--band-ink-hi);color:#0b0b0c}
.pill.on-dark.ghost{background:transparent;color:var(--band-ink-hi);border-color:rgba(255,255,255,.3)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--nav-bg);
 backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
 border-bottom:1px solid var(--hair)}
@supports not (backdrop-filter:blur(4px)){.nav{background:var(--ground)}}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h)}
.mark{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.02em;
 text-transform:uppercase;color:var(--ink-hi);display:flex;align-items:center;gap:11px;flex:none}
.mark .glyph{width:32px;height:32px;flex:none;background:var(--band);
 background-image:url('../assets/brand/imn-gold.svg');background-size:32px 32px;
 background-repeat:no-repeat;background-position:center}
.navlinks{display:flex;gap:30px;list-style:none;align-items:center}
.navlinks a{font-family:var(--data);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--ink-soft);padding:8px 0;border-bottom:1.5px solid transparent;
 transition:color .18s,border-color .18s;white-space:nowrap}
.navlinks a:hover{color:var(--ink-hi);border-bottom-color:var(--gold)}
.navlinks a[aria-current="page"]{color:var(--ink-hi);border-bottom-color:var(--gold)}
.navtoggle{display:none;width:42px;height:38px;border:1.5px solid var(--hair);position:relative;flex:none}
.navtoggle i{position:absolute;left:10px;right:10px;height:1.5px;background:var(--band);
 transition:transform .3s,opacity .2s}
.navtoggle i:nth-child(1){top:12px}
.navtoggle i:nth-child(2){top:18px}
.navtoggle i:nth-child(3){top:24px}
.navtoggle[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1180px){
  .nav .wrap>.pill{display:none}
  .navtoggle{display:block}
  .navlinks{position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;
   gap:0;background:var(--ground);border-bottom:1px solid var(--hair);max-height:0;overflow:hidden;
   transition:max-height .34s ease}
  .navlinks.open{max-height:70vh;overflow-y:auto}
  .navlinks li{border-top:1px solid var(--hair)}
  .navlinks a{display:block;padding:17px var(--gutter);border-bottom:0;font-size:12px}
}

/* ---------- hero ---------- */
.hero{padding:clamp(28px,3.4vw,52px) 0 clamp(26px,3vw,44px)}
.hero-grid{display:grid;grid-template-columns:1fr min(380px,32%);
 gap:clamp(28px,3.4vw,56px);align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:36px;align-items:start}}
.hero h1{font-size:clamp(32px,3.9vw,54px);max-width:19ch;line-height:1.02}
.hero h1 .thin{font-weight:300;letter-spacing:-.02em}
.deck{margin-top:22px;max-width:50ch;font-size:clamp(16.5px,1.5vw,19px);line-height:1.6}
.deck b{color:var(--ink-hi);font-weight:700}
.hero-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

/* portrait plate */
.plate{position:relative;justify-self:end;width:100%;max-width:380px}
@media(max-width:940px){.plate{justify-self:start;max-width:320px}}
.plate::before{content:"";position:absolute;inset:18px -16px -16px 18px;background:var(--foil);opacity:.5}
.plate figure{position:relative;background:var(--panel);padding:14px 14px 0;box-shadow:var(--lift-hi)}
/* No grayscale. A studio portrait is the one image on the page that should look
   like the person, and the navy/charcoal already sits inside the palette.
   No forced aspect either — the frame follows whatever the source file is,
   so a square original is never cropped to a portrait letterbox. */
.plate img{width:100%;height:auto;display:block}
.plate figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;
 padding:13px 2px;font-family:var(--data);font-size:11px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--ink-soft)}
.plate figcaption b{color:var(--gold-ink);font-weight:400}

/* ---------- ticker ---------- */
.ticker{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:18px 0}
.ticker .wrap{display:flex;flex-wrap:wrap;gap:10px 34px;align-items:center}
.ticker span{font-family:var(--data);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--ink-soft);display:flex;align-items:center;gap:12px}
.ticker span::before{content:"";width:4px;height:4px;background:var(--gold);flex:none}

/* ---------- dark band ---------- */
.band{background:var(--band);color:var(--band-ink);padding:clamp(52px,7.5vw,92px) 0;
 background-image:radial-gradient(120% 80% at 50% 0%,rgba(193,151,47,.11),transparent 62%)}
.band h2,.band h3{color:var(--band-ink-hi)}
.band p{color:var(--band-ink)}
.band .note{margin-top:20px;font-family:var(--data);font-size:11px;letter-spacing:.1em;
 text-transform:uppercase;color:rgba(233,229,220,.66)}

/* ---------- figures ---------- */
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-lt);
 margin-top:40px;border-top:1px solid var(--hair-lt);border-bottom:1px solid var(--hair-lt)}
@media(max-width:760px){.figures{grid-template-columns:repeat(2,1fr)}}
.fig{background:var(--band);padding:32px 20px;text-align:center}
.fig b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(36px,5.4vw,62px);
 letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:11px}
.fig span{font-family:var(--data);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
 color:var(--band-ink);display:block;line-height:1.6}

/* ---------- cards ---------- */
.grid{display:grid;gap:clamp(14px,1.6vw,20px)}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.grid.g4{grid-template-columns:repeat(2,1fr)}.grid.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid.g4,.grid.g3,.grid.g2{grid-template-columns:1fr}}

.card{background:var(--panel);padding:30px 26px 28px;box-shadow:var(--lift);
 display:flex;flex-direction:column;gap:13px;position:relative;overflow:hidden;
 transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--foil);
 transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.2,.7,.2,1)}
a.card:hover,.card:has(a):hover,.card:focus-within{transform:translateY(-5px);box-shadow:var(--lift-hi)}
a.card:hover::before,.card:has(a):hover::before,.card:focus-within::before{transform:scaleX(1)}
.card .ico{width:34px;height:34px;stroke:var(--ink-hi);fill:none;stroke-width:1.35;stroke-linecap:square;flex:none}
.card h3{font-size:20px;letter-spacing:-.02em}
.card p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);flex:1}
.card .meta{font-family:var(--data);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--gold-ink);padding-top:13px;border-top:1px solid var(--hair);margin-top:auto}

/* route card: the three Work With Me paths */
.route{background:var(--panel);box-shadow:var(--lift);padding:34px 30px;display:flex;
 flex-direction:column;gap:15px;position:relative;overflow:hidden;
 transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s}
a.route:hover,.route:has(a):hover,.route:focus-within{transform:translateY(-5px);box-shadow:var(--lift-hi)}
.route .num{font-family:var(--data);font-size:11px;letter-spacing:.2em;color:var(--gold-ink)}
.route h3{font-size:24px}
.route p{color:var(--ink-soft);font-size:15px;flex:1}
.route ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:4px 0}
.route ul li{font-size:14px;color:var(--ink);display:flex;gap:10px;align-items:flex-start}
.route ul li::before{content:"";width:5px;height:5px;background:var(--gold);flex:none;margin-top:8px}

/* ---------- tables ---------- */
.panel{background:var(--panel);box-shadow:var(--lift);overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:600px}
caption{text-align:left;padding:24px 28px 0;font-family:var(--data);font-size:11px;
 letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
th,td{text-align:left;padding:16px 28px;border-bottom:1px solid var(--hair);font-size:15.5px}
thead th{font-family:var(--data);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--ink-soft);font-weight:400;padding-top:22px}
tbody th{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink-hi);letter-spacing:-.01em}
td.yr{font-family:var(--data);font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums;
 width:1%;white-space:nowrap}
td.via{color:var(--ink-soft);font-size:14.5px}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .18s}
tbody tr:hover{background:var(--ground)}
.flag{display:inline-block;font-family:var(--data);font-size:11px;letter-spacing:.13em;
 text-transform:uppercase;color:#0b0b0c;
 background:linear-gradient(100deg,#d9b45c,#f0dca0 45%,#cfa544);padding:3px 8px;margin-left:9px;
 vertical-align:middle}

/* ---------- quote ---------- */
.quote{background:var(--band);padding:clamp(44px,6.5vw,96px) 0}
blockquote{font-family:var(--display);font-weight:300;font-size:clamp(23px,3.4vw,46px);
 line-height:1.18;letter-spacing:-.025em;color:var(--band-ink-hi);max-width:19ch;text-wrap:balance}
blockquote b{font-weight:700}
.attrib{margin-top:28px;display:flex;align-items:center;gap:14px}
.attrib .bar{width:40px;height:1.5px;background:var(--foil);flex:none}

/* ---------- timeline ---------- */
.tl{display:flex;flex-direction:column;gap:0;border-left:1.5px solid var(--hair);margin-left:8px}
.tl-item{position:relative;padding:0 0 34px 30px}
.tl-item::before{content:"";position:absolute;left:-6.5px;top:7px;width:11px;height:11px;
 background:var(--ground);border:1.5px solid var(--gold);border-radius:50%}
.tl-item.now::before{background:var(--foil);border-color:transparent}
.tl-item .yr{font-family:var(--data);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--gold-ink);margin-bottom:7px}
.tl-item h3{font-size:19px;margin-bottom:4px}
.tl-item .org{font-size:14px;color:var(--ink-soft);margin-bottom:9px}
.tl-item p{font-size:14.5px;color:var(--ink-soft);max-width:62ch}

/* ---------- filter bar ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:32px}
.filters button{font-family:var(--data);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
 padding:10px 16px;border:1.5px solid var(--hair);color:var(--ink-soft);
 transition:border-color .18s,color .18s,background .18s}
.filters button:hover{border-color:var(--gold);color:var(--ink-hi)}
.filters button[aria-pressed="true"]{background:var(--band);border-color:var(--ink-hi);color:var(--band-ink-hi)}

/* ---------- gallery + lightbox ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(14px,1.6vw,20px)}
.gal figure{background:var(--panel);box-shadow:var(--lift);padding:12px;cursor:zoom-in;position:relative;
 transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s}
.gal figure:hover{transform:translateY(-4px);box-shadow:var(--lift-hi)}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ground-dp)}
.gal figcaption{padding:13px 4px 4px}
.gal figcaption b{display:block;font-family:var(--display);font-size:15px;color:var(--ink-hi);
 letter-spacing:-.01em;line-height:1.25;margin-bottom:5px}
.gal figcaption span{font-family:var(--data);font-size:11px;letter-spacing:.13em;
 text-transform:uppercase;color:var(--ink-soft)}
.empty{background:var(--panel);box-shadow:var(--lift);padding:clamp(32px,5vw,56px);text-align:center}
.empty p{color:var(--ink-soft);max-width:52ch;margin:12px auto 0}

/* Lightbox. A <dialog> only self-centres while its box is auto-sized, so the
   inner wrapper is width:fit-content and the image drives the width. Sizing the
   dialog itself was what left the image pinned left with white filler beside it. */
dialog.lb{border:0;padding:0;background:transparent;max-width:96vw;max-height:96vh;
 width:auto;height:auto;margin:auto;overflow:visible}
dialog.lb::backdrop{background:rgba(11,11,12,.9);backdrop-filter:blur(4px)}
dialog.lb .shell{width:fit-content;max-width:96vw;margin:0 auto;
 display:flex;flex-direction:column;gap:0}
dialog.lb img{display:block;max-width:min(1250px,94vw);max-height:82vh;
 width:auto;height:auto;object-fit:contain;background:var(--panel);
 box-shadow:0 30px 80px rgba(0,0,0,.5)}
dialog.lb .bar{display:flex;justify-content:space-between;align-items:center;gap:24px;
 padding:0 2px 12px;color:var(--band-ink-hi);font-family:var(--data);font-size:11px;
 letter-spacing:.14em;text-transform:uppercase}
dialog.lb .bar [data-cap]{max-width:70ch;line-height:1.5}
dialog.lb button{color:var(--band-ink-hi);font-size:26px;line-height:1;padding:2px 8px;
 transition:color .18s}
dialog.lb button:hover{color:var(--gold)}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:17px;max-width:520px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--data);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--ink-soft)}
.field input,.field textarea,.field select{font-family:var(--body);font-size:16px;color:var(--ink-hi);
 background:var(--panel);border:1.5px solid var(--hair);padding:13px 15px;
 transition:border-color .18s;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--gold)}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font-size:12.5px;color:var(--ink-soft)}
.req{color:var(--gold-ink)}

/* ---------- contact lines ---------- */
.lines{display:flex;flex-direction:column;gap:11px}
.lines a,.lines span{font-family:var(--data);font-size:12.5px;letter-spacing:.09em;
 color:var(--ink);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lines .k{color:var(--ink-soft);letter-spacing:.17em;text-transform:uppercase;
 font-size:11px;width:74px;flex:none}
.lines a:hover{color:var(--gold-ink)}

/* ---------- footer ---------- */
.foot{background:var(--band);color:var(--band-ink);padding:clamp(48px,6vw,84px) 0 34px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
@media(max-width:940px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot h4{color:var(--band-ink-hi);font-size:14px;letter-spacing:.02em;margin-bottom:16px;
 font-family:var(--data);font-weight:400;text-transform:uppercase;letter-spacing:.17em}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.foot ul a{font-size:14.5px;color:var(--band-ink);transition:color .18s;
 display:block;padding:9px 0;min-height:44px}
.foot ul a:hover{color:var(--gold)}
.foot .bio{font-size:14.5px;color:var(--band-ink);max-width:38ch;margin-top:14px}
.foot .mark{color:var(--band-ink-hi)}
.foot .mark .glyph{background:var(--panel)}
.foot-base{margin-top:44px;padding-top:24px;border-top:1px solid var(--hair-lt);
 display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
.foot-base p,.foot-base a{font-family:var(--data);font-size:11px;letter-spacing:.15em;
 text-transform:uppercase;color:rgba(233,229,220,.66)}
.foot-base a:hover{color:var(--gold)}

/* Split band (copy left, CTA right). Was inline on six pages with no breakpoint,
   which forced a 2-up grid at 375px and pushed the contact lines off-screen. */
.band-split{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:820px){.band-split{grid-template-columns:1fr;gap:26px}}

/* contact lines must be able to wrap a long email on a narrow screen */
.lines a{word-break:break-word}
@media(max-width:520px){
  .lines a,.lines span{flex-direction:column;align-items:flex-start;gap:3px}
  .lines .k{width:auto}
}

/* ---------- tag list ---------- */
.taglist{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.taglist li{font-family:var(--data);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
 color:var(--ink);border:1px solid var(--hair);padding:7px 11px}
.panelcard{background:var(--panel);box-shadow:var(--lift);padding:clamp(26px,3.2vw,38px)}

/* ---------- proof photography ---------- */
.banner{position:relative;width:100%;overflow:hidden;background:var(--band)}
.banner img{width:100%;height:clamp(200px,30vw,400px);object-fit:cover;object-position:center 45%;
 filter:grayscale(15%) contrast(1.04)}
.banner .cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,3vw,34px) 0;
 background:linear-gradient(to top,rgba(11,11,12,.88),transparent);color:var(--band-ink-hi)}
.banner .cap b{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.02em;
 font-size:clamp(19px,2.6vw,30px);color:var(--band-ink-hi);margin-bottom:5px}
.banner .cap span{font-family:var(--data);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
 color:var(--gold)}

.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
@media(max-width:980px){.shots{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.shots{grid-template-columns:1fr}}
.shots figure{background:var(--panel);box-shadow:var(--lift);overflow:hidden;
 transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s}
.shots figure:hover{transform:translateY(-5px);box-shadow:var(--lift-hi)}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ground-dp)}
.shots figcaption{padding:16px 18px 18px}
.shots figcaption b{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;
 letter-spacing:-.01em;color:var(--ink-hi);margin-bottom:5px;line-height:1.25}
.shots figcaption span{font-family:var(--data);font-size:11px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--ink-soft)}

/* social provenance: a photo that also exists on a public post carries more
   weight than one that only exists here. */
.src{display:inline-flex;align-items:center;gap:6px;margin-top:9px;
 font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--gold-ink);border-bottom:1px solid transparent;transition:border-color .18s}
.src:hover{border-bottom-color:var(--gold)}
.src svg{width:11px;height:11px;fill:currentColor;flex:none}
.gal figure{position:relative}
.gal .src{margin:0 0 4px 4px}
dialog.lb .bar a{color:var(--gold);display:inline-flex;align-items:center;gap:7px;
 font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
dialog.lb .bar a svg{width:13px;height:13px;fill:currentColor}
dialog.lb .bar .right{display:flex;align-items:center;gap:20px}

/* ---------- motion ----------
   Fail-safe: .reveal is only hidden when the <html class="js"> flag is set by the
   inline script in <head>. If JS is blocked or site.js 404s, every .reveal stays
   visible instead of leaving the page blank below the fold. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
   transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .card:hover,.route:hover,.pill:hover,.gal figure:hover{transform:none}
}

/* ---------- print ---------- */
@media print{
  .nav,.foot,.hero-cta,.filters{display:none}
  body{background:#fff;color:#000}
  .card,.panel,.route{box-shadow:none;border:1px solid #ccc}
}


/* ==========================================================================
   REV 01 · 2026-08-14 — audit fixes
   ========================================================================== */

/* ---------- scrollable table affordance ----------
   The record table is 600px min-width inside a 375px screen, and the column
   that carries the whole argument ("Engaged via") is the one off-screen. This
   is the classic background-attachment scroll shadow: the shadows appear only
   while there is more table to reach and disappear at each end. No JS. */
.panel{
  background:
    linear-gradient(to right,var(--panel) 30%,transparent) left center,
    linear-gradient(to left,var(--panel) 30%,transparent) right center,
    radial-gradient(farthest-side at 0 50%,rgba(11,11,12,.17),rgba(11,11,12,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(11,11,12,.17),rgba(11,11,12,0)) right center;
  background-repeat:no-repeat;
  background-size:44px 100%,44px 100%,15px 100%,15px 100%;
  background-attachment:local,local,scroll,scroll;
}
.scrollhint{display:none;font-family:var(--data);font-size:11px;letter-spacing:.14em;
 text-transform:uppercase;color:var(--ink-soft);margin-top:11px}
.scrollhint::after{content:" 92"}
@media(max-width:720px){.scrollhint{display:block}}

/* ---------- the wall ----------
   Logo and name together, never one instead of the other: the mark is the
   recognition, the name is the claim. Marks are normalised to a single optical
   height on a neutral plate and desaturated at rest, so 28 logos drawn by 28
   different studios read as one wall rather than a pile of stickers. Colour
   returns on hover.
   ---------------------------------------------------------------------- */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:1px;
 background:var(--hair);border:1px solid var(--hair)}
.wall > div{background:var(--panel);padding:18px 18px 16px;display:flex;flex-direction:column;
 gap:0;min-height:128px;position:relative;transition:background .25s}
.wall > div:hover{background:var(--panel-2)}

/* fixed-height mark bay: every logo gets the same optical weight */
.wall .mk{height:38px;display:flex;align-items:center;margin-bottom:13px}
.wall .mk img{height:100%;width:100%;max-width:132px;object-fit:contain;object-position:left center;
 filter:var(--logo-rest);opacity:.62;
 transition:filter .3s ease,opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.wall > div:hover .mk img{filter:var(--logo-hover);opacity:1;transform:scale(1.04)}
/* no logo on file: a foil rule holds the same bay so the grid stays on its baseline */
.wall > div:not(.logo) .mk-none{height:38px;display:flex;align-items:center;margin-bottom:13px}
.wall > div:not(.logo) .mk-none::before{content:"";width:30px;height:2px;background:var(--foil);opacity:.65}

.wall b{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.015em;
 line-height:1.16;color:var(--ink-hi);margin-bottom:6px}
.wall span{font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
 color:var(--ink-soft);line-height:1.45;display:block}
.wall .yrs{color:var(--gold-ink);margin-bottom:2px}
.band .wall{background:var(--hair-lt);border-color:var(--hair-lt)}
.band .wall > div{background:var(--band)}
.band .wall b{color:var(--band-ink-hi)}
.wallgroup + .wallgroup{margin-top:clamp(26px,3vw,40px)}
.wallgroup > .label{display:block;margin-bottom:14px}
@media(max-width:640px){
  .wall{grid-template-columns:1fr 1fr}
  .wall > div{padding:13px 13px 12px;min-height:112px}
  .wall .mk,.wall > div:not(.logo) .mk-none{height:28px;margin-bottom:10px}
  .wall .mk img{max-width:100px}
  .wall b{font-size:13.5px}
  .wall span{font-size:11px;letter-spacing:.04em}
}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(14px,1.6vw,20px)}
.rec{background:var(--panel);box-shadow:var(--lift);padding:30px 28px;display:flex;
 flex-direction:column;gap:18px}
.rec blockquote{font-family:var(--body);font-weight:400;font-size:16px;line-height:1.62;
 color:var(--ink);max-width:none;letter-spacing:0;flex:1;text-wrap:initial}
.rec .who{display:flex;flex-direction:column;gap:3px;padding-top:16px;
 border-top:1px solid var(--hair)}
.rec .who b{font-family:var(--display);font-size:16.5px;color:var(--ink-hi);letter-spacing:-.01em}
.rec .who .org{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.02em;
 text-transform:none;color:var(--gold-ink);margin-top:1px}
.rec .who span{font-family:var(--data);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
 color:var(--ink-soft);line-height:1.5}
.rec .rel{color:var(--gold-ink)}

/* ---------- lightbox paging ----------
   62 images across two galleries and the only way through was close, scroll,
   click. Arrow keys and on-screen controls, plus a position counter. */
dialog.lb .stage{display:flex;align-items:center;gap:clamp(6px,1.4vw,18px)}
dialog.lb .pg{color:var(--band-ink-hi);font-size:34px;line-height:1;padding:14px 10px;flex:none;
 transition:color .18s,opacity .18s}
dialog.lb .pg:hover{color:var(--gold)}
dialog.lb .pg[disabled]{opacity:.22;cursor:default}
dialog.lb .count{font-variant-numeric:tabular-nums;color:rgba(233,229,220,.6);flex:none}
@media(max-width:640px){
  dialog.lb .stage{position:relative}
  dialog.lb .pg{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
   background:rgba(11,11,12,.55);border-radius:50%;width:44px;height:44px;padding:0;font-size:26px}
  dialog.lb .pg.prev{left:6px}
  dialog.lb .pg.next{right:6px}
}

/* ---------- filter counts ---------- */
.filters button .n{opacity:.55;font-variant-numeric:tabular-nums;margin-left:6px}
.filters button[aria-pressed="true"] .n{opacity:.7}

/* ---------- mobile nav CTA ----------
   Below 1180px the header pill is hidden, which left phones with no call to
   action in the chrome at all. The menu carries it instead. */
.navcta{display:none}
@media(max-width:1180px){
  .navlinks li.navcta{display:block}
  .navlinks li.navcta a{color:var(--ink-hi);font-weight:700}
  .navlinks li.navcta a::after{content:" 97"}
}


/* ---------- breadcrumbs ---------- */
.crumb{padding:16px 0 0}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:9px;
 font-family:var(--data);font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.crumb li{display:flex;align-items:center;gap:9px;color:var(--ink-soft)}
.crumb li+li::before{content:"/";color:rgba(11,11,12,.28)}
.crumb a{color:var(--ink-soft);border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.crumb a:hover{color:var(--ink-hi);border-bottom-color:var(--gold)}
.crumb [aria-current]{color:var(--gold-ink)}

/* ---------- page-to-page pager ---------- */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);
 border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
@media(max-width:640px){.pager{grid-template-columns:1fr}}
.pager a{background:var(--panel);padding:26px clamp(20px,3vw,34px);display:flex;flex-direction:column;
 gap:6px;transition:background .2s}
.pager a:hover{background:var(--ground-dp)}
.pager a.next{text-align:right;align-items:flex-end}
.pager span{font-family:var(--data);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
 color:var(--gold-ink)}
.pager b{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.3vw,26px);
 letter-spacing:-.02em;color:var(--ink-hi);line-height:1.15}
.pager p{font-size:14px;color:var(--ink-soft);max-width:34ch}
.pager a.next p{margin-left:auto}

/* ---------- outcome figures ----------
   The two hard programme numbers were buried in a 14px grey paragraph. They
   are the strongest outcome claims on the site and now read like it, with the
   provenance caveat attached rather than hidden. */
.outcomes{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);
 border:1px solid var(--hair);margin-top:clamp(22px,2.6vw,32px)}
@media(max-width:640px){.outcomes{grid-template-columns:1fr}}
.outcomes div{background:var(--panel);padding:clamp(24px,3vw,34px)}
.outcomes b{display:block;font-family:var(--display);font-weight:700;
 font-size:clamp(38px,5.6vw,64px);letter-spacing:-.04em;line-height:1;margin-bottom:10px;
 font-variant-numeric:tabular-nums}
.outcomes strong{display:block;font-size:16px;color:var(--ink-hi);font-weight:700;margin-bottom:7px}
.outcomes p{font-size:14px;color:var(--ink-soft);line-height:1.55}
.provenance{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);
 font-family:var(--data);font-size:11px;letter-spacing:.08em;color:var(--gold-ink);line-height:1.6}

/* ---------- record table links ---------- */
tbody th a{border-bottom:1px solid rgba(193,151,47,.5);transition:border-color .18s,color .18s}
tbody th a:hover{color:var(--gold-ink);border-bottom-color:var(--gold)}


/* page must not scroll behind the open mobile menu */
body.navopen{overflow:hidden}

/* utility classes — these six declarations were repeated as inline style= on
   nine pages, which is what makes a no-build site drift. */
.mt-s{margin-top:20px}
.mt-m{margin-top:30px}
.mt-l{margin-top:clamp(28px,3.4vw,42px)}
.narrow{max-width:min(760px,100%)}
.prose{font-size:17.5px;line-height:1.75;display:flex;flex-direction:column;gap:20px}


/* ==========================================================================
   REV 02 · 2026-08-14 — dropdown nav, motion, theme toggle
   Everything here is CSS-driven. No library, no keyframe engine, nothing that
   blocks paint. The whole stylesheet is still one file and one request.
   ========================================================================== */

/* ---------- dropdown navigation ----------
   Nine flat links became five groups. Opens on hover and on focus, so it works
   from the keyboard, and each row carries the mark of what it leads to. */
.navlinks .grp{position:relative}
.navlinks .grp > button{display:flex;align-items:center;gap:7px;font-family:var(--data);
 font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
 padding:8px 0;border-bottom:1.5px solid transparent;transition:color .18s,border-color .18s;
 white-space:nowrap}
.navlinks .grp > button::after{content:"";width:5px;height:5px;border-right:1.4px solid currentColor;
 border-bottom:1.4px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
 transition:transform .24s}
.navlinks .grp:hover > button,.navlinks .grp:focus-within > button{color:var(--ink-hi);border-bottom-color:var(--gold)}
.navlinks .grp:hover > button::after,.navlinks .grp:focus-within > button::after{transform:rotate(225deg) translate(-2px,-2px)}
.dd{position:absolute;top:calc(100% + 14px);left:50%;border-radius:2px;transform:translateX(-50%) translateY(-6px);
 min-width:296px;background:var(--panel);box-shadow:var(--lift-hi);border:1px solid var(--hair);
 padding:8px;opacity:0;visibility:hidden;pointer-events:none;
 transition:opacity .2s ease,transform .24s cubic-bezier(.2,.7,.2,1),visibility .2s}
.navlinks .grp:hover .dd,.navlinks .grp:focus-within .dd{opacity:1;visibility:visible;
 pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dd::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.dd a{display:flex;align-items:center;gap:13px;padding:9px 10px;border-bottom:0;
 transition:background .16s}
.dd a:hover{background:var(--ground)}
.dd .ic{width:44px;height:44px;flex:none;overflow:hidden;background:var(--ground-dp);
 border:1px solid var(--hair)}
.dd .ic img{width:100%;height:100%;object-fit:cover;display:block;
 filter:grayscale(1) contrast(1.05);opacity:.9;transition:filter .28s,opacity .28s,transform .35s cubic-bezier(.2,.7,.2,1)}
.dd a:hover .ic img{filter:grayscale(0);opacity:1;transform:scale(1.07)}
.dd b{display:block;font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.01em;
 color:var(--ink-hi);line-height:1.2}
.dd i{display:block;font-style:normal;font-family:var(--data);font-size:11px;letter-spacing:.07em;
 color:var(--ink-soft);margin-top:2px;text-transform:none}

/* ---------- theme toggle ---------- */
.themebtn{width:38px;height:38px;border:1.5px solid var(--hair);display:flex;align-items:center;
 justify-content:center;flex:none;transition:border-color .2s,transform .2s}
.themebtn:hover{border-color:var(--gold);transform:translateY(-1px)}
.themebtn svg{width:17px;height:17px;stroke:var(--ink-hi);fill:none;stroke-width:1.6;stroke-linecap:round}
.themebtn .moon{display:none}
:root[data-theme="dark"] .themebtn .sun{display:none}
:root[data-theme="dark"] .themebtn .moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .themebtn .sun{display:none}
  :root:not([data-theme="light"]) .themebtn .moon{display:block}
}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;
 transform:scaleX(0);background:var(--foil);z-index:120;pointer-events:none}

/* ---------- rotating headline ----------
   One line of the hero cycles through the shows. Pure CSS keyframes on a fixed
   set of spans; no JS, no layout thrash, and it stops dead under
   prefers-reduced-motion. */
.rot{display:inline-grid;vertical-align:bottom}
.rot > span{grid-area:1/1;opacity:0;transform:translateY(.32em);
 animation:rotcycle 12s infinite;background:var(--foil);-webkit-background-clip:text;
 background-clip:text;color:transparent;white-space:nowrap}
.rot > span:nth-child(1){animation-delay:0s}
.rot > span:nth-child(2){animation-delay:3s}
.rot > span:nth-child(3){animation-delay:6s}
.rot > span:nth-child(4){animation-delay:9s}
@keyframes rotcycle{
  0%{opacity:0;transform:translateY(.32em)}
  3%,22%{opacity:1;transform:translateY(0)}
  25%,100%{opacity:0;transform:translateY(-.28em)}
}

/* ---------- marquee trust strip ----------
   Duplicated track translated by exactly -50%, so the loop is seamless and the
   whole thing is one compositor-layer transform. */
.strip{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
 padding:20px 0;overflow:hidden;position:relative}
.strip::before,.strip::after{content:"";position:absolute;top:0;bottom:0;width:clamp(40px,8vw,120px);
 z-index:2;pointer-events:none}
.strip::before{left:0;background:linear-gradient(90deg,var(--ground),transparent)}
.strip::after{right:0;background:linear-gradient(270deg,var(--ground),transparent)}
.strip-track{display:flex;align-items:center;gap:clamp(34px,5vw,72px);width:max-content;
 animation:slide 46s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-track img{height:26px;width:auto;max-width:118px;object-fit:contain;flex:none;
 filter:var(--logo-rest);opacity:.55;transition:opacity .3s,filter .3s}
.strip-track img:hover{opacity:1;filter:var(--logo-hover)}
.strip-track span{font-family:var(--data);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
 color:var(--ink-soft);flex:none;white-space:nowrap}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- counters ---------- */
.fig b[data-count]{font-variant-numeric:tabular-nums}

/* ---------- magnetic-ish CTA sheen ---------- */
.pill.foilbtn{position:relative;overflow:hidden}
.pill.foilbtn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
 transform:skewX(-18deg);transition:left .55s cubic-bezier(.2,.7,.2,1)}
.pill.foilbtn:hover::after{left:130%}

/* ---------- card sheen on the dark figures ---------- */
.fig{position:relative;overflow:hidden}
.fig::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 0%,
 rgba(193,151,47,.16),transparent 70%);opacity:0;transition:opacity .35s}
.fig:hover::after{opacity:1}

@media(prefers-reduced-motion:reduce){
  .strip-track{animation:none}
  .rot > span{animation:none;opacity:0}
  .rot > span:first-child{opacity:1;transform:none}
  .pill.foilbtn::after{display:none}
  .progress{display:none}
}

/* visually hidden but read aloud: the rotating span is decorative, the real
   phrase still has to reach a screen reader and a search crawler */
.vh-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0 0 0 0);white-space:nowrap;border:0}