/* ============================================================
   Socoz Design — shared design system
   Dark + gold premium aesthetic. Space Grotesk (display) / Inter (body).
   Linked by every page. Keep load-bearing copy in HTML, not JS.
   ============================================================ */

:root{
  /* surfaces */
  --bg-0:#0b0c0e; --bg-1:#141519; --bg-2:#1c1f24;
  /* ink — warm off-white body to avoid near-#fff halation on near-black */
  --text:#f0ece3; --muted:#b7bcc3; --ink:#dfe3ea; --dim:#8a8f97;
  /* lines */
  --line:#2a2e35; --line-soft:#1c2026;
  /* gold */
  --gold-1:#c7a86a; --gold-2:#e4d2a3; --gold-3:#fbf4d6; --gold-dim:#7a6740;
  /* misc */
  --brand:#ffffff; --card:#121418cc; --green:#4caf82;
  --max:1200px; --max-narrow:1140px; --radius:16px;
  /* stacked, hue-aware shadows + inset rim-light for physical depth on dark */
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-soft:0 1px 2px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --nav-h:72px; --nav-item-h:42px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background-color:var(--bg-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  position:relative; overflow-x:hidden;
}
body.menu-open{overflow:hidden}

/* atmospheric background: fine film grain over layered radials + faint grid that fades out.
   The grain adds tactile depth and dithers gradient banding on the near-black canvas. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E") repeat,
    radial-gradient(1200px 800px at 50% 0%, #1c1f24 0%, transparent 60%),
    radial-gradient(800px 800px at 100% 50%, #171a1f 0%, transparent 50%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-size:40px 40px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.02) 1px, transparent 1px);
  mask-image:linear-gradient(to bottom, black 0%, transparent 80%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, transparent 80%);
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:'Space Grotesk',Inter,sans-serif; letter-spacing:-.02em; margin:0}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:24px}
.wrap-narrow{max-width:var(--max-narrow); margin-inline:auto; padding-inline:24px}

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.visible{opacity:1; transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* ---------- NAV ---------- */
header.nav{
  position:sticky; top:0; z-index:999; backdrop-filter:saturate(140%) blur(12px);
  background:linear-gradient(180deg, rgba(11,12,14,.9), rgba(11,12,14,.6));
  border-bottom:1px solid rgba(255,255,255,.05);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); position:relative}
