@import url('https://fonts.googleapis.com/css2?family=Anton&family=Host+Grotesk:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600&text=%E5%AE%88%E7%A0%B4%E9%9B%A2&display=swap');

/* ============================================================
   SHUHARI GROUP — design system v2, 28 August 2026
   Signature: the dye vat. Indigo deepens every time the cloth
   is dipped; shu / ha / ri is the same idea. The page performs
   the dip: as you scroll the method, the ground itself darkens
   through the three depths of one dye. Seal red is reserved for
   the brushwork, nothing else.
   ============================================================ */

:root{
  --paper:      #F7F6F2;
  --paper-deep: #EFEDE7;
  --ink:        #0E0F13;
  --ink-soft:   #3A4050;
  --ink-mute:   #71788A;

  --shu:        #5C7CB0;   /* first dip  */
  --ha:         #2E4778;   /* second dip */
  --ri:         #141F42;   /* third dip  */
  --ri-deep:    #0C1226;

  --seal:       #D93A2B;   /* hanko red: brushwork only */

  --rule:       rgba(14,15,19,.14);
  --rule-dark:  rgba(247,246,242,.18);

  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body:    'Host Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --kanji:   'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;

  --gut:  clamp(20px, 4.6vw, 72px);
  --max:  1440px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html:focus-within{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--ha); color:#fff; }

h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

:focus-visible{ outline:2px solid var(--ha); outline-offset:3px; border-radius:2px; }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- display type ---------- */
.d1{ font-family:var(--display); text-transform:uppercase; letter-spacing:.005em;
     font-size:clamp(42px, 11.4vw, 178px); line-height:.92; }
.d2{ font-family:var(--display); text-transform:uppercase; letter-spacing:.005em;
     font-size:clamp(29px, 6.4vw, 96px); line-height:.98; }
.d3{ font-family:var(--display); text-transform:uppercase; letter-spacing:.01em;
     font-size:clamp(26px, 3.4vw, 48px); line-height:1.02; }

.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-mute);
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.6; }
.on-dark .eyebrow{ color:rgba(247,246,242,.62); }

.lede{ font-size:clamp(17.5px, 1.5vw, 21px); line-height:1.6; color:var(--ink-soft); max-width:58ch; }
.on-dark{ color:var(--paper); }
.on-dark .lede{ color:rgba(247,246,242,.78); }

/* ============================================================
   Preloader — the first dip
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--ri-deep); color:var(--paper);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(20px,3.5vw,44px);
  transition:transform .9s var(--ease-out);
}
.loader.done{ transform:translateY(-101%); }
.loader.gone{ display:none; }
.loader__top{ display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(247,246,242,.6); }
.loader__mid{ display:flex; align-items:center; justify-content:center; gap:clamp(18px,4vw,42px); }
.loader__kanji{ font-family:var(--kanji); font-weight:600; font-size:clamp(44px,9vw,110px);
  line-height:1; opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.loader__kanji.lit{ opacity:1; transform:none; }
.loader__kanji:nth-child(2).lit{ color:#8FA3CE; }
.loader__kanji:nth-child(3).lit{ color:#6E86BC; }
.loader__bot{ display:flex; justify-content:space-between; align-items:flex-end; }
.loader__count{ font-family:var(--display); font-size:clamp(40px,7vw,84px); line-height:1; letter-spacing:.01em; }
.loader__tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(247,246,242,.6); text-align:right; }

/* page-transition wipe */
.wipe{ position:fixed; inset:0; z-index:190; background:var(--ri); transform:translateY(101%); pointer-events:none; }
.wipe.in{ transition:transform .42s var(--ease); transform:translateY(0); }
.wipe.out{ transition:transform .5s var(--ease-out); transform:translateY(-101%); }

