/* ==================================================================
   KEMET INTERNATIONAL GROUP — SUB-PAGE BANDS (about.html, contact.html)
   ------------------------------------------------------------------
   Loaded AFTER kig-site.css and built entirely on its tokens: nothing
   here declares a colour literal, so both pages flip with the theme
   toggle exactly as the home page does.

   The bands follow the home page's editorial rhythm — a full-bleed
   ink page hero, then alternating cream / ink bands, each opened by
   the numbered mono eyebrow (.sec-no) and the left-aligned display
   headline (.rule-head h2) — and reuse its devices rather than adding
   new ones: the masked line wipe, the rule that draws out of the
   eyebrow, the gold ring that strokes itself around a disc, the
   connector rail that draws left-to-right, and the stagger read from
   the --i index kig-site.js writes onto list children.

   MOTION CONTRACT: hidden states exist only under html.anim, and
   every entrance keys off the .in class the shared observer toggles
   on and off, so all of it REPLAYS when an element scrolls back into
   view. Transform, opacity, clip-path and stroke only — no layout.
   ================================================================== */

/* ================= PAGE HERO =================
   Same field as the home page hero — one dark ground, the warm gold bloom,
   the plotting grid, the nav floating over it — minus the globe. The
   right-hand column carries the Kemet mark as a drawn emblem instead:
   two rings scribe themselves on entry (the loader's own gesture) and
   the outer orbit turns slowly while the band is on screen. */
.page-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(42% 46% at 76% 52%, rgba(227,162,74,.16), transparent 70%),
    radial-gradient(80% 70% at 78% 60%, rgba(201,162,39,.13), transparent 64%),
    radial-gradient(55% 65% at 6% 34%, rgba(201,162,39,.075), transparent 72%),
    var(--ink);
  color:var(--sand);
  min-height:min(78vh,760px);
  margin-top:calc(-1 * var(--nav-h,56px));
  padding:var(--nav-h,56px) 0 0;
  display:flex;align-items:center;
}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:38px 38px,38px 38px;
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}
.page-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(60px,10vh,120px);
  background:linear-gradient(to bottom,transparent,var(--ink));
  pointer-events:none;z-index:2;
}
.ph-in{
  position:relative;z-index:3;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,72px);align-items:center;
  padding-block:clamp(56px,8vw,120px) clamp(84px,10vw,150px);
}
.ph-copy > *{max-width:62ch;}
.page-hero h1{
  font-size:var(--fs-3xl);font-weight:700;letter-spacing:-.018em;line-height:.96;
  color:var(--band-head);
}
.page-hero h1 .g{color:var(--gold-display);text-shadow:var(--yellow-edge);}
.ph-sub{
  margin-top:clamp(14px,1.6vw,22px);
  font-style:italic;font-weight:500;
  font-size:var(--fs-md);line-height:1.5;
  color:var(--sand-dim);max-width:56ch;
}
/* strapline focuses in from a blur, as on the home page */
html.anim .ph-sub{filter:blur(7px);}
html.anim .ph-sub.in{filter:blur(0);transition:opacity .75s var(--ease),transform .75s var(--ease),filter 1s var(--ease);}
.ph-cta{display:flex;flex-wrap:wrap;gap:clamp(9px,1vw,14px);margin-top:clamp(18px,2.3vw,32px);}
.page-hero .h-badge{
  position:absolute;left:0;right:0;bottom:clamp(22px,3vw,44px);z-index:3;
  padding-inline:var(--pad);
  max-width:var(--maxw);margin:0 auto;
  color:var(--gold-warm);
  text-shadow:0 1px 12px rgba(5,6,8,.85),0 0 4px rgba(5,6,8,.6);
}
.page-hero .h-badge i{background:var(--gold);transform:none;}
:root[data-theme="light"] .page-hero .h-badge{color:var(--gold-txt);text-shadow:0 1px 10px rgba(251,248,241,.9);}
:root[data-theme="light"] .page-hero .h-badge i{background:var(--gold-txt);}

