/* ============================================================
   AAROZA — operator-led growth studio
   Shared design system
   Fraunces (serif) · Hanken Grotesk (sans) · JetBrains Mono (labels)
   ============================================================ */

:root{
  --paper:#F6F2E9;
  --paper-2:#EFEADD;
  --paper-3:#E7E0CF;
  --ink:#1A1612;
  --ink-soft:#5A534A;
  --ink-faint:#8C8478;
  --accent:#00A397;
  --accent-deep:#007F6A;
  --accent-wash:rgba(0,163,151,.10);
  --line:rgba(26,22,18,.14);
  --line-soft:rgba(26,22,18,.08);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(1.25rem,5vw,5rem);
  --ease:cubic-bezier(.19,1,.22,1);
  --maxw:1320px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
::selection{background:var(--accent);color:var(--paper)}
a{color:inherit;text-decoration:none}
img,svg{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* grain overlay */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.accent{color:var(--accent)}
.serif{font-family:var(--serif)}
em{font-style:italic}

/* ---------------- nav ---------------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--pad);
  mix-blend-mode:multiply;
  transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease);
}
header.nav.scrolled,header.nav.menu-open{
  background:rgba(246,242,233,.9);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);mix-blend-mode:normal;
  padding-top:.85rem;padding-bottom:.85rem;
  box-shadow:0 1px 0 var(--line);
}
.brand{display:flex;align-items:center;z-index:2}
.brand .wordmark{height:19px;width:auto;transition:opacity .4s var(--ease)}
.brand:hover .wordmark{opacity:.62}
.navlinks{display:flex;align-items:center;gap:2rem}
.navlinks a{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);position:relative;padding:.2rem 0}
.navlinks a:not(.pill)::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;
  background:var(--accent);transition:width .4s var(--ease)}
.navlinks a:hover{color:var(--ink)}
.navlinks a:not(.pill):hover::after,.navlinks a.active::after{width:100%}
.navlinks a.active{color:var(--ink)}
.navlinks .pill{border:1px solid var(--ink);border-radius:100px;padding:.5rem 1.05rem;
  color:var(--ink);transition:.35s var(--ease)}
.navlinks .pill:hover{background:var(--ink);color:var(--paper)}

/* mobile menu button */
.menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;
  padding:.4rem;z-index:2}
.menu-btn span{display:block;width:24px;height:2px;background:var(--ink);transition:.35s var(--ease)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:820px){
  .menu-btn{display:flex}
  .navlinks{
    position:fixed;inset:0;background:var(--paper);flex-direction:column;justify-content:center;
    gap:2rem;transform:translateY(-100%);transition:transform .5s var(--ease);z-index:1;
  }
  header.nav.menu-open .navlinks{transform:none}
  .navlinks a{font-family:var(--serif);font-size:1.9rem;text-transform:none;letter-spacing:-.01em;color:var(--ink)}
  .navlinks .pill{font-family:var(--mono);font-size:.8rem;text-transform:uppercase;padding:.7rem 1.6rem}
}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.95rem 1.6rem;border-radius:100px;
  border:1px solid var(--ink);transition:.4s var(--ease);cursor:pointer;line-height:1}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translate(3px,-3px)}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-light:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)}

/* ---------------- section framing ---------------- */
section{position:relative}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-block:1rem;border-top:1px solid var(--ink);margin-bottom:2.4rem}
.sec-head .num{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--accent)}
.sec-head .ttl{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);text-align:right}

.kicker{display:flex;align-items:center;gap:.8rem;color:var(--ink-soft);margin-bottom:2rem}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--accent);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,163,151,.5)}70%{box-shadow:0 0 0 9px rgba(0,163,151,0)}100%{box-shadow:0 0 0 0 rgba(0,163,151,0)}}