/* ============================================================
   Navigation
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled{ border-bottom-color:var(--rule); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.nav__logo img{ height:26px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); }
.nav__links > a:not(.btn){
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); position:relative; padding-block:6px;
}
.nav__links > a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav__links > a:not(.btn):hover::after,
.nav__links > a[aria-current="page"]:not(.btn)::after{ transform:scaleX(1); transform-origin:left; }
.nav__links > a[aria-current="page"]:not(.btn){ color:var(--ink); }

.nav__toggle{
  display:none; appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); align-items:center; gap:10px; padding:8px 0;
}
.nav__toggle .bars{ display:inline-flex; flex-direction:column; gap:4px; }
.nav__toggle .bars i{ width:22px; height:2px; background:currentColor; transition:transform .3s var(--ease), opacity .3s; }

/* mobile overlay menu */
@media (max-width: 860px){
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    position:fixed; inset:0; z-index:-1; background:var(--ri-deep);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:10px; padding:var(--gut); opacity:0; visibility:hidden;
    transition:opacity .4s var(--ease), visibility .4s;
  }
  .nav[data-open="true"] .nav__links{ opacity:1; visibility:visible; }
  .nav[data-open="true"]{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .nav[data-open="true"] .nav__logo img{ filter:invert(1) brightness(1.6); }
  .nav[data-open="true"] .nav__toggle{ color:var(--paper); }
  .nav[data-open="true"] .bars i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav[data-open="true"] .bars i:nth-child(2){ opacity:0; }
  .nav[data-open="true"] .bars i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .nav__links > a:not(.btn){
    font-family:var(--display); font-size:clamp(40px,11vw,64px); text-transform:uppercase;
    letter-spacing:.01em; color:var(--paper); padding:2px 0; opacity:0; transform:translateY(18px);
  }
  .nav[data-open="true"] .nav__links > a:not(.btn){
    opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .nav[data-open="true"] .nav__links > a:nth-child(1){ transition-delay:.08s; }
  .nav[data-open="true"] .nav__links > a:nth-child(2){ transition-delay:.14s; }
  .nav[data-open="true"] .nav__links > a:nth-child(3){ transition-delay:.20s; }
  .nav[data-open="true"] .nav__links > a:nth-child(4){ transition-delay:.26s; }
  .nav[data-open="true"] .nav__links > a:nth-child(5){ transition-delay:.32s; }
  .nav__links > a:not(.btn)::after{ display:none; }
  .nav__links .btn{ margin-top:26px; opacity:0; }
  .nav[data-open="true"] .nav__links .btn{ opacity:1; transition:opacity .5s .34s var(--ease); }
  .nav__links::after{
    content:"\5B88 \7834 \96E2"; font-family:var(--kanji); font-weight:600;
    position:absolute; right:6vw; bottom:5vh; font-size:clamp(60px,16vw,120px);
    color:rgba(247,246,242,.07); line-height:1.1; writing-mode:vertical-rl;
  }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --btn-ink:var(--ink);
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--btn-ink); text-decoration:none; border:1.5px solid var(--btn-ink);
  border-radius:999px; padding:15px 26px; background:transparent;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:color .35s var(--ease), border-color .35s var(--ease);
  will-change:transform;
}
.btn::before{
  content:""; position:absolute; inset:-2px; z-index:-1; background:var(--btn-ink);
  border-radius:inherit; transform:translateY(102%);
  transition:transform .42s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:var(--paper); }
.btn .dot{ width:8px; height:8px; border-radius:50%; background:var(--ha); flex:none;
  transition:transform .35s var(--ease); }
.btn:hover .dot{ transform:scale(1.5); }
.btn .dot--shu{ background:var(--shu); }
.btn .dot--ri{ background:var(--ri); }
.btn:hover .dot--ri{ background:var(--shu); }
.btn .arw{ display:inline-block; transition:transform .35s var(--ease); }
.btn:hover .arw{ transform:translateX(5px); }