/* ---- the drawn emblem ---- */
.ph-mark{
  position:relative;justify-self:end;
  width:clamp(180px,26vw,380px);aspect-ratio:1;
  display:grid;place-items:center;
}
.ph-mark svg{width:100%;height:100%;overflow:visible;}
/* Full-strength gold rings in both themes (client request), so the device
   reads as a solid defined line rather than a faint haze. The two drawn
   rings scale with the SVG on purpose: under non-scaling-stroke the 600
   dash was measured in screen pixels, so any emblem wider than ~200px ran
   out of dash before the ring closed (a quarter missing at 1024px). In
   user units both rings are under 600 around and always close. Only the
   dotted orbit keeps a fixed-pixel stroke — it is never dash-animated. */
.ph-mark circle{fill:none;stroke:var(--gold);stroke-width:1.8;opacity:1;}
.ph-mark .orbit{stroke-width:1.4;stroke-dasharray:3 9;opacity:.9;transform-origin:50% 50%;vector-effect:non-scaling-stroke;}
/* --ph-mk-op is the mark's settled opacity. ONE definition per theme, read
   by the base rule, the animation end state and the reduced-motion pin, so
   the three can never disagree again. Both themes hold the mark strong
   (client request): dark at 55% so it stands clear of the ink, light as a
   fully solid deep-gold mark on the cream. */
.ph-mark{--ph-mk-op:.55;}
.ph-mark .mk{fill:var(--sand);opacity:var(--ph-mk-op);transform-box:fill-box;transform-origin:center;}
:root[data-theme="light"] .ph-mark{--ph-mk-op:1;}
:root[data-theme="light"] .ph-mark .mk{fill:var(--gold-ink);}
/* On cream, --gold is close in value to the ground, so light mode takes
   the darker --gold-ink for the rings instead. */
:root[data-theme="light"] .ph-mark circle{stroke:var(--gold-ink);}
/* rings scribe themselves; the mark settles in behind them */
html.anim .ph-mark .r1,html.anim .ph-mark .r2{stroke-dasharray:600;stroke-dashoffset:600;}
html.anim .ph-mark.in .r1{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--ease-io) .15s;}
html.anim .ph-mark.in .r2{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--ease-io) .28s;}
/* The mark's entrance is a keyframe run, not a transition. A transition
   also fired on every theme switch (the switch changes --ph-mk-op), so the
   mark lagged ~1.25s behind the rest of the page. The animation only plays
   when .in is added; once it ends the settled opacity is plain CSS, so a
   theme toggle repaints the mark instantly. */
html.anim .ph-mark .mk{opacity:0;transform:scale(.86);}
html.anim .ph-mark.in .mk{opacity:var(--ph-mk-op);transform:none;animation:phMkIn .9s var(--ease-io) .55s backwards;}
@keyframes phMkIn{from{opacity:0;transform:scale(.86);}}
html.anim .ph-mark.in .orbit{animation:phOrbit 70s linear infinite;}
@keyframes phOrbit{to{transform:rotate(360deg);}}
/* two soft pulses once the rings have drawn, same as the header emblem */
.ph-mark::after{
  content:"";position:absolute;inset:8%;border-radius:50%;
  border:1px solid var(--gold);opacity:0;pointer-events:none;
}
html.anim .ph-mark.in::after{animation:emblemPulse 2.2s var(--ease-io) 1.6s 2;}
@keyframes emblemPulse{0%{transform:scale(.9);opacity:.7;}100%{transform:scale(1.4);opacity:0;}}

@media (max-width:900px){
  .page-hero{min-height:auto;}
  .ph-in{grid-template-columns:1fr;padding-block:clamp(44px,10vw,80px) clamp(84px,14vw,120px);}
  /* On one column the emblem leads the hero instead of sitting behind the
     copy: at full strength it made the headline and strapline hard to read.
     order:-1 lifts it above the eyebrow without changing the DOM order. */
  .ph-mark{order:-1;justify-self:start;width:clamp(150px,40vw,220px);}
}

