/* ===========================================================================
   KODE GARMENT — home page
   Real photography throughout. The decoration on the hero garment is composited
   onto the actual product shot with multiply blending + a displacement warp,
   which is how a real garment mockup is produced. Shared chrome (tokens, header,
   menu, footer, buttons) is in site.css, which loads first.
   =========================================================================== */

/* ========================================================= the sequence == */
#line{position:relative;background:var(--ground)}
.track{position:relative;height:700vh}
.stage{
  position:sticky;top:calc(var(--hd) + var(--tick));
  height:calc(100svh - var(--hd) - var(--tick));
  min-height:560px;overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;
}

/* the studio: a soft cyclorama so a white garment still reads */
.cyc{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--ground)}
/* the vignette sits ABOVE the garment: anything non-flat behind it would show
   the edge of the product shot's own white ground */
.cyc__vig{position:absolute;inset:0;z-index:12;pointer-events:none;
  background:radial-gradient(86% 68% at 50% 42%,transparent 44%,rgba(38,38,44,.17) 100%)}

/* full-bleed photographic frames that take over at the end of the line */
.frame{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none}
.frame img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.07) brightness(.96);
  /* --u is this layer's 0-1 progress, so the shot pushes in as it plays */
  transform:scale(calc(1 + var(--u,0) * .07));transform-origin:58% 52%}
/* a daylight shot needs far more knocking down than a dim one */
.frame--lite img{filter:saturate(.7) contrast(1.1) brightness(.6)}
/* bright, but the orange branding has to survive: darken, don't desaturate */
.frame--brand img{filter:saturate(1.02) contrast(1.09) brightness(.68)}
.frame::after{content:'';position:absolute;inset:0;background:
  /* faded black into the corners and edges */
  radial-gradient(104% 74% at 50% 46%,transparent 26%,rgba(8,8,9,.42) 58%,
    rgba(8,8,9,.82) 84%,rgba(8,8,9,.97) 100%),
  /* the copy lives on the left, so that side gets its own falloff */
  linear-gradient(90deg,rgba(9,9,10,.9) 0%,rgba(9,9,10,.62) 26%,
    rgba(9,9,10,.18) 52%,transparent 72%),
  /* chrome legibility, top and bottom */
  linear-gradient(180deg,rgba(10,10,12,.8) 0%,rgba(10,10,12,.18) 30%,
    rgba(10,10,12,.34) 62%,rgba(10,10,12,.9) 100%),
  /* warm brand grade */
  linear-gradient(142deg,rgba(243,112,33,.16) 0%,rgba(243,112,33,.03) 46%,transparent 70%)}

.stage__top{
  position:relative;z-index:14;padding:18px var(--gut) 0;font-family:var(--m);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--soft);transition:color .5s;
}
.stage__row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.stage__top{min-width:0}
.stage__row>span{min-width:0}
.stage__row>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage__row>span:last-child{flex:none}
/* the selling line — what the station on screen actually gets the customer */
.stage__spec{position:relative;z-index:16;display:none;align-items:baseline;
  justify-content:space-between;gap:24px;margin:0 var(--gut);padding:11px 0 0;
  border-top:1px solid var(--line)}
@media(min-width:900px){.stage__spec{display:flex}}
.stage__spec b{font-weight:500;color:var(--ink-2);letter-spacing:.14em;
  transition:opacity .26s var(--ease)}
.stage__spec a{flex:none;display:inline-flex;align-items:center;gap:8px;color:var(--kode-ink);
  letter-spacing:.16em;border-bottom:1px solid rgba(190,79,12,.34);padding-bottom:3px}
.stage__spec a:hover{color:var(--kode);border-color:var(--kode)}
.stage.is-dark .stage__spec{border-top-color:rgba(255,255,255,.2)}
.stage.is-dark .stage__spec b{color:rgba(247,244,238,.88)}
.stage.is-dark .stage__spec a{color:var(--kode);border-color:rgba(243,112,33,.42)}
.stage__top b{color:var(--kode-ink);font-weight:500}
.stage.is-dark .stage__top{color:rgba(255,255,255,.55)}
.stage.is-dark .stage__top b{color:var(--kode)}

.stage__body{
  position:relative;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr);padding:0 var(--gut);min-height:0;min-width:0;
}
@media(min-width:1080px){
  .stage__body{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,2.4vw,44px)}
}

/* ---- the garment ---- */
.gcol{position:relative;z-index:8;display:grid;align-items:center;justify-items:center;
  min-width:0;min-height:325px;
  --gh:min(67vh,575px,calc((100vw - var(--gut) * 2) * 1.2483));
  height:var(--gh)}
@media(min-width:1080px){.gcol{--gh:min(calc(100svh - 264px - var(--tick)),775px,
  calc((100vw - var(--gut) * 2) * .74))}}
@media(min-width:1300px){.gcol{justify-items:start}}
.garment{
  position:relative;height:100%;max-width:100%;aspect-ratio:1442/1800;background:var(--ground);
  transform:translateY(var(--gy,0)) scale(var(--gs,1));
  transition:opacity .5s var(--ease);opacity:var(--go,1);
}
/* multiply drops the shot's white ground into the page ground, seamlessly */
.garment__base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

/* every decoration is composited onto the real photograph */
.deco{position:absolute;opacity:0;will-change:opacity,transform}
.deco svg{width:100%;height:auto;display:block;overflow:visible}
.deco--ink{mix-blend-mode:multiply}  /* its filter:url(#kg-warp) lives in index.php */
.deco--proud{filter:drop-shadow(1px 3px 4px rgba(20,20,24,.32))}

/* the annotation sits in the page's open space, clear of the garment */
.note{position:absolute;left:100%;z-index:6;opacity:0;pointer-events:none;
  padding-left:18px;transform:translateY(-50%);white-space:nowrap}
/* the tick stops short of the padding so the text is not butted against it */
.note::before{content:'';position:absolute;left:0;top:50%;width:10px;height:2.6px;
  background:var(--ink);transform:translateY(-50%)}
