/* =========================================================
   ARCANE SOLUTIONS — Core stylesheet
   The arcane, made obvious.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --paper:      #FAF7F1;
  --sand:       #F3ECE0;
  --ink:        #16141C;
  --ink-soft:   #4C463E;
  --stone:      #8C857A;
  --line:       #E4DBCE;
  --accent:     #5A34E0;
  --accent-deep:#4728B0;
  --tint:       #EBE4FB;
  --accent-soft:#9E7BFF;

  --maxw: 1440px;
  --gutter: clamp(20px, 5vw, 56px);

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.1vw, 2.3rem);
  --step-3:  clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);
  --step-4:  clamp(2.9rem, 2rem + 4.4vw, 5.6rem);
  --step-5:  clamp(3.4rem, 2rem + 6.6vw, 7.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;

  --radius: 4px;
  --pill: 100px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:400;
  font-size:var(--step-0);
  line-height:1.7;
  color:var(--ink-soft);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  color:var(--ink);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-0.03em;
  margin:0;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
strong{ font-weight:600; color:var(--ink); }
::selection{ background:var(--accent); color:var(--paper); }

/* ---------- Layout ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:clamp(72px, 11vw, 160px); }
.section--tight{ padding-block:clamp(56px, 8vw, 112px); }
.band-sand{ background:var(--sand); }
.band-ink{ background:var(--ink); color:#D9CFC1; }
.band-ink h1,.band-ink h2,.band-ink h3{ color:var(--paper); }

/* ---------- Type helpers ---------- */
.eyebrow{
  font-size:var(--step--1);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.28em;
  color:var(--stone);
  margin:0 0 clamp(20px,3vw,32px);
  display:inline-flex;
  align-items:center;
  gap:0.85em;
}
.eyebrow::before{
  content:"";
  width:28px; height:1px;
  background:var(--accent);
  display:inline-block;
}
.band-ink .eyebrow{ color:#9A917F; }

.h-display{ font-size:var(--step-5); letter-spacing:-0.035em; }
.h1{ font-size:var(--step-4); }
.h2{ font-size:var(--step-3); }
.h3{ font-size:var(--step-2); }
.accent{ color:var(--accent); }
.band-ink .accent{ color:#9E7BFF; }

.lede{
  font-size:var(--step-1);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:46ch;
  letter-spacing:-0.01em;
}
.band-ink .lede{ color:#CFC5B6; }
.measure{ max-width:62ch; }
.stone{ color:var(--stone); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  font-weight:600;
  font-size:var(--step--1);
  letter-spacing:0.02em;
  padding:0.95em 1.7em;
  border-radius:var(--pill);
  border:1px solid transparent;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
  will-change:transform;
}
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent-deep); transform:translateY(-2px); }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }

.btn--cream{ background:var(--paper); color:var(--ink); }
.btn--cream:hover{ background:#fff; transform:translateY(-2px); }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* text link with animated underline */
.tlink{
  display:inline-flex; align-items:center; gap:0.5em;
  font-weight:600; color:var(--ink);
  position:relative; padding-bottom:2px;
}
.band-ink .tlink{ color:var(--paper); }
.tlink::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.tlink:hover::after{ transform:scaleX(1); }
.tlink .arrow{ color:var(--accent); transition:transform .35s var(--ease); }
.tlink:hover .arrow{ transform:translateX(4px); }
.band-ink .tlink .arrow{ color:#9E7BFF; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.nav.is-scrolled{ border-color:var(--line); }
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:76px;
}
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand__mark{ width:30px; height:30px; }
.brand__word{
  font-weight:700; font-size:1.22rem; letter-spacing:-0.03em; color:var(--ink);
}
.brand__word .dot{ color:var(--accent); }

.nav__links{ display:flex; align-items:center; gap:clamp(20px,3vw,40px); }
.nav__link{
  font-size:var(--step--1); font-weight:500; color:var(--ink-soft);
  position:relative; padding:6px 0; transition:color .3s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--ink); }
.nav__cta{ padding:0.7em 1.35em; }