.brand{display:flex; gap:14px; align-items:center; font-family:'Space Grotesk',Inter,sans-serif}
.brand img{height:30px; width:auto; filter:drop-shadow(0 0 8px rgba(255,255,255,.08))}
.brand span{font-weight:700; letter-spacing:.2px}
.links{display:flex; align-items:center; gap:24px}
.links a{display:inline-flex; align-items:center; height:var(--nav-item-h); line-height:1; opacity:.8; transition:opacity .2s, color .2s}
.links a:hover{opacity:1; color:var(--gold-1)}
.links a[aria-current="page"]{opacity:1; color:var(--gold-2)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap;
  border:1px solid color-mix(in oklab, var(--gold-1) 65%, #ffffff);
  padding:10px 20px; border-radius:999px; font-weight:600; letter-spacing:.2px;
  background:linear-gradient(180deg, rgba(199,168,106,.08), rgba(199,168,106,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
  height:var(--nav-item-h); cursor:pointer; font-family:inherit; font-size:inherit;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(199,168,106,.15); color:#fff}
.btn.gold{background:linear-gradient(90deg, var(--gold-1), var(--gold-2)); color:#0d0f12; border-color:transparent}
.btn.gold:hover{color:#0d0f12; box-shadow:0 8px 24px rgba(199,168,106,.28)}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--text)}
.btn.ghost:hover{background:linear-gradient(90deg, var(--gold-1), var(--gold-2)); color:#0e1114; border-color:transparent}
.btn.lg{padding:14px 32px; font-size:16px; height:auto}
@media (prefers-reduced-motion: reduce){.btn:hover{transform:none}}

/* a quieter secondary text link with arrow */
.link-arrow{display:inline-flex; align-items:center; gap:6px; color:var(--gold-2); font-weight:600;
  border-bottom:1px solid transparent; transition:border-color .2s, gap .2s}
.link-arrow:hover{border-color:var(--gold-dim); gap:10px}

/* mobile menu toggle */
.menu-toggle{display:none; background:transparent; border:1px solid rgba(255,255,255,.12); border-radius:10px;
  width:44px; height:44px; cursor:pointer; color:var(--text); align-items:center; justify-content:center;
  transition:all .2s ease; padding:0}
.menu-toggle:hover{border-color:var(--gold-1); color:var(--gold-1)}
.menu-toggle:focus-visible{outline:2px solid var(--gold-1); outline-offset:2px}
.menu-toggle svg{width:22px; height:22px; display:block}
.menu-toggle .icon-close{display:none}
.menu-toggle.open .icon-open{display:none}
.menu-toggle.open .icon-close{display:block}
.menu-toggle.open{color:var(--gold-1); border-color:var(--gold-1)}

/* ---------- SECTIONS / TYPE ---------- */
section{padding:100px 0}
h1{font-family:'Space Grotesk',Inter,sans-serif; font-weight:700; line-height:1.05}
h2{font-size:clamp(32px,4vw,48px); margin:0 0 16px; line-height:1.05}
h3{font-size:24px}
.lead{color:var(--muted); max-width:65ch; font-size:18px; margin-bottom:48px; line-height:1.7}
.eyebrow{display:inline-block; font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-1); font-weight:700; margin-bottom:12px}
.tag{display:inline-block; font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  padding:7px 16px; border-radius:999px; color:#0f1115; font-weight:700;
  background:linear-gradient(90deg, var(--gold-1), var(--gold-2));
  margin-bottom:24px; box-shadow:0 0 20px rgba(199,168,106,.2)}
.section-divider{height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); border:0; margin:0}

/* ---------- HERO ---------- */
.hero{position:relative; padding:120px 0 80px; text-align:center; display:flex; flex-direction:column; align-items:center}
.hero::before{content:""; position:absolute; inset:-10% 0 0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 38% at 50% 8%, rgba(199,168,106,.12), transparent 70%),
    radial-gradient(38% 30% at 82% 26%, rgba(199,168,106,.07), transparent 70%);}
.hero > .wrap{position:relative; z-index:1}
.hero h1{font-size:clamp(40px,6vw,72px); letter-spacing:-1px; margin:0 0 24px; max-width:20ch; margin-inline:auto;
  background:linear-gradient(100deg, #f3eee2 12%, var(--gold-2) 34%, var(--gold-3) 50%, var(--gold-2) 66%, #f3eee2 88%);
  background-size:200% auto; color:#000; background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:shine 5s linear infinite}
@keyframes shine{to{background-position:200% center}}
@media (prefers-reduced-motion: reduce){.hero h1{animation:none}}
.hero p{color:var(--muted); font-size:clamp(18px,2vw,22px); max-width:62ch; margin:0 auto 32px; line-height:1.7}
.hero-ctas{display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap}
.hero-sub-link{margin-top:20px}

/* interior page hero: left-aligned, lighter */
.page-hero{position:relative; padding:84px 0 36px; overflow:hidden}
.page-hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 400px at 85% 20%, rgba(199,168,106,.08), transparent 60%)}
.page-hero h1{font-size:clamp(34px,5vw,60px); letter-spacing:-1px; margin:0 0 20px; max-width:18ch}
.page-hero .accent{background:linear-gradient(100deg, var(--gold-1), var(--gold-2) 36%, var(--gold-3) 50%, var(--gold-2) 64%, var(--gold-1));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.page-hero p.lead{margin-bottom:28px}

/* ---------- PROOF / METRIC STRIP ---------- */
.metrics-banner{
  width:100%; max-width:var(--max); margin:0 auto 60px;
  background:linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:32px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; backdrop-filter:blur(10px);
}
.metric{text-align:center; position:relative}
.metric:not(:last-child)::after{content:''; position:absolute; right:0; top:10%; height:80%; width:1px;
  background:linear-gradient(to bottom, transparent, var(--line), transparent)}
.metric strong{font-family:'Space Grotesk',sans-serif; font-size:clamp(26px,4vw,40px); color:var(--gold-1); display:block; line-height:1; margin-bottom:8px}
.metric small{color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:1px}

/* inline proof strip (repeats beside CTAs) */
.proof-inline{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; align-items:center;
  color:var(--muted); font-size:14px; margin:0 auto; max-width:760px}
.proof-inline b{color:var(--gold-2); font-family:'Space Grotesk',sans-serif; font-weight:600}
.proof-inline .src{width:100%; text-align:center; color:var(--dim); font-size:12px; margin-top:6px; letter-spacing:.04em}

/* ---------- PANELS / CARDS ---------- */
.panel,.offer,.price,.table-card{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:36px;
  transition:transform .3s ease, border-color .3s ease;
}
.hover-reactive::after{content:""; position:absolute; inset:-1px; pointer-events:none; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(300px circle at var(--rx,50%) var(--ry,50%), color-mix(in oklab, var(--gold-2) 20%, transparent), transparent 60%); z-index:0}
.hover-reactive:hover{border-color:rgba(199,168,106,.4); transform:translateY(-4px)}
.hover-reactive:hover::after{opacity:1}
.panel>*,.offer>*,.price>*,.table-card>*{position:relative; z-index:1}

/* ---------- TRUSTED BY (logo strip) ---------- */
.trusted{padding:48px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:rgba(0,0,0,.18)}
.trusted-label{text-align:center; color:var(--dim); font-size:12px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:24px}
.trusted-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:24px 56px}
.trusted-item{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; opacity:.86; transition:opacity .25s}
.trusted-item:hover{opacity:1}
.trusted-item img{height:40px; width:auto; object-fit:contain; filter:grayscale(1) brightness(1.4) contrast(.9); transition:filter .25s}
.trusted-item:hover img{filter:grayscale(0) brightness(1) contrast(1)}
.trusted-item .logo-fallback{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; color:var(--ink); letter-spacing:.02em}
.trusted-item .vertical{font-size:11px; color:var(--dim); letter-spacing:.14em; text-transform:uppercase}

/* ---------- VALUE-LADDER STAIRCASE ---------- */
.ladder{display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; align-items:end; margin-top:40px}
.rung{position:relative; border:1px solid var(--line); border-radius:14px; padding:20px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  box-shadow:var(--shadow-soft); transition:transform .3s ease, border-color .3s ease; display:flex; flex-direction:column; gap:6px}
.rung:hover{transform:translateY(-4px); border-color:rgba(199,168,106,.45)}
.rung .step{font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dim)}
.rung h4{font-size:16px; color:var(--text)}
.rung .price{all:unset; font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--gold-1); font-size:18px; display:block}
.rung p{margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.5}
/* stairstep heights */
.ladder .rung:nth-child(1){--h:0}
.ladder .rung:nth-child(2){margin-bottom:0}
.rung.entry{border-color:rgba(199,168,106,.5); background:linear-gradient(180deg, rgba(199,168,106,.06), transparent)}
.rung.entry::before{content:"Start here"; position:absolute; top:-11px; left:16px; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#0e1114; padding:4px 10px; border-radius:999px; background:linear-gradient(90deg, var(--gold-1), var(--gold-2))}
.ladder-arrow{display:flex; align-items:center; justify-content:center; color:var(--gold-dim)}

/* ---------- DUAL-PATH ---------- */
.dual{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px}
.path{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); padding:32px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); box-shadow:var(--shadow);
  transition:transform .3s, border-color .3s; display:flex; flex-direction:column}
.path:hover{transform:translateY(-4px); border-color:rgba(199,168,106,.4)}
.path .eyebrow{margin-bottom:10px}
.path h3{font-size:22px; margin-bottom:10px}
.path p{color:var(--muted); margin:0 0 18px}
.path ul{margin:0 0 22px; padding-left:18px; color:var(--ink)}
.path li{margin:8px 0}
.path li::marker{color:var(--gold-1)}
.path .spacer{flex:1 1 auto}

/* ---------- 4-STEP PROCESS ---------- */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step}
.step-card{position:relative; border:1px solid var(--line); border-radius:14px; padding:26px 22px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)); box-shadow:var(--shadow-soft)}
.step-card::before{counter-increment:step; content:counter(step); position:absolute; top:18px; right:20px;
  font-family:'Space Grotesk',sans-serif; font-size:40px; font-weight:700; line-height:1; color:rgba(199,168,106,.18)}
