/* ============================================================================
   AVEXO CREDIT — concept theme, direction: Wealthfront circa 2014-15
   (web.archive.org/web/20150101084136/https://www.wealthfront.com/)

   What we borrowed, concretely:
   - ONE type family, used at light weight (300) for nearly everything —
     Wealthfront ran the whole site on FS Albert Pro at weight 300. We use
     Hanken Grotesk (variable, weight 300-700) the same way.
   - A full-bleed dark photo hero with a large, light-weight ITALIC headline
     floating over it at reduced opacity — not a gradient, not a product
     screenshot, an actual photograph with a soft veil of type on top.
   - Buttons are a slightly-rounded rectangle (4px radius), never a pill,
     never a shadow. background/border colour does the work.
   - One accent colour (their turquoise #0cc / #00a6a6). We use a deep
     teal-emerald so it isn't a literal copy of their exact hue.
   - Restraint over ornament: whitespace and type-weight contrast carry the
     hierarchy, not borders/cards/shadows.
   ============================================================================ */

@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:300 700;
  src:url("fonts/hanken-grotesk-variable.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"Hanken Grotesk"; font-style:italic; font-weight:300;
  src:url("fonts/hanken-grotesk-italic-variable.woff2") format("woff2");
  font-display:swap;
}

:root{
  --paper:      #ffffff;
  --paper-tint: #f4f6f6;
  --paper-tint2:#eceff0;

  --ink:      #23252a;
  --ink-soft: #3c3e45;
  --muted:    #6b6f76;
  --faint:    #9aa0a6;

  --rule: #e2e5e7;

  --accent:      #0e8f86;
  --accent-dark: #0b6f68;
  --accent-tint: #e3f3f1;

  --dark: #12151a;
  --cream:#f4efe2;

  --font: "Hanken Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --measure: 62ch;
  --radius: 4px;

  --sp-1:.4rem; --sp-2:.8rem; --sp-3:1.2rem; --sp-4:1.8rem; --sp-5:2.6rem;
  --sp-6:3.8rem; --sp-7:5.6rem; --sp-8:8rem;
}

*{ box-sizing:border-box; }
html{ font-size:17px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink-soft);
  font-family:var(--font); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:var(--sp-3) 0; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 var(--sp-5); }

h1,h2,h3,h4{ font-family:var(--font); font-weight:300; line-height:1.15; margin:0; color:var(--ink); }
h1{ font-size:clamp(2.4rem,5vw,3.6rem); letter-spacing:-.01em; }
h2{ font-size:clamp(1.7rem,3.2vw,2.3rem); }
h3{ font-size:1.3rem; font-weight:600; }
h4{ font-size:1.1rem; font-weight:600; }
.eyebrow{
  font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-dark);
}

/* ------------------------------------------------------------------------ *
 * TOPBAR
 * ------------------------------------------------------------------------ */
.topbar{
  position:sticky; top:0; z-index:30; background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--rule);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ font-weight:700; font-size:1.15rem; color:var(--ink); }
.navlinks{ display:flex; align-items:center; gap:var(--sp-4); }
.navlinks a{ font-size:.92rem; font-weight:500; color:var(--muted); }
.navlinks a:hover{ color:var(--ink); }
.navtoggle{ display:none; }

/* ------------------------------------------------------------------------ *
 * BUTTONS — rectangle, 4px radius, never a pill, never a shadow
 * ------------------------------------------------------------------------ */