.nav__toggle{
  display:none; width:44px; height:44px; border:0; background:none;
  cursor:pointer; padding:0; align-items:center; justify-content:center;
}
.nav__toggle span{
  display:block; width:22px; height:1.5px; background:var(--ink); position:relative;
  transition:transform .35s var(--ease), opacity .3s var(--ease);
}
.nav__toggle span::before,.nav__toggle span::after{
  content:""; position:absolute; left:0; width:22px; height:1.5px; background:var(--ink);
  transition:transform .35s var(--ease);
}
.nav__toggle span::before{ top:-7px; }
.nav__toggle span::after{ top:7px; }
body.menu-open .nav__toggle span{ background:transparent; }
body.menu-open .nav__toggle span::before{ transform:translateY(7px) rotate(45deg); }
body.menu-open .nav__toggle span::after{ transform:translateY(-7px) rotate(-45deg); }

/* Collapse desktop nav → hamburger */
@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__toggle{ display:inline-flex; }
}

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:76px 0 0; z-index:99;
  background:var(--paper);
  padding:clamp(28px,7vw,48px) var(--gutter);
  display:flex; flex-direction:column; gap:6px;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
body.menu-open .mobile-menu{ opacity:1; transform:none; pointer-events:auto; }
.mobile-menu a.m-link{
  font-size:var(--step-2); font-weight:500; letter-spacing:-0.03em; color:var(--ink);
  padding:14px 0; border-bottom:1px solid var(--line);
}
.mobile-menu .btn{ margin-top:28px; justify-content:center; }

/* ---------- Hero ---------- */
.hero{ padding-top:clamp(48px,9vw,120px); padding-bottom:clamp(56px,9vw,120px); }
.hero__h1{ margin:0.15em 0 clamp(28px,4vw,40px); max-width:16ch; }
.hero__lede{ margin-bottom:clamp(32px,4vw,44px); }

/* subhero meta strip */
.metastrip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.metastrip__item{ padding:clamp(22px,3vw,32px) clamp(18px,2.5vw,32px); border-left:1px solid var(--line); }
.metastrip__item:first-child{ border-left:0; padding-left:0; }
.metastrip__k{ font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.22em; color:var(--stone); font-weight:600; }
.metastrip__v{ margin-top:8px; font-size:var(--step-0); color:var(--ink); font-weight:500; letter-spacing:-0.01em; }
@media (max-width:620px){
  .metastrip{ grid-template-columns:1fr; }
  .metastrip__item{ border-left:0; border-top:1px solid var(--line); padding-left:0; }
  .metastrip__item:first-child{ border-top:0; }
}

/* ---------- Generic section header ---------- */
.sec-head{ max-width:64ch; margin-bottom:clamp(40px,6vw,72px); }
.sec-head .lede{ margin-top:22px; max-width:56ch; }

/* ---------- Pitch / statement ---------- */
.statement{
  font-size:var(--step-3); letter-spacing:-0.03em; line-height:1.1;
  color:var(--ink); font-weight:500; max-width:20ch;
}
.statement--wide{ max-width:26ch; }
.grid-split{
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:clamp(32px,6vw,88px); align-items:start;
}
@media (max-width:860px){ .grid-split{ grid-template-columns:1fr; gap:32px; } }

/* ---------- Problem lines ---------- */
.problem-lines{ display:flex; flex-direction:column; }
.problem-lines .pl{
  font-size:var(--step-2); font-weight:500; letter-spacing:-0.03em; color:var(--ink);
  padding:clamp(16px,2vw,22px) 0; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:18px;
}
.problem-lines .pl .n{ font-size:var(--step--1); color:var(--stone); font-weight:600; letter-spacing:0.1em; min-width:2.4em; }
.turn{ font-size:var(--step-1); color:var(--ink-soft); margin-top:clamp(28px,4vw,40px); max-width:52ch; }
.turn strong{ color:var(--ink); }

