/* ============================================================
   Carpenter Strategy Co. — Website styles
   Self-contained: brand tokens + fonts + components.
   Built on the Carpenter Strategy Co. design system.
   ============================================================ */

/* ---------- FONT FACES ---------- */
@font-face {
  font-family: "Glacial Indifference";
  src: url("../fonts/GlacialIndifference-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Glacial Indifference";
  src: url("../fonts/GlacialIndifference-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Glacial Indifference";
  src: url("../fonts/GlacialIndifference-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Beauty Salon Script";
  src: url("../fonts/BeautySalonScript-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- TOKENS ---------- */
:root {
  --csc-navy:#123047; --csc-aubergine:#4a2e5c; --csc-ivory:#f7f4ef;
  --csc-turquoise:#1592b4; --csc-slate:#435967; --csc-aqua:#d5f6fa; --csc-lime:#c6e84f;
  --csc-white:#fff; --csc-ivory-200:#efeae1; --csc-ink-700:#1f2d38;
  --csc-slate-400:#6f828e; --csc-navy-800:#0c2233; --csc-navy-tint:#e6edf1;
  --csc-aubergine-tint:#ece6f0;

  --bg:var(--csc-ivory); --bg-elevated:var(--csc-white); --bg-inverse:var(--csc-navy);
  --bg-sunken:var(--csc-ivory-200);
  --fg1:var(--csc-navy); --fg2:var(--csc-slate); --fg3:var(--csc-slate-400);
  --fg-inverse:var(--csc-ivory); --fg-inverse-2:#a8bccb;
  --accent:var(--csc-turquoise); --accent-hover:#11789a; --accent-2:var(--csc-aubergine);
  --accent-energy:var(--csc-lime);
  --border:var(--csc-ivory-200); --border-strong:#d8d0c4; --border-on-dark:rgba(255,255,255,.14);
  --link:var(--csc-turquoise); --link-hover:var(--accent-hover); --focus-ring:rgba(21,146,180,.45);

  --font-display:"Glacial Indifference","Montserrat",system-ui,sans-serif;
  --font-body:"Montserrat",system-ui,-apple-system,sans-serif;
  --font-script:"Beauty Salon Script","Segoe Script",cursive;

  --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-xl:22px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(18,48,71,.06); --shadow-sm:0 2px 6px rgba(18,48,71,.07);
  --shadow-md:0 8px 24px rgba(18,48,71,.09); --shadow-lg:0 20px 48px rgba(18,48,71,.12);
  --ease-out:cubic-bezier(0.22,0.61,0.36,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --dur-fast:140ms; --dur-med:240ms; --dur-slow:420ms;
}

/* ---------- RESET / BASE ---------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg1); font-family:var(--font-body);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; }
a { color:var(--link); }
:focus-visible { outline:none; box-shadow:0 0 0 3px var(--focus-ring); border-radius:var(--radius-sm); }
.skip-link { position:absolute; left:-999px; top:0; background:var(--csc-navy); color:#fff;
  padding:12px 18px; z-index:200; border-radius:0 0 var(--radius-md) 0; font-family:var(--font-display);
  font-weight:700; font-size:14px; }
.skip-link:focus { left:0; }
.wrap { max-width:1180px; margin:0 auto; padding:0 32px; }
.section { padding:96px 0; }
.section--alt { background:#fff; border-block:1px solid var(--border); }
.section--navy { background:var(--csc-navy); color:var(--fg-inverse); position:relative; overflow:hidden; }
.section--tint { background:var(--csc-navy-tint); }

/* ---------- TYPE ATOMS ---------- */
.eyebrow { font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--csc-turquoise); margin:0; }
.eyebrow.on-dark { color:var(--csc-lime); }
.h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(40px,5.5vw,61px);
  line-height:1.05; letter-spacing:-.015em; color:var(--csc-navy); margin:0; text-wrap:balance; }
.h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(31px,4vw,44px);
  line-height:1.08; letter-spacing:-.01em; color:var(--csc-navy); margin:0; text-wrap:balance; }
.h3 { font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.4vw,28px);
  line-height:1.2; color:var(--csc-navy); margin:0; }
.lead { font-size:20px; line-height:1.65; color:var(--csc-slate); margin:0; text-wrap:pretty; }
.p { font-size:16px; line-height:1.65; color:var(--csc-slate); margin:0; text-wrap:pretty; }
.on-dark .h1, .on-dark .h2, .on-dark .h3 { color:#fff; }
.on-dark .lead, .on-dark .p { color:var(--fg-inverse-2); }
.script-accent { font-family:var(--font-script); font-weight:400; color:var(--csc-aubergine);
  font-size:1.15em; line-height:1; }

/* ---------- BUTTONS ---------- */
.btn { font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.015em;
  border-radius:999px; padding:14px 26px; border:1.5px solid transparent; white-space:nowrap;
  display:inline-flex; align-items:center; gap:9px; transition:all .16s var(--ease-out);
  text-decoration:none; }
.btn svg { width:18px; height:18px; flex:none; }
.btn-primary { background:var(--csc-turquoise); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-primary:active { transform:translateY(0) scale(.99); }
.btn-secondary { background:transparent; color:var(--csc-navy); border-color:var(--border-strong); }
.btn-secondary:hover { border-color:var(--csc-navy); }
.btn-on-dark { background:var(--csc-lime); color:var(--csc-navy); }
.btn-on-dark:hover { background:#d3ef6a; transform:translateY(-1px); }
.btn-ghost-dark { background:transparent; color:#fff; border-color:var(--border-on-dark); }
.btn-ghost-dark:hover { border-color:#fff; }
.btn-lg { padding:16px 32px; font-size:16px; }

/* ---------- NAV ---------- */
.nav { position:sticky; top:0; z-index:40; transition:background .2s,box-shadow .2s,border-color .2s;
  background:rgba(247,244,239,0); border-bottom:1px solid transparent; }
.nav--scrolled { background:rgba(247,244,239,.9); backdrop-filter:blur(10px);
  border-bottom-color:var(--border); box-shadow:var(--shadow-xs); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; height:78px; }
.nav__logo { display:inline-flex; align-items:center; }
.nav__logo img { height:38px; width:auto; }
.nav__links { display:flex; gap:30px; align-items:center; }
.nav__link { font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.02em;
  color:var(--csc-navy); text-decoration:none; opacity:.82; transition:opacity .14s,color .14s; }
.nav__link:hover { opacity:1; color:var(--csc-turquoise); }
.nav__link[aria-current="page"] { opacity:1; color:var(--csc-turquoise); }
.nav__actions { display:flex; align-items:center; gap:12px; }
.nav__cta { padding:11px 20px; font-size:14px; }
.nav__burger { display:none; background:none; border:none; color:var(--csc-navy); padding:6px; }
.nav__burger svg { width:26px; height:26px; }
.nav__mobile { display:none; }

/* ---------- PAGE HERO (interior pages) — navy brand band ---------- */
.phero { background:radial-gradient(120% 135% at 85% 0%, #1a3f5c 0%, var(--csc-navy) 54%);
  color:var(--fg-inverse); padding:88px 0 76px; position:relative; overflow:hidden; }
.phero--aubergine { background:radial-gradient(120% 135% at 85% 0%, #5e3d73 0%, var(--csc-aubergine) 56%); }
.phero__inner { position:relative; z-index:1; }
.phero .eyebrow { color:var(--csc-lime); margin-bottom:18px; }
.phero .h1 { color:#fff; }
.phero .lead { color:var(--fg-inverse-2); margin-top:22px; max-width:52em; }
.phero__cta { margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.phero .btn-primary { background:var(--csc-lime); color:var(--csc-navy); }
.phero .btn-primary:hover { background:#d3ef6a; box-shadow:none; }
.phero .btn-secondary { color:#fff; border-color:var(--border-on-dark); }
.phero .btn-secondary:hover { border-color:#fff; }
.phero__mark { position:absolute; right:max(4vw,20px); top:50%; transform:translateY(-50%);
  width:clamp(220px,26vw,360px); opacity:.06; pointer-events:none; z-index:0; }

/* ---------- HOME HERO ---------- */
.hero { padding:84px 0 92px; }
.hero__inner { position:relative; z-index:1; }
.hero__copy { max-width:920px; }
.hero .eyebrow { margin-bottom:18px; }
.hero__lead { margin-top:22px; max-width:44em; }
.hero__cta { display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero__promise { margin-top:38px; padding-top:28px; border-top:1px solid var(--border-strong);
  font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:.005em;
  color:var(--csc-navy); display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.hero__promise .hp-accent { color:var(--csc-aubergine); }
/* single contained brand watermark */
.hero__mark { position:absolute; right:max(3vw,18px); top:50%; transform:translateY(-50%);
  width:clamp(240px,30vw,400px); opacity:.06; pointer-events:none; z-index:0; }
body.hero-ivory .hero__mark { display:none; }
.hero__visual { position:relative; }
.hero__panel { position:relative; width:100%; aspect-ratio:4/5; max-width:480px; margin-left:auto;
  background:var(--csc-navy); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg); }
.hero__panel img { width:100%; height:100%; object-fit:cover; }
.hero__badge { position:absolute; left:-24px; bottom:36px; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:18px 22px; max-width:230px; }
.hero__badge .k { font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--csc-turquoise); margin:0 0 6px; }
.hero__badge .v { font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--csc-slate); margin:0; }

/* ---------- HERO: NAVY (brand-forward, BASE default) ----------
   Default look lives in plain selectors so it renders everywhere
   (incl. screenshot/clone renderers). Tweaks only override away. */
.hero { background:radial-gradient(125% 130% at 88% 6%, #1a3f5c 0%, var(--csc-navy) 52%);
  color:var(--fg-inverse); position:relative; overflow:hidden; }
.hero .eyebrow { color:var(--csc-lime); }
.hero .h1 { color:#fff; }
.hero .hero__lead { color:var(--fg-inverse-2); }
.hero .hero__promise { color:#fff; border-top-color:var(--border-on-dark); }
.hero .hero__promise .hp-accent { color:#fff; }
.hero .btn-primary { background:var(--csc-lime); color:var(--csc-navy); }
.hero .btn-primary:hover { background:#d3ef6a; box-shadow:none; }
.hero .btn-secondary { background:transparent; color:#fff; border-color:var(--border-on-dark); }
.hero .btn-secondary:hover { border-color:#fff; }
.hero__bg-mark { position:absolute; left:-180px; bottom:-180px; width:620px; opacity:.05;
  pointer-events:none; display:none !important; }

/* Ivory hero (tweak override) */
body.hero-ivory .hero { background:var(--bg); color:var(--fg1); }
body.hero-ivory .hero .eyebrow { color:var(--csc-turquoise); }
body.hero-ivory .hero .h1 { color:var(--csc-navy); }
body.hero-ivory .hero .hero__lead { color:var(--csc-slate); }
body.hero-ivory .hero .hero__promise { color:var(--csc-navy); border-top-color:var(--border-strong); }
body.hero-ivory .hero .hero__promise .hp-accent { color:var(--csc-aubergine); }
body.hero-ivory .hero .btn-primary { background:var(--csc-turquoise); color:#fff; }
body.hero-ivory .hero .btn-secondary { color:var(--csc-navy); border-color:var(--border-strong); }
body.hero-ivory .hero__bg-mark { display:none; }

/* ---------- CONVERGENCE PANEL (brand visual, BASE) ---------- */
.conv-panel { position:relative; width:100%; max-width:470px; margin-left:auto; aspect-ratio:1/1;
  border-radius:22px; background:var(--csc-navy-800); border:1px solid var(--border-on-dark);
  box-shadow:var(--shadow-lg); align-items:center; justify-content:center; display:flex; }
body.hero-ivory .conv-panel { background:#fff; border-color:var(--border); }
.conv-panel__mark { width:42%; height:auto; position:relative; z-index:2; }
.conv-panel__dot { position:absolute; top:50%; left:50%; width:14px; height:14px; border-radius:999px;
  background:var(--csc-lime); transform:translate(-50%,-50%); z-index:3; box-shadow:0 0 0 6px rgba(198,232,79,.18); }
.conv-label { position:absolute; font-family:var(--font-display); font-weight:700; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-inverse-2); z-index:2; }
body.hero-ivory .conv-label { color:var(--csc-slate); }
.conv-label--n { top:34px; left:50%; transform:translateX(-50%); }
.conv-label--s { bottom:34px; left:50%; transform:translateX(-50%); }
.conv-label--w { left:34px; top:50%; transform:translateY(-50%); }
.conv-label--e { right:34px; top:50%; transform:translateY(-50%); }
.conv-panel__ring { position:absolute; inset:18%; border-radius:999px;
  border:1px dashed var(--border-on-dark); z-index:1; }
body.hero-ivory .conv-panel__ring { border-color:var(--border-strong); }

/* hero visual switching — mark shown by default, photo on tweak */
.hero__photo-visual { display:none; }
.hero__photo-visual .hero__panel { aspect-ratio:1/1; max-width:470px; margin-left:auto; }
body.heroviz-photo .conv-panel { display:none; }
body.heroviz-photo .hero__photo-visual { display:block; }
body.heroviz-photo.photos-hidden .hero__photo-visual { display:none; }
body.heroviz-photo.photos-hidden .conv-panel { display:flex; }

/* ---------- DUOTONE PHOTO TREATMENT (BASE = duotone) ---------- */
.duo { position:relative; overflow:hidden; isolation:isolate; }
.duo img { display:block; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(1.04); }
.duo::after { content:""; position:absolute; inset:0; background:var(--csc-navy);
  mix-blend-mode:multiply; opacity:.8; pointer-events:none; z-index:1; }
.duo::before { content:""; position:absolute; inset:0; background:var(--csc-aqua);
  mix-blend-mode:screen; opacity:.14; pointer-events:none; z-index:2; }
/* Full-colour override */
body.photos-color .duo img { filter:none; }
body.photos-color .duo::after, body.photos-color .duo::before { display:none; }
/* Aubergine duotone variant (per-image) */
.duo.duo--aubergine::after { background:var(--csc-aubergine); }
/* Photos off */
body.photos-hidden .split__media, body.photos-hidden .duo.optional { display:none; }
body.photos-hidden .split { grid-template-columns:1fr; max-width:760px; }
body.photos-hidden .split--rev .split__media { display:none; }

/* ---------- AUBERGINE CALLOUT CARD ---------- */
.callout { background:var(--csc-aubergine); color:#fff; border-radius:var(--radius-xl);
  padding:40px; box-shadow:var(--shadow-md); align-self:stretch; display:flex; flex-direction:column;
  justify-content:center; }
.callout .eyebrow { color:var(--csc-lime); margin-bottom:16px; }
.callout__big { font-family:var(--font-display); font-weight:700; font-size:clamp(24px,2.6vw,30px);
  line-height:1.18; color:#fff; margin:0 0 20px; letter-spacing:-.01em; }
.callout__tags { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; }
.callout__tags span { font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--csc-aqua);
  border:1px solid var(--border-on-dark); border-radius:999px; padding:8px 16px; }
/* interactive callout tags — open an inline detail panel inside the box */
.callout__tags li { position:relative; }
.ctag { font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--csc-aqua); background:transparent;
  border:1px solid var(--border-on-dark); border-radius:999px; padding:8px 14px 8px 16px;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:border-color .15s, color .15s, background .15s; }
.ctag::after { content:""; width:5px; height:5px; border-radius:999px; background:var(--csc-lime);
  opacity:.55; transition:opacity .15s, transform .2s var(--ease-out); }
.ctag:hover { color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.07); }
.ctag:hover::after { opacity:1; }
.ctag.is-active { color:var(--csc-navy); background:var(--csc-lime); border-color:var(--csc-lime); }
.ctag.is-active::after { opacity:1; background:var(--csc-navy); transform:scale(1.15); }
.ctag:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(198,232,79,.4); }
/* description text stays in the DOM (content/SEO) but is shown via the panel */
.ctip { display:none; }
/* inline detail panel — expands within the callout, no floating bubble */
.callout__panel { display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .3s var(--ease-out); }
.callout__panel.is-open { grid-template-rows:1fr; }
.callout__panel-clip { overflow:hidden; min-height:0; }
.callout__panel-card { margin-top:18px; background:rgba(255,255,255,.06);
  border:1px solid var(--border-on-dark); border-radius:14px; padding:18px 20px; }
.callout__panel-title { font-family:var(--font-display); font-weight:700; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--csc-lime); margin:0 0 6px; }
.callout__panel-text { font-family:var(--font-body); font-weight:400; font-size:15px;
  line-height:1.6; color:rgba(255,255,255,.85); margin:0; }

/* ---------- TRIO (3-up comparison, middle emphasized) ---------- */
.trio { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.trio__item { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px 26px; box-shadow:var(--shadow-xs); }
.trio__item.is-focus { border-color:var(--csc-turquoise); border-top:3px solid var(--csc-turquoise);
  box-shadow:var(--shadow-md); }
.trio__k { font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg3); margin:0 0 12px; }
.trio__item.is-focus .trio__k { color:var(--csc-turquoise); }
.trio__t { font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--csc-navy);
  margin:0 0 10px; line-height:1.2; }
.trio__d { font-size:15px; line-height:1.6; color:var(--csc-slate); margin:0; }
@media (max-width:760px){ .trio { grid-template-columns:1fr; } }

/* ---------- BIG QUOTE / EMPHASIS BAND ---------- */
.emphasis { max-width:880px; }
.section--navy .emphasis, .section--navy .prose { max-width:none; }
.emphasis p { font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.8vw,30px);
  line-height:1.32; letter-spacing:-.01em; color:var(--csc-navy); margin:0; text-wrap:balance; }
.on-dark .emphasis p { color:#fff; }

/* ---------- SECTION HEAD ---------- */
.sec-head { max-width:760px; margin-bottom:52px; }
.sec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.sec-head .eyebrow { margin-bottom:14px; }
.sec-head .lead { margin-top:18px; }

/* ---------- PROSE (long-form sections) ---------- */
.prose { max-width:680px; }
.prose p { font-size:18px; line-height:1.7; color:var(--csc-slate); margin:0 0 20px; text-wrap:pretty; }
.prose p:last-child { margin-bottom:0; }
.prose strong { color:var(--csc-navy); font-weight:600; }
.on-dark .prose p { color:var(--fg-inverse-2); }
.on-dark .prose strong { color:#fff; }

/* ---------- CHECK LIST ---------- */
.checks { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.checks.two-col { grid-template-columns:1fr 1fr; gap:14px 36px; }
.checks li { display:flex; gap:14px; align-items:flex-start; font-size:16.5px; line-height:1.5;
  color:var(--csc-slate); }
.checks li svg { width:22px; height:22px; flex:none; color:var(--csc-turquoise); margin-top:1px; }
.on-dark .checks li { color:var(--fg-inverse); }
.on-dark .checks li svg { color:var(--csc-lime); }

/* ---------- FEATURE SPLIT (text + photo) ---------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split--rev .split__media { order:2; }
.split__media { border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md);
  aspect-ratio:4/3; background:var(--csc-navy-tint); }
.split__media img { width:100%; height:100%; object-fit:cover; }
.split__media.portrait { aspect-ratio:4/5; }

/* ---------- HOME SERVICE PREVIEW CARDS ---------- */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc { background:#fff; border:1px solid var(--border); border-top:3px solid var(--csc-turquoise);
  border-radius:14px; padding:30px 28px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out); text-decoration:none; }
.svc:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.svc:nth-child(2) { border-top-color:var(--csc-lime); }
.svc:nth-child(3) { border-top-color:var(--csc-aubergine); }
.svc__tier { font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--csc-turquoise); margin:0 0 10px; }
.svc:nth-child(2) .svc__tier { color:#7c9a14; }
.svc:nth-child(3) .svc__tier { color:var(--csc-aubergine); }
.svc__icon { width:52px; height:52px; border-radius:12px; background:var(--csc-aqua);
  display:flex; align-items:center; justify-content:center; color:var(--csc-navy); margin-bottom:20px; }
.svc:nth-child(2) .svc__icon { background:#eef7c9; }
.svc:nth-child(3) .svc__icon { background:var(--csc-aubergine-tint); color:var(--csc-aubergine); }
.svc__icon svg { width:27px; height:27px; stroke-width:1.75; }
.svc__title { font-family:var(--font-display); font-weight:700; font-size:22px; line-height:1.18;
  color:var(--csc-navy); margin:0 0 12px; }
.svc__body { flex:1; }
.svc__body .p { font-size:15.5px; }
.svc__meta { margin-top:20px; padding-top:18px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.svc__meta .lbl { font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--fg3);
  font-family:var(--font-display); font-weight:700; }
.svc__meta .fee { font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--csc-navy); }
.svc__more { margin-top:20px; font-family:var(--font-display); font-weight:700; font-size:14px;
  color:var(--csc-turquoise); text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.svc__more svg { width:16px; height:16px; transition:transform .14s; }
.svc:hover .svc__more svg { transform:translateX(3px); }

/* ---------- PROCESS STEPS ---------- */
.proc { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.proc__step { position:relative; padding-right:8px; }
.proc__n { font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.14em;
  color:var(--csc-turquoise); margin-bottom:16px; }
.proc__step:nth-child(2) .proc__n { color:var(--csc-aubergine); }
.proc__step:nth-child(3) .proc__n { color:var(--csc-slate); }
.proc__step:nth-child(4) .proc__n { color:#7c9a14; }
.proc__t { font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--csc-navy); margin:0 0 10px; }
.proc__arrow { position:absolute; top:28px; right:-16px; width:20px; height:20px; color:var(--border-strong); }
.on-dark .proc__t { color:#fff; }
.on-dark .proc__n { color:var(--csc-lime); }
.on-dark .proc__step:nth-child(2) .proc__n,
.on-dark .proc__step:nth-child(3) .proc__n,
.on-dark .proc__step:nth-child(4) .proc__n { color:var(--csc-aqua); }

/* ---------- COMPARE TABLE (which support fits) ---------- */
.fit-table { width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.fit-table th, .fit-table td { text-align:left; padding:20px 24px; border-bottom:1px solid var(--border);
  vertical-align:middle; }
.fit-table thead th { background:var(--csc-navy); color:#fff; font-family:var(--font-display);
  font-weight:700; font-size:13px; letter-spacing:.04em; }
.fit-table tbody tr:last-child td { border-bottom:none; }
.fit-table tbody td:first-child { color:var(--csc-slate); font-size:15.5px; line-height:1.5; }
.fit-table .fit-svc { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--csc-navy);
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; }
.fit-table .fit-svc:hover { color:var(--csc-turquoise); }
.fit-table .fit-svc .dot { width:10px; height:10px; border-radius:999px; background:var(--csc-turquoise); flex:none; }
.fit-table tbody tr:nth-child(2) .dot { background:var(--csc-lime); }
.fit-table tbody tr:nth-child(3) .dot { background:var(--csc-aubergine); }

/* ---------- EXPANDABLE SERVICE CARDS (Services page) ---------- */
.xcards { display:grid; gap:24px; }
.xcard { background:#fff; border:1px solid var(--border); border-left:4px solid var(--csc-turquoise);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden;
  transition:box-shadow .2s var(--ease-out); scroll-margin-top:100px; }
.xcard:nth-child(2) { border-left-color:var(--csc-lime); }
.xcard:nth-child(3) { border-left-color:var(--csc-aubergine); }
.xcard.is-open { box-shadow:var(--shadow-md); }
.xcard__head { width:100%; text-align:left; background:none; border:none; padding:34px 36px;
  display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; }
.xcard__tier { font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--csc-turquoise); }
.xcard:nth-child(2) .xcard__tier { color:#7c9a14; }
.xcard:nth-child(3) .xcard__tier { color:var(--csc-aubergine); }
.xcard__num { font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--fg3);
  width:44px; height:44px; border-radius:999px; border:1.5px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; }
.xcard__head-main { min-width:0; }
.xcard__title { font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.6vw,29px);
  line-height:1.12; color:var(--csc-navy); margin:6px 0 8px; }
.xcard__tag { font-size:15.5px; color:var(--csc-slate); margin:0; line-height:1.5; }
.xcard__aside { display:flex; flex-direction:column; align-items:flex-end; gap:10px; text-align:right; }
.xcard__fee { font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--csc-navy); line-height:1; }
.xcard__fee .was { display:block; font-size:13px; font-weight:600; color:var(--fg3);
  text-decoration:line-through; margin-bottom:2px; }
.xcard__toggle { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display);
  font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--csc-turquoise); }
.xcard__toggle svg { width:18px; height:18px; transition:transform .24s var(--ease-out); }
.xcard.is-open .xcard__toggle svg { transform:rotate(180deg); }
.xcard__panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows .36s var(--ease-out); }
.xcard.is-open .xcard__panel { grid-template-rows:1fr; }
.xcard__panel-inner { overflow:hidden; }
.xcard__body { padding:0 36px 38px; border-top:1px solid var(--border); margin-top:4px; padding-top:30px; }
.xcard__grid { display:grid; grid-template-columns:1fr 1fr; gap:36px 48px; }
.xcard__block h4 { font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--csc-turquoise); margin:0 0 14px; }
.xcard:nth-child(2) .xcard__block h4 { color:#7c9a14; }
.xcard:nth-child(3) .xcard__block h4 { color:var(--csc-aubergine); }
.xcard__block p { font-size:16px; line-height:1.65; color:var(--csc-slate); margin:0 0 12px; }
.xcard__block p:last-child { margin-bottom:0; }
.xcard__block.full { grid-column:1 / -1; }
.xcard__quotes { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.xcard__quotes li { font-style:italic; color:var(--csc-navy); font-size:15.5px; line-height:1.5;
  padding-left:18px; border-left:2px solid var(--border-strong); }
.xcard__deliver { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; }
.xcard__deliver li { position:relative; }
.xcard__deliver .dname { display:inline-flex; gap:10px; align-items:flex-start; font-size:15.5px;
  color:var(--csc-slate); line-height:1.45; cursor:help; }
.xcard__deliver .dname svg { width:19px; height:19px; flex:none; color:var(--csc-turquoise); margin-top:1px; }
.xcard__deliver .dlabel { border-bottom:1px dotted var(--border-strong); padding-bottom:1px; }
.xcard__deliver .dname:focus-visible { outline:none; }
.xcard__deliver .dname:focus-visible .dlabel { border-bottom-color:var(--csc-turquoise);
  box-shadow:0 0 0 3px var(--focus-ring); border-radius:3px; }
.xcard__deliver .dtip { position:absolute; bottom:calc(100% + 10px); left:0; right:0;
  background:var(--csc-navy); color:#fff; padding:13px 15px; border-radius:10px;
  font-size:13px; line-height:1.5; box-shadow:var(--shadow-lg); z-index:6;
  opacity:0; visibility:hidden; transform:translateY(5px);
  transition:opacity .16s var(--ease-out), transform .16s var(--ease-out), visibility .16s; }
.xcard__deliver .dtip::after { content:""; position:absolute; top:100%; left:26px;
  border:7px solid transparent; border-top-color:var(--csc-navy); }
.xcard__deliver li:hover .dtip, .xcard__deliver li:focus-within .dtip { opacity:1; visibility:visible; transform:none; }
.xcard:nth-child(2) .xcard__deliver .dname svg { color:#7c9a14; }
.xcard:nth-child(3) .xcard__deliver .dname svg { color:var(--csc-aubergine); }
.xcard__who { display:flex; flex-wrap:wrap; gap:18px 32px; margin-top:6px; }
.xcard__who .stat .v { font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--csc-navy); }
.xcard__who .stat .l { font-size:13px; color:var(--fg3); margin-top:2px; }
.xcard__cta { margin-top:30px; padding-top:26px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.xcard__meta-line { font-family:var(--font-display); font-weight:700; font-size:14.5px;
  color:var(--csc-navy); display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0; letter-spacing:.01em; }
.xcard__meta-line .sep { color:var(--border-strong); font-weight:400; }
.xcard__meta-line .lbl { color:var(--fg3); }

/* ---------- FAQ ---------- */
.faq { display:grid; gap:0; max-width:840px; border-top:1px solid var(--border); }
.faq__item { border-bottom:1px solid var(--border); }
.faq__q { width:100%; text-align:left; background:none; border:none; padding:26px 8px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--csc-navy); }
.faq__q svg { width:22px; height:22px; flex:none; color:var(--csc-turquoise); transition:transform .24s var(--ease-out); }
.faq__item.is-open .faq__q svg { transform:rotate(45deg); }
.faq__a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease-out); }
.faq__item.is-open .faq__a { grid-template-rows:1fr; }
.faq__a-inner { overflow:hidden; }
.faq__a p { font-size:16.5px; line-height:1.7; color:var(--csc-slate); margin:0 8px 26px; max-width:64ch; }

/* ---------- BIG QUOTE ---------- */
.bigquote { max-width:960px; margin:0 auto; text-align:center; }
.bigquote .mark { font-family:var(--font-script); font-size:80px; line-height:.4; color:var(--csc-lime);
  display:block; margin-bottom:18px; }
.bigquote p { font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3vw,36px);
  line-height:1.32; letter-spacing:-.01em; color:#fff; margin:0; text-wrap:balance; }

/* ---------- STATS STRIP ---------- */
.statgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.statgrid .stat { border-left:3px solid var(--csc-turquoise); padding-left:22px; }
.statgrid .stat:nth-child(2) { border-left-color:var(--csc-lime); }
.statgrid .stat:nth-child(3) { border-left-color:var(--csc-aubergine); }
.statgrid .v { font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3vw,40px);
  color:var(--csc-navy); line-height:1.05; }
.statgrid .l { font-size:15px; color:var(--csc-slate); margin-top:8px; line-height:1.5; }

/* ---------- CTA BAND ---------- */
.cta { background:radial-gradient(120% 150% at 50% 0%, #1a3f5c 0%, var(--csc-navy) 58%);
  color:var(--fg-inverse); padding:100px 0; text-align:center; position:relative; overflow:hidden; }
.cta .wrap { position:relative; z-index:1; }
.cta .eyebrow { margin-bottom:18px; }
.cta__h { font-family:var(--font-display); font-weight:700; font-size:clamp(31px,4.2vw,46px);
  line-height:1.12; letter-spacing:-.01em; color:#fff; margin:0 auto 18px; max-width:880px; text-wrap:balance; }
.cta__lead { font-size:19px; line-height:1.6; color:var(--fg-inverse-2); max-width:40em; margin:0 auto 34px; }
.cta__actions { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ---------- FORM (contact page) ---------- */
.form-layout { display:grid; grid-template-columns:1fr 1.15fr; gap:64px; align-items:start; }
.form-side .lead { margin-top:20px; }
.form-side__help { margin-top:32px; display:grid; gap:20px; }
.form-side__help .item { display:flex; gap:14px; align-items:flex-start; }
.form-side__help svg { width:24px; height:24px; flex:none; color:var(--csc-turquoise); margin-top:2px; }
.form-side__help .t { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--csc-navy); margin:0 0 3px; }
.form-side__help .d { font-size:14.5px; color:var(--csc-slate); margin:0; line-height:1.5; }
.form-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:40px; box-shadow:var(--shadow-md); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field.full { grid-column:1 / -1; }
.field label { font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--csc-slate); }
.field label .opt { color:var(--fg3); font-weight:600; letter-spacing:.04em; }
.field input, .field select, .field textarea { font-family:var(--font-body); font-size:15px;
  color:var(--csc-navy); background:#fff; border:1px solid var(--border-strong); border-radius:8px;
  padding:12px 14px; outline:none; transition:border-color .14s,box-shadow .14s; width:100%; }
.field textarea { min-height:108px; resize:vertical; line-height:1.5; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--csc-turquoise);
  box-shadow:0 0 0 3px var(--focus-ring); }
.field input::placeholder, .field textarea::placeholder { color:var(--csc-slate-400); }
.form-actions { margin-top:26px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.form-note { font-size:13px; color:var(--fg3); line-height:1.5; margin:14px 0 0; }
.form-status { margin-top:18px; font-size:14.5px; font-weight:600; display:none; }
.form-status.err { display:block; color:#a3324b; }
.form-success { display:none; text-align:center; padding:18px 0; }
.form-success.show { display:block; animation:fade-rise .4s var(--ease-out) both; }
.form-success .check { width:64px; height:64px; border-radius:999px; background:var(--csc-lime);
  display:flex; align-items:center; justify-content:center; margin:0 auto 22px; }
.form-success .check svg { width:32px; height:32px; color:var(--csc-navy); stroke-width:2.4; }
.form-success .h3 { margin-bottom:12px; }

/* ---------- FOOTER ---------- */
.footer { background:var(--csc-navy-800); color:var(--fg-inverse-2); padding:72px 0 36px; }
.footer__inner { display:grid; grid-template-columns:1fr 1.4fr; gap:56px; padding-bottom:48px;
  border-bottom:1px solid var(--border-on-dark); }
.footer__logo { height:42px; width:auto; margin-bottom:22px; }
.footer__promise { font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.3;
  color:#fff; margin:0 0 16px; }
.footer__contact { font-size:14.5px; line-height:1.7; margin:0; }
.footer__contact a { color:var(--csc-aqua); text-decoration:none; }
.footer__contact a:hover { color:#fff; }
.footer__cols { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.footer__col h4 { font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--csc-aqua); margin:0 0 16px; }
.footer__col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.footer__col a { color:var(--fg-inverse-2); text-decoration:none; font-size:14.5px; transition:color .14s; }
.footer__col a:hover { color:#fff; }
.footer__base { display:flex; justify-content:space-between; padding-top:28px; font-size:13px;
  color:#7e93a3; gap:18px; flex-wrap:wrap; }
.footer__base a { color:#7e93a3; text-decoration:none; }
.footer__base a:hover { color:#fff; }

/* ---------- SCROLL REVEAL ---------- */
@keyframes fade-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease-out),transform .5s var(--ease-out); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px) {
  .hero__inner, .split, .form-layout { grid-template-columns:1fr; gap:44px; }
  .split--rev .split__media { order:0; }
  .hero__visual { order:0; margin-top:8px; }
  .conv-panel, .hero__photo-visual .hero__panel { margin:0 auto; max-width:380px; }
  .hero__panel { max-width:420px; margin:0 auto; aspect-ratio:16/11; }
  .hero__badge { left:0; }
  .svc-grid, .proc { grid-template-columns:1fr 1fr; }
  .proc__arrow { display:none; }
  .nav__links, .nav__actions .nav__cta { display:none; }
  .nav__burger { display:block; }
  .nav__mobile.open { display:flex; flex-direction:column; gap:4px; padding:14px 32px 24px;
    background:rgba(247,244,239,.98); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
  .nav__mlink { font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--csc-navy);
    text-decoration:none; padding:11px 0; border-bottom:1px solid var(--border); }
  .nav__mobile .btn { margin-top:14px; justify-content:center; }
}
@media (max-width:900px) {
  .hero__mark, .phero__mark { display:none; }
}
@media (max-width:760px) {
  .section { padding:64px 0; }
  .xcard__head { grid-template-columns:auto 1fr; padding:26px 22px; gap:16px; }
  .xcard__aside { grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between;
    text-align:left; padding-top:16px; border-top:1px solid var(--border); }
  .xcard__body { padding:24px 22px 30px; }
  .xcard__grid, .xcard__deliver { grid-template-columns:1fr; gap:24px; }
  .xcard__deliver { gap:10px; }
  .fit-table thead { display:none; }
  .fit-table, .fit-table tbody, .fit-table tr, .fit-table td { display:block; width:100%; }
  .fit-table tr { border-bottom:2px solid var(--border); padding:8px 0; }
  .fit-table td { border:none; padding:6px 24px; }
  .fit-table td:last-child { padding-bottom:18px; }
}
@media (max-width:620px) {
  .svc-grid, .proc, .statgrid, .footer__cols, .checks.two-col, .form-grid { grid-template-columns:1fr; }
  .wrap { padding:0 22px; }
  .footer__inner { grid-template-columns:1fr; gap:40px; }
  .form-card { padding:28px 22px; }
}

/* ---------- STANDARDIZE CONTENT WIDTH ACROSS ALL SECTIONS / PAGES ---------- */
/* Section headers, intros, and prose fill the same content column as the splits,
   checks, and card grids below them (instead of the narrower 760/680 caps) — so every
   section reads at one consistent width with no empty band on the right.
   (.phero .lead keeps its own measure via higher specificity.) */
.sec-head,
.prose,
.section .lead { max-width:none; }