/* ================= BANDS ================= */
.band{position:relative;padding-block:clamp(56px,7vw,120px);}
.band > .wrap{position:relative;z-index:2;}
.band-cream{
  background:var(--paper);color:var(--dark-txt);
  border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line);
}
.band-ink{background:var(--ink);color:var(--sand);overflow:hidden;}
.band-ink::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:34px 34px,34px 34px;
}
html.anim .band-ink::before{animation:gridDrift 40s linear infinite;}
@keyframes gridDrift{to{background-position:34px 34px,34px 34px;}}
.band-ink .rule-head h2{color:var(--band-head);}
.band-ink .sec-no{color:var(--gold-txt);}
/* the giant watermark the Why KIG band wears, so the ink bands here read
   as the same family */
.band-ink.wm::after{
  content:attr(data-wm);position:absolute;right:-.03em;bottom:-.22em;z-index:1;
  color:var(--txt-ghost);opacity:.09;
  font:700 clamp(200px,30vw,480px)/1 var(--f-display);
  letter-spacing:-.08em;pointer-events:none;text-transform:uppercase;
}

/* headline + lede column, and the copy column beside it */
.band-head{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px);}
.lede{font-size:var(--fs-lg);line-height:1.42;color:var(--mid-txt);max-width:38ch;}
.band-ink .lede{color:var(--sand-dim);}
.copy{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,20px);}
.copy p{font-size:var(--fs-md);line-height:1.68;color:var(--mid-txt);max-width:64ch;}
.copy p em{font-style:normal;font-weight:600;color:var(--gold-ink);}
.band-ink .copy p{color:var(--sand-dim);}
.band-ink .copy p em{color:var(--sand);}
/* the copy focuses in rather than sliding — the positioning strip's signature */
html.anim .copy p{filter:blur(6px);}
html.anim .copy p.in{filter:blur(0);transition:opacity .8s var(--ease),transform .8s var(--ease),filter 1s var(--ease);}

/* pull-quote: the intro card's language, on either ground */
.pull{
  position:relative;margin:0;padding:2px 0 2px clamp(16px,1.6vw,26px);
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-xl);line-height:1.12;letter-spacing:.015em;color:var(--dark-txt);max-width:24ch;
}
.pull em{font-style:normal;display:block;color:var(--gold-ink);font-size:.62em;letter-spacing:.06em;margin-bottom:8px;}
.band-ink .pull{color:var(--sand);}
.band-ink .pull em{color:var(--gold-txt);}
.pull::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);transform-origin:top;}
html.anim .pull::before{transform:scaleY(0);}
html.anim .pull.in::before{transform:scaleY(1);transition:transform .9s var(--ease-io) .15s;}

/* mono "more" link, the procurement band's .kp-more / serve-footer voice */
.more{
  display:inline-flex;align-items:center;gap:10px;margin-top:clamp(18px,2.2vw,30px);
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-mono);letter-spacing:.13em;color:var(--gold-ink);
  transition:color .25s,gap .3s var(--ease-io);
}
.more::after{content:"\2197";font:400 1.35em/1 var(--f-body);transition:transform .35s var(--ease-io);}
.more:hover{color:var(--dark-txt);gap:14px;}
.more:hover::after{transform:translate(2px,-2px);}
.band-ink .more{color:var(--gold-txt);}
.band-ink .more:hover{color:var(--sand);}

/* ================= FACTS (about: at a glance) ================= */
.facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(18px,2.4vw,40px);margin-top:clamp(20px,2.4vw,34px);
  border-top:1px solid var(--paper-line);
}
.facts > div{padding-block:clamp(14px,1.5vw,22px);border-bottom:1px solid var(--paper-line);}
.facts dt{
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:6px;
}
.facts dd{font-family:var(--f-display);font-weight:600;font-size:var(--fs-lg);line-height:1.12;letter-spacing:.01em;color:var(--dark-txt);}
html.anim .facts > div{opacity:0;transform:translateX(-10px);}
html.anim .facts.in > div{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) calc(.14s + min(var(--i,0)*70ms,340ms)),
             transform .5s var(--ease) calc(.14s + min(var(--i,0)*70ms,340ms));
}
@media (max-width:560px){.facts{grid-template-columns:1fr;}}