.btn{
  display:inline-block; font-family:var(--font); font-weight:600; font-size:.95rem;
  padding:.8em 1.6em; border-radius:var(--radius); border:1.5px solid transparent;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-ghost{ border-color:var(--rule); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-on-dark{ border-color:rgba(255,255,255,.55); color:#fff; background:transparent; }
.btn-on-dark:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* ------------------------------------------------------------------------ *
 * HERO — full-bleed photo, dark veil, light-weight italic headline
 * ------------------------------------------------------------------------ */
.hero{
  position:relative; min-height:78vh; display:flex; align-items:center;
  background:var(--dark);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 74% 100%, rgba(14,143,134,.10) 0%, rgba(12,15,20,0) 60%);
}
.hero-net{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.72;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.45) 40%, #000 72%); mask-image:linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.45) 40%, #000 72%); }
.hero .wrap{ pointer-events:none; }
.hero .wrap a{ pointer-events:auto; }
.hero .wrap{ position:relative; z-index:1; padding-top:var(--sp-6); padding-bottom:var(--sp-7); }
.hero .eyebrow{ color:var(--accent); }
.hero h1{
  color:var(--cream); font-style:italic; font-weight:300; opacity:.96;
  max-width:16ch; margin-top:var(--sp-3); line-height:1.12;
}
.hero .sub{
  color:rgba(244,239,226,.78); font-size:1.15rem; max-width:56ch; margin-top:var(--sp-4);
  font-weight:300; line-height:1.55;
}
.hero .sub strong{ color:var(--cream); font-weight:600; }
.hero-actions{ display:flex; gap:var(--sp-3); align-items:center; margin-top:var(--sp-5); flex-wrap:wrap; }
.hero-coverage{ color:rgba(244,239,226,.55); font-size:.85rem; margin-top:var(--sp-5); }

/* ------------------------------------------------------------------------ *
 * SECTIONS
 * ------------------------------------------------------------------------ */
.section{ padding:var(--sp-7) 0; }
.section-alt{ background:var(--paper-tint); }
.section-head{ max-width:640px; margin-bottom:var(--sp-5); }
.section-head p{ color:var(--muted); font-size:1.05rem; margin-top:var(--sp-2); }

/* ------------------------------------------------------------------------ *
 * FLAGSHIP REPORT — a quiet colour-block card, Wealthfront's "nugget" pattern
 * ------------------------------------------------------------------------ */
.flagship{
  background:var(--paper-tint); border-radius:var(--radius);
  padding:var(--sp-5); display:flex; justify-content:space-between; align-items:center;
  gap:var(--sp-5); flex-wrap:wrap;
}
.flagship .tag{ color:var(--accent-dark); font-weight:600; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; }
.flagship h3{ margin-top:var(--sp-2); font-weight:600; font-size:1.4rem; }
.flagship p{ color:var(--muted); margin:var(--sp-2) 0 0; max-width:52ch; }
.flagship .go{ flex-shrink:0; }

.pending{
  color:var(--faint); font-size:.9rem; margin-top:var(--sp-4); padding-top:var(--sp-3);
  border-top:1px solid var(--rule);
}

/* ------------------------------------------------------------------------ *
 * LIST ROWS — Leads / Articles
 * ------------------------------------------------------------------------ */
.rows{ border-top:1px solid var(--rule); margin-top:var(--sp-3); }
.row{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-4);
  padding:var(--sp-4) 0; border-bottom:1px solid var(--rule);
}
.row .row-title{ font-weight:600; font-size:1.05rem; color:var(--ink); }
.row:hover .row-title{ color:var(--accent-dark); }
.row .row-sub{ display:block; font-weight:400; font-size:.9rem; color:var(--muted); margin-top:.25em; }
.row .row-meta{ color:var(--faint); font-size:.85rem; white-space:nowrap; }
@media(max-width:640px){ .row{ flex-direction:column; align-items:flex-start; gap:.3rem; } }

/* ------------------------------------------------------------------------ *
 * FACTS — Macro pulse, kv strip
 * ------------------------------------------------------------------------ */
.facts{ display:flex; flex-wrap:wrap; gap:var(--sp-6); margin-top:var(--sp-3); }
.fact{ max-width:30ch; }
.fact .k{ font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:.4em; }
.fact p{ color:var(--muted); margin:0; }

/* ------------------------------------------------------------------------ *
 * SIGNATURE — About-lite
 * ------------------------------------------------------------------------ */
.signature{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-5); flex-wrap:wrap; }
.signature .name{ font-weight:700; font-size:1.2rem; color:var(--ink); }
.signature .line{ color:var(--muted); margin-top:var(--sp-2); max-width:56ch; }
.signature .links{ display:flex; gap:var(--sp-4); flex-shrink:0; }
.signature .links a{ font-weight:600; color:var(--accent-dark); border-bottom:1.5px solid transparent; }
.signature .links a:hover{ border-color:var(--accent-dark); }

/* ------------------------------------------------------------------------ *
 * SERVICES — colour-tinted grid, Wealthfront-style quiet blocks
 * ------------------------------------------------------------------------ */
.svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); margin-top:var(--sp-4); }
.svc{ background:var(--paper-tint); border-radius:var(--radius); padding:var(--sp-4); }
.svc:hover{ background:var(--paper-tint2); }
.svc .num{ color:var(--accent); font-weight:700; font-size:.85rem; }
.svc h4{ margin:var(--sp-2) 0 .4em; }
.svc p{ color:var(--muted); font-size:.92rem; margin:0; }
@media(max-width:720px){ .svc-grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------------ *
 * CLOSING CTA — dark band, mirrors the hero treatment quietly
 * ------------------------------------------------------------------------ */
.closing{ background:var(--dark); padding:var(--sp-7) 0; }
.closing .wrap{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-5); flex-wrap:wrap; }
.closing h2{ color:#fff; font-style:italic; max-width:18ch; }
.closing p{ color:rgba(255,255,255,.62); margin-top:var(--sp-2); max-width:40ch; }
.closing p a{ display:block; margin-top:var(--sp-2); color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ------------------------------------------------------------------------ *
 * FOOTER
 * ------------------------------------------------------------------------ */
.footer{ padding:var(--sp-6) 0 var(--sp-7); }
.footer .wrap{ display:flex; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap; }
.footer .col .lab{ font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:var(--sp-2); }
.footer .col a{ display:block; color:var(--muted); padding:.2em 0; }
.footer .col a:hover{ color:var(--ink); }
.footer .fine{ color:var(--faint); font-size:.85rem; max-width:36ch; line-height:1.6; }

.concept-flag{
  background:var(--ink); color:#fff; text-align:center; font-size:.78rem; font-weight:600;
  letter-spacing:.02em; padding:.5em var(--sp-4);
}

/* ------------------------------------------------------------------------ *
 * responsive
 * ------------------------------------------------------------------------ */
@media(max-width:720px){
  .hero{ min-height:auto; padding:var(--sp-6) 0; }
  .hero-net{ opacity:.35; -webkit-mask-image:none; mask-image:none; }
  .closing .wrap{ flex-direction:column; align-items:flex-start; }
  .navlinks{ display:none; }
  .navlinks.is-open{
    display:flex; flex-direction:column; position:absolute; top:64px; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--rule); padding:var(--sp-4) var(--sp-5); gap:var(--sp-3);
  }
  .navtoggle{
    display:inline-block; background:none; border:1px solid var(--rule); border-radius:var(--radius);
    padding:.4em .8em; font-family:var(--font); font-weight:600; font-size:.85rem; cursor:pointer;
  }
}