/* Clever Edits — prototype stylesheet */
:root{
  --ground:#08090C; --panel:#101218; --hair:#1E2129; --hair2:#262B34;
  --ink:#EDEEF1; --ink2:#A8AFBC; --ink3:#99A0AE; --ink4:#5E6472;
  --accent:#A3ACD9; --accent2:#C6CCE9; --flag:#C08A4A; --flagline:#5A4326;
  --pad:72px; --maxw:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto}
.px{padding-left:var(--pad);padding-right:var(--pad)}

/* type */
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
h1{font-size:clamp(34px,5.2vw,62px);font-weight:700;letter-spacing:-.032em;line-height:1.06;margin:0;text-wrap:balance}
h2{font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-.024em;line-height:1.2;margin:0;text-wrap:balance}
h3{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.02em;margin:0}
p{margin:0}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink2);max-width:680px;margin-inline:auto}
.body{font-size:clamp(15.5px,1.15vw,17px);line-height:1.72;color:var(--ink2);max-width:72ch}
.small{font-size:14.5px;line-height:1.6;color:var(--ink4)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(8,9,12,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad)}
/* the wordmark: IBM Plex Sans Condensed, the sans of the family already carrying every
   label on the site. Narrower drawing and tighter tracking than the Archivo it replaces. */
.brand{display:flex;align-items:center;gap:11px;font-size:15.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-family:"IBM Plex Sans Condensed","IBM Plex Sans",Archivo,sans-serif}
.links{display:flex;align-items:center;gap:36px;font-size:14px;font-weight:500;color:var(--ink3)}
.links a:hover{color:var(--ink)}
.links a{position:relative;padding-bottom:4px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.links a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.links a.on::before{content:"";position:absolute;left:-11px;top:50%;transform:translateY(-60%);width:4px;height:4px;border-radius:50%;background:var(--accent)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--ink)}


/* section sub-nav — appears only inside a section, so the parent page gets an
   "Overview" item and the children stop being dead ends */
/* sticks directly under the header on every services page. --navh is measured in JS
   so the offset cannot drift when the header height changes at a breakpoint. */
.subnav{position:sticky;top:var(--navh,65px);z-index:40;border-bottom:1px solid var(--hair);background:rgba(12,14,19,.92);backdrop-filter:blur(10px)}
.subnav nav{display:flex;gap:30px;overflow-x:auto;scrollbar-width:none;padding:15px 0}
.subnav nav::-webkit-scrollbar{display:none}
.subnav a{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink4);white-space:nowrap;padding-bottom:5px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.subnav a:hover{color:var(--ink2)}
.subnav a.on{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:560px){.subnav nav{gap:20px}.subnav a{font-size:10.5px;letter-spacing:.1em}}


/* Instagram — the public home for motion, so it is present on every page */
.nav-right{display:flex;align-items:center;gap:0}
.iglink{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-left:14px;
  color:var(--ink3);border:1px solid transparent;transition:color .2s,border-color .2s,background .2s}
.iglink:hover{color:var(--accent);border-color:var(--hair2);background:var(--panel)}
.iglink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.igfoot,.igcontact{display:inline-flex;align-items:center;gap:9px;transition:color .2s}
.igfoot{color:var(--ink4)}
.igfoot:hover{color:var(--accent)}
.igcontact{font-size:16px;font-weight:500;color:var(--ink)}
.igcontact:hover{color:var(--accent)}
@media (max-width:760px){.iglink{margin-left:0;margin-right:2px}}