.note b{display:block;font-family:var(--m);font-weight:500;
  font-size:clamp(11px,1.02vw,16px);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}

/* technical callout — leader line from the decoration to the annotation */
.callout{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  opacity:0;pointer-events:none;z-index:3}
.callout .halo{stroke:var(--ground);stroke-width:10;fill:none;stroke-linejoin:round;stroke-linecap:butt;opacity:.92}
.callout .lead{stroke:var(--ink);stroke-width:2.6;fill:none;stroke-linejoin:round;stroke-linecap:butt;
  stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--s,0) * 100)}
.callout .lbl{font-family:var(--m);font-weight:500;font-size:62px;letter-spacing:6px;fill:var(--ink);
  text-transform:uppercase;opacity:calc((var(--s,0) - .5) * 2.6)}
.callout .sub{font-family:var(--m);font-size:42px;letter-spacing:3.5px;fill:var(--mid);
  opacity:calc((var(--s,0) - .62) * 3.2)}

/* print zones, measured off the actual product shot */
/* inside BACK neck only. The opening in the product shot runs y205-267 and
   narrows to x660-795, so the label is sized to sit wholly within it and
   never touch the front collar band. */
.z-neck  {left:45.77%;top:12.28%;width:9.01%;
          transform:rotate(-.8deg) scaleY(.543);transform-origin:50% 0}
.z-chest {left:33.2%;top:31.5%;width:33.6%}
/* full-front screen print: the 3:2 "We Build Brands" artwork. It is already
   transparent and carries white ink, so it must not multiply (white would vanish) */
.z-print {left:31%;top:24.5%;width:38%;mix-blend-mode:normal}
/* full-chest appliqué: 420px on a 690px body panel is about 12in, and it
   sits higher than the screen/DTF zone */
.z-chestHi{left:35.44%;top:26.7%;width:29.1%}
.z-lchest{left:56.9%;top:31.3%;width:11.0%}
.z-sleeve{left:10.4%;top:31.4%;width:12.2%}
/* centre-chest patch: 340px on a 690px body panel is about a 10in badge */
.z-patch {left:38.21%;top:29.08%;width:23.58%}

/* ---- caption column ---- */
/* the last two stations run full-bleed, so they carry a title over the
   photograph instead of a leader pointing at a cut-out */
.bignote{position:absolute;left:var(--gut);bottom:23%;z-index:15;max-width:min(46vw,620px);
  opacity:0;pointer-events:none}
.bignote b .ora{color:var(--kode)}
.bignote b{display:block;font-family:var(--d);font-weight:800;
  font-variation-settings:'wdth' 88,'wght' 800;font-size:clamp(30px,4.4vw,64px);
  line-height:.94;letter-spacing:-.022em;text-transform:uppercase;color:#FAFAFA}
.bignote i{display:block;margin-top:14px;font-style:normal;font-family:var(--m);
  font-size:clamp(11px,1.02vw,15px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--kode)}
.bignote em{display:block;margin-top:12px;font-style:normal;font-family:var(--b);
  font-size:clamp(15px,1.25vw,19px);line-height:1.5;letter-spacing:0;text-transform:none;
  color:rgba(247,244,238,.8)}

/* a callout anchored to the RIGHT-hand slot, for stations where the garment
   is gone and the subject is the artwork in that slot */
.eqnote{position:absolute;right:100%;z-index:14;opacity:0;pointer-events:none;
  white-space:nowrap;padding-right:18px;transform:translateY(-50%)}
.eqnote::after{content:'';position:absolute;right:0;top:50%;width:10px;height:2.6px;
  background:var(--ink);transform:translateY(-50%)}
.eqnote b{font-family:var(--m);font-weight:500;font-size:clamp(11px,1.02vw,16px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.eqlead{position:absolute;left:0;width:46%;height:auto;z-index:13;
  opacity:0;pointer-events:none;overflow:visible}
.eqlead path{fill:none;stroke:var(--ink);stroke-width:2.2;
  stroke-linejoin:round;stroke-linecap:butt;
  stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--s,0) * 100)}

/* stands in for the garment on stations that are not about the garment */
.gswap{position:absolute;inset:0;z-index:9;opacity:0;pointer-events:none}
.gswap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  object-position:50% 50%;filter:drop-shadow(0 26px 34px rgba(20,20,24,.17))}

/* a prop that sits between the garment and the machine: the physical thing
   the station produces, laid in the open middle of the stage */
/* TEMPORARILY HIDDEN — delete the display:none below to bring the DTF
   transfer films back at station 03; placement rules are left intact */
.prop{display:none;position:absolute;z-index:7;opacity:0;pointer-events:none}
.prop img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 18px 26px rgba(20,20,24,.24))}
@media(max-width:1079px){.prop{display:none}}
/* the films sit in the middle band with the caption card floating over them */
/* tucked low in the band, clear of the caption text above it */
@media(min-width:1080px){.prop{left:43%;top:auto;bottom:2%;width:15%}}
/* every annotation is anchored to the garment's right edge, so below the
   two-column break it has nowhere to land and just trails off the page */
@media(max-width:1079px){.callout,.note{display:none}}

/* the machine that does the job — cut out, no frame */
.eqcol{position:relative;z-index:9;display:none;align-self:center;height:min(58vh,540px)}
@media(min-width:1080px){.eqcol{display:block}}
.eq{position:absolute;inset:0;margin:0;opacity:0}
.eq svg{position:absolute;inset:0;width:100%;height:100%}
/* Absolutely sized to the slot, then object-fit letterboxes inside it. A
   percentage height on a centred grid item resolves against an auto row that
   sizes to the image, so the artwork kept overflowing its own box. */
.eq img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  object-position:50% 50%;filter:drop-shadow(0 26px 34px rgba(20,20,24,.17))}
/* ---- station captions ------------------------------------------------
   .cap/.caps were already in this sheet but nothing ever filled them. They
   now hold what each station gets the customer, in the open band between the
   garment and the machine, swapped on the same index as the rail. */