/* ---------------- hero (home) ---------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding-top:7rem;padding-bottom:3rem;overflow:hidden}
.hero-mark{position:absolute;right:-6vw;top:50%;transform:translateY(-50%);
  width:min(58vw,640px);height:auto;opacity:.07;z-index:0;pointer-events:none}
.hero .wrap{position:relative;z-index:1;width:100%}
h1.head{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.6rem,7.6vw,6.8rem);line-height:.98;letter-spacing:-.025em;
  max-width:17ch;text-wrap:balance}
h1.head em{font-style:italic;color:var(--accent)}
h1.head .ln{display:block;overflow:hidden}
h1.head .ln > span{display:block}
.sub{max-width:52ch;margin-top:2rem;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);
  color:var(--ink-soft);line-height:1.55}
.sub b{color:var(--ink);font-weight:500}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.6rem;align-items:center}
.hero-cta .note{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--ink-faint);text-transform:uppercase}
.hero-meta{display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:3.2rem;
  padding-top:1.4rem;border-top:1px solid var(--line);color:var(--ink-soft)}
.hero-meta .item .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:.35rem;display:block}
.hero-meta .item .v{font-family:var(--serif);font-size:1.2rem;color:var(--ink);display:block}
.scrollcue{position:absolute;bottom:1.6rem;left:var(--pad);z-index:1;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);display:flex;align-items:center;gap:.6rem}
.scrollcue .bar{width:46px;height:1px;background:var(--ink-faint);position:relative;overflow:hidden}
.scrollcue .bar::after{content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateX(-100%);animation:slide 2.4s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------------- inner-page hero ---------------- */
.page-hero{padding-top:10rem;padding-bottom:clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden}
.page-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6.4vw,5rem);
  line-height:1;letter-spacing:-.025em;max-width:18ch;text-wrap:balance;margin-top:1.5rem}
.page-hero h1 em{color:var(--accent)}
.page-hero .lead{max-width:56ch;margin-top:1.8rem;font-size:clamp(1.05rem,1rem + .4vw,1.28rem);
  color:var(--ink-soft);line-height:1.55}
.page-hero .lead b{color:var(--ink);font-weight:500}

/* ---------------- press strip ---------------- */
.press{border-block:1px solid var(--line);padding-block:1.6rem;margin-top:1rem}
.press .wrap{display:flex;align-items:center;gap:clamp(1.2rem,4vw,3rem);flex-wrap:wrap}
.press .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap}
.press ul{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(1.2rem,4vw,2.8rem);align-items:center}
.press li{font-family:var(--serif);font-size:clamp(1.05rem,2.4vw,1.5rem);color:var(--ink);
  font-style:italic;opacity:.72;transition:opacity .3s var(--ease)}
.press li:hover{opacity:1}

/* ---------------- generic content block ---------------- */
.block{padding-block:clamp(4rem,9vw,7.5rem)}
.block-tight{padding-block:clamp(3rem,6vw,5rem)}
.lead-xl{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.8vw,3rem);
  line-height:1.16;letter-spacing:-.02em;max-width:22ch}
.lead-xl em{color:var(--accent)}
.measure{max-width:60ch;color:var(--ink-soft)}

/* ---------------- services cards ---------------- */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.svc-card{background:var(--paper);padding:clamp(1.8rem,3vw,2.6rem);position:relative;
  transition:background .4s var(--ease);display:flex;flex-direction:column;gap:1rem}
.svc-card:hover{background:var(--paper-2)}
.svc-card .code{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--accent)}
.svc-card h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.1;letter-spacing:-.01em}
.svc-card p{color:var(--ink-soft);font-size:.98rem}
.svc-card .more{margin-top:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:.5rem}
.svc-card .more .arr{color:var(--accent);transition:transform .4s var(--ease)}
.svc-card:hover .more .arr{transform:translateX(4px)}
.svc-card.feature{background:var(--ink);color:var(--paper)}
.svc-card.feature .code{color:var(--accent)}
.svc-card.feature h3{color:var(--paper)}
.svc-card.feature p{color:rgba(246,242,233,.72)}
.svc-card.feature .more{color:var(--paper)}
.svc-card.feature:hover{background:#241f19}
@media(max-width:720px){.svc-grid{grid-template-columns:1fr}}

/* ---------------- detailed service sections ---------------- */
.svc-detail{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(2.8rem,5vw,4.5rem);border-top:1px solid var(--line);align-items:start}
.svc-detail:last-of-type{border-bottom:1px solid var(--line)}
.svc-detail .side .code{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:1rem}
.svc-detail .side h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.02;letter-spacing:-.02em}
.svc-detail .side .tagline{color:var(--ink-soft);margin-top:1rem;font-size:1rem;max-width:26ch}
.svc-detail .main > p{color:var(--ink-soft);max-width:56ch}
.deliver{list-style:none;margin-top:1.8rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 1.6rem}
.deliver li{position:relative;padding-left:1.5rem;font-size:.96rem;color:var(--ink);line-height:1.45}
.deliver li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  background:var(--accent);border-radius:2px;transform:rotate(45deg)}
.svc-detail .who{margin-top:1.8rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint)}
.svc-detail .who b{color:var(--ink);font-weight:500}
@media(max-width:820px){.svc-detail{grid-template-columns:1fr;gap:1.6rem}.deliver{grid-template-columns:1fr}}