.step-card h4{font-size:18px; margin-bottom:8px; color:var(--text)}
.step-card p{margin:0; color:var(--muted); font-size:14px; line-height:1.55}

/* ---------- ABOUT / FOUNDER ---------- */
.about-layout{display:grid; grid-template-columns:minmax(260px,360px) 1fr; gap:56px; align-items:center}
.about-photo-wrap{position:relative; border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5);
  border:1px solid var(--line); aspect-ratio:4/5; background:linear-gradient(180deg, rgba(199,168,106,.1), transparent)}
.about-photo-wrap img{width:100%; height:100%; object-fit:cover}
.about-photo-wrap::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(11,12,14,.4)); pointer-events:none}
.about-body h2{margin-top:0}
.about-body p{color:var(--ink); font-size:18px; line-height:1.75}
.about-body .signature{margin-top:24px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px}
.about-body .signature strong{font-family:'Space Grotesk',sans-serif; font-size:18px}
.about-body .signature span{color:var(--muted); font-size:14px}

/* ---------- OFFER GRID ---------- */
.grid{display:grid; gap:24px}
.offer-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.offer h3{margin:0 0 12px; font-size:24px; color:var(--brand)}
.offer p{color:var(--muted); margin-bottom:20px}
.offer ul{margin:0; padding-left:20px; color:var(--ink)}
.offer li{margin:10px 0; padding-left:8px}
.offer li::marker{color:var(--gold-1)}