.caps{position:relative;min-width:0}
@media(min-width:1080px){
  /* the garment keeps its own auto column; the caption takes the rest */
  .gcol{grid-template-columns:auto minmax(0,1fr);column-gap:clamp(24px,2.8vw,56px)}
  .garment{grid-column:1;grid-row:1}
  /* 1442/1800 is the garment box ratio, so this is exactly the garment's
     width — keeps the swap art out of the caption column */
  .gswap{right:auto;width:calc(var(--gh) * 0.80111)}
  /* .gcol sets justify-items:start, which would leave this at its intrinsic
     width — zero, since every .cap inside it is absolutely positioned */
  .caps{grid-column:2;grid-row:1;align-self:stretch;justify-self:stretch}
  .cap{display:flex;flex-direction:column;justify-content:center}
}
/* below the two-column break it rides the bottom of the stage on a scrim,
   the same way the station 00 pitch does */
@media(max-width:1079px){
  .caps{display:none;position:absolute;left:var(--gut);right:var(--gut);bottom:0;
    height:clamp(200px,35vh,300px);z-index:15;text-align:center}
  .caps.has-copy{display:block}
  .caps::before{content:'';position:absolute;z-index:-1;
    left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);top:0;
    bottom:calc(var(--gut) * -1);
    background:linear-gradient(180deg,rgba(242,239,233,0) 0%,
      rgba(242,239,233,.92) 38%,var(--ground) 66%)}
  .stage.is-dark .caps::before{background:none}
  .cap{display:flex;flex-direction:column;justify-content:flex-end}
  .cap__p{margin-inline:auto;font-size:14.5px;max-width:44ch}
}
.cap{position:absolute;inset:0;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .16s linear,transform .16s linear}
.cap.is-on{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .42s var(--ease) .1s,transform .5s var(--ease) .1s}
.cap__no{font-family:var(--m);font-size:11.5px;letter-spacing:.24em;color:var(--kode-ink);
  text-transform:uppercase;display:flex;align-items:center;gap:12px}
@media(max-width:1079px){.cap__no{justify-content:center}}
.cap__no::after{content:'';height:1px;flex:1;max-width:84px;
  background:linear-gradient(90deg,var(--line-2),transparent)}
.cap__h{font-family:var(--d);font-weight:800;font-variation-settings:'wdth' 86,'wght' 800;
  font-size:clamp(25px,2.55vw,40px);line-height:.96;letter-spacing:-.022em;
  margin:14px 0 0;text-transform:uppercase}
.cap__h em{font-style:normal;color:var(--kode)}
.cap__p{margin:15px 0 0;font-size:16.5px;line-height:1.56;color:var(--mid);max-width:36ch}
@media(max-width:1079px){.cap__p{margin-inline:auto}}
.cap__specs{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
@media(max-width:1079px){.cap__specs{justify-content:center}}
.cap__link{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-family:var(--m);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kode-ink);border-bottom:1px solid rgba(190,79,12,.3);padding-bottom:4px}
/* on the dark photographic frames */
.stage.is-dark .cap__h{color:#FAFAFA}
.stage.is-dark .cap__p{color:rgba(247,244,238,.76)}
.stage.is-dark .cap__no{color:var(--kode)}
.stage.is-dark .cap__link{color:var(--kode);border-color:rgba(243,112,33,.4)}
.stage.is-dark .chip{border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.74)}

/* ---- station 00 · the pitch -------------------------------------------
   The opening frame has to say the two things this shop actually sells: the
   blank itself, and every process that goes onto it. It rides the same data-k
   fade as everything else on the line, so it clears out at station 01. */
.pitch{position:relative;z-index:15}
.pitch__logo{display:block;width:100%;height:clamp(132px,29.2vh,304px);
  object-fit:contain;object-position:left center;
  margin:clamp(12px,1.9vh,24px) 0 clamp(13px,2vh,26px);
  filter:drop-shadow(0 26px 34px rgba(20,20,24,.17))}
/* eyebrow and headline share the h1, so the page's one heading carries what, where and who */
.pitch__title{margin:0;font:inherit;letter-spacing:normal;text-transform:none}
.pitch__eye,.pitch__h{display:block}
.pitch__eye{margin:0;font-family:var(--m);font-weight:500;
  font-size:clamp(10px,.74vw,11.5px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--kode-ink)}
.pitch__h{margin:clamp(9px,1.3vh,15px) 0 0;font-family:var(--d);font-weight:800;
  font-variation-settings:'wdth' 86,'wght' 800;font-size:clamp(29px,2.92vw,47px);
  line-height:.9;letter-spacing:-.026em;text-transform:uppercase;color:var(--ink);
  text-wrap:balance}
.pitch__h em{font-style:normal;color:var(--kode)}
.pitch__p{margin:clamp(11px,1.6vh,19px) 0 0;font-size:clamp(14.5px,1.02vw,17px);
  line-height:1.5;color:var(--mid);max-width:42ch}
.pitch__split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.5vw,24px);
  margin-top:clamp(14px,2vh,24px);padding-top:clamp(10px,1.3vh,14px);
  border-top:1px solid var(--line-2)}
.pitch__half{position:relative}
.pitch__half+.pitch__half{padding-left:clamp(14px,1.5vw,24px)}
.pitch__half+.pitch__half::before{content:'';position:absolute;left:0;top:-2px;bottom:3px;
  width:1px;background:var(--line-2)}
.pitch__k{display:block;font-family:var(--m);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--kode-ink)}
.pitch__v{display:block;margin-top:5px;font-family:var(--d);font-weight:800;
  font-variation-settings:'wdth' 84,'wght' 800;font-size:clamp(16px,1.36vw,22px);
  line-height:1;letter-spacing:-.012em;text-transform:uppercase;color:var(--ink)}
.pitch__s{display:block;margin-top:6px;font-size:clamp(12.5px,.88vw,14.5px);
  line-height:1.4;color:var(--mid)}
.pitch__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(14px,2.1vh,24px)}
.pitch__scroll{display:none}