.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid::before{ background:var(--ha); }
.btn--solid:hover{ color:#fff; border-color:var(--ha); }

.btn--light{ --btn-ink:var(--paper); }
.btn--light::before{ background:var(--paper); }
.btn--light:hover{ color:var(--ri); }

.btnrow{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ============================================================
   Sections
   ============================================================ */
.band{ padding-block:clamp(72px, 9vw, 150px); position:relative; }
.band--tight{ padding-block:clamp(52px, 6.5vw, 100px); }
.dark{ background:var(--ri); }
.darkest{ background:var(--ri-deep); }

.spine{ display:grid; grid-template-columns:minmax(160px, 260px) 1fr; gap:clamp(24px,4vw,80px); }
@media (max-width: 760px){ .spine{ grid-template-columns:1fr; gap:22px; } }

.hairline{ border:0; border-top:1px solid var(--rule); margin:0; }
.on-dark .hairline{ border-top-color:var(--rule-dark); }

/* ============================================================
   Hero
   ============================================================ */
.hero{ padding-top:clamp(120px, 16vh, 190px); padding-bottom:clamp(40px, 6vw, 90px); position:relative; }
.hero__k{
  position:absolute; top:clamp(84px,12vh,150px); right:var(--gut);
  font-family:var(--kanji); font-weight:600; line-height:1.16;
  font-size:clamp(54px, 8.5vw, 128px); writing-mode:vertical-rl;
  color:transparent; -webkit-text-stroke:1px rgba(14,15,19,.22);
  user-select:none; pointer-events:none;
}
.hero__k span{ display:inline; }
.hero__k .k-lit{ color:var(--shu); -webkit-text-stroke:0; }
.hero__k .k-lit2{ color:var(--ha); -webkit-text-stroke:0; }
.hero__k .k-lit3{ color:var(--ri); -webkit-text-stroke:0; }

/* masked line reveal */
.ln{ display:block; overflow:hidden; }
.ln > span{ display:block; transform:translateY(110%); }
.in .ln > span, .ln.in > span{ transform:none; transition:transform .9s var(--ease-out); }
.ln:nth-child(2) > span{ transition-delay:.08s; }
.ln:nth-child(3) > span{ transition-delay:.16s; }
.ln:nth-child(4) > span{ transition-delay:.24s; }

/* brush underline (original path, drawn on) */
.brush{ position:relative; display:inline-block; }
.brush svg{
  position:absolute; left:-3%; right:-3%; bottom:-.06em; width:106%; height:.28em;
  overflow:visible; pointer-events:none;
}
.brush path{
  fill:none; stroke:var(--seal); stroke-linecap:round;
  stroke-dasharray:1000; stroke-dashoffset:1000;
}
.in .brush path, .brush.in path{ animation:brushdraw 1s .75s var(--ease) forwards; }
@keyframes brushdraw{ to{ stroke-dashoffset:0; } }

.hero__lede{ margin-top:clamp(24px,3vw,40px); }
.hero__cta{ margin-top:clamp(28px,3.4vw,46px); }
.hero__meta{
  margin-top:clamp(48px,7vw,92px); display:flex; justify-content:space-between; gap:18px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); flex-wrap:wrap;
}

/* ============================================================
   Marquee
   ============================================================ */
.marquee{
  border-block:1px solid var(--rule); padding-block:16px;
  overflow:hidden; white-space:nowrap; user-select:none;
}
.marquee__track{ display:inline-flex; gap:0; animation:marq 36s linear infinite; will-change:transform; }
.marquee__seg{
  display:inline-flex; align-items:center; gap:34px; padding-right:34px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
}
.marquee__seg .kj{ font-family:var(--kanji); font-weight:600; font-size:16px; letter-spacing:0; color:var(--ha); }
.marquee__seg i{ font-style:normal; color:var(--seal); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ============================================================
   Manifesto — word-by-word reveal
   ============================================================ */
.manifesto > p{
  font-family:var(--body); font-weight:500;
  font-size:clamp(24px, 3.6vw, 52px); line-height:1.28; letter-spacing:-.015em;
  max-width:24em; margin:0;
}
.manifesto .w{ opacity:.14; transition:opacity .5s var(--ease); }
.manifesto .w.lit{ opacity:1; }

/* ============================================================
   The dip — three stages, ground deepens
   ============================================================ */
.stage{ position:relative; overflow:clip; }
.stage--shu{ background:var(--shu); }
.stage--ha{ background:var(--ha); }
.stage--ri{ background:var(--ri); }
.stage__grid{
  display:grid; grid-template-columns:minmax(200px,1fr) 1.6fr;
  gap:clamp(28px,5vw,90px); align-items:center;
}
@media (max-width: 760px){ .stage__grid{ grid-template-columns:1fr; } }
.stage__k{
  font-family:var(--kanji); font-weight:600; line-height:1;
  font-size:clamp(120px, 22vw, 300px); color:rgba(247,246,242,.94);
  clip-path:inset(100% 0 0 0); transition:clip-path 1.1s var(--ease-out);
  user-select:none;
}
.in .stage__k{ clip-path:inset(0 0 0 0); }
.stage__num{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(247,246,242,.6); display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
.stage__num::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.6; }
.stage__name{ margin-bottom:14px; }
.stage p{ color:rgba(247,246,242,.82); max-width:52ch; font-size:clamp(16.5px,1.35vw,19px); }
.stage__depth{
  position:absolute; right:var(--gut); bottom:clamp(18px,3vw,34px);
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(247,246,242,.42);
}

/* ============================================================
   Split — candidates / companies
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px); }
@media (max-width: 820px){ .split{ grid-template-columns:1fr; } }
.panel{
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  min-height:clamp(340px, 42vw, 520px);
  padding:clamp(24px,3.2vw,44px); border:1.5px solid var(--ink);
  text-decoration:none; color:var(--ink); background:var(--paper);
  overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease);
}
.panel::before{
  content:""; position:absolute; inset:0; z-index:-1; transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.panel--shu::before{ background:var(--shu); }
.panel--ha::before{ background:var(--ha); }
.panel:hover::before{ transform:translateY(0); }
.panel:hover{ color:var(--paper); }
.panel__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.panel__tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px; }
.panel__tag::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--shu); }
.panel--ha .panel__tag::before{ background:var(--ha); }
.panel:hover .panel__tag::before{ background:var(--paper); }
.panel__kj{ font-family:var(--kanji); font-weight:600; font-size:clamp(30px,3.6vw,46px); line-height:1;
  opacity:.16; transition:opacity .45s var(--ease); }
.panel:hover .panel__kj{ opacity:.9; }
.panel__bot .d3{ margin-bottom:12px; }
.panel__bot p{ max-width:44ch; font-size:16.5px; color:var(--ink-soft); transition:color .45s var(--ease); }
.panel:hover .panel__bot p{ color:rgba(247,246,242,.85); }
.panel__go{
  margin-top:22px; font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; display:inline-flex; gap:10px; align-items:center;
}
.panel__go .arw{ transition:transform .35s var(--ease); }
.panel:hover .panel__go .arw{ transform:translateX(6px); }

/* ============================================================
   Ledger — principles / lists
   ============================================================ */
.ledger{ list-style:none; margin:0; padding:0; counter-reset:led; }
.ledger > li{
  counter-increment:led; position:relative;
  display:grid; grid-template-columns:72px 1fr; gap:clamp(16px,3vw,44px);
  padding-block:clamp(22px,3vw,34px); border-top:1px solid var(--rule);
  transition:padding-left .35s var(--ease);
}
.ledger > li:last-child{ border-bottom:1px solid var(--rule); }
.ledger > li::before{
  content:counter(led, decimal-leading-zero);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; color:var(--ink-mute);
  padding-top:6px;
}
.ledger > li:hover{ padding-left:10px; }
.ledger strong{
  display:block; font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(19px,2vw,27px); letter-spacing:.015em; margin-bottom:8px;
}
.ledger .t{ display:block; color:var(--ink-soft); max-width:66ch; font-size:16.5px; }
.on-dark .ledger > li{ border-color:var(--rule-dark); }
.on-dark .ledger > li::before{ color:rgba(247,246,242,.5); }
.on-dark .ledger .t{ color:rgba(247,246,242,.75); }

/* process steps variant */
.ledger--steps > li{ grid-template-columns:72px 1fr; }

/* ============================================================
   Pull quote
   ============================================================ */
.pull{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(26px,3.6vw,52px); line-height:1.06; max-width:20em;
}

/* ============================================================
   CTA band + footer
   ============================================================ */
.cta__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(24px,4vw,72px); align-items:center; }
@media (max-width: 760px){ .cta__grid{ grid-template-columns:1fr; } }

.foot{ background:var(--ri-deep); color:var(--paper); padding-top:clamp(56px,7vw,100px); overflow:hidden; }
.foot__word{
  font-family:var(--display); text-transform:uppercase; line-height:.86; letter-spacing:.005em;
  font-size:clamp(42px, 12.6vw, 208px); text-align:center;
  color:var(--paper); user-select:none; white-space:nowrap;
}
.foot__word .dip1{ color:#8FA3CE; } .foot__word .dip2{ color:#5C7CB0; } .foot__word .dip3{ color:#41598F; }
.foot__top{
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(24px,4vw,64px);
  padding-block:clamp(40px,5vw,64px);
}
@media (max-width: 760px){ .foot__top{ grid-template-columns:1fr; } }
.foot h4{ font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(247,246,242,.55); margin-bottom:16px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot a{ color:var(--paper); text-decoration:none; }
.foot a:hover{ text-decoration:underline; text-underline-offset:4px; }
.foot__logo img{ height:26px; width:auto; }
.foot__bot{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  padding-block:22px; border-top:1px solid var(--rule-dark);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(247,246,242,.55);
}
.foot__bot a{ color:inherit; }
.kanji{ font-family:var(--kanji); font-weight:600; letter-spacing:.4em; }

/* ============================================================
   Forms
   ============================================================ */
.form{ display:grid; gap:22px; }
.form__two{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width: 620px){ .form__two{ grid-template-columns:1fr; } }
.field label{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:9px;
}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--body); font-size:16.5px; color:var(--ink);
  background:transparent; border:0; border-bottom:1.5px solid var(--rule);
  padding:10px 2px 12px; border-radius:0; appearance:none;
  transition:border-color .3s var(--ease);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-bottom-color:var(--ha);
}
.field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E0F13' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center;
}

