@import url('../fonts/fonts.css');

/* ==========================================================================
   Spates Financial
   Derived entirely from the wordmark: monochrome, light-weight geometric
   capitals, wide tracking, and a hairline vertical rule as the only device.

   Constraints that follow from the logo:
   - No colour. Anywhere. The mark has none, so neither does the site.
   - No bold display type. The mark is light; headings are 300/400, never 700.
   - Wide letter-spacing on capitals, matching the mark's tracking.
   - Hairline rules (1px) instead of borders, fills, or shadows.
   - Square corners. The mark has no curves that aren't letterforms.
   ========================================================================== */

:root {
  /* Sampled from the wordmark */
  --ink: #231f20;
  --ink-80: #4a4644;
  --ink-60: #5c5855;
  /* --ink-40 is the smallest text on the site (10-12px uppercase labels),
     so it must clear WCAG AA 4.5:1 on both grounds. It also draws the
     hairlines, which simply read a touch stronger as a result. */
  --ink-40: #6e6a67;
  --ink-20: #c9c5c1;

  /* Colour returns as a deep brand blue. The wordmark's black stays the
     type colour, so the mark never competes with the palette. */
  --brand: #01528a;
  --brand-dark: #013a61;
  --brand-deep: #012540;
  --brand-tint: #eaf1f7;
  --brand-light: #4d92c4;

  --paper: #ffffff;
  /* Neutrals carry a faint warm bias so they read as chosen, not defaulted */
  --paper-2: #f4f3f1;
  --paper-3: #e9e7e4;
  --rule: #dcdad6;
  --rule-strong: #b9b5b0;

  --font-display: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Near-natural colour; a touch of restraint keeps a row of thumbnails
     from turning into competing blocks of safety yellow. */
  --photo: saturate(.92) contrast(1.03);

  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-h4: clamp(1.0625rem, .3vw + 1rem, 1.25rem);
  --fs-h3: clamp(1.375rem, .9vw + 1.15rem, 1.875rem);
  --fs-h2: clamp(1.875rem, 1.9vw + 1.4rem, 2.875rem);
  --fs-h1: clamp(2.25rem, 3.2vw + 1.5rem, 4.25rem);

  /* Tracking scale — the mark's most distinctive property */
  --track-display: .06em;
  --track-label: .22em;
  --track-nav: .13em;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --sp-9:5.5rem; --sp-10:7rem;

  --section-y: clamp(4rem, 7vw, 8rem);
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --header-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Reset ------------------------------------------------------------------- */

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 1rem); }

body {
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-md);
  line-height:1.65;
  color:var(--ink-80);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5 {
  margin:0 0 .5em;
  font-family:var(--font-display);
  font-weight:500;            /* 300 read as too thin at display sizes */
  line-height:1.12;
  letter-spacing:var(--track-display);
  color:var(--ink);
  text-wrap:balance;
}
h1 { font-size:var(--fs-h1); }
h2 { font-size:var(--fs-h2); }
h3 { font-size:var(--fs-h3); font-weight:500; }
h4 { font-size:var(--fs-h4); font-weight:600; letter-spacing:.02em; }

p { margin:0 0 1.15em; max-width:68ch; }
p:last-child { margin-bottom:0; }