@media(min-width:1080px){
  .gcol{grid-column:1;grid-row:1}
  .eqcol,.pitch{grid-column:2;grid-row:1}
  .pitch{align-self:stretch;display:flex;flex-direction:column;justify-content:center;
    min-height:0;padding:clamp(6px,1.4vh,18px) 0}
  .pitch>*{flex:0 0 auto}
  /* the only item allowed to give up space when the window is short */
  .pitch__logo{flex:1 1 auto;height:auto;min-height:0;max-height:304px}
}
/* below the two-column break the pitch lies over the garment, which at station
   00 is a flat white field with nothing printed on it yet. A scrim off the page
   ground lifts the text off the cloth without putting a panel on the page. */
@media(max-width:1079px){
  .pitch{position:absolute;left:var(--gut);right:var(--gut);bottom:0;
    padding-top:clamp(48px,11vh,104px);text-align:center}
  .pitch::before{content:'';position:absolute;z-index:-1;
    left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);top:0;
    bottom:calc(var(--gut) * -1);
    background:linear-gradient(180deg,rgba(242,239,233,0) 0%,
      rgba(242,239,233,.92) 40%,var(--ground) 68%)}
  .pitch__logo{display:none}
  .pitch__h{font-size:clamp(27px,7vw,44px)}
  .pitch__eye{font-size:9.5px;letter-spacing:.17em}
  .pitch__split{max-width:460px;margin-inline:auto;text-align:left}
  .pitch__cta{justify-content:center;gap:8px}
  .pitch__cta .btn{padding:0 14px;font-size:10.5px;letter-spacing:.11em}
  .stage .hint{display:none}
  .pitch__scroll{display:block;width:100%;margin-top:13px;font-family:var(--m);
    font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
}
@media(max-width:759px){.pitch__p{display:none}}
@media(min-width:1080px) and (max-height:880px){.pitch__p{display:none}}

/* ---- station rail ---- */
.rail{position:relative;z-index:16;padding:14px var(--gut) 22px;display:flex;
  align-items:flex-end;gap:clamp(4px,.9vw,14px);overflow-x:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail__it{flex:1 1 0;min-width:78px;position:relative;padding-top:13px;text-align:left;
  border-top:1.5px solid var(--line-2);transition:border-color .4s}
.rail__it::before{content:'';position:absolute;left:0;top:-1.5px;height:1.5px;width:0;
  background:var(--kode);transition:width .5s var(--ease)}
.rail__it.is-done::before,.rail__it.is-on::before{width:100%}
.rail__n{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;color:var(--line-2);display:block;transition:.4s}
.rail__t{display:block;margin-top:4px;font-family:var(--d);font-weight:700;
  font-variation-settings:'wdth' 84,'wght' 700;font-size:clamp(10.5px,.92vw,13.5px);
  text-transform:uppercase;color:var(--soft);transition:.4s var(--ease);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail__it.is-done .rail__t{color:var(--ink-2)}
.rail__it.is-on .rail__n{color:var(--kode-ink)}
.rail__it.is-on .rail__t{color:var(--ink)}
.stage.is-dark .rail__it{border-top-color:rgba(255,255,255,.2)}
.stage.is-dark .rail__n{color:rgba(255,255,255,.3)}
.stage.is-dark .rail__t{color:rgba(255,255,255,.5)}
.stage.is-dark .rail__it.is-done .rail__t{color:rgba(255,255,255,.78)}
.stage.is-dark .rail__it.is-on .rail__t{color:#fff}
.stage.is-dark .rail__it.is-on .rail__n{color:var(--kode)}

.hint{position:absolute;left:50%;bottom:178px;translate:-50% 0;z-index:15;
  font-family:var(--m);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--soft);display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:opacity .4s;pointer-events:none}
.hint i{width:1px;height:32px;background:linear-gradient(180deg,var(--kode),transparent)}
.stage[data-moved] .hint{opacity:0}

/* ------------------------------------------------- printing: photo bands - */
.bands{margin-top:clamp(44px,5vw,84px);border-top:1px solid var(--line)}
.band{position:relative;display:grid;grid-template-columns:1fr;
  border-bottom:1px solid var(--line);overflow:hidden}
@media(min-width:900px){.band{grid-template-columns:1fr 1fr;min-height:clamp(440px,48vw,640px)}}
.band__txt{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(34px,4.4vw,72px) var(--gut)}
@media(min-width:900px){
  .band__txt{padding-inline:clamp(30px,4.4vw,80px)}
  .band:nth-child(even) .band__txt{order:2}
  .band:nth-child(even) .band__art{order:1}
}
.band__no{font-family:var(--d);font-weight:800;font-variation-settings:'wdth' 72,'wght' 800;
  font-size:clamp(54px,7.4vw,112px);line-height:.78;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.4px var(--line-2);transition:.5s var(--ease)}
.band:hover .band__no{-webkit-text-stroke-color:var(--kode)}
.band__h{font-family:var(--d);font-weight:800;font-variation-settings:'wdth' 88,'wght' 800;
  font-size:clamp(30px,3.6vw,54px);line-height:.95;letter-spacing:-.024em;
  text-transform:uppercase;margin:18px 0 0}
.band__p{margin:15px 0 0;font-size:16.5px;line-height:1.6;color:var(--mid);max-width:42ch}
.band__specs{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.band__meta{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px 30px}
.band__stat .k{display:block;font-family:var(--m);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--soft);margin-bottom:4px}
.band__stat .v{font-family:var(--d);font-weight:700;font-variation-settings:'wdth' 80,'wght' 700;
  font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.band__stat .v em{font-style:normal;color:var(--kode-ink);font-size:14px;margin-left:3px}
.band__go{margin-left:auto;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--m);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--kode-ink)}
.band__go svg{transition:transform .3s var(--ease)}
.band:hover .band__go svg{transform:translateX(5px)}

.band__art{position:relative;overflow:hidden;background:var(--ground-2);min-height:min(76vw,440px)}
@media(min-width:900px){.band__art{min-height:0}}
.band__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Colour is the resting state — these are real work photos and the colour is
     the sell. The grey happens only while the page is actually moving. */
  filter:grayscale(0) contrast(1.04) brightness(1.01);
  transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.band:hover .band__art img{transform:scale(1.035)}

/* ---- scroll drains the colour, stopping brings it back ------------------
   .is-scrolling is toggled on <html> by a debounced scroll listener. Grey
   arrives fast so it tracks the motion; colour eases back so the stop feels
   like the image settling rather than a switch flipping. */
.band__art img,.card__art img,.blanks__hero img{
  transition:transform 1.1s var(--ease),filter .6s var(--ease)}
html.is-scrolling .band__art img,
html.is-scrolling .card__art img,
html.is-scrolling .blanks__hero img{
  filter:grayscale(1) contrast(1.07) brightness(1.02);
  transition:filter .16s linear}
.band__art::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(243,112,33,.16),transparent 58%)}
.band__tag{position:absolute;left:0;bottom:0;z-index:2;background:var(--ink);color:#F4F4F5;
  font-family:var(--m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:9px 14px}

/* -------------------------------------------------------------- proof --- */
/* Stripped back: no panels, no chip rails, no card fills. Hairline rules with a
   short accent tick, generous space, and the type doing the work — the same
   language the spec bars and the station rail already use on this page. */
#proof{position:relative;background:#121317;color:#E7E7E9;overflow:hidden;
  padding-top:clamp(62px,7vw,112px)}
