/* home — the flagship concept carried into the build (hero stage, brands, why, cats,
   stock, industries, field, team, about, final). Chrome/vocabulary live in chrome.css. */

/* ---------- hero ---------- */
.hero{position:relative;overflow:clip;background:
  radial-gradient(900px 520px at 78% 36%,rgba(29,130,198,.16),transparent 62%),
  radial-gradient(700px 500px at 6% 90%,rgba(34,75,133,.14),transparent 60%),
  var(--bg)}
.hero::before{content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgba(96,168,232,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(96,168,232,.05) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(760px 520px at 72% 40%,#000 30%,transparent 72%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:var(--g5);align-items:center;padding-top:64px;padding-bottom:88px}
.hero .kicker{margin-bottom:22px}
.hero p.lede{margin:22px 0 32px;color:var(--mut);font-size:15.5px;line-height:1.7;max-width:62ch}
.trust{display:flex;flex-wrap:wrap;gap:var(--g1);margin-top:34px}

/* hero stage */
.stage{position:relative;min-height:520px;display:grid;place-items:center}
.puck{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);width:min(430px,84%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(41,170,227,.20),rgba(41,170,227,.05) 58%,transparent 72%)}
.ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(76,196,255,.35);
  mask-image:conic-gradient(#000 0 40%,transparent 46% 78%,#000 84%);animation:spin 14s linear infinite}
.ring.r2{inset:9%;border-color:rgba(76,196,255,.22);animation-duration:22s;animation-direction:reverse;
  mask-image:conic-gradient(transparent 0 12%,#000 20% 55%,transparent 63%)}
.ring.r3{inset:-7%;border-style:dashed;border-color:rgba(76,196,255,.14);animation-duration:60s}
@keyframes spin{to{transform:rotate(1turn)}}
.slides{position:relative;width:min(470px,92%);height:470px;z-index:2}
.slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.slide.on{opacity:1;transform:none;pointer-events:auto}
.slide img{max-height:400px;width:auto;filter:drop-shadow(0 30px 44px rgba(0,0,0,.6)) drop-shadow(0 0 44px rgba(41,170,227,.18))}
.slide figcaption{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);text-align:center;width:max-content;max-width:100%}
.slide figcaption b{display:block;font:600 15px var(--disp);letter-spacing:.02em}
.slide figcaption span{font:500 12px var(--mono);letter-spacing:.1em;color:var(--cyan);text-transform:uppercase}
.stagectl{position:absolute;right:0;bottom:-14px;display:flex;align-items:center;gap:var(--g2);z-index:3}
.stagectl button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:rgba(12,24,48,.7);color:var(--ink);cursor:pointer;font-size:15px;transition:border-color .2s,background .2s}
.stagectl button:hover{border-color:var(--cyan);background:rgba(41,170,227,.14)}
.prog{width:74px;height:3px;border-radius:2px;background:rgba(96,168,232,.18);overflow:hidden}
.prog i{display:block;height:100%;width:50%;background:linear-gradient(90deg,var(--cyan),var(--cyan2));border-radius:2px;transition:transform .5s cubic-bezier(.22,.61,.36,1);transform:translateX(0)}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding-top:44px;padding-bottom:64px;gap:var(--g1)}
  .stage{min-height:440px;order:2}
  .slides{height:400px}
  .slide img{max-height:330px}
}

/* ---------- brand wall ----------
   The client publishes this exact section on their own site: a principals row and an
   "other brands we work with" row. Two rules govern how it is built here.

   1. The logos sit on WHITE PLATES. Every one of these marks is dark -- KITZ blue,
      Yoshitake black, DTL and Vogt navy, DFT maroon -- so on a #0A1424 ground half the
      wall would simply not be there. A plate is not decoration, it is the only way these
      particular marks are visible on this particular page.
   2. They are normalised by INK AREA, not by width or height (build_brandwall.py, and
      brand-src/plate/_scales.json). Sized by bounding box, a wide wordmark shouts and a
      square mark whispers, and a logo wall reads as ragged for a reason nobody can name.

   The status line under each principal is load-bearing, not ornament: only five of the six
   may say "authorised" (FACTS.md). The secondary row carries no status text at all. */
/* The band was a <div> before it carried logos; as a <section> it inherits
   section{padding:var(--sec) 0} and would have stacked 104px on top of the wrap's own 72,
   giving a 176px void at each end that no token asked for. Zero the section, keep the wrap. */
.brands{border-block:1px solid var(--line);background:var(--bg2);padding:0}
.brands .wrap{padding-top:var(--sec-sm);padding-bottom:var(--sec-sm)}
.bwhead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--g5);
  margin-bottom:44px;flex-wrap:wrap}