a { color:var(--brand); text-decoration-color:rgba(1,82,138,.35); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover { color:var(--brand-dark); text-decoration-color:var(--brand-dark); }

img,svg,video { max-width:100%; display:block; }
ul,ol { margin:0 0 1.15em; padding-left:1.1rem; }
li { margin-bottom:.4em; }
strong { font-weight:600; color:var(--ink); }
hr { border:0; border-top:1px solid var(--rule); margin:var(--sp-7) 0; }

:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
::selection { background:var(--brand); color:var(--paper); }

.skip-link {
  position:absolute; left:1rem; top:-100px; z-index:200;
  padding:.7rem 1.2rem; background:var(--ink); color:var(--paper);
  font-size:var(--fs-sm); letter-spacing:var(--track-nav); text-transform:uppercase; text-decoration:none;
}
.skip-link:focus { top:.75rem; }

/* Layout ------------------------------------------------------------------ */

.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--narrow { max-width:760px; }

.section { padding-block:var(--section-y); }
.section--tight { padding-block:calc(var(--section-y) * .55); }
.section--gray { background:var(--paper-2); }
.section--ink { background:var(--brand-deep); color:#bcd3e4; }
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4 { color:var(--paper); }
.section--ink p { color:rgba(255,255,255,.72); }
.section--rule { border-top:1px solid var(--rule); }

.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:center; }
/* Grid items default to min-width:auto, so a wide child (the stats strip)
   can force the column past the viewport. Let columns actually shrink. */
.split > * { min-width:0; }
.split--wide-l { grid-template-columns:1.15fr .85fr; }
.split--wide-r { grid-template-columns:.85fr 1.15fr; }
.split--top { align-items:start; }

.stack > * + * { margin-top:var(--sp-4); }
.stack--lg > * + * { margin-top:var(--sp-6); }
.cluster { display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; }

/* Type helpers ------------------------------------------------------------ */

/* The eyebrow echoes the mark directly: light capitals, wide tracking, and
   the vertical hairline that separates SPATES from Fi. */
.eyebrow {
  display:flex; align-items:center; gap:.85em;
  margin:0 0 var(--sp-5);
  font-family:var(--font-display);
  font-size:var(--fs-xs); font-weight:500;
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--brand);
}
.eyebrow::before { content:""; width:1px; height:1.1em; background:var(--brand); flex:none; }
.section--ink .eyebrow { color:#9ecbe8; }
.section--ink .eyebrow::before { background:rgba(255,255,255,.45); }
.hero .eyebrow { color:#9ecbe8; }
.hero .eyebrow::before { background:rgba(255,255,255,.5); }

.section-head { max-width:56ch; margin-bottom:var(--sp-8); }
.section-head--center { margin-inline:auto; text-align:center; }
.section-head--center .eyebrow { justify-content:center; }
.section-head p { font-size:var(--fs-lg); color:var(--ink-60); }
.section--ink .section-head p { color:rgba(255,255,255,.7); }

.lead { font-size:var(--fs-lg); color:var(--ink-60); }
.muted { color:var(--ink-60); }
.small { font-size:var(--fs-sm); }
.center { text-align:center; }
.fineprint { font-size:var(--fs-xs); line-height:1.6; color:var(--ink-40); max-width:86ch; }

/* Buttons — solid ink or hairline outline. No fills, no colour. ----------- */

.btn {
  --bg:var(--brand); --fg:var(--paper); --bd:var(--brand);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1.05em 2em; border:1px solid var(--bd); border-radius:0;
  background:var(--bg); color:var(--fg);
  font-family:var(--font-display); font-size:var(--fs-sm); font-weight:600;
  letter-spacing:var(--track-label); text-transform:uppercase; line-height:1;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { --bg:var(--brand-dark); --bd:var(--brand-dark); color:var(--paper); }
.btn--outline { --bg:transparent; --fg:var(--brand); --bd:var(--brand); }
.btn--outline:hover { --bg:var(--brand); --fg:var(--paper); --bd:var(--brand); color:var(--paper); }
.btn--light { --bg:transparent; --fg:var(--paper); --bd:rgba(255,255,255,.45); }
.btn--light:hover { --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); color:var(--ink); }
.btn--solid-light { --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
.btn--solid-light:hover { --bg:transparent; --fg:var(--paper); --bd:var(--paper); color:var(--paper); }
.btn--lg { padding:1.2em 2.4em; font-size:var(--fs-base); }
.btn--block { width:100%; }

.arrow-link {
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-display); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--brand); text-decoration:none;
  padding-bottom:.35em; border-bottom:1px solid var(--rule-strong);
  transition:border-color .2s var(--ease);
}
.arrow-link:hover { border-bottom-color:var(--ink); }
.arrow-link::after { content:"\2192"; transition:transform .2s var(--ease); }
.arrow-link:hover::after { transform:translateX(4px); }

/* Header ------------------------------------------------------------------ */

.topbar { border-bottom:1px solid var(--rule); font-size:var(--fs-xs); color:var(--ink-60); }
.topbar .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:38px; }
.topbar ul { display:flex; gap:1.75rem; margin:0; padding:0; list-style:none; }
.topbar li { margin:0; letter-spacing:.06em; }
.topbar a { color:var(--ink-80); text-decoration:none; }
.topbar a:hover { color:var(--ink); }