#proof .wrap{position:relative;z-index:3}
#proof .sec__h{color:#FAFAFA;font-size:clamp(34px,4.5vw,70px);margin-top:6px}
#proof .sec__h em{font-style:normal;color:var(--kode)}
#blanks .sec__h em{font-style:normal;color:var(--kode)}
#proof .sec__note{color:rgba(231,231,233,.6)}
/* a very faint halftone for depth; nothing with an edge to it */
.proof__dots{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.1px,transparent 1.2px);
  background-size:10px 10px;
  -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000 0%,transparent 66%);
  mask-image:radial-gradient(120% 90% at 20% 0%,#000 0%,transparent 66%)}
.proof__glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(48% 44% at 84% 74%,rgba(47,98,194,.16) 0%,transparent 70%)}

/* ---- the sign ---- */
.neon{position:relative;display:inline-block;margin-bottom:clamp(28px,3.4vw,52px);
  padding:6px 4px 0}
.neon::before{content:'';position:absolute;left:50%;top:54%;translate:-50% -50%;
  width:164%;height:400%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(243,112,33,.24) 0%,
    rgba(47,98,194,.1) 46%,transparent 74%)}
.neon__rod{position:absolute;left:0;right:0;top:-26px;height:26px;pointer-events:none}
.neon__rod::before,.neon__rod::after{content:'';position:absolute;top:0;width:1.5px;
  height:100%;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.34))}
.neon__rod::before{left:13%}
.neon__rod::after{left:61%}
.neon__txt{position:relative;display:block;font-family:var(--d);font-weight:800;
  font-variation-settings:'wdth' 96,'wght' 800;
  font-size:clamp(28px,4.2vw,66px);line-height:1;letter-spacing:.055em;
  text-transform:uppercase;color:#FFF3E8;
  text-shadow:0 0 4px #fff,0 0 12px var(--kode),0 0 28px var(--kode),
    0 0 62px rgba(243,112,33,.55),0 0 104px rgba(47,98,194,.4);
  animation:neon 7s linear infinite}
@keyframes neon{0%,92%,100%{opacity:1}93%{opacity:.48}94%{opacity:1}
  95.5%{opacity:.62}96.4%{opacity:1}}
@media(prefers-reduced-motion:reduce){.neon__txt{animation:none}}

/* ---- a hairline with a short accent tick, used by every quote ---- */
.vouch{margin:0;position:relative}
.lead-row,.vouch--say{border-top:1px solid rgba(255,255,255,.13)}
.lead-row::before,.vouch--say::before{content:'';position:absolute;left:0;top:-1px;
  height:2px;background:var(--kode)}
.lead-row::before{width:clamp(76px,8vw,132px)}
.vouch--say::before{width:46px}
.vouch--say:nth-child(2)::before{background:var(--blue)}
.vouch--say:nth-child(3)::before{background:var(--blue-lt)}

/* ---- lead quote, straight on the ground, with the KODE mark beside it ---- */
.lead-row{position:relative;margin-top:clamp(42px,4.8vw,78px);display:grid;
  gap:clamp(8px,2vw,40px) clamp(28px,4vw,72px);align-items:center}
@media(min-width:920px){.lead-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.lead{padding-top:clamp(28px,3vw,46px)}
.lead__mark{position:relative;margin:0;justify-self:center;width:100%;max-width:560px;
  padding-top:clamp(0px,2vw,34px)}
/* warm light behind the spray so it sits on the dark instead of floating on it */
.lead__mark::before{content:'';position:absolute;inset:6% 2% 0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(243,112,33,.22),rgba(47,98,194,.08) 62%,transparent)}
.lead__mark img{position:relative;display:block;width:100%;height:auto;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
  transform:rotate(-2.5deg);transition:transform .7s var(--ease)}
.lead-row:hover .lead__mark img{transform:rotate(0deg) scale(1.03)}
@media(max-width:919px){.lead__mark{max-width:420px;padding-bottom:6px}}
@media(prefers-reduced-motion:reduce){.lead__mark img{transition:none}}
.lead blockquote{margin:0;font-family:var(--d);font-weight:700;
  font-variation-settings:'wdth' 92,'wght' 700;
  font-size:clamp(26px,3.7vw,56px);line-height:1.08;letter-spacing:-.024em;
  color:#FAFAFA;max-width:15em;text-wrap:balance}
.lead blockquote b{font-weight:700;color:var(--kode)}
.lead figcaption{margin-top:clamp(26px,2.8vw,40px)}

/* ---- attribution ---- */
.vouch__id{display:flex;align-items:center;gap:14px}
/* a photo slot: drop an <img> in and it crops to fit */
.ava{flex:none;position:relative;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  font-family:var(--m);font-weight:500;font-size:12.5px;letter-spacing:.08em;
  color:#EAF1FB;background:#15171B;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 2px rgba(47,98,194,.2)}
.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:50%;filter:grayscale(1) contrast(1.16) brightness(.9);
  transition:filter .5s var(--ease)}
/* a little life when you reach the person who said it */
.vouch:hover .ava img{filter:grayscale(.15) contrast(1.06) brightness(.98)}
.ava--o{width:68px;height:68px;font-size:14.5px}
.vouch__who{display:block;font-family:var(--b);font-weight:600;font-size:14.5px;
  line-height:1.35;color:rgba(247,247,249,.94)}
.vouch__job{display:block;margin-top:7px;font-family:var(--m);font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--kode);
  font-variant-numeric:tabular-nums}