/* ================= GRID OF CARDS (principles / engagement) =================
   The capabilities grid's hairline lattice: cards separated by lines, not
   boxes, so nothing reads as a marketplace tile. */
.lattice{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(28px,3.6vw,56px);
  border-top:1px solid var(--line-d);
}
.lattice > *{
  position:relative;text-align:left;
  padding:clamp(22px,2.4vw,40px) clamp(16px,1.8vw,32px) clamp(22px,2.4vw,40px) 0;
  border-bottom:1px solid var(--line-d);border-right:1px solid var(--line-d);
  transition:background .14s var(--ease);
}
.lattice > *:not(:nth-child(3n+1)){padding-left:clamp(16px,1.8vw,32px);}
.lattice > :nth-child(3n){border-right:0;}
.lattice > *:hover{background:var(--ink-2);}
.band-cream .lattice{border-color:var(--paper-line);}
.band-cream .lattice > *{border-color:var(--paper-line);}
.band-cream .lattice > *:hover{background:var(--paper-2);}
.card-no{
  display:block;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-txt);margin-bottom:clamp(18px,2vw,30px);
}
.band-cream .card-no{color:var(--gold-ink);}
.card h3{
  font-size:var(--fs-lg);font-weight:600;letter-spacing:.01em;line-height:1.1;
  color:var(--sand);margin-bottom:clamp(8px,.9vw,12px);
}
.band-cream .card h3{color:var(--dark-txt);}
.card p{font-size:var(--fs-sm);line-height:1.5;color:var(--sand-dim);max-width:34ch;}
.band-cream .card p{color:var(--mid-txt);}
/* gold disc with the ring that strokes itself, from the capabilities cards */
.disc{
  position:relative;
  width:clamp(46px,4.2vw,66px);height:clamp(46px,4.2vw,66px);margin:0 0 clamp(14px,1.5vw,22px);
  border-radius:50%;background:var(--ink);display:grid;place-items:center;color:var(--gold-txt);
  border:1px solid rgba(201,162,39,.22);
  transition:transform .5s var(--ease-io),border-color .4s;
}
.band-cream .disc{background:var(--paper);color:var(--gold-ink);}
.disc > svg:not(.ring){
  width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--ease-io);
}
.disc .ring{
  position:absolute;left:-5px;top:-5px;width:calc(100% + 10px);height:calc(100% + 10px);
  max-width:none;fill:none;stroke:var(--gold);overflow:visible;
}
.disc .ring circle{
  stroke-width:1.5;vector-effect:non-scaling-stroke;
  stroke-dasharray:100;stroke-dashoffset:0;
  transform:rotate(-90deg);transform-origin:50% 50%;
}
.card:hover .disc{transform:translateY(-4px);border-color:rgba(201,162,39,.55);}
.card:hover .disc > svg:not(.ring){transform:scale(1.1);}
/* entrance: cards deal in, icons assemble, rings stroke around */
html.anim .lattice > .card{opacity:0;transform:translateY(18px);}
html.anim .lattice.in > .card{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease) calc(min(var(--i,0)*80ms,400ms)),
             transform .6s var(--ease-io) calc(min(var(--i,0)*80ms,400ms)),background .28s var(--ease);
}
html.anim .disc .ring circle{stroke-dashoffset:100;}
html.anim .lattice.in .disc .ring circle{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease-io) calc(.18s + min(var(--i,0)*80ms,400ms));}
html.anim .disc > svg:not(.ring){opacity:0;transform:scale(.35) rotate(-45deg);}
html.anim .lattice.in .disc > svg:not(.ring){opacity:1;transform:none;transition:opacity .5s var(--ease-io) calc(.2s + min(var(--i,0)*80ms,400ms)),transform .75s var(--ease-io) calc(.2s + min(var(--i,0)*80ms,400ms));}
html.anim .lattice.in .card:hover .disc > svg:not(.ring){transform:scale(1.1);}
@media (max-width:900px){
  .lattice{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lattice > *:not(:nth-child(3n+1)){padding-left:0;}
  .lattice > *:not(:nth-child(2n+1)){padding-left:clamp(16px,1.8vw,32px);}
  .lattice > :nth-child(3n){border-right:1px solid var(--line-d);}
  .band-cream .lattice > :nth-child(3n){border-right-color:var(--paper-line);}
  .lattice > :nth-child(2n){border-right:0;}
}
@media (max-width:560px){
  .lattice{grid-template-columns:1fr;}
  .lattice > *{border-right:0 !important;padding-left:0 !important;padding-right:0;}
}

/* ---- engagement cards are real buttons (they pick the form's area) ---- */
.lattice > button.card{
  font:inherit;color:inherit;background:transparent;border-top:0;border-left:0;cursor:pointer;
  display:block;width:100%;
}
.card .pick{
  display:inline-flex;align-items:center;gap:8px;margin-top:clamp(12px,1.3vw,18px);
  font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:var(--fs-mono);letter-spacing:.13em;color:var(--gold-txt);
  transition:color .25s;
}
.card .pick::after{content:"\2197";font:400 1.35em/1 var(--f-body);transition:transform .35s var(--ease-io);}
.card:hover .pick{color:var(--gold-txt-lit);}
.card:hover .pick::after{transform:translate(2px,-2px);}
.card[aria-pressed="true"]{background:var(--ink-2);}
.card[aria-pressed="true"]::before{
  content:"";position:absolute;left:0;top:-1px;right:0;height:2px;background:var(--gold);
}
.card[aria-pressed="true"] .pick{color:var(--gold-txt-lit);}
.card[aria-pressed="true"] .pick::after{content:"\2713";}

/* ================= STAGES (about: how we operate) ================= */
.stage-rail{
  position:relative;height:2px;background:rgba(201,162,39,.18);
  margin:clamp(24px,3vw,44px) 0 clamp(18px,2vw,30px);overflow:hidden;
}
.stage-rail i{
  position:absolute;inset:0;transform-origin:left;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-lit));
}
html.anim .stage-rail i{transform:scaleX(0);}
html.anim .stages.in .stage-rail i{transform:scaleX(1);transition:transform 1.4s var(--ease-io) .1s;}
.stage-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,18px);align-items:start;}
.stage{position:relative;padding-right:clamp(14px,1.7vw,28px);}
.stage:not(:last-child)::after{
  content:"";position:absolute;right:0;top:clamp(14px,1.5vw,24px);
  width:clamp(11px,1.15vw,17px);height:clamp(11px,1.15vw,17px);background:var(--gold);
  clip-path:polygon(0 22%,58% 22%,58% 0,100% 50%,58% 100%,58% 78%,0 78%);
}
.stage .num{
  display:block;font-family:var(--f-display);font-weight:700;line-height:.9;
  font-size:var(--fs-2xl);color:var(--gold-ink);margin-bottom:clamp(10px,1.2vw,16px);
}
.stage h3{font-size:var(--fs-md);font-weight:600;letter-spacing:.06em;color:var(--dark-txt);line-height:1.15;margin-bottom:6px;}
.stage p{font-size:var(--fs-sm);line-height:1.45;color:var(--mid-txt);max-width:28ch;}
html.anim .stage{opacity:0;transform:translateY(14px);}
html.anim .stages.in .stage{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease) calc(.25s + var(--i,0)*150ms),transform .6s var(--ease-io) calc(.25s + var(--i,0)*150ms);
}
html.anim .stage:not(:last-child)::after{opacity:0;transform:translateX(-8px);}
html.anim .stages.in .stage:not(:last-child)::after{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(.45s + var(--i,0)*150ms),transform .5s var(--ease-io) calc(.45s + var(--i,0)*150ms);}
@media (max-width:1000px){
  .stage-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(18px,2.6vw,30px);}
  .stage:nth-child(2)::after{display:none;}
}
@media (max-width:600px){
  .stage-list{grid-template-columns:1fr;}
  .stage::after{display:none !important;}
  .stage p{max-width:none;}
}