/* ---------------- metrics band (dark) ---------------- */
.metrics{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,6vw,5rem)}
.metrics::selection{background:var(--paper);color:var(--ink)}
.metrics .cap{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(246,242,233,.55);margin-bottom:2.2rem;display:flex;align-items:center;gap:.7rem}
.metrics .cap .ph{color:var(--accent)}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(246,242,233,.15)}
.metric{background:var(--ink);padding:clamp(1.4rem,3vw,2.4rem) clamp(1rem,2vw,1.8rem)}
.metric .n{font-family:var(--serif);font-size:clamp(2.4rem,5.6vw,4.2rem);line-height:1;letter-spacing:-.03em}
.metric .n .u{color:var(--accent)}
.metric .n[data-ph]{position:relative}
.metric .l{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(246,242,233,.6);margin-top:.9rem;line-height:1.5}
@media(max-width:680px){.metrics-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------------- work / case studies ---------------- */
.entry{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,3rem);
  align-items:start;padding:clamp(1.8rem,3.4vw,2.8rem) 0;border-top:1px solid var(--line);
  position:relative;transition:padding-left .5s var(--ease)}
.entry:last-child{border-bottom:1px solid var(--line)}
.entry::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--accent);transition:width .5s var(--ease)}
.entry:hover{padding-left:1.6rem}
.entry:hover::before{width:4px}
.entry .idx{font-family:var(--mono);font-size:.78rem;color:var(--ink-faint);padding-top:.5rem;
  transition:color .4s var(--ease)}
.entry:hover .idx{color:var(--accent)}
.entry .body{min-width:0}
.entry .name{font-family:var(--serif);font-size:clamp(1.9rem,4.6vw,3.2rem);font-weight:400;
  line-height:1;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:.4em;
  transition:color .35s var(--ease)}
.entry:hover .name{color:var(--accent)}
.entry .name .arr{font-size:.42em;opacity:0;transform:translateX(-8px);transition:.4s var(--ease);color:var(--accent)}
.entry.live:hover .name .arr{opacity:1;transform:translateX(0)}
.entry .role{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:.7rem}
.entry .line{margin-top:.6rem;color:var(--ink-soft);max-width:58ch;font-size:1rem;line-height:1.5}
.entry .line em{color:var(--ink);font-style:italic}
.entry .kpis{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.3rem}
.entry .kpi .kn{font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--ink)}
.entry .kpi .kn .ph{color:var(--accent)}
.entry .kpi .kl{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:.4rem}
.entry .meta{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem;text-align:right}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end}
.tags span{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:100px;padding:.25rem .6rem}
.status{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.status .d{width:6px;height:6px;border-radius:50%;flex:none}
.status.s-live{color:var(--accent-deep)} .status.s-live .d{background:var(--accent);animation:pulse 2.6s var(--ease) infinite}
.status.s-build{color:var(--ink)} .status.s-build .d{background:var(--ink);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.status.s-exit{color:var(--ink-soft)} .status.s-exit .d{background:#3E7C4F}
.status.s-closed{color:var(--ink-faint)} .status.s-closed .d{background:var(--ink-faint)}
@media(max-width:820px){
  .entry{grid-template-columns:auto 1fr;row-gap:1.1rem}
  .entry .meta{grid-column:1/-1;align-items:flex-start;text-align:left;flex-direction:row;
    justify-content:space-between;width:100%;flex-wrap:wrap;gap:1rem}
  .tags{justify-content:flex-start}
}

/* ---------------- who we help ---------------- */
.verticals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.vert{background:var(--paper);padding:clamp(1.4rem,2.6vw,2rem);display:flex;flex-direction:column;gap:.5rem;
  transition:background .35s var(--ease)}
.vert:hover{background:var(--paper-2)}
.vert .vn{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.5rem);letter-spacing:-.01em}
.vert p{color:var(--ink-soft);font-size:.9rem}
@media(max-width:720px){.verticals{grid-template-columns:1fr}}

/* ---------------- testimonials ---------------- */
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.testi{background:var(--paper);padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;gap:1.6rem;
  transition:background .4s var(--ease)}
.testi:hover{background:var(--paper-2)}
.testi .quote{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,2vw,1.42rem);line-height:1.34;
  letter-spacing:-.01em;color:var(--ink)}
.testi .quote::before{content:"\201C";color:var(--accent);font-size:1.1em;line-height:0;
  vertical-align:-.32em;margin-right:.04em}
.testi .who{display:flex;align-items:center;gap:.9rem;margin-top:auto}
.testi .avatar{width:44px;height:44px;border-radius:50%;background:var(--accent-wash);border:1px solid var(--accent);
  color:var(--accent-deep);display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:.9rem;flex:none}
.testi .who .nm{font-family:var(--sans);font-weight:500;font-size:.95rem;color:var(--ink);line-height:1.2}
.testi .who .rl{font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:.32rem}
.testi .stars{display:flex;gap:.15rem;color:var(--accent)}
.testi .stars span{font-size:.8rem}
@media(max-width:720px){.testi-grid{grid-template-columns:1fr}}

/* featured testimonial(s) */
.testi-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-bottom:2.2rem}
@media(max-width:860px){.testi-feature-grid{grid-template-columns:1fr}}
.testi-feature{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:14px;
  background:var(--paper);padding:clamp(1.8rem,3.4vw,2.6rem);display:flex;flex-direction:column}