.site-header { position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:1px solid var(--rule); }
.site-header .container { display:flex; align-items:center; gap:2rem; min-height:var(--header-h); }

/* Brand lockup. If src/img/logo.svg exists the generator uses it; otherwise
   this type-set fallback reproduces the mark as closely as the webfont allows. */
.brand { display:flex; align-items:center; text-decoration:none; flex:none; }
.brand img { height:26px; width:auto; }
.brand__type {
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-display); font-weight:400;
  font-size:1.28rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink); line-height:1; white-space:nowrap;
}
.brand__type i { display:block; width:1px; height:1.35em; background:var(--ink-40); font-style:normal; }
.brand__type em { font-style:normal; font-weight:300; letter-spacing:.13em;
  text-transform:none; }   /* the mark is 'Fi', not 'FI' */

.nav { margin-left:auto; }
.nav ul { display:flex; align-items:center; gap:2rem; margin:0; padding:0; list-style:none; }
.nav li { margin:0; }
.nav a {
  display:block; padding:.4rem 0;
  font-family:var(--font-display); font-size:var(--fs-xs); font-weight:400;
  letter-spacing:var(--track-nav); text-transform:uppercase;
  color:var(--ink-80); text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent;
}
.nav a:hover { color:var(--ink); border-bottom-color:var(--ink-40); }
.nav a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--ink); }

.header-actions { display:flex; align-items:center; gap:1.75rem; flex:none; }
.header-tel {
  font-family:var(--font-display); font-size:1rem; font-weight:400; letter-spacing:.08em;
  color:var(--ink); text-decoration:none; line-height:1.2; white-space:nowrap;
}
.header-tel span {
  display:block; font-size:.625rem; font-weight:400; letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-40); margin-bottom:.2rem;
}
.header-tel:hover { color:var(--ink-60); }
.nav-drawer-actions { display:none; }

.nav-toggle {
  display:none; width:40px; height:40px; margin-left:auto; padding:0;
  border:1px solid var(--rule); background:none; color:var(--ink); cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle svg { width:18px; height:18px; }
.nav-toggle .x { display:none; }
.nav-toggle[aria-expanded="true"] .x { display:block; }
.nav-toggle[aria-expanded="true"] .bars { display:none; }

/* Hero -------------------------------------------------------------------- */

.hero { position:relative; background:var(--brand-deep); color:var(--paper); overflow:hidden; }
.hero__media { position:absolute; inset:0; z-index:0; }
.hero__media img { width:100%; height:100%; object-fit:cover; filter:var(--photo) grayscale(.55); }
.hero__media::after { content:""; position:absolute; inset:0; background:rgba(24,21,21,.62); }
.hero__inner { position:relative; z-index:1; padding-block:clamp(5rem,11vw,10rem); }
.hero h1 { color:var(--paper); margin-bottom:var(--sp-6); max-width:17ch; font-weight:500; }
.hero h1 em {
  font-style:normal;
  border-bottom:1px solid rgba(255,255,255,.45);
  padding-bottom:.04em;
}
.hero p { font-size:clamp(1.0625rem,.6vw + .95rem,1.25rem); color:rgba(255,255,255,.8); max-width:52ch; margin-bottom:var(--sp-7); }
.hero__actions { display:flex; flex-wrap:wrap; gap:var(--sp-4); }

.hero__facts {
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.22);
}
.hero__facts div { padding:1.5rem 1.5rem 1.75rem; border-right:1px solid rgba(255,255,255,.22); }
.hero__facts div:last-child { border-right:0; }
.hero__facts b {
  display:block; font-family:var(--font-display); font-size:1.9rem;
  font-weight:500; letter-spacing:.03em; line-height:1; color:var(--paper);
}
.hero__facts span {
  display:block; margin-top:.6rem; font-size:.6875rem; font-weight:400;
  letter-spacing:var(--track-label); text-transform:uppercase; color:rgba(255,255,255,.55);
}