/* ================= AUDIENCE LIST (about: who we serve) ================= */
.aud{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(20px,2.6vw,44px);margin-top:clamp(28px,3.6vw,56px);
  border-top:1px solid var(--line-d);
}
.aud li{
  display:flex;align-items:baseline;gap:clamp(12px,1.3vw,18px);
  padding-block:clamp(13px,1.4vw,20px);border-bottom:1px solid var(--line-d);
  transition:transform .35s var(--ease);
}
.aud li:hover{transform:translateX(5px);}
.aud .n{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.16em;color:var(--gold-txt);flex:none;}
.aud b{font-family:var(--f-display);font-weight:600;font-size:var(--fs-md);letter-spacing:.02em;color:var(--sand);line-height:1.15;}
.aud small{display:block;font-size:var(--fs-sm);line-height:1.4;color:var(--sand-dim);margin-top:3px;}
html.anim .aud li{opacity:0;transform:translateX(-10px);}
html.anim .aud.in li{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) calc(.14s + min(var(--i,0)*42ms,340ms)),
             transform .5s var(--ease) calc(.14s + min(var(--i,0)*42ms,340ms));
}
html.anim .aud.in li:hover{transform:translateX(5px);}
@media (max-width:900px){.aud{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.aud{grid-template-columns:1fr;}}

/* ================= CONTACT: DETAILS + FORM ================= */
.contact{display:flex;flex-direction:column;gap:clamp(8px,.9vw,14px);margin-top:clamp(20px,2.4vw,34px);}
.contact > *{display:flex;align-items:center;gap:12px;font-size:var(--fs-md);color:var(--dark-txt);transition:color .25s,transform .35s var(--ease);}
.contact a:hover{color:var(--gold-ink);transform:translateX(5px);}
.contact svg{width:clamp(16px,1.3vw,20px);height:clamp(16px,1.3vw,20px);flex:none;fill:none;stroke:var(--gold-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.contact .lbl{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mid-txt);min-width:7.5em;}
html.anim .contact > *{opacity:0;transform:translateX(-10px);}
html.anim .contact.in > *{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) calc(.15s + var(--i,0)*90ms),transform .5s var(--ease) calc(.15s + var(--i,0)*90ms),color .25s;
}
html.anim .contact.in > a:hover{transform:translateX(5px);}
.contact-cta{margin-top:clamp(20px,2.4vw,34px);}
.contact-note{
  margin-top:clamp(18px,2.2vw,30px);padding-top:clamp(12px,1.4vw,18px);
  border-top:1px solid var(--paper-line);
  font-size:var(--fs-sm);line-height:1.55;color:var(--mid-txt);max-width:44ch;
}

/* the form: the newsletter field's underline language, laid out in two
   columns. A form is where the theme tokens matter most — every colour
   here is a token so it holds AA on both grounds. */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,30px) clamp(16px,2.2vw,36px);}
