/* ============================================================
   Growspective — shared styles (all pages)
   Editorial serif system · dark cinematic · interactive flow-field
   ============================================================ */
:root{
  color-scheme:dark;
  --ink:#0A0B0E; --ink2:#101218; --ink3:#15171F;
  --paper:#F1EEE7; --dim:#9B9FAA;
  --gold:#E3BE84; --goldDeep:#C79A4A;
  --line:rgba(241,238,231,.10);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:clamp(1.02rem,.55vw + .9rem,1.15rem); line-height:1.75;
  letter-spacing:.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:rgba(227,190,132,.26); color:#fff; }

/* ---------- type ---------- */
.ff{ font-family:"Playfair Display",Georgia,serif; font-weight:500; letter-spacing:-.005em; }
.serif{ font-family:"Newsreader",Georgia,serif; }
.italic{ font-style:italic; }
.goldtext{ color:var(--gold); }
.display{ font-family:"Playfair Display",Georgia,serif; font-weight:500;
  font-size:clamp(2.9rem,6.2vw,6rem); line-height:1.08; letter-spacing:-.012em; text-wrap:balance; }
.h2{ font-family:"Playfair Display",Georgia,serif; font-weight:500;
  font-size:clamp(2.05rem,3.6vw,3.4rem); line-height:1.14; letter-spacing:-.01em; text-wrap:balance; }
.h3{ font-family:"Playfair Display",Georgia,serif; font-weight:500; line-height:1.18; letter-spacing:-.005em; }
.lead{ font-size:clamp(1.16rem,1.4vw,1.42rem); line-height:1.7; color:rgba(241,238,231,.80); font-weight:380; text-wrap:pretty; }
.measure{ max-width:64ch; }
.eyebrow{ font-family:"Newsreader",serif; font-weight:500; font-style:italic;
  font-size:1.02rem; letter-spacing:.02em; color:var(--gold); }
.label{ font-family:"Newsreader",serif; text-transform:uppercase; letter-spacing:.34em;
  font-size:.66rem; font-weight:500; color:var(--dim); }
.mono{ font-family:"Newsreader",serif; }  /* alias: legacy markup hook, now serif */

/* ---------- background layers ---------- */
#flow{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; }
.grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.06;
  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='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.scrim{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(rgba(10,11,14,.52), rgba(10,11,14,.52)),
             radial-gradient(125% 80% at 50% -8%, transparent 46%, rgba(10,11,14,.55) 100%); }
.shell{ position:relative; z-index:2; }

/* ---------- layout helpers ---------- */
.wrap{ margin-inline:auto; max-width:78rem; padding-inline:clamp(1.25rem,4vw,2.75rem); }
.wrap-md{ margin-inline:auto; max-width:68rem; padding-inline:clamp(1.25rem,4vw,2.75rem); }
.section{ padding-block:clamp(5rem,10vw,9rem); }
.hairline{ height:1px; background:linear-gradient(90deg,transparent,rgba(241,238,231,.16),transparent); }

/* ---------- buttons / links ---------- */
.btn{ display:inline-flex; align-items:center; gap:.6rem; border-radius:999px; font-family:"Newsreader",serif;
  font-weight:500; font-size:1rem; padding:.85rem 1.6rem; line-height:1; cursor:pointer;
  transition:transform .4s cubic-bezier(.2,.9,.25,1), box-shadow .4s ease, background-color .35s ease, border-color .35s ease, color .35s ease; }