/* Interior page header */
.page-head { position:relative; background:var(--brand-deep); color:var(--paper); overflow:hidden; }
.page-head .hero__media::after { background:rgba(24,21,21,.68); }
.page-head__inner { position:relative; z-index:1; padding-block:clamp(3.5rem,6.5vw,6rem); }
.page-head h1 { color:var(--paper); margin-bottom:var(--sp-4); }
.page-head p { color:rgba(255,255,255,.78); font-size:var(--fs-lg); max-width:56ch; }

.crumbs {
  display:flex; flex-wrap:wrap; gap:.6em; margin:0 0 var(--sp-6); padding:0; list-style:none;
  font-family:var(--font-display); font-size:var(--fs-xs); letter-spacing:var(--track-label);
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.crumbs li { margin:0; display:flex; gap:.6em; align-items:center; }
.crumbs li + li::before { content:"/"; opacity:.5; }
.crumbs a { color:rgba(255,255,255,.72); text-decoration:none; }
.crumbs a:hover { color:var(--paper); }

/* Cards — hairline rules, no fills ---------------------------------------- */

.cards { display:grid; border-top:1px solid var(--rule); }
.cards--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cards--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cards--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.cards > * {
  padding:var(--sp-6) var(--sp-5) var(--sp-6) 0;
  border-bottom:1px solid var(--rule); border-right:1px solid var(--rule);
}
.cards > *:last-child { border-right:0; }
.cards--4 > *:nth-child(4n) { border-right:0; }
.cards--3 > *:nth-child(3n) { border-right:0; }
.cards--2 > *:nth-child(2n) { border-right:0; }
.cards > * + * { padding-left:var(--sp-5); }

.card { display:flex; flex-direction:column; }
.card h3 { font-size:var(--fs-h4); color:var(--ink); font-weight:500; }
.card p { color:var(--ink-60); font-size:var(--fs-base); }
.card__foot { margin-top:auto; padding-top:var(--sp-5); }
.card__num {
  display:block; font-family:var(--font-display); font-size:var(--fs-xs);
  font-weight:600; letter-spacing:var(--track-label); color:var(--brand); margin-bottom:var(--sp-4);
}

/* Photo tile */
.tile { display:block; text-decoration:none; color:inherit; }
.tile__img { aspect-ratio:4/3; overflow:hidden; background:var(--paper-3); }
.tile__img img { width:100%; height:100%; object-fit:cover; filter:var(--photo); transition:transform .5s var(--ease), filter .4s var(--ease); }
.tile:hover .tile__img img { transform:scale(1.03); filter:saturate(.5) contrast(1.06); }
.tile__body { padding-top:var(--sp-4); border-top:2px solid var(--brand); margin-top:var(--sp-4); }
.tile h3 { font-size:var(--fs-h4); font-weight:500; margin-bottom:.35rem; color:var(--ink);
  min-height:2.5em; }   /* aligns the category labels across a row */
.tile p {
  font-family:var(--font-display); font-size:var(--fs-xs); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-40); margin:0;
}
.tile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--sp-6) var(--sp-5); }

.linklist { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); border-top:1px solid var(--rule); }
.linklist a {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:1rem .25rem; border-bottom:1px solid var(--rule); text-decoration:none;
  font-size:var(--fs-base); color:var(--ink-80);
}
.linklist a::after { content:"\2192"; color:var(--ink-20); }
.linklist a:hover { color:var(--ink); }
.linklist a:hover::after { color:var(--ink); }

/* Checklist — hairline tick, no filled shapes */
.check { list-style:none; margin:0; padding:0; }
.check li { position:relative; padding-left:1.75rem; margin-bottom:.7em; }
.check li::before {
  content:""; position:absolute; left:0; top:.6em; width:.7rem; height:.35rem;
  border-left:1.5px solid var(--brand); border-bottom:1.5px solid var(--brand);
  transform:rotate(-45deg);
}
.section--ink .check li::before { border-color:rgba(255,255,255,.75); }