.bwhead .kicker{margin-bottom:14px}
.bwhead h2{font:600 clamp(26px,3.2vw,38px)/1.18 var(--disp);letter-spacing:-.01em}
.bwhead p{max-width:44ch;color:var(--mut);font-size:14.5px;line-height:1.7}

.plist{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--g3)}
.plist a{display:block;text-align:center;
  transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.plist a:hover{transform:translateY(-4px)}
.bplate{display:block;background:#fff;border-radius:var(--rad-s);overflow:hidden;
  box-shadow:0 14px 30px -20px rgba(0,0,0,.9);
  outline:1px solid rgba(96,168,232,.16);outline-offset:0;
  transition:outline-color .25s,box-shadow .25s}
.bplate img{display:block;width:100%;height:auto}
/* A cap, not a media query. Fewer columns at a narrower viewport means a WIDER cell, so
   without this the logos grow as the screen shrinks and a phone shows a bigger KITZ than
   a 27-inch monitor. The caps sit just above the widest desktop cell, so desktop is
   untouched and every narrower step simply stops growing. */
.plist .bplate{max-width:230px;margin-inline:auto}
.olist .bplate{max-width:165px;margin-inline:auto}
.plist a:hover .bplate{outline-color:var(--cyan);
  box-shadow:0 22px 40px -20px rgba(41,170,227,.5)}
.plist a:focus-visible .bplate{outline:2px solid var(--cyan);outline-offset:3px}
.plist b{display:block;margin-top:16px;font:700 14px/1.2 var(--disp);letter-spacing:.06em;
  color:#D5E4F4}
.plist span{display:block;font:500 12px/1.7 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut2)}
.plist li.auth .bs{color:var(--cyan)}

/* a rule that starts after the label, so the eye is handed from one tier to the next
   instead of meeting a second heading of equal weight */
.osplit{display:flex;align-items:center;gap:var(--g3);margin:56px 0 26px}
.osplit span{font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut2);white-space:nowrap}
.osplit::after{content:"";flex:1;height:1px;background:var(--line)}

.olist{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--g2)}
/* NOT opacity. A white plate at .84 over a #0A1424 ground is a GREY plate, and eight grey
   plates under six white ones read as a rendering fault, not as a second tier. The
   hierarchy is carried by size alone -- these plates are ~75% of the principals' -- and
   the white stays white. */
.olist .bplate{box-shadow:0 10px 24px -18px rgba(0,0,0,.9)}
.olist li:hover .bplate{outline-color:rgba(96,168,232,.42)}

.bnote{margin-top:32px;font-size:14px;color:var(--mut2)}
.bnote a{color:var(--cyan2);border-bottom:1px solid rgba(76,196,255,.35)}
.bnote a:hover{border-bottom-color:var(--cyan2)}