/* ---- the three supporting quotes ---- */
.vouches{margin-top:clamp(54px,6vw,96px);display:grid;gap:clamp(30px,3vw,52px)}
@media(min-width:920px){.vouches{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.vouch--say{display:flex;flex-direction:column;height:100%;
  padding-top:clamp(22px,2.2vw,30px)}
.vouch__n{display:block;margin:0 0 clamp(15px,1.6vw,22px);
  font-family:var(--m);font-size:11px;letter-spacing:.24em;color:var(--kode);
  font-variant-numeric:tabular-nums}
.vouch--say:nth-child(2) .vouch__n,.vouch--say:nth-child(3) .vouch__n{color:var(--blue-lt)}
.vouch--say blockquote{flex:1;margin:0;
  font-size:clamp(16px,1.18vw,18.5px);line-height:1.6;color:rgba(247,247,249,.88)}
.vouch--say figcaption{margin-top:auto;padding-top:clamp(22px,2.2vw,30px)}
.vouch--say .vouch__who{min-height:calc(2 * 1.35em)}
.vouch--say:nth-child(2) .vouch__job,.vouch--say:nth-child(3) .vouch__job{color:var(--blue-lt)}

/* ----------------------------------------------------------------- blanks */
#blanks{background:var(--ground)}
/* ---- the code: why the company is called what it is ---- */
.code{display:grid;gap:clamp(26px,2.8vw,46px);margin-top:clamp(36px,4.2vw,64px)}
@media(min-width:900px){.code{grid-template-columns:repeat(3,1fr)}}
.code__it{padding-top:clamp(20px,2vw,28px);border-top:2px solid var(--kode)}
.code__n{font-family:var(--m);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--kode-ink)}
.code__h{font-family:var(--d);font-weight:800;font-variation-settings:'wdth' 86,'wght' 800;
  font-size:clamp(21px,2vw,29px);line-height:1;letter-spacing:-.016em;text-transform:uppercase;
  margin:13px 0 0;color:var(--ink)}
.code__p{margin:13px 0 0;font-size:16px;line-height:1.6;color:var(--mid);max-width:38ch}
/* the blanks offer keeps its own head, one step down from the brand story */
.subhd{margin-top:clamp(64px,7vw,116px)}
.subhd .sec__h{font-size:clamp(30px,3.6vw,56px)}

.blanks__claim{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:28px;
  padding:16px 0;border-block:1px solid var(--line);
  font-family:var(--m);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--mid)}
.blanks__claim s{color:var(--line-2);text-decoration:none}
.blanks__hero{margin-top:clamp(36px,4.4vw,64px);position:relative;overflow:hidden;
  aspect-ratio:21/9;background:var(--ground-2)}
@media(max-width:760px){.blanks__hero{aspect-ratio:4/3}}
.blanks__hero img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.blanks__hero figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:#F4F4F5;
  font-family:var(--m);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:9px 15px}

.grid{margin-top:1px;display:grid;gap:1px;background:var(--line)}
@media(min-width:620px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--ground);padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;
  transition:background .35s}
.card:hover{background:#FBF9F4}
.card__art{position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(76% 68% at 50% 40%,#FFFFFF 0%,#EDE8DE 82%)}
.card__art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .6s var(--ease)}
.card:hover .card__art img{transform:scale(1.04)}
.card__art--photo img{object-fit:cover;mix-blend-mode:normal;filter:grayscale(1) contrast(1.05)}
.card__sku{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;color:var(--soft);margin-top:18px}
.card__h{font-family:var(--d);font-weight:700;font-variation-settings:'wdth' 90,'wght' 700;
  font-size:21px;margin:7px 0 0;text-transform:uppercase;letter-spacing:-.01em}
.card__p{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--mid);flex:1}
.card__ft{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--m);font-size:11px;letter-spacing:.06em;color:var(--soft)}
.card__ft b{color:var(--ink);font-weight:500;font-size:15px}
.blanks__foot{margin-top:clamp(32px,3.6vw,52px);display:flex;flex-wrap:wrap;align-items:center;
  gap:16px 30px;padding-top:28px;border-top:1px solid var(--line)}
.blanks__foot p{margin:0;font-size:16px;color:var(--mid);max-width:46ch}

/* ------------------------------------------------------------------ faq - */
/* every answer stays open on the page: readable at a glance, and the same text
   answer engines lift into their replies */