.btn-gold{ background:linear-gradient(180deg,#ecca8c,#E3BE84); color:#15110A;
  box-shadow:0 16px 40px -18px rgba(227,190,132,.75), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 24px 54px -20px rgba(227,190,132,.9), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-ghost{ border:1px solid rgba(241,238,231,.22); color:var(--paper); background:rgba(241,238,231,.02); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:rgba(227,190,132,.55); color:#fff; }
.btn:active{ transform:translateY(0); }
.linkcta{ font-family:"Newsreader",serif; font-style:italic; font-size:1rem; color:var(--gold);
  display:inline-flex; align-items:center; gap:.45rem; transition:gap .35s ease,color .3s ease; }
.linkcta:hover{ gap:.8rem; color:#f2d8a8; }
a{ color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }

/* ---------- nav ---------- */
.nav{ transition:background-color .45s ease,border-color .45s ease,backdrop-filter .45s ease; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(10,11,14,.82); backdrop-filter:blur(8px); border-bottom-color:var(--line); }
.navlink{ position:relative; color:rgba(241,238,231,.74); font-size:1.02rem; transition:color .3s ease; }
.navlink:hover{ color:var(--paper); }
.navlink::after{ content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--gold); transition:width .4s cubic-bezier(.2,.9,.25,1); }
.navlink:hover::after,.navlink[aria-current="page"]::after{ width:100%; }

/* ---------- cards ---------- */
.card{ position:relative; border:1px solid var(--line); background:rgba(255,255,255,.02); border-radius:22px; overflow:hidden;
  transition:transform .55s cubic-bezier(.2,.9,.25,1), border-color .5s ease, box-shadow .5s ease, opacity .4s ease; }
.card:hover{ transform:translateY(-7px); border-color:rgba(227,190,132,.42);
  box-shadow:0 48px 90px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(227,190,132,.12); }
.shot{ transition:transform 1.2s cubic-bezier(.2,.9,.25,1); }
.card:hover .shot{ transform:scale(1.05); }
.chip{ font-family:"Newsreader",serif; font-style:italic; font-size:.82rem; color:rgba(241,238,231,.66);
  border:1px solid rgba(241,238,231,.16); border-radius:999px; padding:.2rem .7rem; }

/* ---------- filter chips (work page) ---------- */
.filterbtn{ font-family:"Newsreader",serif; font-size:.98rem; color:rgba(241,238,231,.62);
  border:1px solid rgba(241,238,231,.16); border-radius:999px; padding:.5rem 1.15rem;
  transition:color .3s ease,border-color .3s ease,background-color .3s ease; }
.filterbtn:hover{ color:var(--paper); border-color:rgba(227,190,132,.5); }
.filterbtn[aria-pressed="true"]{ color:#15110A; background:var(--gold); border-color:var(--gold); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.9,.25,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- case-study: browser frame ---------- */
.frame{ border:1px solid rgba(241,238,231,.12); border-radius:16px; overflow:hidden; background:#15171f;
  box-shadow:0 70px 130px -60px rgba(0,0,0,.95); }
.frame-bar{ display:flex; align-items:center; gap:.5rem; padding:.75rem .95rem; background:rgba(255,255,255,.03); border-bottom:1px solid rgba(241,238,231,.08); }
.dot{ width:11px; height:11px; border-radius:999px; display:inline-block; }
.frame-url{ flex:1; text-align:center; font-family:"Newsreader",serif; font-size:.82rem; color:rgba(241,238,231,.5);
  background:rgba(255,255,255,.03); border-radius:999px; padding:.25rem .85rem; max-width:340px; margin:0 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frame iframe{ display:block; width:100%; height:580px; border:0; background:#fff; }
@media (max-width:640px){ .frame iframe{ height:440px; } }

/* ---------- palette / phone ---------- */
.swatch{ height:66px; border-radius:12px; border:1px solid rgba(241,238,231,.1); display:flex; align-items:flex-end; padding:.5rem; }
.swatch span{ font-family:"Newsreader",serif; font-size:.66rem; background:rgba(0,0,0,.45); color:#fff; padding:.1rem .4rem; border-radius:4px; }
.phone{ border:6px solid #1b1e29; border-radius:34px; overflow:hidden; background:#000; box-shadow:0 48px 90px -45px rgba(0,0,0,.9); max-width:240px; }
.phone img{ display:block; width:100%; }

/* ---------- centered layout (consulting.com-style) ---------- */
.shell main{ text-align:center; }
.shell main [style*="max-width"]{ margin-left:auto; margin-right:auto; }
.shell main .max-w-xl,.shell main .max-w-2xl,.shell main .max-w-3xl,.shell main .max-w-4xl{ margin-left:auto; margin-right:auto; }
.shell main .flex{ justify-content:center; }
.shell main ul{ padding-left:0; }
.shell main li.flex{ justify-content:center; }
.shell footer{ text-align:center; }
.shell footer .flex{ justify-content:center; align-items:center; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .btn,.card,.shot,.navlink::after{ transition:none !important; }
}