/* The engagement cards scrollIntoView() this form while it is still in its
   pre-reveal state (translateY(22px) under html.anim), so the scroll target
   is measured 22px low and the form settles 22px higher than asked. The
   page-wide [id] margin is 76px, which that error puts under the 56px nav;
   this margin leaves the first label clear either way. */
#message{scroll-margin-top:calc(var(--nav-h,56px) + 44px);}
.fld{display:flex;flex-direction:column;min-width:0;}
.fld.full{grid-column:1 / -1;}
.fld label{
  font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--mid-txt);margin-bottom:8px;
}
.fld label em{font-style:normal;color:var(--gold-ink);}
.fld input,.fld select,.fld textarea{
  width:100%;font-family:var(--f-body);font-size:var(--fs-md);color:var(--dark-txt);
  background:transparent;border:0;border-bottom:1px solid var(--line-d);border-radius:0;
  padding:clamp(9px,1vw,14px) 2px;caret-color:var(--gold-txt);
  transition:border-color .3s var(--ease);
}
/* One visible line plus a hint of room, growing with the content (the
   field-sizing engines that support it do this natively; the input listener
   in contact.html covers the rest), so the underline stays under the text
   instead of floating a paragraph below it. */
.fld textarea{resize:vertical;min-height:2.6em;line-height:1.55;field-sizing:content;overflow:hidden;}
.fld input::placeholder,.fld textarea::placeholder{color:var(--mid-txt);opacity:.65;}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--gold);}
.fld input:user-invalid,.fld textarea:user-invalid{border-bottom-color:var(--gold-warm);}
/* select: native control, chrome-less, with a drawn chevron */
.sel{position:relative;}
.sel select{appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer;}
.sel::after{
  content:"";position:absolute;right:6px;bottom:clamp(15px,1.5vw,21px);
  width:8px;height:8px;border-right:1.5px solid var(--gold-ink);border-bottom:1.5px solid var(--gold-ink);
  transform:rotate(45deg);pointer-events:none;
}
.sel select option{color:var(--dark-txt);background:var(--paper);}
.form-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,1.6vw,24px);margin-top:4px;}
.form-foot .btn{border:0;cursor:pointer;font:inherit;font-family:var(--f-display);font-weight:600;text-transform:uppercase;font-size:var(--fs-label);letter-spacing:.13em;}
.form-status{
  flex:1 1 240px;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--mid-txt);min-height:1.25em;line-height:1.5;
}
.form-status.ok{color:var(--gold-ink);}
/* fields deal in one after another */
html.anim .form > .fld{opacity:0;transform:translateY(12px);}
html.anim .form.in > .fld{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease) calc(.1s + min(var(--i,0)*70ms,420ms)),transform .55s var(--ease-io) calc(.1s + min(var(--i,0)*70ms,420ms));
}
html.anim .form > .fld input,html.anim .form > .fld select,html.anim .form > .fld textarea{
  background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;
  background-size:0 1px;background-position:left bottom;
  transition:border-color .3s var(--ease),background-size .9s var(--ease-io) calc(.35s + min(var(--i,0)*70ms,420ms));
}
html.anim .form.in > .fld input,html.anim .form.in > .fld select,html.anim .form.in > .fld textarea{background-size:100% 1px;}
html.anim .form.in > .fld input:focus,html.anim .form.in > .fld select:focus,html.anim .form.in > .fld textarea:focus{background-size:100% 2px;}
@media (max-width:640px){.form{grid-template-columns:1fr;}.fld.full{grid-column:auto;}}