/* Stats — rules only */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); border-top:1px solid var(--rule); }
.stat { padding:var(--sp-6) var(--sp-4) var(--sp-6) 0; border-bottom:1px solid var(--rule); border-right:1px solid var(--rule); }
.stat:last-child { border-right:0; }
.stat b {
  display:block; font-family:var(--font-display); font-size:clamp(1.5rem,1.8vw,2.125rem);
  font-weight:500; letter-spacing:.03em; line-height:1.1; color:var(--brand);
}
.stat span {
  display:block; margin-top:.5rem; font-size:.6875rem; font-weight:400;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-40); line-height:1.4;
}
.section--ink .stats { border-top-color:rgba(255,255,255,.22); }
.section--ink .stat { border-bottom-color:rgba(255,255,255,.22); border-right-color:rgba(255,255,255,.22); }
.section--ink .stat b { color:var(--paper); }
.section--ink .stat span { color:rgba(255,255,255,.55); }

/* Steps */
.steps { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule); }
.step { padding:var(--sp-6) var(--sp-5) var(--sp-6) 0; border-right:1px solid var(--rule); }
.step:last-child { border-right:0; }
.step + .step { padding-left:var(--sp-5); }
.step b {
  display:block; font-family:var(--font-display); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:var(--track-label); color:var(--brand); margin-bottom:var(--sp-4);
}
.step h3 { font-size:var(--fs-h4); font-weight:500; color:var(--ink); }
.step p { font-size:var(--fs-base); color:var(--ink-60); margin:0; }
.section--ink .steps { border-top-color:rgba(255,255,255,.22); }
.section--ink .step { border-right-color:rgba(255,255,255,.22); }
.section--ink .step b { color:rgba(255,255,255,.5); }
.section--ink .step h3 { color:var(--paper); }
.section--ink .step p { color:rgba(255,255,255,.7); }

/* Table */
.table-wrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:var(--fs-base); min-width:580px; }
table.data caption {
  padding:0 0 var(--sp-4); text-align:left; font-size:var(--fs-xs);
  font-family:var(--font-display); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--ink-40);
}
table.data th,table.data td { padding:1rem 1.25rem 1rem 0; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top; }
table.data thead th {
  font-family:var(--font-display); font-size:var(--fs-xs); font-weight:400;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-40);
  border-bottom:1px solid var(--rule-strong); white-space:nowrap;
}
table.data tbody th { font-weight:600; color:var(--ink); }
table.data td { color:var(--ink-60); }

/* Callout — a hairline rule on one edge, nothing more */
.callout { padding:var(--sp-5) 0 var(--sp-5) var(--sp-5); border-left:1px solid var(--ink-40); }
.callout--accent { border-left-color:var(--brand); background:var(--brand-tint); padding-right:var(--sp-5); }
.callout h4 { margin-bottom:.4rem; color:var(--ink); }
.callout p { font-size:var(--fs-base); color:var(--ink-60); }
.section--ink .callout { border-left-color:rgba(255,255,255,.45); }
.section--ink .callout h4 { color:var(--paper); }

/* Media */
.media { position:relative; overflow:hidden; background:var(--paper-3); aspect-ratio:4/3; }
.media img { width:100%; height:100%; object-fit:cover; filter:var(--photo); }
.media--wide { aspect-ratio:16/9; }
.media--tall { aspect-ratio:3/4; }
.media__tag {
  position:absolute; left:0; bottom:0; padding:.6rem 1rem;
  background:var(--brand); color:var(--paper);
  font-family:var(--font-display); font-size:var(--fs-xs);
  letter-spacing:var(--track-label); text-transform:uppercase;
}