/* sections */
section{border-top:1px solid var(--hair)}
section:first-of-type{border-top:0}
.sec{padding:clamp(56px,7vw,92px) var(--pad)}
.cols{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
/* A lane whose narrow column carries a second element under the eyebrow. Row gap, not the
   column gap, which is sized for the space between columns and is far too big vertically.
   The list is pinned across both rows so row one is only as tall as the eyebrow - otherwise
   row two starts below the whole list and the picture lands at the foot of the section. */
.cols.whyfor{row-gap:18px}
.cols.whyfor>.lanelist{grid-column:2;grid-row:1/span 2}
/* One column: the pin comes off and the picture falls last, under the final reason. */
@media (max-width:1000px){.cols.whyfor>.lanelist{grid-column:auto;grid-row:auto}}
/* Same trick for a case-study block with a picture beside the copy. */
.cols.sidepic>.stack:nth-child(2){grid-column:2;grid-row:1/span 2}
@media (max-width:1000px){.cols.sidepic>.stack:nth-child(2){grid-column:auto;grid-row:auto}}

/* Two ultrawide renders. Side by side while there is room for them. */
.ddpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px}
@media (max-width:700px){.ddpair{grid-template-columns:1fr;gap:10px}}
.stack{display:flex;flex-direction:column;gap:22px}

/* placeholders */
.ph{background:var(--panel);border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.ph.has{border-color:transparent}
.ph img,.ph video{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){.ph video{display:none}.ph:has(video){background-size:cover;background-position:center}}
.ph span{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);line-height:1.9;padding:0 18px}

/* hero */
.hero{position:relative;height:clamp(460px,72vh,760px)}
.hero .ph{position:absolute;inset:0;border-left:0;border-right:0}
/* two layers: a top-down gradient for the whole frame, and a heavier foot so the
   eyebrow and headline stay legible over bright screen content in the photo */
.hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,12,.45) 0%,rgba(8,9,12,.10) 30%,rgba(8,9,12,.72) 62%,rgba(8,9,12,.97) 100%),linear-gradient(90deg,rgba(8,9,12,.55) 0%,rgba(8,9,12,.12) 46%,rgba(8,9,12,0) 70%)}
.hero .in{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(34px,5vw,60px);display:flex;flex-direction:column;gap:20px}


/* back control on case-study heroes — quiet until you look for it */
.backlink{position:absolute;top:26px;left:var(--pad);z-index:5;display:inline-flex;align-items:center;gap:9px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,238,241,.6);background:rgba(8,9,12,.4);border:1px solid rgba(237,238,241,.13);
  padding:9px 14px 9px 11px;backdrop-filter:blur(6px);transition:color .2s,border-color .2s,background .2s}
.backlink svg{transition:transform .2s}
.backlink:hover{color:var(--ink);border-color:rgba(163,172,217,.55);background:rgba(8,9,12,.68)}
.backlink:hover svg{transform:translateX(-3px)}
.backlink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:560px){.backlink{top:16px;font-size:10px;letter-spacing:.1em;padding:8px 11px 8px 9px;gap:7px}}