.testi-feature .stars{display:flex;gap:.2rem;color:var(--accent);margin-bottom:1.3rem}
.testi-feature .stars span{font-size:.95rem}
.testi-feature blockquote{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2vw,1.6rem);
  line-height:1.42;letter-spacing:-.01em;color:var(--ink);max-width:62ch;border:0;margin:0;padding:0}
.testi-feature blockquote p{margin-bottom:1rem}
.testi-feature blockquote p:last-child{margin-bottom:0}
.testi-feature blockquote p:first-child::before{content:"\201C";color:var(--accent);font-size:1.1em;
  line-height:0;vertical-align:-.32em;margin-right:.04em}
.testi-feature figcaption{display:flex;align-items:center;gap:1rem;margin-top:auto;
  padding-top:1.6rem;border-top:1px solid var(--line-soft)}
.avatar-img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--line);background:var(--paper-2)}
.testi-feature figcaption .nm{font-family:var(--sans);font-weight:600;font-size:1.02rem;color:var(--ink);line-height:1.2}
.testi-feature figcaption .rl{font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:.35rem}

/* compact stat highlight inside a testimonial card */
.testi-feature .testi-stat{display:flex;align-items:baseline;gap:.7rem;
  margin:.4rem 0 .2rem;padding:.9rem 1.1rem;background:var(--accent-wash);border-radius:10px}
.testi-feature .testi-stat .big{font-family:var(--serif);font-size:2.4rem;line-height:.9;
  color:var(--accent-deep);letter-spacing:-.02em}
.testi-feature .testi-stat .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);line-height:1.5}

/* ---------------- principles ---------------- */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.principle{border-top:1px solid var(--ink);padding-top:1.4rem}
.principle .pn{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--accent);margin-bottom:1.4rem}
.principle h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,2.4vw,1.75rem);
  line-height:1.15;letter-spacing:-.01em;margin-bottom:.9rem}
.principle p{color:var(--ink-soft);font-size:.98rem;line-height:1.6}
@media(max-width:760px){.principles{grid-template-columns:1fr;gap:2.5rem}}

/* ---------------- process steps ---------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--paper);padding:clamp(1.5rem,2.8vw,2.2rem);display:flex;flex-direction:column;gap:.8rem;min-height:100%}
.step .sn{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--accent)}
.step h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;letter-spacing:-.01em}
.step p{color:var(--ink-soft);font-size:.92rem}
@media(max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------------- timeline (about) ---------------- */
.timeline{border-top:1px solid var(--line)}
.tl-row{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,4vw,3rem);
  padding-block:clamp(1.6rem,3vw,2.4rem);border-bottom:1px solid var(--line);align-items:baseline}
.tl-row .yr{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.2rem);color:var(--accent);line-height:1}
.tl-row .tc h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,2.2vw,1.5rem);
  letter-spacing:-.01em;margin-bottom:.5rem}
.tl-row .tc p{color:var(--ink-soft);max-width:60ch;font-size:.98rem}

/* ---------------- FAQ ---------------- */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding-block:1.4rem;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.5rem);
  letter-spacing:-.01em;transition:color .3s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary .ic{flex:none;width:22px;height:22px;position:relative}
.faq summary .ic::before,.faq summary .ic::after{content:"";position:absolute;background:var(--accent);
  top:50%;left:50%;transform:translate(-50%,-50%)}