/* FAQ */
.faq { border-top:1px solid var(--rule); }
.faq__item { border-bottom:1px solid var(--rule); }
.faq__q {
  width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0; border:0; background:none; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-size:var(--fs-h4); font-weight:400;
  letter-spacing:.02em; color:var(--ink); line-height:1.3;
}
.faq__q:hover { color:var(--ink-60); }
.faq__q .sign { flex:none; width:.75rem; height:.75rem; position:relative; align-self:center; }
.faq__q .sign::before,.faq__q .sign::after { content:""; position:absolute; background:var(--ink-60); transition:transform .25s var(--ease); }
.faq__q .sign::before { left:0; top:50%; width:100%; height:1px; }
.faq__q .sign::after { top:0; left:50%; height:100%; width:1px; }
.faq__q[aria-expanded="true"] .sign::after { transform:scaleY(0); }
/* Open by default; site.js adds .faq--js to collapse, so a JS-less visitor
   and any crawler still get the full answer text. */
.faq--js .faq__a { max-height:0; overflow:hidden; visibility:hidden; transition:max-height .3s var(--ease), visibility 0s linear .3s; }
.faq--js .faq__item.open .faq__a { max-height:34rem; visibility:visible; transition:max-height .3s var(--ease), visibility 0s; }
.faq__a p { padding-bottom:1.5rem; color:var(--ink-60); font-size:var(--fs-base); max-width:64ch; }

/* CTA */
.cta { background:var(--brand-deep); color:var(--paper); padding-block:clamp(3.5rem,6vw,5.5rem); }
.cta .container { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-7); }
.cta h2 { color:var(--paper); margin-bottom:.5rem; }
.cta p { color:rgba(255,255,255,.72); margin:0; }

/* Forms ------------------------------------------------------------------- */

.form { display:grid; gap:var(--sp-5); }
.form > * { min-width:0; }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5); }
.field { display:flex; flex-direction:column; gap:.5rem; }
.field label {
  font-family:var(--font-display); font-size:var(--fs-xs); font-weight:400;
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-60);
}
.field .req { color:var(--ink); }
.field .hint { font-size:var(--fs-xs); color:var(--ink-40); }

/* Underline-only inputs, echoing the mark's hairline rule */
.input,.select,.textarea {
  width:100%; padding:.6rem 0; border:0; border-bottom:1px solid var(--rule-strong);
  border-radius:0; background:none; font-family:inherit; font-size:var(--fs-md); color:var(--ink);
  transition:border-color .2s var(--ease);
}
.input::placeholder,.textarea::placeholder { color:var(--ink-20); }
.input:focus,.select:focus,.textarea:focus { outline:none; border-bottom-color:var(--brand); }
.textarea { min-height:110px; resize:vertical; }
.select {
  appearance:none; padding-right:1.8rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23726e6b' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .25rem center; background-size:16px;
}
.input-group { display:flex; align-items:baseline; gap:.5rem; border-bottom:1px solid var(--rule-strong); }
.input-group:focus-within { border-bottom-color:var(--ink); }
.input-group__addon { color:var(--ink-40); font-size:var(--fs-md); }
.input-group .input { border-bottom:0; }

.checkbox { display:flex; gap:.75rem; align-items:flex-start; font-size:var(--fs-sm); color:var(--ink-60); line-height:1.5; }
.checkbox input { width:16px; height:16px; margin:.2rem 0 0; accent-color:var(--ink); flex:none; }

.form-note { display:flex; gap:.5rem; font-size:var(--fs-xs); color:var(--ink-40); line-height:1.55; }
.form-status { padding:var(--sp-4); border:1px solid var(--ink); font-size:var(--fs-sm); color:var(--ink); }
.form-status[hidden] { display:none; }

.estimate { display:flex; align-items:baseline; gap:.6rem; padding:var(--sp-5) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.estimate b { font-family:var(--font-display); font-size:2.25rem; font-weight:500; letter-spacing:.02em; line-height:1; color:var(--ink); }
.estimate span { font-size:var(--fs-xs); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-40); }

.quote-box { border:1px solid var(--rule); padding:clamp(1.75rem,3vw,2.5rem); }
.quote-box h2 { font-size:var(--fs-h3); margin-bottom:.3rem; color:var(--ink); }

/* Footer ------------------------------------------------------------------ */