/* buttons */
.btn{display:inline-block;background:var(--accent);color:#08090C;font-size:15px;font-weight:700;padding:16px 32px;border:1px solid var(--accent);cursor:pointer}
.btn:hover{background:var(--accent2);border-color:var(--accent2)}
.btn2{display:inline-block;border:1px solid #4C586B;color:var(--ink);font-size:15px;font-weight:600;padding:15px 30px;cursor:pointer}
.btn2:hover{border-color:var(--accent);color:var(--accent)}
.btnrow{display:flex;gap:14px;flex-wrap:wrap}
.link{font-size:15px;font-weight:600;color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:3px}

/* tags + lanes */
.tags{display:flex;gap:7px;flex-wrap:wrap}
.tag{border:1px solid var(--hair);color:var(--ink3);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px}
.lanes{display:flex;border-left:1px solid var(--hair)}
.lane{flex:1 1 0;padding:20px 24px;border-right:1px solid var(--hair);border-top:2px solid #171A21;display:flex;flex-direction:column;gap:6px;transition:border-color .35s,color .35s}
.lane b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#2B2F38;font-weight:500;transition:color .35s}
.lane i{font-style:normal;font-size:13px;color:#22262E;transition:color .35s}
.lane.on{border-top-color:var(--accent)}
.lane.on b{color:var(--accent)}
.lane.on i{color:var(--ink3)}

/* carousel */
.car{overflow:hidden;touch-action:pan-y;overscroll-behavior-x:contain}
.track{display:flex;gap:24px;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}
.slide{flex:0 0 min(1000px,82vw);display:flex;flex-direction:column;gap:20px;transition:opacity .4s}
.slide:not(.cur){opacity:.34}
/* smaller on a phone so the Plan/Make/Run/Post chips and the dots below the
   carousel arrive on screen without hunting for them */
.slide .ph{height:clamp(180px,36vw,520px)}
.slidemeta{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.dots{display:flex;gap:7px;align-items:center}
.dot{width:8px;height:8px;border-radius:4px;background:#2B2F38;border:0;padding:0;cursor:pointer;transition:width .3s,background .3s}
.dot.on{width:28px;background:var(--accent)}
.arrows{display:flex;gap:10px}
.arw{width:44px;height:44px;border:1px solid var(--hair2);background:none;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.arw:hover{border-color:var(--accent);color:var(--accent)}

/* work index rows */
.rowhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:0 var(--pad) 18px}
.filternote{display:flex;align-items:baseline;gap:14px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4)}
.clearf{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;border-bottom:1px solid currentColor}
.clearf:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lanefilters{display:flex;gap:10px;flex:0 0 auto;align-items:flex-end}
/* the four buttons read as labels until something says they are controls */
.fhint{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);padding:7px 4px 7px 0;white-space:nowrap}
/* The hint used to be dropped on a phone, which left four words under four rules and
   nothing saying they were controls - no hover to discover it with either. It now sits
   on its own line above the buttons instead. */
@media (max-width:560px){.lanefilters{flex-wrap:wrap}.fhint{flex:0 0 100%;padding:0 0 3px}}
.lanefilter{width:46px;padding:7px 0;background:none;border:0;border-top:2px solid #171A21;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);cursor:pointer;transition:color .15s ease,border-color .15s ease}
.lanefilter:hover{color:var(--ink2);border-top-color:#2B3140}
.lanefilter.on{color:var(--accent);border-top-color:var(--accent)}
.lanefilter:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrow[hidden]{display:none}
.wrow{display:grid;grid-template-columns:46px minmax(0,1fr) 214px 96px;gap:28px;padding:30px 0;border-bottom:1px solid var(--hair);align-items:start}
.wrow .n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:#4A5162}
.wrow h3{font-size:25px}
.mini{display:flex;gap:10px}
.mini span{width:46px;text-align:center;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 0;color:#2B2F38;border-top:2px solid #171A21}
.mini span.on{color:var(--accent);border-top-color:var(--accent)}
.yr{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--ink4);text-align:right}

/* list rows */
.lanelist{display:flex;flex-direction:column}
.lanerow{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(16px,3vw,40px);padding:28px 0;border-bottom:1px solid var(--hair)}
.lanerow:last-child{border-bottom:0}
.lanerow h3{font-size:26px}
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:28px;padding:26px 0;border-bottom:1px solid var(--hair)}
.step:last-child{border-bottom:0}
.step .n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--accent)}
.items{display:flex;flex-direction:column;gap:11px}
.items div{font-size:16px;color:var(--ink2)}

/* spec bar */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;padding:34px var(--pad);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.spec div{display:flex;flex-direction:column;gap:9px}
.spec b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8891A0;font-weight:400}
.spec i{font-style:normal;font-size:15.5px;font-weight:500;color:var(--ink)}

/* people */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
/* Both portraits have their subject on the left of frame looking right. Side by side that
   leaves the right-hand one looking off the edge of the page; stacked on a phone it is the
   same lean twice. Mirroring the second turns them to face each other, and each other is
   the point. Applied in CSS rather than baked in, so the file on disk is still the photo. */
.ph.flipx img{transform:scaleX(-1)}
.person{display:flex;flex-direction:column;gap:16px}
.person .ph{height:auto;aspect-ratio:4/3}
.loc{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4)}

/* ticker */
.ticker{position:relative;overflow:hidden;height:42px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker ul{display:flex;gap:26px;align-items:center;list-style:none;margin:0;padding:0;position:absolute;top:8px;white-space:nowrap;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:15px;letter-spacing:.06em;color:#C8CDD6;animation:tick 42s linear infinite}
.ticker li::after{content:"•";color:var(--accent);margin-left:26px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker ul{animation:none}.track{transition:none}}

/* form */
.form{display:flex;flex-direction:column;gap:18px;max-width:780px}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fl{display:flex;flex-direction:column;gap:9px}
.fl b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8891A0;font-weight:400}
.field{border:1px solid var(--hair2);padding:15px 18px;font-size:15px;color:var(--ink);background:#0C0E13;font-family:inherit;width:100%}
.field::placeholder{color:var(--ink4)}
textarea.field{min-height:132px;resize:vertical}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1px solid var(--hair2);background:#0C0E13;color:var(--ink3);padding:11px 18px;font-size:15px;font-family:inherit;cursor:pointer}
.chip.on{border-color:var(--accent);color:var(--accent)}

/* flags */
.flag{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--flag);border:1px dashed var(--flagline);padding:11px 15px;line-height:1.9;align-self:flex-start}
.prov{border-left:2px dashed var(--flagline);padding-left:16px;color:#7A6440}

/* cta + footer */
.cta{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;padding:clamp(52px,6vw,84px) var(--pad)}
footer{border-top:1px solid var(--hair);padding:30px var(--pad) 44px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.1em;color:var(--ink4)}

/* stills */
.stills{display:flex;flex-direction:column;gap:20px}
.stills .big{height:auto;aspect-ratio:3/2}
.stills .big:has(video){aspect-ratio:16/9}
.s3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nextcase{display:flex;flex-direction:column;gap:12px;color:inherit;text-decoration:none}
.nextcase .eyebrow{color:var(--ink4);transition:color .18s ease}
.nextcase h2{display:flex;align-items:center;gap:14px;transition:color .18s ease}
.nextcase svg{color:var(--accent);flex:0 0 auto;transition:transform .22s ease}
.nextcase:hover .eyebrow,.nextcase:focus-visible .eyebrow{color:var(--accent)}
.nextcase:hover h2,.nextcase:focus-visible h2{color:var(--accent)}
.nextcase:hover svg,.nextcase:focus-visible svg{transform:translateX(5px)}
.nextcase:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
@media (prefers-reduced-motion:reduce){.nextcase svg{transition:none}.nextcase:hover svg{transform:none}}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.lanepic{margin:8px 0 0;display:flex;flex-direction:column;gap:10px}
.lanepic figcaption{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink4)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.trio figure{margin:0;display:flex;flex-direction:column;gap:10px}
.trio .ph{height:auto;aspect-ratio:3/2}
.trio .ph:has(video){aspect-ratio:16/9}
.trio figcaption{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);display:flex;flex-direction:column;gap:5px}
.trio figcaption b{color:var(--accent);font-weight:500}
.trio figcaption span{letter-spacing:.06em;text-transform:none;font-size:12.5px;color:var(--ink4);line-height:1.5}
.pair figure,.solo figure{margin:0;display:flex;flex-direction:column;gap:10px}
.pair .ph{height:clamp(200px,30vw,430px)}
.pair figcaption,.solo figcaption{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);display:flex;gap:9px;align-items:baseline}
.pair figcaption b,.solo figcaption b{color:var(--accent);font-weight:500;white-space:nowrap}
/* The label stays mono caps; the sentence beside it does not. .trio already worked this
   way - pair and solo never got the same rule, so a caption of any length came out as a
   wall of tracked-out uppercase, and one starting with a name read as part of the label. */
.pair figcaption span,.solo figcaption span{letter-spacing:.06em;text-transform:none;font-size:12.5px;color:var(--ink4);line-height:1.5}
.s3 .ph{height:auto;aspect-ratio:3/2}
.s3 .ph:has(video){aspect-ratio:16/9}

/* responsive */
@media (max-width:1000px){
  :root{--pad:26px}
  .cols{grid-template-columns:1fr;gap:20px}
  /* two-column page heads collapse — these carry inline grid styles, hence the override */
  .workhead{grid-template-columns:1fr !important;gap:22px !important}
  .pair{grid-template-columns:1fr !important}
  .trio{grid-template-columns:1fr !important}
  .trio .ph{height:clamp(200px,34vw,340px)}
  .lanerow{grid-template-columns:1fr;gap:8px}
  .rowhead{flex-wrap:wrap;gap:14px}
  .lanefilters{width:100%;gap:8px}
  .lanefilter{flex:1 1 0;width:auto;padding:11px 0}
  .wrow{grid-template-columns:32px minmax(0,1fr);gap:16px}
  .wrow .mini,.wrow .yr{grid-column:2}
  .wrow .yr{text-align:left}
  .lanes{flex-wrap:wrap}
  .lane{flex:1 1 45%}
  .s3{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
}
/* mobile lane bar: labels only, one line, so the state change is legible while scrolling */
@media (max-width:900px){
  .lanes{flex-wrap:nowrap}
  .lane{flex:1 1 0;padding:12px 2px;align-items:center;text-align:center;gap:0}
  .lane i{display:none}
  .lane b{font-size:10px;letter-spacing:.1em}
}
@media (max-width:760px){
  :root{--pad:20px}
  .links{display:none}
  .links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--ground);border-bottom:1px solid var(--hair)}
  .links.open a{padding:16px 28px;border-top:1px solid var(--hair);border-bottom:0;width:100%}
  .links.open a.on{border-left:3px solid var(--accent);padding-left:25px}
  .links.open a.on::before{display:none}
  .burger{display:flex}
  .nav-in{position:relative}
  .slide{flex:0 0 86vw}
  .spec{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .cta{gap:24px}
  .stills{gap:12px}
  .s3{gap:12px}
  .pair{gap:14px}
}
@media (max-width:430px){
  :root{--pad:16px}
  .lane b{font-size:9px;letter-spacing:.06em}
  .wrow{gap:12px}
}

/* The TD case hero render is 3.09:1. Cropping it to the standard opening would throw
   away most of the frame, so that page gets an opening cut to the shape of its own art. */
/* the TD hero is a 3.09:1 graphic with the shield dead centre. The frame takes the
   graphic's own shape, so object-fit:cover has nothing left to crop at any width. */
.hero.wide{height:clamp(420px,34vw,560px)}

/* A single captioned frame at full width. Same component as the proof pair, one column. */
.solo{display:grid;grid-template-columns:minmax(0,1fr)}
.solo .ph{height:auto;aspect-ratio:3/2}
.solo .ph:has(video){aspect-ratio:16/9}

/* ── Narrow screens: stop cropping the picture to fit the headline ───────────────
   A 16:9 frame inside a 390×606 hero box shows 36% of itself, and the 3.09:1 TD
   render shows 30%. The work is the point, so below 760px the hero stops being a
   backdrop with type on it and becomes a frame with type under it: the media keeps
   its own shape, the scrim goes (nothing to sit over any more), and the eyebrow,
   headline and tags run on the page ground beneath. */
@media (max-width:760px){
  .hero{height:auto;display:flex;flex-direction:column;padding-bottom:clamp(26px,5vw,36px)}
  .hero .ph{position:relative;inset:auto;height:auto;aspect-ratio:16/9;order:-1}
  .hero.wide .ph{aspect-ratio:2616/846;min-height:165px}
  .hero .scrim{display:none}
  .hero .in{position:static;margin:0;align-self:stretch;padding:clamp(22px,5vw,30px) var(--pad) 0;gap:16px}
  .backlink{position:static;align-self:flex-start;margin:clamp(18px,4vw,24px) var(--pad) 0;order:0}

  /* Same reasoning for every other framed asset: shape over fixed height. */
  .pair .ph,.solo .ph,.trio .ph,.s3 .ph,.stills .big,.slide .ph{
    height:auto;aspect-ratio:3/2}
  .pair .ph:has(video),.solo .ph:has(video),.trio .ph:has(video),.s3 .ph:has(video),
  .stills .big:has(video),.slide .ph:has(video){aspect-ratio:16/9}
}

/* Slide titles open their case study. The arrow is always visible, not hover-only —
   an affordance nobody can see is the bug, not the fix. */
.slidelink{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.slidelink svg{color:var(--accent);transition:transform .2s}
.slidelink:hover{color:var(--accent)}
.slidelink:hover svg{transform:translateX(4px)}
.slidelink:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Home opens on the mark. A logo animation is not wallpaper: cropped to a hero band and
   dimmed under the scrim it stops being a logo and becomes texture. So this hero shows
   the whole frame, unscrimmed, and the headline runs underneath it on the page ground —
   the same arrangement the narrow-screen rule already uses, applied at every width. */
.hero.mark{height:auto;display:flex;flex-direction:column;padding-bottom:clamp(30px,4vw,44px)}
.hero.mark .ph{position:relative;inset:auto;height:clamp(260px,36vw,520px);order:-1;background:var(--ground)}
.hero.mark .ph video{object-fit:contain}
.hero.mark .scrim{display:none}
.hero.mark .in{position:static;margin:0;align-self:stretch;padding:clamp(26px,4vw,40px) var(--pad) 0;gap:20px}

/* Two portraits side by side until the column is genuinely too narrow for one. */
@media (max-width:640px){.people{grid-template-columns:1fr}}

/* PNGs on this site are cut-out artwork; JPEGs are photographs. A cut-out is an object on
   the page, not a picture in a frame, so it is contained rather than cropped. */
.ph img[src$=".png"]{object-fit:contain}

/* A lane can carry one frame or four. Grid, so the row divides evenly whatever the count,
   and each frame keeps its shape rather than a fixed height. */
.lanepics{display:grid;gap:14px;margin-top:8px}
.lanepic{margin:0;display:flex;flex-direction:column;gap:9px}
.lanepics .ph{height:auto;aspect-ratio:16/9}
@media (max-width:700px){.lanepics{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Cut-outs sit on the page, not in a frame. Marked on the wrapper so the rule survives
   the bundler rewriting every src to a data URI. */
.ph.cut{background:none;border:0}
.ph.cut img{object-fit:contain}

/* Two frames of equal weight. Not a big one plus a stray third-width tile. */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.duo .ph{height:auto;aspect-ratio:3/2}
.duo .ph:has(video){aspect-ratio:16/9}
@media (max-width:640px){.duo{grid-template-columns:1fr}}

/* one element, two placements: beside the copy on a wide screen, at the foot of the
   page on a narrow one. Only one is ever rendered, and the image is fetched once. */
.only-narrow{display:none}
@media (max-width:760px){
  .only-wide{display:none}
  .only-narrow{display:block}
}

/* form status line: quiet until it has something to say */
.formnote{margin:0;font-size:14.5px;color:var(--muted);min-height:1.2em}
.formnote.ok{color:var(--accent)}
.formnote.err{color:#E08585}
.form.sending .btn{opacity:.55;pointer-events:none}

/* the people the rooms were full of - an even strip that reflows as more arrive */
.roomshots{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px}
/* On a phone the strip pushes the closing CTA off the bottom of the page, so it is
   desktop-only. The venue ticker above it still carries the point on every width. */
@media (max-width:760px){.roomstrip{display:none}}