@media (max-width:1120px){
  .plist{grid-template-columns:repeat(3,1fr)}
  .olist{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:700px){
  .brands .wrap{padding-top:56px;padding-bottom:56px}
  .bwhead{gap:var(--g3);margin-bottom:32px}
  /* 4, not 3. Eight plates in three columns leaves two dead cells in the last row, and the
     band paints through the hole -- render_gate's card-grid rule. Every column count used
     anywhere here divides its own row exactly: 6/3/2 for the six principals, 8/4/4/2 for the
     eight other brands. */
  .plist{grid-template-columns:repeat(2,1fr)}
  .olist{grid-template-columns:repeat(4,1fr)}
  .osplit{margin:40px 0 22px}
}
@media (max-width:520px){
  .olist{grid-template-columns:repeat(2,1fr)}
  /* 12px is the type floor this design system enforces -- tighten the tracking, never
     the size (design_gate [type-floor]). */
  .plist b{font-size:13px}
  .plist span{letter-spacing:.07em}
}

/* ---------- why cards ---------- */
.why{background:var(--bg)}
.whygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g3)}
.wcard{padding:30px 26px}
.wcard .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(41,170,227,.12);border:1px solid rgba(76,196,255,.3);color:var(--cyan2);margin-bottom:20px;box-shadow:0 0 22px -6px rgba(41,170,227,.5)}
/* The glyphs were drawn at 20px inside a 46px chip -- 43% fill, so they floated small
   and lost in their own container. 26px is 57%. (A-D10) */
.wcard .ic svg{width:26px;height:26px;stroke-width:1.6}
/* two lines' worth of space whether or not the heading uses it, so a four-up row cannot
   break its baseline when one title runs longer (round 5, B F5-7) */
.wcard h3{font:600 17px/1.3 var(--disp);margin-bottom:12px;min-height:2.6em}
.wcard p{font-size:14.5px;color:var(--mut)}
@media (max-width:1120px){.whygrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.whygrid{grid-template-columns:1fr}}

/* ---------- categories ---------- */
.cats{background:var(--bg2);border-block:1px solid var(--line)}
.cathead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--g3);margin-bottom:48px;flex-wrap:wrap}
.cathead .shead{margin-bottom:0}
.catstat{display:flex;gap:var(--g4)}
.catstat div b{display:block;font:600 clamp(30px,3.4vw,42px)/1 var(--disp);color:var(--cyan2)}
.catstat div span{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut2)}
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g3)}
.ccard{position:relative;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;background:var(--panel);transition:transform .25s cubic-bezier(.22,.61,.36,1),border-color .25s,box-shadow .25s;display:block}
.ccard:hover{transform:translateY(-5px);border-color:rgba(76,196,255,.45);box-shadow:0 26px 48px -24px rgba(0,0,0,.8)}
.ccard .ph{display:block;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,#152747,#0A1526)}
.ccard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
/* The client's own background-removed renders sit in the same grid as the studio
   renders, so they get the same near-black studio ground rather than the lighter
   panel gradient -- otherwise one tile in six reads washed out. */
.ccard .ph.cut{background:radial-gradient(72% 72% at 50% 44%,#11213D,#070F1E 66%,#050A14)}
.ccard .ph.cut img{object-fit:contain;padding:26px;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(41,170,227,.14))}
.ccard:hover .ph img{transform:scale(1.05)}
.ccard .cb{display:flex;align-items:center;justify-content:space-between;gap:var(--g1);padding:18px 20px;border-top:1px solid var(--line)}
.ccard .cb b{font:600 15.5px var(--disp)}
.ccard .cb span{font:500 12px var(--mono);letter-spacing:.1em;color:var(--cyan);white-space:nowrap}
@media (max-width:900px){.catgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.catgrid{grid-template-columns:1fr}}

/* ---------- stock band ---------- */
/* The argument band. Takes the large tier AND the deep ground: --bg and --bg2 differ
   by 1.05:1, so 'alternating' bands were separated only by a hairline and eight
   screens read as one flat plane. This is the one that must not. (A-E1 / B-E2) */
.stock{position:relative;padding:var(--sec-lg) 0;border-block:1px solid var(--line)}
.stock .shead h2{font:600 clamp(30px,3.8vw,44px)/1.16 var(--disp)}
.stockgrid{display:grid;grid-template-columns:.94fr 1.06fr;gap:var(--g5);align-items:center}
.q3{display:grid;gap:var(--g2);margin-top:30px}
/* A grid, not a flex row: the values share one left edge whatever the label length.
   Flex sized each label to its content, so PRICE / LEAD TIME / STOCK produced three
   different left edges inside a three-item list -- on the site's own answer
   component, for the three questions every first call asks. (B-D9) */
.q3 li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--g2);align-items:baseline;border:1px solid var(--line);border-radius:var(--rad-s);padding:16px 20px;background:rgba(12,24,48,.4)}
@media (max-width:520px){.q3 li{grid-template-columns:1fr;gap:var(--g1)}}
.q3 b{font:500 12px var(--mono);letter-spacing:.14em;color:var(--cyan);text-transform:uppercase;white-space:nowrap}
.q3 span{color:var(--mut);font-size:14.5px}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:var(--g2)}
.shot-tall{height:100%}
.shot-tall img{height:100%;min-height:414px}
.shot-stack{display:grid;grid-template-rows:1fr 1fr;gap:var(--g2)}
.shot-stack .photocard img{height:200px}
@media (max-width:900px){.stockgrid{grid-template-columns:1fr}.shot-stack .photocard img{height:170px}.shot-tall img{min-height:354px}}
/* At 390 this collage was a 165x414 sliver beside two 165px thumbnails whose captions
   covered a third of the frame. It is the stock proof block -- you could not see the
   stock. .stockgrid collapsed at 960; .shots never collapsed at all. (B-D8) */