.site-footer { background:var(--paper); color:var(--ink-60); font-size:var(--fs-sm); border-top:1px solid var(--rule); }
.footer-main { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:var(--sp-7); padding-block:var(--sp-8) var(--sp-7); }
.site-footer h4 {
  margin-bottom:var(--sp-5); font-family:var(--font-display); font-size:var(--fs-xs);
  font-weight:400; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-40);
}
.site-footer ul { list-style:none; margin:0; padding:0; }
.site-footer li { margin-bottom:.6em; }
.site-footer a { color:var(--ink-80); text-decoration:none; }
.site-footer a:hover { color:var(--ink); }
.site-footer p { color:var(--ink-60); }
.footer-bottom {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-block:var(--sp-5); border-top:1px solid var(--rule); font-size:var(--fs-xs); color:var(--ink-40);
}
.footer-legal { display:flex; flex-wrap:wrap; gap:1.5rem; margin:0; padding:0; list-style:none; }
.footer-legal li { margin:0; }
.footer-disclaimer { padding-block:var(--sp-5); border-top:1px solid var(--rule); font-size:var(--fs-xs); line-height:1.7; color:var(--ink-40); }

/* Prose */
.prose { max-width:68ch; }
.prose h2 { margin-top:2em; font-size:var(--fs-h3); }
.prose h3 { margin-top:1.6em; font-size:var(--fs-h4); }
.prose blockquote { margin:1.75em 0; padding-left:1.5rem; border-left:1px solid var(--ink-40); font-size:var(--fs-lg); color:var(--ink-80); }
.prose blockquote p { max-width:none; }

/* Utilities */
.vh { position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)}

/* Responsive -------------------------------------------------------------- */

@media (max-width:1080px){
  .footer-main{grid-template-columns:1fr 1fr}
  .hero__facts{grid-template-columns:repeat(2,1fr)}
  .hero__facts div:nth-child(2n){border-right:0}
  .hero__facts div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.22)}
  .cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards--4 > *:nth-child(2n){border-right:0}
}
@media (max-width:960px){
  :root{--header-h:70px}
  .nav-toggle{display:inline-flex}
  .nav{position:absolute;top:100%;left:0;right:0;display:none;background:var(--paper);
       border-bottom:1px solid var(--rule);padding:var(--sp-4) var(--gutter) var(--sp-6)}
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav a{padding:1rem 0;border-bottom:1px solid var(--rule);font-size:var(--fs-sm)}
  .nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--rule)}
  .nav-drawer-actions{display:flex;flex-direction:column;gap:.75rem;margin-top:var(--sp-5)}
  .header-actions{display:none}
  .split,.split--wide-l,.split--wide-r{grid-template-columns:1fr}
  .steps,.cards--3{grid-template-columns:1fr}
  .steps .step,.cards--3 > *{border-right:0;padding-left:0}
  .step + .step{padding-left:0;border-top:1px solid var(--rule)}
  .section--ink .step + .step{border-top-color:rgba(255,255,255,.22)}
  .topbar .hide-sm{display:none}
}
@media (max-width:640px){
  .cards--2,.cards--4{grid-template-columns:1fr}
  .cards > *{border-right:0;padding-left:0}
  .cards > * + *{padding-left:0}
  .form-row{grid-template-columns:1fr}
  .hero__facts{grid-template-columns:1fr}
  .hero__facts div{border-right:0;border-bottom:1px solid rgba(255,255,255,.22)}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;padding-right:0}
  .footer-main{grid-template-columns:1fr}
  .cta .container{flex-direction:column;align-items:flex-start}
  /* Uppercase + .22em tracking makes button labels wide; on narrow screens
     let them wrap rather than forcing the container past the viewport. */
  .btn{width:100%;white-space:normal;text-align:center;letter-spacing:.14em;padding-inline:1rem}
  .quote-box{padding:1.25rem}
  .topbar ul.hide-xs{display:none}
  .brand__type{font-size:1.05rem;letter-spacing:.15em}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
}

@media print{
  .topbar,.site-header,.cta,.site-footer,.nav-toggle{display:none!important}
  .hero,.page-head{background:none;color:#000}
  .hero__media{display:none}
  .hero h1,.page-head h1{color:#000}
  body{font-size:11pt;color:#000}
}