/* ---------- Offerings ---------- */
.offer-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(24px,3vw,40px);
  border-top:1px solid var(--line);
}
@media (max-width:1180px){ .offer-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:980px){ .offer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .offer-grid{ grid-template-columns:1fr; } }
.offer{
  padding-top:clamp(24px,3vw,34px);
  border-top:1px solid transparent; margin-top:-1px;
  position:relative;
}
.offer__n{ font-size:var(--step--1); font-weight:600; color:var(--accent); letter-spacing:0.06em; }
.offer__t{ font-size:var(--step-1); margin:16px 0 12px; letter-spacing:-0.02em; }
.offer__d{ font-size:var(--step-0); color:var(--ink-soft); max-width:34ch; }

/* ---------- Standard (3 pillars) ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,56px); }
@media (max-width:820px){ .pillars{ grid-template-columns:1fr; gap:34px; } }
.pillar__t{ font-size:var(--step-2); margin-bottom:14px; }
.pillar__t .dot{ color:var(--accent); }
.pillar__d{ color:var(--ink-soft); max-width:38ch; }

/* ---------- Process ---------- */
.process{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
@media (max-width:820px){ .process{ grid-template-columns:1fr; } }
.step{
  padding:clamp(30px,4vw,48px) clamp(24px,3vw,40px) clamp(30px,4vw,48px) 0;
  border-left:1px solid var(--line); padding-left:clamp(24px,3vw,40px);
}
.step:first-child{ border-left:0; padding-left:0; }
@media (max-width:820px){
  .step{ border-left:0; padding-left:0; border-top:1px solid var(--line); }
  .step:first-child{ border-top:0; }
}
.step__n{ font-size:var(--step--1); font-weight:600; color:var(--accent); letter-spacing:0.16em; text-transform:uppercase; }
.step__t{ font-size:var(--step-2); margin:18px 0 4px; }
.step__lead{ font-weight:600; color:var(--ink); }
.step__d{ color:var(--ink-soft); margin-top:12px; max-width:34ch; }
.step__get{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); color:var(--stone); font-size:var(--step--1); }
.step__get b{ color:var(--accent); font-weight:600; }

/* ---------- Proof teaser ---------- */
.proof__stat{
  font-size:var(--step-4); letter-spacing:-0.04em; color:var(--ink); font-weight:500; line-height:1;
}