@media (max-width:700px){
  .shots{grid-template-columns:1fr}
  .shot-tall img{min-height:0;height:auto;aspect-ratio:4/3}
  .shot-stack{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .shot-stack .photocard img{height:140px}
}
@media (max-width:520px){.photocard figcaption{font-size:12px;letter-spacing:.06em;padding:34px 12px 10px}}

/* ---------- industries ---------- */
.inds{background:var(--bg2);border-block:1px solid var(--line);padding:var(--sec-sm) 0}
.inds h2{font:500 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mut2);text-align:center;margin-bottom:26px}
.indrow{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g1);max-width:840px;margin:0 auto}
.indrow li,.indrow li a{font:500 13px var(--disp);letter-spacing:.02em;color:var(--mut)}
.indrow li{border:1px solid var(--line);border-radius:999px;padding:9px 18px;transition:color .2s,border-color .2s,background .2s}
.indrow li:hover{color:#fff;border-color:rgba(76,196,255,.4);background:rgba(41,170,227,.08)}
.indrow li a{text-decoration:none}
.indrow li:hover a{color:#fff}

/* ---------- field gallery ---------- */
.fieldgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g3)}
.fcard img{aspect-ratio:4/3}
.fcard.tall img{aspect-ratio:3/4}
.fcard figcaption{font:500 13px var(--disp);letter-spacing:0;text-transform:none;padding:46px 18px 16px}
.fcard figcaption span{display:block;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-top:3px}
@media (max-width:900px){.fieldgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.fieldgrid{grid-template-columns:1fr}}

/* ---------- team ---------- */
.team{background:var(--bg2);border-block:1px solid var(--line);padding:var(--sec-sm) 0}
/* Below the width where the row happens to fit exactly, it becomes a real wrapping
   grid instead of a scroller with no affordance. (B-D5) */
/* Wraps at EVERY width. As a >=1120px scroller the row fitted its five cards exactly
   inside the container, so the 32px fade landed on card 5's own border and a desktop
   visitor saw 5 of 11 people with no signal the other six existed -- while a tablet
   visitor saw all eleven. (round 2, B) */

/* ---------- about / certs ---------- */
.aboutgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--g5);align-items:center}
.aboutgrid .ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/4.4}
@media (max-width:900px){.aboutgrid{grid-template-columns:1fr}}

/* ---------- final cta ---------- */
.final{background:
  radial-gradient(720px 420px at 50% 0%,rgba(29,130,198,.2),transparent 65%),var(--bg);text-align:center;border-top:1px solid var(--line)}
.final .kicker{justify-content:center}
/* Capped so the closing band never rivals the h1. At 44px against a 50px hero it read
   as loud as the page title; against the new 72px h1 the ratio is 1.8. (A-D4) */
.final h2{font:600 clamp(28px,3vw,40px)/1.16 var(--disp);letter-spacing:-.012em;max-width:20ch;margin:18px auto 0}
.final p{color:var(--mut);margin:18px auto 34px;max-width:52ch}