.faq{background:var(--ground-2)}
.faq__list{display:grid;gap:0 clamp(32px,4vw,72px);margin-top:clamp(40px,4.6vw,72px)}
@media(min-width:900px){.faq__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.faq .sec__h em{font-style:normal;color:var(--kode)}
.faq__it{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;
  column-gap:clamp(14px,1.6vw,24px);padding:clamp(22px,2.2vw,32px) 0;border-top:1px solid var(--line-2)}
.faq__it::before{content:'';position:absolute;left:0;top:-1px;width:38px;height:2px;background:var(--kode)}
.faq__n{grid-row:1 / span 2;font-family:var(--m);font-size:11px;letter-spacing:.2em;color:var(--kode-ink);
  padding-top:.42em}
.faq__q{margin:0;font-family:var(--d);font-weight:800;font-variation-settings:'wdth' 88,'wght' 800;
  font-size:clamp(19px,1.55vw,24px);line-height:1.12;letter-spacing:-.012em;color:var(--ink)}
.faq__a{margin:10px 0 0;font-size:16px;line-height:1.62;color:var(--mid);max-width:58ch}

/* ---------------------------------------------------------------- close - */
/* a neutral charcoal, a step lighter than the marquee and footer blacks around it */
#close{background:#1D1D20;color:#F4F4F5;text-align:center}
#close .sec__h{color:#FAFAFA;max-width:17ch;margin-inline:auto}
#close .sec__h em{font-style:normal;color:var(--kode)}
/* every service, grouped by the stage it happens at. Stacked with a down
   arrow on narrow screens; five top-aligned columns once they all fit */
.flow{list-style:none;padding:0;margin:clamp(34px,4vw,56px) auto 0;max-width:1240px;
  display:grid;gap:14px;justify-content:center}
.flow__st{position:relative;min-width:0}
.flow__h{margin:0 0 12px;font-family:var(--m);font-size:10px;line-height:14px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(244,244,245,.42);white-space:nowrap}
.flow__h b{font-weight:500;color:var(--kode);margin-right:.7em}
.flow__c{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.flow__c li{font-family:var(--m);font-size:11px;line-height:16px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(244,244,245,.62);border:1px solid rgba(255,255,255,.2);
  padding:9px 14px;white-space:nowrap}
.flow__c li.k{border-color:var(--kode);color:var(--kode)}
.flow__st + .flow__st::before{content:'\2193';content:'\2193' / '';display:block;margin:2px 0 12px;
  font-family:var(--m);color:rgba(255,255,255,.26)}
@media(min-width:1180px){
  .flow{grid-template-columns:repeat(5,auto);column-gap:56px;align-items:start}
  .flow__c{flex-direction:column;flex-wrap:nowrap}
  /* level with the first chip in every column */
  .flow__st + .flow__st::before{content:'\2192';content:'\2192' / '';position:absolute;margin:0;
    left:-28px;top:44px;translate:-50% -50%}
}
.close__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(32px,4vw,52px)}
.close__fine{margin:28px 0 0;font-family:var(--m);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(244,244,245,.4)}

@media(prefers-reduced-motion:reduce){
  .track{height:auto!important}
  .stage{position:relative;top:auto;height:auto;min-height:0;padding-bottom:26px}
  .gcol{height:min(60vh,520px)}
  .hint{display:none}
  .band__art img,.card__art img{transition:none}
}
/* ===========================================================================
   RESPONSIVE PASS
   Checked against 3440/2560/1920 monitors, 1728–1280 laptops (tall and short
   windows), iPad and Android tablets in both orientations, and phones from
   430 down to 320 wide, portrait and landscape.
   =========================================================================== */

/* ---- the line lines up with every .wrap below it, however wide the screen ---- */
.stage{--edge:max(var(--gut),calc((100% - var(--maxw)) / 2 + var(--gut)));min-height:0;
  height:calc(100vh - var(--hd) - var(--tick));height:calc(100svh - var(--hd) - var(--tick))}
.stage__top{padding-left:var(--edge);padding-right:var(--edge)}
.stage__spec{margin-left:var(--edge);margin-right:var(--edge)}
.stage__body{padding-left:var(--edge);padding-right:var(--edge)}
.rail{padding-left:var(--edge);padding-right:var(--edge)}
.bignote{left:var(--edge)}
.bignote i{margin-bottom:12px}

/* ---- large monitors (24in, 27in, ultrawide): wider measure, a step up in type ---- */
@media(min-width:1900px){
  .band__p,.cap__p,.pitch__p{font-size:18px}
  .code__p,.faq__a,.vouch--say blockquote{font-size:18px}
  .faq__q{font-size:26px}
  .pitch__h{font-size:clamp(47px,2.1vw,54px)}
  .cap__h{font-size:clamp(40px,1.9vw,46px)}
  .lead blockquote{font-size:clamp(56px,2.6vw,66px)}
  /* the garment is height-capped, so the extra width goes to the caption beside it */
  .stage__body{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}
  .eqcol{height:min(58vh,620px)}
}

/* ---- two-column line (laptops up): a caption never rides up into the leader labels ---- */
@media(min-width:1080px){
  .cap::before,.cap::after{content:'';flex:1 1 0}
  .cap::before{min-height:calc(var(--gh) * .215 + 30px)}
}
/* short laptop windows: tighter chrome, a shorter caption */
@media(min-width:1080px) and (max-height:760px){
  .stage__top{padding-top:12px}
  .stage__spec{padding-top:8px}
  .rail{padding-top:8px;padding-bottom:14px}
  .gcol{--gh:min(calc(100svh - 232px - var(--tick)),775px,calc((100vw - var(--gut) * 2) * .74));min-height:0}
  .cap__h{font-size:clamp(24px,2.2vw,34px)}
  .cap__p{font-size:15.5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
  .pitch__split{margin-top:10px}
  .bignote{bottom:18%}
  .bignote b{font-size:clamp(30px,3.8vw,54px)}
}
@media(min-width:1080px) and (max-height:640px){
  .cap__p{-webkit-line-clamp:3}
  .pitch__s{display:none}
  .bignote em{display:none}
}

/* ---- one-column line (tablets, phones) ---- */
@media(max-width:1079px){
  .gcol{--gh:min(calc(100svh - var(--hd) - var(--tick) - 128px),600px,calc((100vw - var(--gut) * 2) * 1.2483));
    min-height:0}
  /* the rule under a centred label runs both ways */
  .cap__no::before{content:'';height:1px;flex:1;max-width:84px;
    background:linear-gradient(270deg,var(--line-2),transparent)}
  /* bigger hit area for the small text links, same look */
  .band__go{padding-block:13px;margin-block:-13px}
  /* the station name is already in the top row, so the rail is a clean progress bar */
  .rail{gap:5px;padding-top:4px;padding-bottom:10px}
  .rail__it{min-width:0;height:30px;padding-top:0}
  .rail__n,.rail__t{display:none}
}
/* tablets also carry the selling line under the stage */
@media(min-width:900px) and (max-width:1079px){
  .gcol{--gh:min(calc(100svh - var(--hd) - var(--tick) - 176px),600px,calc((100vw - var(--gut) * 2) * 1.2483))}
}
@media(max-width:899px){.band__txt{padding-left:0;padding-right:0}}
@media(max-width:1079px) and (orientation:portrait){
  .stage__body{align-items:start}
  .gcol{margin-top:clamp(4px,1.6vh,22px)}
  .pitch__p{margin-inline:auto}
}
/* tablets on their side: garment left, words right */
@media(min-width:760px) and (max-width:1079px) and (orientation:landscape){
  .stage__body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,4vw,52px)}
  .gcol{grid-column:1;grid-row:1;
    --gh:min(calc(100svh - var(--hd) - var(--tick) - 186px),620px,calc((50vw - var(--gut) * 1.5) * 1.2483))}
  .caps{left:calc(100% + clamp(28px,4vw,52px));right:auto;width:100%;top:0;bottom:0;height:auto;text-align:left}
  .caps::before{display:none}
  .cap{justify-content:center}
  .cap__no{justify-content:flex-start}
  .cap__no::before{display:none}
  .cap__p{margin-inline:0;font-size:15.5px}
  .pitch{position:relative;left:auto;right:auto;bottom:auto;grid-column:2;grid-row:1;
    align-self:center;padding-top:0;text-align:left}
  .pitch::before{display:none}
  .pitch__split{margin-inline:0}
  .pitch__cta{justify-content:flex-start}
  .pitch__scroll{display:none}
  .pitch__h{font-size:clamp(28px,3.9vw,40px)}
  .bignote{max-width:min(62vw,560px)}
}
@media(min-width:760px) and (max-width:1079px) and (orientation:landscape) and (max-height:820px){
  .pitch__p{display:none}
}
@media(min-width:760px) and (max-width:1079px) and (orientation:landscape) and (max-height:620px){
  .pitch__s{display:none}
  .cap__p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
}

