/* ==========================================================================
   OPTION A. Corporate polish.
   Loaded AFTER site.css. Same architecture as the live page, restyled.
   Palette shifts warm gold to corporate navy, display type comes down and
   moves to sentence case, motion is calmed, numbers come back.
   ========================================================================== */

:root{
  /* cooler paper, corporate rather than warm editorial */
  --white:#FFFFFF;
  --off:#F5F6F7;
  --off-2:#E7EAED;
  --ink:#101418;
  --ink-2:#39424D;
  --ink-3:#5F6975;
  --rule:#DCE0E5;
  --rule-2:#EAEDF0;

  --dark:#0B1522;
  --dark-2:#12203200;          /* unused, kept for clarity */
  --line-dark:#1E3047;
  --on-dark:#EEF1F4;
  --on-dark-2:#9AA7B6;
  --on-dark-3:#748396;

  /* navy replaces gold everywhere the base sheet used it */
  --gold:#14304F;              /* text weight, 8.9:1 on white */
  --gold-rule:#1E4470;
  --gold-on-dark:#8FB0D6;
}
.sec--dark,.split{--dark-2:#122032}

/* ---------- typography: down a third, sentence case ---------- */
h1,h2,h3,h4{text-transform:none;letter-spacing:-.021em;font-weight:600}
.hero h1{font-size:clamp(1.9rem,4.6vw,3.2rem);max-width:18ch;font-weight:600}
@media (min-width:900px){.hero h1{font-size:clamp(2.2rem,3.6vw,3.2rem)}}
.sh h2,.mid h2,.caps h2,.split h2,.talk h2{font-size:clamp(1.45rem,3vw,2.1rem)}
.three h3,.icons h3,.flow h3{font-size:1.02rem;letter-spacing:-.012em}
.eb{letter-spacing:.16em;font-size:.66rem}

/* ---------- hero: lighter, less cinematic ---------- */
.hero{min-height:28rem}
@media (min-width:700px){.hero{min-height:min(66svh,600px)}}
.hero__scrim{background:linear-gradient(178deg,rgba(9,17,28,.42) 0 22%,rgba(9,17,28,.3) 54%,rgba(9,17,28,.88) 100%)}
@media (min-width:900px){.hero__scrim{background:linear-gradient(100deg,rgba(9,17,28,.9) 0 36%,rgba(9,17,28,.6) 64%,rgba(9,17,28,.3) 100%)}}

/* ---------- the numbers come back ---------- */
.facts{background:var(--dark);color:var(--on-dark);border-top:1px solid var(--line-dark)}
.facts ul{display:grid;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.facts ul{grid-template-columns:repeat(4,1fr)}}
.facts li{padding:1.5rem 1rem 1.5rem 0;border-bottom:1px solid var(--line-dark)}
@media (min-width:900px){.facts li{border-bottom:0;border-right:1px solid var(--line-dark);padding:1.75rem 1.5rem 1.75rem 0}.facts li:last-child{border-right:0}}
@media (max-width:899px){.facts li:nth-last-child(-n+2){border-bottom:0}}
.facts .fig{font-family:var(--disp);font-weight:600;font-size:clamp(1.4rem,3.6vw,2.1rem);letter-spacing:-.03em;display:block;line-height:1;font-variant-numeric:tabular-nums}
.facts .lab{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark-3);margin-top:.6rem;display:block}

/* ---------- categories: caption below, not a shop tile ---------- */
.tile{background:var(--white);border:1px solid var(--rule)}
.tile img{aspect-ratio:4/3}
.tile__scrim{display:none}
.tile__body{position:static;padding:1.1rem 1.3rem 1.4rem;background:var(--white)}
.tile__body .eb{color:var(--gold);margin-bottom:.45rem}
.tile__body h3{color:var(--ink);font-size:1.15rem}
.tile__body p{color:var(--ink-3);max-width:36ch}
@media (hover:hover){.tile:hover img{transform:none}}
.tile:hover{transform:none}