/* ---------- CASE STUDY ---------- */
.cs-layout{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
.cs-client-badge{display:inline-flex; align-items:center; gap:10px; background:rgba(199,168,106,.08);
  border:1px solid rgba(199,168,106,.25); padding:8px 14px; border-radius:999px; font-size:13px; color:var(--gold-2); margin-bottom:16px; font-weight:600}
.cs-client-badge svg{width:14px; height:14px}

/* ---------- ACCORDION ---------- */
.accordion-grid{display:grid; gap:16px}
details.accordion-item{position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:18px 24px;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease}
details.accordion-item:hover{border-color:color-mix(in oklab, var(--gold-1) 70%, #000); box-shadow:0 14px 26px rgba(199,168,106,.12); transform:translateY(-1px)}
details.accordion-item summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:600; font-size:16px}
details.accordion-item summary::-webkit-details-marker{display:none}
.chev{width:18px; height:18px; flex:0 0 auto; opacity:.85; transition:transform .2s ease, opacity .2s ease; color:var(--gold-1)}
details.accordion-item[open] .chev{transform:rotate(180deg); opacity:1}
.accordion-body{margin-top:16px; color:var(--muted); font-size:15px; border-top:1px solid var(--line); padding-top:16px}
.accordion-body ul{padding-left:20px; margin:0}
.accordion-body li{margin-bottom:8px}

/* ---------- TABLE ---------- */
.table-card{padding:24px}
.table{width:100%; border-collapse:collapse; text-align:left; font-size:14px}
.table th,.table td{padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.table tr:last-child td{border-bottom:none}
.table th{color:var(--gold-1); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; border-bottom:2px solid var(--line)}
.table td strong{color:var(--text); display:block; margin-bottom:4px; font-size:15px}

/* ---------- WHO WE SERVE / CHIPS ---------- */
.who-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.chip{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:20px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0)); box-shadow:var(--shadow); cursor:default; transition:all .3s ease}
.chip .thumb{width:100%; aspect-ratio:4/3; border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.5); background:var(--bg-0)}
.chip .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.chip:hover{border-color:var(--gold-1); background:linear-gradient(180deg, rgba(199,168,106,.05), transparent); transform:translateY(-4px); box-shadow:0 16px 30px rgba(199,168,106,.15)}
.chip:hover .thumb img{transform:scale(1.05)}
.who-subhead{display:flex; align-items:center; gap:14px; margin:48px 0 20px;
  font-family:'Space Grotesk',sans-serif; font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-1); font-weight:700}
.who-subhead::before,.who-subhead::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent)}