.contact__grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(32px,5vw,88px); }
@media (max-width: 820px){ .contact__grid{ grid-template-columns:1fr; } }

/* ============================================================
   Reveal defaults
   ============================================================ */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1.in{ transition-delay:.08s; } .rv-d2.in{ transition-delay:.16s; } .rv-d3.in{ transition-delay:.24s; }

/* parallax accents */
[data-plx]{ will-change:transform; }

/* ============================================================
   Static / reduced motion — everything visible, nothing moves
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .rv, .ln > span, .manifesto .w{ opacity:1 !important; transform:none !important; }
  .stage__k{ clip-path:none !important; }
  .brush path{ stroke-dashoffset:0 !important; }
  .loader{ display:none !important; }
  .marquee__track{ animation:none !important; }
}
.static .rv, .static .ln > span, .static .manifesto .w{ opacity:1 !important; transform:none !important; transition:none !important; }
.static .stage__k{ clip-path:none !important; transition:none !important; }
.static .brush path{ stroke-dashoffset:0 !important; animation:none !important; }
.static .loader, .static .wipe{ display:none !important; }
.static .marquee__track{ animation:none !important; }
.static .hero__k .k-lit{ color:var(--shu); }

/* ============================================================
   Hero lens — the dip preview (homepage opening)
   ============================================================ */