/* ---------- calmer surfaces ---------- */
.btn{min-height:48px;letter-spacing:.13em}
.btn--solid{background:var(--on-dark);color:var(--dark)}
.btn--solid:hover{background:#fff}
.btn--dark:hover{background:var(--gold-rule)}
.icons svg{stroke:var(--on-dark-2)}
.icons>div:hover svg *{stroke-dashoffset:0}     /* no draw effect */
.blogo img{opacity:1}
.mail__addr{border-bottom-color:var(--gold-rule)}
.prog i{background:var(--gold-rule)}

/* placeholder markers sitting on a dark ground need the light variant */
.facts .tbc,.chero__txt .tbc,.glance .tbc,.ihero .tbc,.careers .tbc{color:var(--flag-dark)}



/* ---------- critical path, replaces the five flat boxes ---------- */
.path{position:relative;display:grid;gap:1.6rem;margin:0;padding:0;list-style:none}
@media (min-width:860px){.path{grid-template-columns:repeat(5,1fr);gap:0}}
.path::before{content:'';position:absolute;background:var(--rule)}
@media (min-width:860px){.path::before{left:11px;right:11px;top:11px;height:1px}}
@media (max-width:859px){.path::before{left:11px;top:11px;bottom:11px;width:1px}}
.path li{position:relative}
@media (min-width:860px){.path li{padding:2.6rem 1.5rem 0 0}}
@media (max-width:859px){.path li{padding:0 0 0 2.6rem}}
.path__node{position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;background:var(--white);
  border:1px solid var(--gold-rule);display:grid;place-items:center}
.path__node::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--gold-rule)}
.sec--alt .path__node{background:var(--off)}
.path .n{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--gold);display:block;margin-bottom:.35rem}
.path h3{font-size:1.02rem;margin-bottom:.3rem}
.path p{color:var(--ink-3);font-size:.85rem;max-width:24ch}



/* ---------- retail partners ----------
   One flat row of ten marks, no tiers. DL1961 and Warp + Weft sit with the
   retailers by decision, so nothing here distinguishes them.
   An open row of marks, no cells. The phone problem was that eight
   wordmarks of wildly different widths will not tile into tidy columns at any
   size. Below the navigation breakpoint they scroll as a single file ticker
   instead of wrapping into ragged lines: ten marks in a tablet width container
   wrapped to three.
   The second row is a duplicate: translating the track by exactly half its
   width lands mark one where mark one already was, so the loop is seamless. */
.partners__vp{width:100%;overflow:hidden}
.partners__track{display:flex;width:max-content}
.partners__row{display:flex;align-items:center;gap:2rem;margin:0;padding:0 1rem;list-style:none}
.partners__row li{display:flex;align-items:center;flex:none}
/* These marks are viewBox-only SVGs with no intrinsic width. Sizing them with
   max-height while width and height stay auto collapses every one of them to a
   zero box, so the row silently lost five of its eight logos. An explicit
   height makes the browser derive the width from the ratio instead. */