/* ---------- PRICING ---------- */
.pricing-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.price{display:flex; flex-direction:column; min-height:100%}
.price.best{border-color:rgba(199,168,106,.5); background:linear-gradient(180deg, rgba(199,168,106,.03), transparent)}
.price.best::before{content:"Most Chosen"; position:absolute; top:16px; right:16px; font-size:12px; font-weight:700;
  color:#0e1114; padding:6px 12px; border-radius:999px; background:linear-gradient(90deg, var(--gold-1), var(--gold-2)); z-index:2}
.price.audit::before{content:"Best Entry Point"; position:absolute; top:16px; right:16px; font-size:12px; font-weight:700;
  color:var(--gold-2); padding:6px 12px; border-radius:999px; background:rgba(199,168,106,.1); border:1px solid rgba(199,168,106,.35); z-index:2}
.money{font-family:'Space Grotesk',Inter,sans-serif; font-weight:700; font-size:42px; margin:12px 0}
.money small{font-size:18px; color:var(--muted); font-weight:400}
.price h3{font-size:24px}
.price>small{color:var(--gold-1); font-weight:600; letter-spacing:.06em}
.price ul{margin:24px 0 0 0; padding-left:20px; flex-grow:1}
.price li{margin:12px 0; color:var(--ink)}
.price li::marker{color:var(--gold-1)}
.spacer{flex:1 1 auto}
.pricing-note{max-width:760px; margin:40px auto 0; text-align:center; padding:18px 24px;
  border:1px dashed rgba(199,168,106,.3); border-radius:12px; color:var(--muted); font-size:14px; background:rgba(199,168,106,.03)}
.pricing-note strong{color:var(--gold-2); font-weight:600}

/* ---------- LEAD MAGNET ---------- */
.magnet-section{padding:80px 0}
.magnet{position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg, rgba(199,168,106,.06), rgba(228,210,163,.02));
  border:1px solid rgba(199,168,106,.25); border-radius:24px; padding:56px;
  display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:center; box-shadow:0 30px 60px rgba(0,0,0,.4)}
.magnet::before{content:""; position:absolute; top:-50%; right:-20%; width:500px; height:500px;
  background:radial-gradient(circle, rgba(199,168,106,.15), transparent 60%); pointer-events:none; z-index:0}
.magnet>*{position:relative; z-index:1}
.magnet h2{margin:0 0 16px; font-size:clamp(28px,3.5vw,40px)}
.magnet p{color:var(--ink); font-size:17px; line-height:1.65; margin-bottom:24px}
.magnet ul{margin:0 0 28px; padding-left:20px; color:var(--ink)}
.magnet ul li{margin:8px 0}
.magnet ul li::marker{color:var(--gold-1)}

/* ---------- FORMS ---------- */
label{display:block; font-size:14px; color:var(--muted); margin-bottom:8px; font-weight:500}
input,textarea,select{width:100%; padding:14px 18px; border-radius:12px; background:var(--bg-0); color:var(--text);
  border:1px solid var(--line); outline:none; transition:all .2s ease; font-family:inherit; font-size:15px}
input:focus,textarea:focus,select:focus{border-color:var(--gold-1); box-shadow:0 0 0 4px rgba(199,168,106,.15); background:#121418}
textarea{resize:vertical; min-height:110px}
select{-webkit-appearance:none; appearance:none; padding-right:44px;
  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' stroke='%23c7a86a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 18px center}
.magnet-form{background:rgba(11,12,14,.7); border:1px solid var(--line); border-radius:16px; padding:28px;
  backdrop-filter:blur(20px); display:flex; flex-direction:column; gap:14px}
.magnet-form label{font-size:13px; margin-bottom:4px}
.magnet-form .privacy{font-size:12px; color:var(--muted); text-align:center; margin-top:4px}

form.contact-form{display:grid; grid-template-columns:1fr 1fr; gap:20px;
  background:rgba(18,20,24,.8); border:1px solid var(--line); padding:40px; border-radius:24px;
  box-shadow:0 20px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(20px)}
form.contact-form .full{grid-column:1 / -1}

/* multi-step form */
.steps-head{display:flex; gap:10px; margin-bottom:24px; max-width:800px; margin-inline:auto}
.step-dot{flex:1; display:flex; align-items:center; gap:10px; color:var(--dim); font-size:13px}
.step-dot .num{width:26px; height:26px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-size:13px; flex:0 0 auto; transition:all .25s}
.step-dot.active{color:var(--text)}
.step-dot.active .num{border-color:var(--gold-1); background:linear-gradient(90deg, var(--gold-1), var(--gold-2)); color:#0e1114; font-weight:700}
.step-dot.done .num{border-color:var(--gold-dim); color:var(--gold-2)}
.fstep{display:none; grid-column:1 / -1}
.fstep.active{display:grid; grid-template-columns:1fr 1fr; gap:20px; animation:fadeStep .3s ease}
@keyframes fadeStep{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:translateY(0)}}
.fstep .full{grid-column:1 / -1}
.intent-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; grid-column:1 / -1}
.intent-card{cursor:pointer; border:1px solid var(--line); border-radius:14px; padding:20px; text-align:left;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008)); transition:all .25s}
.intent-card:hover{border-color:rgba(199,168,106,.45); transform:translateY(-3px)}
.intent-card.selected{border-color:var(--gold-1); background:linear-gradient(180deg, rgba(199,168,106,.08), transparent)}
.intent-card strong{display:block; font-family:'Space Grotesk',sans-serif; font-size:16px; margin-bottom:6px; color:var(--text)}
.intent-card span{font-size:13px; color:var(--muted); line-height:1.5}
.intent-card input{position:absolute; opacity:0; pointer-events:none}
.form-nav{grid-column:1 / -1; display:flex; justify-content:space-between; gap:12px; margin-top:8px}