/* ---- phones ---- */
@media(max-width:759px){
  .stage__top{padding-top:12px;font-size:10px;letter-spacing:.15em}
  .pitch__eye{font-size:10.5px;letter-spacing:.14em;text-wrap:balance}
  .cap__h{font-size:clamp(24px,7vw,32px)}
  .caps{height:clamp(190px,34vh,290px)}
  .rail{padding-bottom:8px}
  .bignote{left:var(--gut);right:var(--gut);bottom:clamp(18px,4vh,40px);max-width:none}
  .bignote b{font-size:clamp(28px,8.6vw,40px)}
  .bignote i{font-size:10.5px;margin-bottom:10px}
  .bignote em{font-size:14.5px;line-height:1.5}
  .blanks__claim{gap:8px 18px;font-size:10.5px}
}
/* short phones (SE, small Androids, or a tall browser bar) */
@media(max-width:759px) and (max-height:720px){
  .pitch{padding-top:clamp(28px,6vh,56px)}
  .pitch__h{font-size:clamp(26px,7.6vw,36px)}
  .pitch__split{margin-top:12px;padding-top:10px}
  .pitch__s{display:none}
  .pitch__cta{margin-top:14px}
  .pitch__scroll{display:none}
  .cap__p{font-size:14px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .bignote em{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
}
@media(max-width:759px) and (max-height:600px){
  .cap__p{-webkit-line-clamp:2}
  .bignote em{display:none}
  .pitch__split{display:none}
}

/* ---- the line without scroll-scrubbing: reduced motion, or a screen too short
   to pin it (a phone on its side). Plain garment, the pitch, every caption. ---- */
.is-static .track{height:auto}
.is-static .stage{position:relative;top:auto;height:auto;min-height:0;overflow:visible;
  padding-bottom:clamp(36px,6vw,80px)}
.is-static .stage__body{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;
  padding-top:18px;align-items:center}
.is-static .gcol{display:contents}
.is-static .garment{height:auto;width:min(100%,380px);justify-self:center;opacity:1!important;transform:none!important}
.is-static .deco,.is-static .callout,.is-static .note,.is-static .gswap,.is-static .eqcol,
.is-static .bignote,.is-static .prop,.is-static .rail,.is-static .stage__spec,.is-static .hint,
.is-static .frame,.is-static .cyc__vig,.is-static .pitch__scroll{display:none}
.is-static .pitch{position:static;left:auto;right:auto;padding:0;margin:0;max-width:640px;
  text-align:left;opacity:1!important}
.is-static .pitch::before{display:none}
.is-static .pitch__logo{display:none}
.is-static .pitch__split{display:grid;margin-inline:0}
.is-static .pitch__s{display:block}
.is-static .pitch__cta{justify-content:flex-start}
.is-static .caps{position:static;display:grid;height:auto;min-height:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:26px clamp(24px,3vw,48px);
  text-align:left;padding-top:26px;border-top:1px solid var(--line)}
.is-static .caps::before{display:none}
.is-static .cap{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;display:block}
.is-static .cap:empty,.is-static .cap::before,.is-static .cap::after,.is-static .cap__no::before{display:none}
.is-static .cap__no{justify-content:flex-start}
.is-static .cap__p{margin-inline:0;display:block;overflow:visible;font-size:15.5px}
@media(min-width:640px){
  .is-static .stage__body{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);column-gap:clamp(28px,5vw,72px)}
  .is-static .garment{grid-column:1;grid-row:1}
  .is-static .pitch{grid-column:2;grid-row:1}
  .is-static .caps{grid-column:1 / -1;grid-row:2}
}

/* browsers without small-viewport units */
@supports not (height:100svh){
  @media(min-width:1080px){.gcol{--gh:min(calc(100vh - 264px - var(--tick)),775px,calc((100vw - var(--gut) * 2) * .74))}}
  @media(max-width:1079px){.gcol{--gh:min(calc(100vh - var(--hd) - var(--tick) - 128px),600px,calc((100vw - var(--gut) * 2) * 1.2483))}}
}