.faq summary .ic::before{width:14px;height:2px}
.faq summary .ic::after{width:2px;height:14px;transition:transform .3s var(--ease)}
.faq details[open] summary .ic::after{transform:translate(-50%,-50%) scaleY(0)}
.faq details > div{padding-bottom:1.5rem;color:var(--ink-soft);max-width:70ch;line-height:1.6}

/* ---------------- CTA block ---------------- */
.cta{padding-block:clamp(5rem,11vw,9rem);text-align:center;position:relative}
.cta .eyebrow{color:var(--ink-soft);margin-bottom:2rem;display:flex;gap:.7rem;align-items:center;justify-content:center}
.cta .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,6.4vw,4.8rem);
  line-height:1.02;letter-spacing:-.025em;max-width:20ch;margin:0 auto 1.4rem;text-wrap:balance}
.cta p{color:var(--ink-soft);max-width:46ch;margin:0 auto 2.4rem}
.cta .actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.mailto{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--serif);
  font-size:clamp(1.3rem,3.2vw,2.1rem);letter-spacing:-.01em;color:var(--ink);
  border-bottom:2px solid var(--line);padding-bottom:.3rem;transition:.4s var(--ease);margin-top:.6rem}
.mailto .arr{color:var(--accent);transition:transform .4s var(--ease);display:inline-block}
.mailto:hover{border-color:var(--accent);color:var(--accent)}
.mailto:hover .arr{transform:translate(4px,-4px)}

/* ---------------- checklist ---------------- */
.checklist{list-style:none;display:grid;gap:1rem;max-width:60ch;margin-top:2rem}
.checklist li{position:relative;padding-left:2rem;color:var(--ink);line-height:1.5}
.checklist li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;
  background:var(--accent-wash);border:1px solid var(--accent)}
.checklist li::after{content:"";position:absolute;left:6px;top:.45em;width:5px;height:9px;
  border-right:2px solid var(--accent-deep);border-bottom:2px solid var(--accent-deep);transform:rotate(45deg)}

/* ---------------- contact grid ---------------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);
  padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.contact-card{border:1px solid var(--line);border-radius:14px;padding:clamp(1.6rem,3vw,2.4rem);
  background:var(--paper);display:flex;flex-direction:column;gap:1.4rem;height:fit-content}
.contact-card .row .k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.35rem}
.contact-card .row .v{font-family:var(--serif);font-size:1.2rem;color:var(--ink)}
.contact-card .row a.v{border-bottom:1px solid var(--line);transition:.3s var(--ease)}
.contact-card .row a.v:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* ---------------- pill row / eyebrow ---------------- */
.eyebrow-line{display:flex;align-items:center;gap:.8rem;color:var(--ink-soft)}
.eyebrow-line .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--accent);animation:pulse 2.6s var(--ease) infinite}
.placeholder{color:var(--accent-deep);font-style:normal;border-bottom:1px dotted var(--accent)}

/* ---------------- footer ---------------- */
footer.site{border-top:1px solid var(--line);padding-block:2.8rem;color:var(--ink-soft);margin-top:0}
.foot-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;padding-bottom:2.4rem;
  border-bottom:1px solid var(--line-soft)}
.foot-top .col h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:1.1rem}
.foot-top .col a,.foot-top .col p{display:block;font-size:.95rem;color:var(--ink-soft);margin-bottom:.6rem;
  transition:color .3s var(--ease)}
.foot-top .col a:hover{color:var(--accent)}
.foot-top .brandcol .wordmark{height:20px;width:auto;margin-bottom:1.1rem}
.foot-top .brandcol p{max-width:34ch}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.6rem}
.foot-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-faint)}
.foot-links-inline{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot-links-inline a{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.foot-links-inline a:hover{color:var(--accent)}
@media(max-width:760px){.foot-top{grid-template-columns:1fr 1fr}.foot-top .brandcol{grid-column:1/-1}}

/* ---------------- reveal / load ---------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.06s}[data-d="2"]{transition-delay:.14s}
[data-d="3"]{transition-delay:.22s}[data-d="4"]{transition-delay:.3s}
.load{opacity:0;transform:translateY(110%)}
.loaded .load{animation:rise 1.1s var(--ease) forwards}
.loaded [data-l="1"]{animation-delay:.08s}.loaded [data-l="2"]{animation-delay:.2s}
.loaded [data-l="3"]{animation-delay:.32s}.loaded [data-l="4"]{animation-delay:.46s}
.loaded [data-l="5"]{animation-delay:.6s}.loaded [data-l="6"]{animation-delay:.74s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.load{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}