/* ---------- CTA STRIP ---------- */
.cta-strip{padding:64px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(135deg, rgba(199,168,106,.05), rgba(255,255,255,.01))}
.cta-wrap{display:grid; grid-template-columns:minmax(0,1.4fr) auto; gap:32px; align-items:center}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- CONTACT SECTION ---------- */
.contact{position:relative; padding:120px 0}
.contact::before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:60%; height:1px; background:linear-gradient(90deg, transparent, var(--gold-1), transparent); opacity:.3}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{font-size:13px; color:var(--dim); padding:18px 0 0}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--gold-2)}
.breadcrumb span{color:var(--gold-dim); margin:0 8px}

/* ---------- FAQ (interior pages) ---------- */
.faq{display:grid; gap:12px; max-width:880px; margin-inline:auto}
details.faq-item{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line); border-radius:16px; padding:20px 24px; transition:border-color .2s ease, background .2s ease}
details.faq-item[open]{border-color:var(--gold-dim); background:linear-gradient(180deg, rgba(199,168,106,.04), rgba(255,255,255,.01))}
details.faq-item summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:600; color:var(--text)}
details.faq-item summary::-webkit-details-marker{display:none}
.faq-toggle{width:24px; height:24px; flex-shrink:0; border-radius:50%; border:1px solid var(--gold-dim);
  display:inline-flex; align-items:center; justify-content:center; color:var(--gold-2); font-size:.9rem; font-weight:600; transition:transform .25s ease, background .25s ease}
details.faq-item[open] .faq-toggle{transform:rotate(45deg); background:rgba(199,168,106,.12)}
details.faq-item .faq-body{margin-top:14px; color:var(--muted); font-size:.98rem; line-height:1.65}
details.faq-item .faq-body p{margin:0 0 .8em}
details.faq-item .faq-body p:last-child{margin-bottom:0}

/* ---------- FEATURE LIST (checkmark) ---------- */
.feature-list{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.feature-list li{display:grid; grid-template-columns:24px 1fr; gap:12px; color:var(--ink); line-height:1.55}
.feature-list svg{width:22px; height:22px; margin-top:2px; flex-shrink:0}

/* ---------- FOOTER ---------- */
footer{padding:60px 0 40px; border-top:1px solid var(--line)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px}
.footer-brand{display:flex; gap:12px; align-items:center; margin-bottom:14px}
.footer-brand img{height:28px}
.footer-brand span{font-family:'Space Grotesk',sans-serif; font-weight:700}
.footer-blurb{color:var(--muted); font-size:14px; max-width:38ch; line-height:1.6}
.footer-col h4{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-1); margin-bottom:14px}
.footer-col a{display:block; color:var(--muted); font-size:14px; margin:8px 0; transition:color .2s}
.footer-col a:hover{color:var(--gold-2)}
.footer-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding-top:24px; border-top:1px solid var(--line-soft)}
.footer-row .copyright{color:var(--muted); font-size:13px}
.social{display:flex; align-items:center; gap:16px}
.social-label{color:var(--muted); margin-right:8px; font-weight:500; font-size:13px}
.social a{color:var(--muted); transition:all .2s ease}
.social a:hover{color:var(--gold-1); transform:translateY(-2px)}