/* ================= REDUCED MOTION =================
   html.anim is never set under reduced motion, so these are belt and
   braces: pin every finished frame explicitly, the way the home page does. */
@media (prefers-reduced-motion:reduce){
  html.anim .ph-sub,html.anim .copy p{filter:none !important;}
  html.anim .ph-mark .r1,html.anim .ph-mark .r2,html.anim .disc .ring circle{stroke-dashoffset:0 !important;}
  html.anim .ph-mark .mk{opacity:var(--ph-mk-op) !important;transform:none !important;}
  html.anim .ph-mark .orbit{animation:none !important;}
  html.anim .pull::before,html.anim .stage-rail i{transform:none !important;}
  html.anim .lattice > .card,html.anim .disc > svg,html.anim .facts > div,html.anim .stage,html.anim .aud li,
  html.anim .contact > *,html.anim .form > .fld{opacity:1 !important;transform:none !important;}
  html.anim .band-ink::before{animation:none !important;}
}
@media print{
  .page-hero{min-height:auto;}
  .ph-mark{display:none;}
  html.anim .lattice > .card,html.anim .disc > svg,html.anim .facts > div,html.anim .stage,html.anim .aud li,
  html.anim .contact > *,html.anim .form > .fld{opacity:1 !important;transform:none !important;}
}