/* ---------- CTA (deep ink) ---------- */
.cta__h{ font-size:var(--step-4); max-width:16ch; margin-bottom:28px; }
.cta__sub{ font-size:var(--step-1); color:#CFC5B6; max-width:44ch; margin-bottom:40px; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:#B7AE9F; padding-block:clamp(56px,8vw,90px) 40px; }
.footer h4,.footer .brand__word{ color:var(--paper); }
.footer__top{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(28px,4vw,56px);
}
@media (max-width:900px){ .footer__top{ grid-template-columns:1fr 1fr; gap:40px 32px; } }
@media (max-width:520px){ .footer__top{ grid-template-columns:1fr; } }
.footer__blurb{ max-width:34ch; margin:20px 0 22px; color:#9A917F; font-size:var(--step--1); line-height:1.7; }
.footer__tag{ color:#9E7BFF; font-weight:500; letter-spacing:-0.01em; }
.footer h4{ font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.2em; font-weight:600; margin:0 0 20px; }
.footer__col a,.footer__col p{ display:block; color:#B7AE9F; font-size:var(--step--1); padding:7px 0; transition:color .3s var(--ease); }
.footer__col a:hover{ color:var(--paper); }
.footer__bottom{
  margin-top:clamp(48px,6vw,72px); padding-top:26px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:center;
  font-size:var(--step--1); color:#8A8172;
}
.footer__bottom a:hover{ color:var(--paper); }
.footer__end{ display:inline-flex; align-items:center; gap:18px; }
.footer__social{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.15); color:#B7AE9F;
  transition:color .3s var(--ease), border-color .3s var(--ease); }
.footer__social:hover{ color:var(--paper); border-color:rgba(255,255,255,.4); }
.footer__social svg{ width:18px; height:18px; }

/* ---------- Client logo strip ---------- */
.logostrip{ padding-block:clamp(36px,5vw,64px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.logostrip__row{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(30px,5vw,64px); margin-top:clamp(24px,3vw,38px);
}
.logo-slot{ height:52px; display:flex; align-items:center; }
.logo-slot img{
  max-height:52px; width:auto; opacity:.92;
  transition:opacity .35s var(--ease);
}
.logo-slot img:hover{ opacity:1; }
.logo-slot .ph-logo{
  height:48px; min-width:120px; display:flex; align-items:center; justify-content:center; padding:0 18px;
  border:1px dashed var(--line); border-radius:var(--radius);
  color:var(--stone); font-size:var(--step--1); letter-spacing:0.14em; text-transform:uppercase; font-weight:600;
}

/* ---------- Work / case studies ---------- */
.case{
  padding-block:clamp(48px,7vw,96px);
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:0.9fr 1.4fr; gap:clamp(28px,5vw,72px);
}
.case:first-of-type{ border-top:0; }
@media (max-width:860px){ .case{ grid-template-columns:1fr; gap:28px; } }
.case__idx{ font-size:var(--step--1); font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); }
.case__title{ font-size:var(--step-3); margin:18px 0 24px; max-width:14ch; }
.case__figure{
  margin:0; background:var(--sand); border:1px solid var(--line); border-radius:var(--radius);
  aspect-ratio:16/11; display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.ph{ color:var(--stone); font-size:var(--step--1); letter-spacing:0.16em; text-transform:uppercase; font-weight:600; text-align:center; padding:24px; }
.ph::before{ content:""; display:block; width:34px; height:34px; margin:0 auto 14px;
  border:1px solid var(--stone); border-radius:50%; opacity:.5; }
.case__body dt{ font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.18em; color:var(--stone); font-weight:600; margin-top:22px; }
.case__body dd{ margin:8px 0 0; color:var(--ink-soft); max-width:56ch; }
.case__body dd strong{ color:var(--ink); }
.result-figs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:clamp(22px,3vw,40px); margin-top:14px; }
.result-figs .rf .num{ font-size:var(--step-3); color:var(--ink); font-weight:500; letter-spacing:-0.03em; line-height:1; }
.result-figs .rf .lab{ font-size:var(--step--1); color:var(--stone); margin-top:8px; max-width:22ch; }

/* ---------- Case list (Work index) ---------- */
.caselist{ border-top:1px solid var(--line); }
.caserow{
  display:grid; grid-template-columns:1fr auto; gap:clamp(20px,4vw,56px); align-items:center;
  padding-block:clamp(30px,4vw,50px); border-bottom:1px solid var(--line);
}
@media (max-width:640px){ .caserow{ grid-template-columns:1fr; gap:18px; } }
.caserow__idx{ font-size:var(--step--1); font-weight:600; text-transform:uppercase; letter-spacing:0.18em; color:var(--accent); }
.caserow__title{ font-size:var(--step-2); letter-spacing:-0.025em; margin:12px 0 12px; color:var(--ink); max-width:20ch; transition:color .3s var(--ease); }
.caserow__teaser{ color:var(--ink-soft); max-width:62ch; }
.caserow__more{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:var(--step--1); color:var(--ink); white-space:nowrap; }
.caserow__more .arrow{ color:var(--accent); transition:transform .35s var(--ease); }
.caserow:hover .caserow__title{ color:var(--accent); }
.caserow:hover .caserow__more .arrow{ transform:translateX(5px); }

/* ---------- Services / pricing ---------- */
.pricenote{ font-size:var(--step-0); color:var(--ink-soft); max-width:60ch; }
.pricelist{ border-top:1px solid var(--line); margin-top:clamp(28px,4vw,44px); }
.pricerow{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,3vw,48px); align-items:start;
  padding-block:clamp(26px,4vw,44px); border-bottom:1px solid var(--line);
}
.pricerow__n{ font-size:var(--step--1); font-weight:600; letter-spacing:0.06em; color:var(--accent); padding-top:6px; }
.pricerow__name{ font-size:var(--step-2); letter-spacing:-0.025em; color:var(--ink); margin:0 0 12px; }
.pricerow__desc{ color:var(--ink-soft); max-width:56ch; }
.pricerow__link{ display:inline-flex; align-items:center; gap:.45em; margin-top:14px; font-weight:600; font-size:var(--step--1); color:var(--ink); }
.pricerow__link .arrow{ color:var(--accent); transition:transform .35s var(--ease); }
.pricerow__link:hover .arrow{ transform:translateX(4px); }
.pricerow__price{ text-align:right; white-space:nowrap; }
.pricerow__from{ display:block; font-size:var(--step--1); color:var(--stone); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:4px; }
.pricerow__amt{ font-size:var(--step-2); color:var(--ink); font-weight:500; letter-spacing:-0.02em; line-height:1; }
.pricerow__unit{ font-size:var(--step--1); color:var(--stone); font-weight:400; }
@media (max-width:720px){
  .pricerow{ grid-template-columns:auto 1fr; gap:14px 24px; }
  .pricerow__price{ grid-column:2; text-align:left; margin-top:4px; }
}

/* ---------- Case page: back link + dark hero ---------- */
.backlink{ display:inline-flex; align-items:center; gap:.5em; font-size:var(--step--1); font-weight:600; color:var(--stone); transition:color .3s var(--ease); }
.backlink:hover{ color:var(--ink); }
.backlink .arrow{ color:var(--accent); }
.backbar{ padding-top:clamp(24px,4vw,40px); }

.synhero__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,6vw,72px); align-items:center; }
@media (max-width:820px){ .synhero__grid{ grid-template-columns:1fr; gap:clamp(28px,6vw,44px); } }
.synhero__mark{ margin:0; display:flex; justify-content:center; }
.synhero__mark img{ max-height:300px; width:auto; filter:drop-shadow(0 0 60px rgba(110,90,240,.35)); }
@media (max-width:820px){ .synhero__mark{ order:-1; } .synhero__mark img{ max-height:200px; } }

/* ---------- Feature case study ---------- */
.feature__head{ max-width:22ch; }
.feature__title{ font-size:var(--step-4); letter-spacing:-0.035em; margin:0.12em 0 0; max-width:16ch; }
.feature__figure{
  margin:clamp(32px,5vw,60px) 0 0; background:var(--sand); border:1px solid var(--line);
  border-radius:var(--radius); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.fstages{ margin-top:clamp(16px,3vw,40px); }
.fstage{
  display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(20px,4vw,64px);
  padding-block:clamp(32px,4.5vw,56px); border-top:1px solid var(--line);
}
@media (max-width:820px){ .fstage{ grid-template-columns:1fr; gap:14px; } }
.fstage__label{ font-size:var(--step--1); font-weight:600; text-transform:uppercase; letter-spacing:0.2em; color:var(--accent); }
.fstage__h{ font-size:var(--step-2); letter-spacing:-0.025em; margin-top:14px; max-width:22ch; }
.fstage__body{ color:var(--ink-soft); max-width:58ch; }
.fstage__body > p + p{ margin-top:1.1em; }
.fstage__body .result-figs{ margin-top:clamp(22px,3vw,32px); }
.stat-note{ margin-top:22px; font-size:var(--step--1); color:var(--stone); letter-spacing:0.01em; }

/* ---------- In-case system diagram ---------- */
.sysfig{ margin-top:clamp(34px,5vw,60px); border-top:1px solid var(--line); padding-top:clamp(32px,4.5vw,52px); }
.sysfig__label{ display:block; font-size:var(--step--1); font-weight:600; text-transform:uppercase; letter-spacing:0.2em; color:var(--accent); margin-bottom:clamp(24px,3.5vw,40px); }
.sysflow{ display:flex; align-items:stretch; gap:14px; }
@media (max-width:720px){ .sysflow{ flex-direction:column; } }
.syscell{
  flex:1; background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 22px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:150px;
  box-shadow:0 1px 2px rgba(22,20,28,.03), 0 10px 30px rgba(22,20,28,.05);
}
.syscell .k{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; letter-spacing:.16em; color:var(--stone); }
.syscell .t{ font-size:var(--step-1); font-weight:700; margin-top:12px; color:var(--ink); letter-spacing:-0.01em; }
.syscell .d{ font-size:var(--step--1); color:var(--stone); margin-top:8px; line-height:1.35; }
.syscell--engine{ background:var(--ink); border-color:rgba(90,52,224,.5);
  box-shadow:0 0 0 1px rgba(90,52,224,.2), 0 24px 60px rgba(22,20,28,.18); }
.syscell--engine .k{ color:var(--accent-soft); }
.syscell--engine .t{ color:#fff; font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:600; }
.syscell--engine .d{ color:#CFC5B6; }
.sysarrow{ display:flex; align-items:center; justify-content:center; color:var(--accent); width:34px; flex:0 0 auto; }
.sysarrow svg{ width:24px; height:24px; }
@media (max-width:720px){ .sysarrow{ width:100%; height:26px; } .sysarrow svg{ transform:rotate(90deg); } }
.systerm{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:var(--step-1); color:var(--ink); font-weight:600; }
.systerm .p{ color:var(--accent); }
.sysseclab{ display:flex; align-items:center; gap:18px; margin:clamp(26px,4vw,40px) 0 clamp(16px,2.5vw,22px); }
.sysseclab .l{ height:1px; background:var(--line); flex:1; }
.sysseclab span:not(.l){ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--stone); white-space:nowrap; }
.sysgrid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media (max-width:640px){ .sysgrid{ grid-template-columns:1fr; } }
.syscard{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  box-shadow:0 1px 2px rgba(22,20,28,.03), 0 10px 30px rgba(22,20,28,.05);
}
.syscard svg{ width:34px; height:34px; stroke:var(--accent); stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.syscard .lab{ font-size:var(--step-1); font-weight:700; margin-top:14px; color:var(--ink); letter-spacing:-0.01em; }
.syscard .cap{ font-size:var(--step--1); color:var(--stone); margin-top:7px; line-height:1.35; }

/* ---------- About founder ---------- */
.founder{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(32px,5vw,72px); align-items:start; }
@media (max-width:820px){ .founder{ grid-template-columns:1fr; gap:32px; } }
.founder__figure{ margin:0; background:var(--sand); border:1px solid var(--line); border-radius:var(--radius);
  aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.founder__figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.founder__name{ font-size:var(--step-2); margin-bottom:6px; }
.founder__role{ color:var(--stone); font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.18em; font-weight:600; margin-bottom:22px; }

/* ---------- Values list ---------- */
.values{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); border-top:1px solid var(--line); }
@media (max-width:820px){ .values{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .values{ grid-template-columns:1fr; } }
.value{ padding-top:24px; }
.value__t{ font-size:var(--step-1); letter-spacing:-0.02em; }
.value__n{ color:var(--accent); font-weight:600; font-size:var(--step--1); }

/* ---------- Principles ---------- */
.principles{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(40px,6vw,80px); }
@media (max-width:720px){ .principles{ grid-template-columns:1fr; } }
.principle{ padding:clamp(20px,2.4vw,26px) 0; border-bottom:1px solid var(--line); display:flex; gap:16px; align-items:baseline; }
.principle .pn{ color:var(--accent); font-weight:600; font-size:var(--step--1); min-width:2.4em; }
.principle .pt{ font-size:var(--step-1); color:var(--ink); font-weight:500; letter-spacing:-0.02em; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(36px,6vw,88px); align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }
.contact-detail{ padding:16px 0; border-bottom:1px solid var(--line); }
.contact-detail:first-child{ border-top:1px solid var(--line); }
.contact-detail .k{ font-size:var(--step--1); text-transform:uppercase; letter-spacing:0.18em; color:var(--stone); font-weight:600; }
.contact-detail .v{ font-size:var(--step-1); color:var(--ink); margin-top:4px; letter-spacing:-0.01em; }
.contact-detail .v a:hover{ color:var(--accent); }

.form{ display:grid; gap:22px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:560px){ .form__row{ grid-template-columns:1fr; } }
.field{ position:relative; display:flex; flex-direction:column; }
.field label{ font-size:var(--step--1); font-weight:600; color:var(--ink); margin-bottom:9px; letter-spacing:0.01em; }
.field .req{ color:var(--accent); }
.field input,.field textarea,.field select{
  font-family:inherit; font-size:var(--step-0); color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:11px 2px; transition:border-color .35s var(--ease);
  border-radius:0; -webkit-appearance:none; appearance:none;
}
.field select{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238C857A' stroke-width='1.4'/></svg>");
  background-repeat:no-repeat; background-position:right 2px center; padding-right:24px; cursor:pointer; }
.field textarea{ resize:vertical; min-height:110px; line-height:1.6; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--accent); }
.field input::placeholder,.field textarea::placeholder{ color:var(--stone); opacity:.7; }
.form__note{ font-size:var(--step--1); color:var(--stone); }
.form__status{ font-size:var(--step--1); color:var(--accent); font-weight:600; min-height:1.2em; }

/* ---------- Masked headline lines ---------- */
.mask-lines .line{ display:block; }
.mask-lines .line__i{ display:block; }

/* ---------- Reveal animation ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.is-in{ opacity:1; transform:none; }
  .reveal[data-d="1"]{ transition-delay:.08s; }
  .reveal[data-d="2"]{ transition-delay:.16s; }
  .reveal[data-d="3"]{ transition-delay:.24s; }
  .reveal[data-d="4"]{ transition-delay:.32s; }

  .hero__anim > *{ opacity:0; transform:translateY(16px); animation:rise .9s var(--ease) forwards; }
  .hero__anim > *:nth-child(1){ animation-delay:.05s; }
  .hero__anim > *:nth-child(2){ animation-delay:.15s; }
  .hero__anim > *:nth-child(3){ animation-delay:.28s; }
  .hero__anim > *:nth-child(4){ animation-delay:.4s; }
  .hero__anim > *:nth-child(5){ animation-delay:.52s; }
  @keyframes rise{ to{ opacity:1; transform:none; } }

  /* Masked headline: lines rise out from behind a clip mask */
  .hero__anim .mask-lines{ opacity:1; transform:none; animation:none; }
  .mask-lines .line{ overflow:hidden; padding-bottom:0.16em; margin-bottom:-0.16em; }
  .mask-lines .line__i{ transform:translateY(120%); animation:lineUp 1s var(--ease) forwards; }
  .mask-lines .line:nth-child(1) .line__i{ animation-delay:.16s; }
  .mask-lines .line:nth-child(2) .line__i{ animation-delay:.30s; }
  .mask-lines .line:nth-child(3) .line__i{ animation-delay:.44s; }
  @keyframes lineUp{ to{ transform:none; } }

  /* Eyebrow line-draw: the violet dash grows in */
  .eyebrow::before{ width:0; transition:width .7s var(--ease) .12s; }
  .hero__anim .eyebrow::before,
  .eyebrow.reveal.is-in::before,
  .reveal.is-in .eyebrow::before{ width:28px; }
}

/* no-JS / reduced-motion safety: content always visible at rest */
.no-js .reveal{ opacity:1 !important; transform:none !important; }
.no-js .mask-lines .line__i{ transform:none !important; }
.no-js .eyebrow::before{ width:28px !important; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero__anim > *{ opacity:1 !important; transform:none !important; animation:none !important; }
  .mask-lines .line__i{ transform:none !important; animation:none !important; }
  .mask-lines .line{ overflow:visible !important; }
  .eyebrow::before{ width:28px !important; }
}

/* utility */
.mt-s{ margin-top:16px; } .mt-m{ margin-top:28px; } .mt-l{ margin-top:44px; }
.flow > * + *{ margin-top:1.1em; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:1000; border-radius:0 0 4px 0; }
.skip:focus{ left:0; }