.hero--lens{ position:relative; }
.hero__dip{
  position:absolute; inset:0; z-index:2; background:var(--ri-deep);
  display:none; pointer-events:none; color:var(--paper);
  padding-top:clamp(120px, 16vh, 190px); padding-bottom:clamp(40px, 6vw, 90px);
  --lr:0; --lx:-999px; --ly:-999px;
  -webkit-mask-image:radial-gradient(circle calc(clamp(130px,14vw,230px) * var(--lr)) at var(--lx) var(--ly), #000 96%, transparent 100%);
  mask-image:radial-gradient(circle calc(clamp(130px,14vw,230px) * var(--lr)) at var(--lx) var(--ly), #000 96%, transparent 100%);
}
@supports (mask-image: radial-gradient(circle 10px at 0 0, #000, transparent)) or (-webkit-mask-image: radial-gradient(circle 10px at 0 0, #000, transparent)){
  .pointer-fine .hero__dip{ display:block; }
}
.hero__dip .eyebrow{ color:rgba(247,246,242,.62); }
.hero__dip .lede{ color:rgba(247,246,242,.8); }
.hero__dip .hero__meta{ color:rgba(247,246,242,.55); }
.hero__dip .hero__k{ -webkit-text-stroke:0; }
.hero__dip .hero__k .k-lit{ color:#9FB2DC; }
.hero__dip .hero__k .k-lit2{ color:#7A93C9; }
.hero__dip .hero__k .k-lit3{ color:#5C7CB0; }
.hero__dip .btn{ --btn-ink:var(--paper); color:var(--paper); border-color:var(--paper); background:transparent; }
.hero__dip .btn--solid{ background:var(--paper); color:var(--ri); border-color:var(--paper); }
.hero__dip .btn--solid .dot--shu{ background:var(--ha); }

/* ============================================================
   Press-pill ring buttons
   ============================================================ */
.btn--ring{ padding:8px 8px 8px 24px; gap:14px; }
.btn--ring .ring{
  width:38px; height:38px; border-radius:50%; flex:none;
  position:relative; display:grid; place-items:center;
}
.btn--ring .ring svg{ position:absolute; inset:0; transform:rotate(-90deg); width:100%; height:100%; }
.btn--ring .ring circle{ fill:none; stroke:currentColor; stroke-width:1.5; }
.btn--ring .ring .track{ opacity:.28; }
.btn--ring .ring .prog{ stroke-dasharray:113.1; stroke-dashoffset:113.1; transition:stroke-dashoffset .55s var(--ease); }
.btn--ring:hover .ring .prog{ stroke-dashoffset:0; }
.btn--ring .ring .arw{ transition:transform .35s var(--ease); }
.btn--ring:hover .ring .arw{ transform:translateX(3px); }
@media (pointer:coarse){ .btn:active{ transform:scale(.96); } }
.static .hero__dip{ display:none !important; }