/* ─────────────────────────────────────────────
   Vanilla Labs · prototype shared stylesheet
   Brand: Syne display · IBM Plex Sans body · IBM Plex Mono labels
   ───────────────────────────────────────────── */

:root{
  --bg:#f8fafc; --surf:#fff; --surf-h:#f1f5f9; --bd:#e2e8f0;
  --text:#1e3a5f; --mut:#64748b; --mut2:#94a3b8; --dark:#1a1f35;
  --gold:#FFA66B; --gold-h:#ffb889; --gold-dim:rgba(255,166,107,.12);
  --grn:#22c55e; --red:#ef4444; --amber:#f59e0b; --cyan:#06b6d4; --pur:#8b5cf6;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --disp:'Syne','IBM Plex Sans',system-ui,sans-serif;

  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:14px;
  --shadow-soft:0 0 0 1px var(--bd);

  --container:1180px;
  --gutter:2rem;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{font-weight:300;line-height:1.7;color:var(--mut);font-size:.9375rem;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}

/* Display + emphasis */
h1,h2,h3,h4,h5{color:var(--text);font-family:var(--disp);font-weight:600;letter-spacing:-.02em;line-height:1.15}
h1 em,h2 em,h3 em,h4 em,h5 em,.disp em{font-style:normal;font-weight:700;color:var(--gold)}

/* Mono label */
.lbl{display:inline-block;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.lbl.mut{color:var(--mut2)}
.lbl.dark{color:var(--gold)}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.prose{max-width:760px}

/* ── Top nav ─────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(248,250,252,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--bd)}
.nav .row{max-width:var(--container);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand-mark{font-family:var(--disp);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--text);display:inline-flex;align-items:center;gap:.05em}
.brand-mark span{color:var(--gold)}
.nav-links{display:flex;gap:1.6rem;align-items:center;font-size:.85rem}
.nav-links a{color:var(--mut);transition:color .18s var(--ease);position:relative;padding:.25rem 0}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--text);font-weight:500}
.nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--gold)}
.nav-cta{background:var(--gold);color:var(--text);font-weight:700;font-size:.82rem;line-height:1;white-space:nowrap;padding:.62rem 1.05rem;border-radius:10px;border:none;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:38px;transition:background .18s var(--ease),transform .18s var(--ease)}
.nav-cta:hover{background:var(--gold-h)}
.nav-cta:active{transform:translateY(1px)}
.hamburger{display:none;background:transparent;border:1px solid var(--bd);color:var(--text);padding:.5rem;border-radius:var(--r-sm);width:38px;height:38px;align-items:center;justify-content:center}
.hamburger svg{width:18px;height:18px}

@media (max-width:880px){
  .nav-links{display:none}
  .hamburger{display:inline-flex}
  .nav-cta.desktop-only{display:none}
}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:60;background:rgba(26,31,53,.55);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.drawer.open{opacity:1;pointer-events:auto}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(360px,86vw);background:#fff;border-left:1px solid var(--bd);transform:translateX(100%);transition:transform .35s var(--ease);display:flex;flex-direction:column;padding:1.5rem 1.5rem 2rem}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.drawer-close{background:transparent;border:1px solid var(--bd);width:34px;height:34px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--text)}
.drawer a{padding:1rem 0;border-bottom:1px solid var(--bd);color:var(--text);font-size:1rem;font-weight:500}
.drawer a.active{color:var(--gold)}
.drawer .nav-cta{margin-top:1.5rem;width:100%;justify-content:center;padding:.85rem 1rem;font-size:.92rem}

/* ── Page chrome ─────────────────────────── */
section{padding:4.5rem 0;border-top:1px solid var(--bd);position:relative}
section.alt{background:#fff}
section.bare{padding:0;border:none}
section:first-of-type{border-top:none}

.section-head{margin-bottom:3rem;max-width:760px}
.section-head h2{font-size:clamp(2rem,4vw,3rem);margin-top:.85rem;margin-bottom:.85rem}
.section-head p{font-size:1.02rem}

/* ── Cards ───────────────────────────────── */
.card{background:var(--surf);border:1px solid var(--bd);border-radius:var(--r-lg);padding:1.75rem;position:relative;transition:transform .2s var(--ease),border-color .2s var(--ease)}
.card.compact{padding:1.25rem 1.4rem}
.card.tight{padding:1rem 1.2rem}
.card.dark{background:var(--dark);color:#cbd5e1;border-color:transparent}
.card.dark h2,.card.dark h3,.card.dark h4{color:#fff}

.card-link{display:block;color:inherit}
.card-link:hover{transform:translateY(-2px);border-color:var(--mut2);cursor:pointer}

/* grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:880px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
@media (min-width:881px) and (max-width:1080px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}

/* ── Buttons ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600;font-size:.92rem;padding:.75rem 1.3rem;border-radius:var(--r-md);border:1px solid transparent;transition:transform .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease);text-decoration:none;cursor:pointer}
.btn.pri{background:var(--gold);color:var(--text)}
.btn.pri:hover{background:var(--gold-h)}
.btn.pri:active{transform:translateY(1px)}
.btn.sec{background:transparent;color:var(--text);border-color:var(--bd)}
.btn.sec:hover{border-color:var(--mut2);background:var(--surf-h)}
.btn.lg{font-size:1rem;padding:.9rem 1.5rem}
.btn.sm{font-size:.78rem;padding:.5rem 1rem}
.btn.full{width:100%;justify-content:center}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* arrow */
.arrow{display:inline-block;line-height:1;transition:transform .2s var(--ease)}
.btn:hover .arrow,.nav-cta:hover .arrow{transform:translateX(3px)}

/* ── Pills / tags ────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.32rem .8rem;border-radius:100px;background:var(--gold-dim);color:var(--gold)}
.pill.gr{background:rgba(34,197,94,.12);color:#16a34a}
.pill.mt{background:var(--surf-h);color:var(--mut)}
.pill.dark{background:rgba(255,166,107,.18);color:var(--gold)}

/* ── Hero ────────────────────────────────── */
.hero{padding:5rem 2rem 4rem;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background-image:
  linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at top,#000 25%,transparent 65%);
          mask-image:radial-gradient(ellipse at top,#000 25%,transparent 65%);
  pointer-events:none}
.hero::after{content:'';position:absolute;left:50%;top:-15%;width:55%;height:90%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,166,107,.10),transparent 70%);pointer-events:none}
.hero .inner{position:relative;max-width:880px;margin:0 auto}
.hero h1{font-size:clamp(2.4rem,5vw,3.8rem);max-width:18ch;margin:.7rem auto 1.1rem;line-height:1.05}
.hero p.lede{max-width:560px;margin:0 auto;font-size:1.05rem;line-height:1.55;color:var(--mut)}
.hero .ctas{display:flex;gap:.6rem;justify-content:center;margin-top:1.75rem;flex-wrap:wrap}
.hero .qual{margin-top:1.4rem;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}

/* ── Footer ──────────────────────────────── */
footer.foot{padding:3.5rem 0 3rem;border-top:1px solid var(--bd);background:#fff}
.foot .row{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
@media (max-width:880px){.foot .row{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot .row{grid-template-columns:1fr}}
.foot h5{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);font-weight:600;margin-bottom:.85rem}
.foot a{display:block;font-size:.86rem;color:var(--mut);padding:.25rem 0;transition:color .18s var(--ease)}
.foot a:hover{color:var(--text)}
.foot .meta{font-family:var(--mono);font-size:.7rem;color:var(--mut2);letter-spacing:.04em;margin-top:1rem;line-height:1.6}
.foot .adj{margin-top:.85rem;padding-top:.85rem;border-top:1px dashed var(--bd);font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut2)}
.foot .adj b{color:var(--text);font-weight:600}

/* ── Form controls ───────────────────────── */
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut2)}
.field input,.field textarea,.field select{
  font-family:var(--sans);font-size:.95rem;color:var(--text);background:#fff;
  border:1px solid var(--bd);border-radius:var(--r-md);padding:.8rem .95rem;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);width:100%;
  font-weight:300;line-height:1.5;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}
.field textarea{resize:vertical;min-height:96px}
.field.err input,.field.err textarea,.field.err select{border-color:var(--red)}
.field .hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:var(--mut2)}
.field .err-msg{font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:var(--red);display:none}
.field.err .err-msg{display:block}

/* checkbox / radio */
.opt{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;border:1px solid var(--bd);border-radius:var(--r-md);cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease);font-size:.9rem;color:var(--text)}
.opt:hover{border-color:var(--mut2)}
.opt input{appearance:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--bd);position:relative;flex-shrink:0;cursor:pointer}
.opt input[type=checkbox]{border-radius:4px}
.opt input:checked{border-color:var(--gold);background:var(--gold)}
.opt input:checked::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--text)}
.opt input[type=checkbox]:checked::after{inset:0;border-radius:4px;background:var(--gold);background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='none' stroke='%231e3a5f' stroke-width='2.5' d='M3 8.5l3.5 3.5 6.5-7'/%3e%3c/svg%3e");background-size:14px;background-repeat:no-repeat;background-position:center}
.opt.sel{border-color:var(--gold);background:var(--gold-dim)}

/* ── Anim utilities ──────────────────────── */
.fade-up{opacity:0;transform:translateY(8px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.fade-up.in{opacity:1;transform:translateY(0)}
.stagger > *{opacity:0;transform:translateY(8px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.stagger.in > *{opacity:1;transform:translateY(0)}
.stagger.in > *:nth-child(1){transition-delay:.04s}
.stagger.in > *:nth-child(2){transition-delay:.10s}
.stagger.in > *:nth-child(3){transition-delay:.16s}
.stagger.in > *:nth-child(4){transition-delay:.22s}
.stagger.in > *:nth-child(5){transition-delay:.28s}
.stagger.in > *:nth-child(6){transition-delay:.34s}

@media (prefers-reduced-motion:reduce){
  .fade-up,.stagger > *{opacity:1!important;transform:none!important;transition:none!important}
}

/* ── Case tile (reused on home + finance + referral) ── */
.case-tile{background:#fff;border:1px solid var(--bd);border-radius:var(--r-lg);padding:2rem;display:grid;grid-template-columns:76px 1fr;gap:1.65rem;align-items:start;text-align:left;transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.case-tile:hover{background:var(--surf-h);border-color:rgba(255,166,107,.35);transform:translateY(-2px)}
@media (max-width:600px){.case-tile{grid-template-columns:1fr}}
.case-tile .seal{width:64px;height:64px;border-radius:18px;background:var(--dark);color:var(--gold);font-family:var(--mono);display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;flex-direction:column;font-weight:600}
.case-tile .seal b{font-family:var(--disp);font-size:1.55rem;color:#fff;font-weight:800;letter-spacing:-.035em;line-height:1}
.case-tile .seal span{display:none}
.case-tile h4{font-family:var(--disp);font-weight:700;font-size:clamp(1.28rem,2vw,1.62rem);color:var(--text);line-height:1.18;margin-bottom:.75rem;letter-spacing:-.025em}
.case-tile .meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.case-tile .meta span{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.28rem .6rem;border-radius:4px;background:var(--gold-dim);color:#d97e46}
.case-tile p{font-size:.95rem;color:var(--mut);line-height:1.7}
.case-tile .outcomes{margin-top:1.25rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;border-top:1px solid var(--bd);padding-top:1.15rem}
@media (max-width:560px){.case-tile .outcomes{grid-template-columns:1fr}}
.case-tile .outcomes .o b{display:block;font-family:var(--disp);font-weight:800;font-size:1.75rem;color:var(--gold);letter-spacing:-.03em;line-height:1}
.case-tile .outcomes .o span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);display:block;margin-top:.45rem;line-height:1.35}

/* ── Layered cards ───────────────────────── */
.layer-card{padding:1.5rem;background:#fff;border:1px solid var(--bd);border-radius:var(--r-lg);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.layer-card:hover{border-color:var(--mut2);transform:translateY(-2px)}
.layer-card .num{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.1em;color:var(--mut2)}
.layer-card h4{font-family:var(--disp);font-weight:600;font-size:1.25rem;margin:.4rem 0 .55rem;color:var(--text)}
.layer-card p{font-size:.86rem;color:var(--mut);line-height:1.6}

/* ── Audience tag ────────────────────────── */
.audience-tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:.4rem .8rem;border:1px solid var(--bd);border-radius:100px;background:#fff}
.audience-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ── Pull quote ──────────────────────────── */
.pull{padding:4rem 2rem;text-align:center;background:var(--bg)}
.pull blockquote{font-family:var(--disp);font-weight:600;font-size:clamp(1.3rem,2.5vw,2rem);max-width:30ch;margin:0 auto;line-height:1.3;color:var(--text);letter-spacing:-.015em}
.pull blockquote em{color:var(--gold);font-style:normal;font-weight:700}
.pull cite{display:block;margin-top:1rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-style:normal}

/* ── Misc ────────────────────────────────── */
.divider{height:1px;background:var(--bd);margin:3rem 0}

/* Print */
@media print{
  .nav,.foot,.no-print,.tweaks-panel{display:none!important}
  body{background:#fff}
  .container{max-width:none;padding:0 .6in}
  section{padding:0;border:none}
  .case-tile,.card,.layer-card{break-inside:avoid;page-break-inside:avoid}
}