/* ---------- UTILITIES ---------- */
.text-center{text-align:center}
.mx-auto{margin-inline:auto}
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.section-tight{padding:72px 0}
.bg-band{background:linear-gradient(180deg, var(--bg-1), var(--bg-0)); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px}
  .process{grid-template-columns:1fr 1fr}
  .ladder{grid-template-columns:1fr 1fr; gap:14px}
  .ladder-arrow{display:none}
}
@media (max-width:900px){
  .menu-toggle{display:inline-flex}
  header.nav .links{display:none; position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    padding:12px 24px 24px; background:linear-gradient(180deg, rgba(11,12,14,.98), rgba(11,12,14,.96));
    backdrop-filter:saturate(140%) blur(20px); -webkit-backdrop-filter:saturate(140%) blur(20px);
    border-bottom:1px solid var(--line); box-shadow:0 20px 40px rgba(0,0,0,.5);
    max-height:calc(100vh - var(--nav-h)); overflow-y:auto; animation:slideDown .25s cubic-bezier(.16,1,.3,1)}
  header.nav .links.open{display:flex}
  header.nav .links a{height:auto; padding:16px 4px; border-bottom:1px solid rgba(255,255,255,.06); opacity:1; font-size:17px; width:100%; justify-content:flex-start}
  header.nav .links a.btn{margin-top:14px; padding:14px 20px; border-bottom:none; justify-content:center; height:auto}
  @keyframes slideDown{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:translateY(0)}}
  .hero{padding:80px 0 60px}
  .hero-ctas{flex-direction:column; width:100%; max-width:340px; margin:0 auto}
  .hero-ctas .btn{width:100%}
  .metrics-banner{grid-template-columns:1fr 1fr; gap:30px 0; padding:24px 0}
  .metric:nth-child(2)::after{display:none}
  .cta-wrap{grid-template-columns:1fr; gap:24px; text-align:left}
  .cta-actions{width:100%}
  .cta-actions .btn{width:100%}
  .cs-layout{grid-template-columns:1fr}
  .who-grid{grid-template-columns:repeat(2,1fr)}
  form.contact-form{grid-template-columns:1fr; padding:24px}
  .fstep.active{grid-template-columns:1fr}
  .intent-grid{grid-template-columns:1fr}
  .about-layout{grid-template-columns:1fr; gap:32px}
  .about-photo-wrap{max-width:300px; margin:0 auto}
  .magnet{grid-template-columns:1fr; padding:32px 24px; gap:32px}
  .dual{grid-template-columns:1fr}
  section{padding:72px 0}
}
@media (max-width:560px){
  .process{grid-template-columns:1fr}
  .ladder{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .metrics-banner{grid-template-columns:1fr; gap:30px 0}
  .metric::after{display:none !important}
  .who-grid{grid-template-columns:1fr}
  .trusted-row{gap:20px 32px}
}

/* ---------- PORTFOLIO / RECENT WORK ---------- */
.work-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.work-card{display:block; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); box-shadow:var(--shadow);
  transition:transform .3s ease, border-color .3s ease}
.work-card:hover{transform:translateY(-4px); border-color:rgba(199,168,106,.45)}
.work-card:focus-visible{outline:2px solid var(--gold-1); outline-offset:3px}
.work-thumb{display:block; aspect-ratio:760/342; overflow:hidden; background:var(--bg-2); border-bottom:1px solid var(--line)}
.work-thumb img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .5s ease}
.work-card:hover .work-thumb img{transform:scale(1.04)}
.work-thumb.placeholder{display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 38%, rgba(199,168,106,.16), transparent 70%), linear-gradient(135deg,#15171b,#0e1013)}
.work-thumb.placeholder span{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(18px,3vw,24px); color:var(--gold-2); letter-spacing:.01em}
.work-meta{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px}
.work-meta .name{font-family:'Space Grotesk',sans-serif; font-weight:600; color:var(--text); font-size:16px; display:block}
.work-meta .cat{font-size:11px; color:var(--gold-1); letter-spacing:.06em; text-transform:uppercase; display:block; margin-top:3px}
.work-meta .visit{font-size:13px; color:var(--gold-2); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; flex:0 0 auto}
@media (max-width:760px){ .work-grid{grid-template-columns:1fr} }

/* ---------- REDUCED MOTION (accessibility + low-end perf) ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}