.partners__row img{height:22px;width:auto;max-width:none;opacity:.8;transition:opacity .25s ease}
@media (min-width:480px){.partners__row img{height:24px}}
.partners__row li:hover img{opacity:1}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:1023px){
  /* the marks fade out at both edges so the loop has no hard seam */
  .partners__vp{-webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
                        mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
  .partners__track{animation:ticker 42s linear infinite}
}
@media (min-width:1024px){
  /* The row is a flex item, so without an explicit width it sizes to
     max-content and never wraps: the first marks were being clipped off the
     left edge. Pinning it to the track width gives wrapping something to
     wrap against. */
  .partners__vp{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .partners__track{width:100%;justify-content:center}
  .partners__dup{display:none}
  .partners__row{width:100%;flex-wrap:wrap;justify-content:center;gap:clamp(1.3rem,2.8vw,2.5rem);padding:0}
  .partners__row img{height:26px}
}

/* ---------- boot sequence ----------
   site.css lifted the curtain by animating clip-path out of its initial value
   of `none`. That pair is not interpolable, so the curtain never wiped: it held
   opaque, dropped its wordmark, and then vanished in one frame, which is the
   dark flash. clip-path is also a paint property, so even done correctly it
   repaints the full viewport every frame. The lift is a transform instead, which
   the compositor can run on its own thread and cannot fail to interpolate.
   The bar is also allowed to finish: it used to be pulled off screen at roughly
   half, which is why it read as rendered rather than animated. */
.boot--a{gap:1.1rem;will-change:transform;animation:bootFailA .5s ease 5.5s forwards}
.boot--a .boot__mark{animation:bootInA .6s cubic-bezier(.22,.61,.36,1) .12s forwards}
.boot--a .boot__rule{width:min(230px,56vw);height:1px;background:var(--line-dark);
  transform:scaleX(0);animation:ruleIn .6s cubic-bezier(.22,.61,.36,1) .42s forwards}
.boot--a .boot__bar{opacity:0;animation:bootInA .4s ease .5s forwards}
.boot--a .boot__bar i{width:100%;transform:scaleX(0);transform-origin:0 50%;
  animation:fillA .85s cubic-bezier(.3,.7,.3,1) .5s forwards}
.boot--a.is-ready .boot__bar i{animation:fillB .32s cubic-bezier(.3,.7,.3,1) forwards}
.boot--a.is-lifting{animation:liftA .78s cubic-bezier(.65,0,.2,1) forwards}
.boot--a.is-lifting .boot__mark,
.boot--a.is-lifting .boot__rule,
.boot--a.is-lifting .boot__bar{animation:awayA .3s ease forwards}
@keyframes bootInA{to{opacity:1;transform:none}}
@keyframes ruleIn{to{transform:scaleX(1)}}
@keyframes fillA{to{transform:scaleX(.82)}}
@keyframes fillB{from{transform:scaleX(.82)}to{transform:scaleX(1)}}
@keyframes awayA{to{opacity:0;transform:translateY(-7px)}}
@keyframes liftA{to{transform:translateY(-100%)}}
@keyframes bootFailA{to{opacity:0;visibility:hidden}}

/* The hero now arrives with the wipe rather than a second after it. These stay
   plain CSS animations with no class gate, so the headline is never dependent
   on a script having run. */
.hero .w>*:nth-child(1){animation-delay:1.92s}
.hero .w>*:nth-child(2){animation-delay:2.00s}
.hero .w>*:nth-child(3){animation-delay:2.08s}
.hero .w>*:nth-child(4){animation-delay:2.16s}

/* ---------- menu button ---------- */
@media (max-width:1023px){
  .nav__toggle{gap:0;padding:0;width:46px;min-width:46px;height:46px;min-height:46px;
    align-items:center;justify-content:center}
  .nav__bars{position:relative;display:block;width:20px;height:13px}
  .nav__bars i{position:absolute;left:0;right:0;height:1.5px;background:var(--ink);
    transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .16s ease}
  .nav__bars i:nth-child(1){top:0}
  .nav__bars i:nth-child(2){top:6px}
  .nav__bars i:nth-child(3){top:12px}
  .nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(2){opacity:0}
  .nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

@media (prefers-reduced-motion:reduce){
  .partners__track{width:100%;justify-content:center;flex-wrap:wrap;animation:none}
  .partners__dup{display:none}
  .partners__row{width:100%;flex-wrap:wrap;justify-content:center}
  .partners__vp{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .boot--a,.boot--a *{animation:none!important}
  .nav__bars i{transition:none}
}

/* ---------- hero image, static ----------
   Replicates what site.css gives .hero__media, minus the parallax scaffolding.
   No scale headroom is needed because nothing moves, and no will-change,
   because holding a compositor layer for a static image only costs memory. */
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 42%}
@media print{.hero__bg{display:none!important}}

/* ---------- scroll reveals, off ----------
   site.js reveals 17 elements and unobserves each one as it fires, so all of
   them run on the first pass down the page and never again. That is the reported
   first load stutter: every section promoting a layer, animating for 0.65s and
   dropping it again, while the scroll that triggered it is still going.

   The load sequence is the motion that was asked for and it stays. These are
   switched off rather than made cheaper, because a reveal that only ever plays
   once, during the one scroll where it is most likely to be noticed, is not
   worth the risk of it being felt. Restoring them is a matter of deleting the
   two rules below. */
.js-reveal .rv.is-in{animation:none}
.js-reveal .rv-img.is-in img{animation:none}

/* The logo track carries a mask, which without its own layer forces the mask to
   recomposite against the page while it animates. */
.partners__track{backface-visibility:hidden}
@media (max-width:1023px){.partners__track{will-change:transform}}

@media (prefers-reduced-motion:reduce){
  .js-reveal .rv-img.is-in img{animation:none}
  .partners__track{will-change:auto}
}

/* The ticker loops for as long as the page is open, which keeps the compositor
   busy even when the section is nowhere near the viewport. corp-a.js parks it
   when it scrolls away. The default stays running, so if that script never
   arrives nothing is worse than before. */
.partners__track.is-off{animation-play-state:paused}



.partners__more{margin-top:clamp(1.4rem,3vw,2.1rem);text-align:center}
.partners__more a{display:inline-flex;align-items:center;gap:.7rem;min-height:44px;
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--rule)}
.partners__more a:hover{border-bottom-color:var(--gold-rule)}
.partners__more a:hover .btn__ar{transform:translateX(5px)}


/* ==========================================================================
   PARTNERS PAGE, built to the supplied reference comp.
   Structure and layout follow the comp. Colour comes from the Option A tokens
   rather than the comp's near identical values, so the two pages stay one site.
   The comp's larger, lighter type scale is kept, since that is the most
   distinctive thing in it.
   ========================================================================== */

.crumb{border-bottom:1px solid var(--rule);background:var(--off)}
.crumb ol{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding-block:.8rem;list-style:none;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.crumb li{display:flex;align-items:center}
.crumb li+li::before{content:"/";margin-right:.5rem;color:var(--rule)}
.crumb a,.crumb [aria-current="page"]{display:inline-flex;align-items:center;min-height:26px;color:var(--ink-3)}
.crumb a:hover{color:var(--ink)}
.crumb [aria-current="page"]{color:var(--ink)}

/* ---------- split hero ---------- */
.phero{display:grid;background:var(--white);border-bottom:1px solid var(--rule)}
@media (min-width:1180px){.phero{grid-template-columns:1.05fr .95fr}}
.phero__copy{display:flex;align-items:center;padding:clamp(3rem,7vw,5.75rem) var(--pad)}
@media (min-width:1180px){
  .phero__copy{padding-left:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));
    padding-right:clamp(1.5rem,3.5vw,2.5rem)}
}
.phero__in{max-width:36rem}
.phero h1{font-size:clamp(2.55rem,6vw,5.5rem);line-height:.95;letter-spacing:-.048em;
  font-weight:500;margin-block:1.1rem .95rem;max-width:19ch}
.phero__in p{font-size:1.06rem;line-height:1.55;color:var(--ink-2);max-width:35ch;margin-bottom:2rem}

.phero__media{position:relative;overflow:hidden;background:var(--off-2);aspect-ratio:972 / 941}
.phero__media picture{display:block}
/* One landscape lineup rather than a portrait shot plus an inset. The subjects
   fill a roughly square frame, so the panel is given the image's own ratio below
   the split breakpoint: a wide frame there would scale to fit the width and crop
   heads and feet off the top and bottom. */
.phero__media .main{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
.mtag{position:absolute;left:1.35rem;bottom:1.35rem;background:rgba(255,255,255,.94);
  padding:.7rem .9rem;font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* ---------- underlined text link ---------- */
.tlink{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:.35rem}
.tlink:hover{color:var(--gold);border-bottom-color:var(--gold-rule)}
.tlink:hover .btn__ar,.tlink:focus-visible .btn__ar{transform:translateX(4px)}

/* ---------- section head, statement left and support right ---------- */
.pwhite{background:var(--white)}
.shead{display:grid;gap:1.15rem;margin-bottom:clamp(2rem,4.5vw,3.1rem)}
@media (min-width:900px){
  .shead{grid-template-columns:1.4fr .85fr;gap:3rem;align-items:end}
  .shead--solo{grid-template-columns:1fr}
}
.shead h2{font-size:clamp(1.75rem,4.1vw,3.3rem);line-height:1.04;letter-spacing:-.033em;
  font-weight:500;max-width:26ch;margin-top:.85rem}
.shead p{color:var(--ink-3);font-size:.95rem;line-height:1.6;max-width:40ch}
.shead .rule{margin-top:1rem}

/* ---------- the mark matrix ----------
   Cells here, unlike the home page band. On a page that is only about the
   roster a ruled matrix reads as deliberate rather than as clutter.
   Hover is opacity only: every mark is already single colour, so the comp's
   grayscale to colour transition would have nothing to reveal. */
.lgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin:0;padding:0;list-style:none}
@media (min-width:620px){.lgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:980px){.lgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.lgrid li{background:var(--white);display:flex;align-items:center;justify-content:center;
  padding:1.5rem 1.3rem;min-height:110px;transition:background .2s ease}
@media (min-width:620px){.lgrid li{min-height:135px;padding:1.75rem}}
.lgrid img{height:26px;width:auto;max-width:100%;opacity:.78;
  transition:opacity .22s ease,transform .22s ease}
@media (min-width:620px){.lgrid img{height:30px}}
@media (hover:hover){
  .lgrid li:hover{background:var(--off)}
  .lgrid li:hover img{opacity:1;transform:scale(1.02)}
}

/* ---------- how we partner ---------- */
.sgrid{display:grid;gap:2.1rem}
@media (min-width:980px){.sgrid{grid-template-columns:.72fr 1.28fr;gap:5rem;align-items:start}}
.sgrid h2{font-size:clamp(1.9rem,4.6vw,3.9rem);line-height:1.03;letter-spacing:-.036em;
  font-weight:500;max-width:20ch;margin-top:.9rem}
.ptypes{display:grid;border-top:1px solid var(--rule-2)}
@media (min-width:820px){.ptypes{grid-template-columns:repeat(3,1fr)}}
.ptypes article{padding:1.5rem 0;border-bottom:1px solid var(--rule-2)}
@media (min-width:820px){
  .ptypes article{border-bottom:0;border-right:1px solid var(--rule-2);
    padding:1.8rem 1.7rem 1.5rem 0;min-height:11rem}
  .ptypes article+article{padding-left:1.7rem}
  .ptypes article:last-child{border-right:0}
}
.ptypes article:last-child{border-bottom:0}
.ptypes .num{display:block;font-family:var(--mono);font-size:.65rem;font-weight:500;
  letter-spacing:.16em;color:var(--gold);margin-bottom:1.5rem}
.ptypes h3{font-size:1.3rem;font-weight:500;margin-bottom:.55rem;letter-spacing:-.018em}
.ptypes p{color:var(--ink-3);font-size:.89rem;line-height:1.55;max-width:32ch}

/* ---------- production strip ---------- */
.pstrip{display:grid;gap:.7rem}
@media (min-width:680px){
  .pstrip{grid-template-columns:1fr 1fr}
  .pstrip>.pshot:first-child{grid-column:1 / -1}
}
@media (min-width:980px){
  .pstrip{grid-template-columns:1.15fr .85fr .85fr;height:29rem}
  .pstrip>.pshot:first-child{grid-column:auto}
}
.pshot{position:relative;overflow:hidden;background:var(--off-2);margin:0}
.pshot img{display:block;width:100%;height:20rem;object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.61,.36,1)}
@media (min-width:980px){.pshot img{height:100%}}
@media (hover:hover){.pshot:hover img{transform:scale(1.025)}}
.pshot__l{position:absolute;left:1.05rem;bottom:1.05rem;background:rgba(255,255,255,.93);
  padding:.6rem .75rem;font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}

.pnote{margin-top:1.75rem;display:grid;gap:1.6rem}
@media (min-width:900px){.pnote{grid-template-columns:1fr 1fr;gap:3.75rem;align-items:start}}
.pnote p{color:var(--ink-3);line-height:1.62;max-width:44ch;margin:0}
.trust{display:flex;flex-wrap:wrap;gap:1.35rem;margin:0;padding:0;list-style:none}
@media (min-width:900px){.trust{justify-content:flex-end}}
.trust li{font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);padding-bottom:.45rem;border-bottom:1px solid var(--rule)}

/* ---------- closing call to action ---------- */
.pcta{background:var(--off-2);border-top:1px solid var(--rule)}
.pcta__in{display:grid;gap:2.1rem;padding-block:clamp(3rem,6.5vw,5.5rem)}
@media (min-width:900px){.pcta__in{grid-template-columns:1.25fr .75fr;gap:5rem;align-items:end}}
.pcta h2{font-size:clamp(2rem,4.8vw,4.2rem);line-height:.99;letter-spacing:-.036em;
  font-weight:500;max-width:22ch;margin-top:.9rem}
.pcta p{color:var(--ink-2);font-size:1rem;line-height:1.6;max-width:34ch;margin-bottom:1.7rem}

@media (prefers-reduced-motion:reduce){
  .pshot img,.lgrid img,.tlink .btn__ar{transition:none}
  .pshot:hover img,.lgrid li:hover img{transform:none}
}