/* =========================================================================
   Leadout Financial — site styles
   Values mirror the original Leadout homepage concept (brand kit tokens).

   Responsive system: breakpoints are content-driven, not a fixed device grid.
   Each grid changes where its own columns stop holding, so the widths below are
   grouped into four bands rather than reused verbatim.
     ≥1600px            wide monitor: larger container, 17px body
     1080 / 1000 / 900  tablet: 4-up drops to 2-up (1080), 3-up prose and the
                        label+2-prose service rows stack (1000), 3-way compare
                        and side-by-side splits stack (900)
     860                nav collapses to the mobile panel; touch targets grow
     700 / 640 / 620    phone: remaining multi-column grids go single column
     480 / 420          small phone: footer columns stack, buttons wrap
   Gutters and vertical rhythm are fluid clamps, so nothing snaps between them.
   ========================================================================= */

/* ---- Design tokens ---- */
:root {
  /* palette */
  --cyprus: #16302B;      /* primary ground + ink */
  --birdie: #CFCB63;      /* gold accent */
  --caddy:  #5F7355;      /* secondary green */
  --polo:   #B7CDE4;      /* cool accent */
  --court:  #FFFFFF;      /* paper */
  --bone:   #F4F2EA;      /* warm ground */

  /* text on light */
  --ink-body:      #46534D;
  --ink-about:     #4A5751;
  --ink-secondary: #5C6863;
  /* One value on purpose: at 10–11px there is no room for a lighter tier
     above the 4.5:1 AA floor. Hierarchy comes from size, weight, tracking. */
  --ink-muted:     #6E7972;
  --ink-label:     #6E7972;
  --ink-meta:      #6E7972;

  /* text on cyprus */
  --on-cyprus-body:      #B4C6BC;
  --on-cyprus-secondary: #C3D2C9;
  --on-cyprus-list:      #DDE5DE;
  --on-cyprus-muted:     #A8BCB1;
  --on-cyprus-faint:     #86998F;
  --on-cyprus-label:     #9AB0A5;

  /* rules */
  --rule-on-white:       #DFE4DE;
  --rule-on-white-light: #E7EAE5;
  --rule-hairline:       #EDEFEA;
  --rule-on-bone:        #DCDACE;
  --rule-on-cyprus:      #2E463D;
  --rule-hero:           #274038;
  --rule-field:          #3D554B;

  /* type */
  --display: 'Familjen Grotesk', sans-serif;
  --editorial: 'Instrument Serif', serif;
  --body: 'Instrument Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* layout — fluid, so tablet widths are never served desktop spacing */
  --container: 1240px;
  --pad: clamp(20px, 3.4vw, 44px);
  --gap-section: clamp(60px, 7.6vw, 104px);
  --header-h: 80px;

  /* card interiors shrink with the viewport instead of at one breakpoint */
  --card-pad-y: clamp(26px, 3vw, 34px);
  --card-pad-x: clamp(22px, 2.6vw, 30px);
}

/* Wide monitors: a 1240px ribbon on a 27" display reads timid. Give the
   measure and the type a little more room rather than more whitespace. */
@media (min-width: 1600px) {
  :root { --container: 1320px; --gap-section: 116px; }
  body { font-size: 17px; }
  h1.hero-headline { font-size: 76px; }
}

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { -webkit-text-size-adjust: 100%; }

/* anchored sections clear the sticky header — driven off the real header height */
[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

body {
  font-family: var(--body);
  color: var(--ink-body);
  background: var(--court);
  font-size: 16px;
  line-height: 1.65;
  /* clip, not hidden: contains the About section's negative-margin overlap
     without breaking position: sticky on the header */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.nav-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }

/* ---- Focus ---- */
:focus-visible { outline: 2px solid var(--cyprus); outline-offset: 3px; }
.bg-cyprus :focus-visible, .hero :focus-visible, .page-hero :focus-visible,
.cta-band :focus-visible, .contact-form :focus-visible,
.compare-col--feature :focus-visible, .serve-card--cta :focus-visible {
  outline-color: var(--birdie);
}

/* ---- Layout & rhythm ----
   White sections carry top space only; tinted bands carry their own padding
   and are separated from the section above them. Matches the concept flow. */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: var(--gap-section) 0 0; }
.section.bg-bone, .section.bg-cyprus { padding: var(--gap-section) 0; }
.section + .section.bg-bone, .section + .section.bg-cyprus { margin-top: var(--gap-section); }
.section.bg-court:last-of-type { padding-bottom: var(--gap-section); }
.bg-cyprus { background: var(--cyprus); color: var(--on-cyprus-secondary); position: relative; overflow: hidden; }
.bg-bone   { background: var(--bone); }
.bg-court  { background: var(--court); }

/* ---- Logo mark ---- */
.mark { width: 100%; height: 100%; display: block; }
.logo-mark { width: 32px; height: 32px; color: var(--cyprus); flex: 0 0 auto; }
.logo-mark--gold { color: var(--birdie); }

/* ---- Typography helpers ---- */
p.eyebrow, .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  max-width: none;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--caddy);
}
p.eyebrow--gold, .eyebrow--gold { color: var(--birdie); }
p.eyebrow--polo, .eyebrow--polo { color: var(--polo); }

.display { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; line-height: 1.06; }
.serif   { font-family: var(--editorial); font-weight: 400; line-height: 1.06; }

h1.hero-headline {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.06;
  font-size: clamp(34px, 5.2vw, 64px);
  color: var(--court);
  text-wrap: balance;
}
h1.section-headline, h2.section-headline {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
  font-size: clamp(28px, 3.6vw, 46px);
  color: var(--cyprus);
  text-wrap: balance;
}
.on-cyprus h2.section-headline, .on-cyprus h1.section-headline,
h2.section-headline.on-dark, h1.section-headline.on-dark { color: var(--court); }

h3.editorial-headline {
  font-family: var(--editorial);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.01em;
  font-size: clamp(32px, 4vw, 58px);
}
.card-title {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
  font-size: clamp(23px, 2.2vw, 27px);
  color: var(--cyprus);
  text-wrap: balance;
}
.lead { font-size: 18px; line-height: 1.65; }
p + p { margin-top: 1.15em; }

/* ---- Buttons (square, no radius — brand kit) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  min-height: 48px;
  padding: 15px 28px;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--birdie); color: var(--cyprus); }
.btn--primary:hover { background: #DBD87A; }
.btn--dark { background: var(--cyprus); color: var(--court); }
.btn--dark:hover { background: #22443C; }
.btn--outline-light { background: transparent; color: var(--court); border-color: #45594F; }
.btn--outline-light:hover { border-color: var(--polo); color: var(--polo); }
.btn--outline-dark { background: transparent; color: var(--cyprus); border-color: var(--rule-on-white); }
.btn--outline-dark:hover { border-color: var(--cyprus); }
.btn--block { width: 100%; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-on-white-light);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 40px); padding-top: 18px; padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 11px; }
.wordmark { line-height: 1; }
.wordmark strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--cyprus);
}
.wordmark span {
  display: block;
  font-family: var(--body);
  font-weight: 600;
  font-size: 8px;
  letter-spacing: .44em;
  line-height: 1;
  color: var(--caddy);
  margin-top: 4px;
}
.nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 34px); }
.nav a:not(.btn) { font-size: 14px; color: var(--ink-body); font-weight: 500; transition: color .15s; }
.nav a:not(.btn):hover, .nav a:not(.btn).active { color: var(--cyprus); }
.nav .btn { padding: 11px 20px; min-height: 42px; font-size: 14px; font-weight: 600; }
.nav .btn--dark, .nav .btn--dark:hover { color: var(--court); }
.nav-toggle {
  display: none; background: none; border: 0; color: var(--cyprus);
  width: 44px; height: 44px; margin-right: -10px;
  align-items: center; justify-content: center;
}

/* mobile nav */
@media (max-width: 860px) {
  :root { --header-h: 66px; }
  .header-inner { padding-top: 13px; padding-bottom: 13px; }
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--court); border-bottom: 1px solid var(--rule-on-white-light);
    padding: 8px var(--pad) 24px;
    /* if the panel ever exceeds the viewport it scrolls rather than clipping */
    max-height: calc(100svh - var(--header-h)); overflow-y: auto;
    box-shadow: 0 18px 40px -22px rgba(22,48,43,.28);
  }
  .nav.open a:not(.btn) {
    display: flex; align-items: center; min-height: 52px; font-size: 16px;
    border-bottom: 1px solid var(--rule-on-white-light);
  }
  /* the last text link sits directly above the CTA button — no divider needed */
  .nav.open a:not(.btn):has(+ .btn) { border-bottom: 0; }
  .nav.open .btn { margin-top: 14px; width: 100%; font-size: 15px; }
  .nav-toggle { display: inline-flex; }
}

/* ---- Hero ---- */
.hero { background: var(--cyprus); color: var(--on-cyprus-secondary); position: relative; overflow: hidden; }
.hero-inner { padding-top: clamp(64px, 9vw, 118px); padding-bottom: clamp(56px, 8vw, 104px); position: relative; z-index: 1; }
.hero .eyebrow { margin-bottom: 26px; }
.hero-headline { margin-bottom: 26px; max-width: 820px; }
.hero-lead { color: var(--on-cyprus-secondary); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.62; max-width: min(600px, 62ch); text-wrap: pretty; }
/* second tier: the same thought at lower volume, so the hero isn't one slab */
.hero-lead-sub {
  color: var(--on-cyprus-muted); font-size: clamp(15px, 1.25vw, 16.5px);
  line-height: 1.66; max-width: min(520px, 54ch); margin-top: 16px; text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-strip { border-top: 1px solid var(--rule-hero); position: relative; z-index: 1; }
.hero-strip p:not(.eyebrow) { padding: 22px 0; color: var(--on-cyprus-muted); font-size: 15px; line-height: 1.6; max-width: 720px; }

/* The brand mark at scale, cropped by ONE edge only. It lives inside
   .hero-body, not .hero, so it can never reach the qualifier strip's hairline
   below. Height is a share of the content area with aspect-ratio deriving the
   width, so it always fits vertically no matter how the headline wraps, and the
   only cut is the right edge. The 12 o'clock chevron is the single gold accent. */
.hero-body { position: relative; overflow: hidden; }
.hero-figure {
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%;
  /* --par / --par-rot are driven by assets/motion.js on scroll */
  transform: translateY(calc(-50% + var(--par, 0px))) rotate(var(--par-rot, 0deg));
  right: clamp(-150px, -8vw, -60px);
  height: 92%; max-height: 660px; width: auto; aspect-ratio: 1;
  color: #1F3D35;
}
.hero-figure svg { width: 100%; height: 100%; display: block; }
/* single column: keep the mark centred and right-cropped rather than cornering
   it, so no chevron is ever sliced down to a stub */
@media (max-width: 1000px) {
  .hero-figure { height: auto; max-height: none; width: min(72vw, 430px); right: -10%; }
}
@media (max-width: 600px) { .hero-figure { width: min(76vw, 300px); right: -12%; } }

/* Landscape phones and short windows: the hero's vertical padding is the
   thing that pushes everything below the fold. Cut it, not the type. */
@media (max-height: 560px) and (min-width: 640px) {
  .hero-inner { padding-top: 48px; padding-bottom: 44px; }
  .page-hero-inner { padding-top: 44px; padding-bottom: 40px; }
}

/* ---- Page hero (interior pages) ---- */
.page-hero { background: var(--cyprus); color: var(--on-cyprus-secondary); }
.page-hero-inner { padding-top: clamp(58px, 8vw, 104px); padding-bottom: clamp(54px, 7.4vw, 96px); }
.page-hero .eyebrow { margin-bottom: 26px; }
.page-hero h1 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.035em; line-height: 1.06;
  font-size: clamp(32px, 4.6vw, 56px); color: var(--court); margin-bottom: 26px;
  max-width: 900px; text-wrap: balance;
}
.page-hero p:not(.eyebrow) { color: var(--on-cyprus-secondary); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.62; max-width: 580px; text-wrap: pretty; }

/* ---- Section head (eyebrow + headline, optional intro at right) ---- */
.section-head { margin-bottom: clamp(30px, 3.6vw, 46px); }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head-grid { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(28px, 4vw, 60px); flex-wrap: wrap; }
.section-head-grid > div { max-width: 660px; }
.section-head-grid .intro { color: var(--ink-secondary); font-size: 16px; line-height: 1.65; max-width: 380px; text-wrap: pretty; }
.on-cyprus .section-head-grid .intro { color: var(--on-cyprus-body); }
@media (max-width: 900px) { .section-head-grid { display: block; } .section-head-grid .intro { margin-top: 20px; max-width: 60ch; } }

/* ---- Gap section (3-way comparison) ---- */
.compare { display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: stretch; }
.compare-col {
  border: 1px solid var(--rule-on-white);
  padding: var(--card-pad-y) var(--card-pad-x); margin: 18px 0;
  display: flex; flex-direction: column; gap: 14px;
}
.compare-col:first-child { border-right: 0; }
.compare-col:last-child { border-left: 0; }
.compare-col .label { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-label); }
.compare-col p { color: var(--ink-secondary); font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.compare-col--feature {
  background: var(--cyprus); border: 0; margin: 0;
  padding: clamp(30px, 3.6vw, 44px) clamp(24px, 3vw, 34px); position: relative; gap: 16px;
}
.compare-col--feature .label { color: var(--birdie); padding-right: 40px; }
.compare-col--feature p { color: var(--court); font-size: clamp(17px, 1.5vw, 18px); line-height: 1.6; }
.compare-col--feature .corner-mark { position: absolute; top: clamp(28px, 3.4vw, 42px); right: clamp(24px, 3vw, 34px); width: 26px; height: 26px; color: var(--birdie); }
/* three columns of prose need ~260px each; below that they stack */
@media (max-width: 900px) {
  .compare { grid-template-columns: 1fr; }
  .compare-col { margin: 0; border: 1px solid var(--rule-on-white); border-bottom: 0; }
  .compare-col:last-child { border: 1px solid var(--rule-on-white); }
  .compare-col--feature { border: 0; }
}

/* ---- Diamond bullet lists ---- */
.svc-features li, .counton ul li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; line-height: 1.6; color: var(--ink-body);
}
.svc-features li::before, .counton ul li::before {
  content: ""; flex: none;
  width: 5px; height: 5px; margin-top: 9px;
  background: var(--caddy); transform: rotate(45deg);
}

/* ---- Services rows ---- */
.service-list { border-top: 2px solid var(--cyprus); }
.service-row {
  display: grid; grid-template-columns: 0.42fr 1.05fr 1.15fr; gap: clamp(24px, 3vw, 40px);
  padding: clamp(26px, 3vw, 34px) 0; border-bottom: 1px solid var(--rule-on-white); align-items: start;
}
.service-row .svc-index { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-label); margin-bottom: 12px; }
.svc-chip {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; padding: 5px 10px;
  background: var(--cyprus); color: var(--court);
}
.svc-chip--gold { background: var(--birdie); color: var(--cyprus); }
.service-row .svc-title { margin-bottom: 12px; }
.service-row .svc-desc { color: var(--ink-secondary); font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.svc-features li { padding: 9px 0; border-top: 1px solid var(--rule-hairline); }
.svc-features li:first-child { border-top: 0; }
/* a label column + two prose columns needs ~1000px to hold together */
@media (max-width: 1000px) {
  .service-row { grid-template-columns: 1fr; gap: 18px; }
}

/* ---- Steps (how we work) ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--cyprus); }
.step { padding: 26px 26px 30px 26px; border-right: 1px solid var(--rule-on-bone); }
.step:first-child { padding-left: 0; }
.step:last-child { border-right: 0; padding-right: 0; }
.step .step-index { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--cyprus); margin-bottom: 11px; }
.step h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: 20px; color: var(--cyprus); margin-bottom: 11px; }
.step p { color: var(--ink-secondary); font-size: 15px; line-height: 1.62; text-wrap: pretty; }
@media (max-width: 1080px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step { border-bottom: 1px solid var(--rule-on-bone); padding: 26px 22px; }
  .step:nth-child(2n) { border-right: 0; padding-right: 0; }
  .step:nth-child(2n+1) { padding-left: 0; }
}
/* only the 2-up grid has a bottom row to de-border — scoped so it doesn't
   swallow the divider under step 3 once the list is single column */
@media (max-width: 1080px) and (min-width: 641px) {
  .step:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
  .step, .step:nth-child(2n), .step:nth-child(2n+1) { border-right: 0; padding: 24px 0; }
  .step:last-child { border-bottom: 0; }
}

/* ---- Why Leadout (hairline list) ----
   Deliberately not a second card grid: the services overview directly above is
   already a boxed 2x2, so this section earns its own rhythm from rules and
   asymmetric columns instead of more borders. */
.why-list { border-top: 1px solid var(--rule-on-white); }
.why-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(20px, 5vw, 72px);
  align-items: start;
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--rule-on-white);
}
.why-lead { display: flex; align-items: baseline; gap: clamp(14px, 1.6vw, 20px); }
.why-index {
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em;
  color: var(--ink-label); flex: none; padding-top: 2px;
}
.why-row h4 {
  font-family: var(--display); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.12;
  font-size: clamp(21px, 2.3vw, 29px); color: var(--cyprus);
  text-wrap: balance;
}
.why-row > p {
  color: var(--ink-secondary); font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7; max-width: 62ch; text-wrap: pretty;
}
@media (max-width: 860px) { .why-row { grid-template-columns: 1fr; gap: 14px; } }

/* ---- Resources / article ---- */
.post-list { border-top: 1px solid var(--rule-on-white); }
.post-row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(16px, 4vw, 60px); align-items: start;
  padding: clamp(26px, 3.2vw, 40px) 0;
  border-bottom: 1px solid var(--rule-on-white);
  transition: background .15s;
}
a.post-row:hover { background: var(--bone); }
.post-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-label); }
.post-row h3 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.028em;
  line-height: 1.14; font-size: clamp(21px, 2.2vw, 28px); color: var(--cyprus);
  margin-bottom: 10px; text-wrap: balance;
}
/* scoped to the blurb wrapper: a bare .post-row p (0,1,1) outranks .post-meta
   (0,1,0) and silently swallows the label's size, tracking and colour */
.post-row > div p { color: var(--ink-secondary); font-size: 16px; line-height: 1.68; max-width: 62ch; text-wrap: pretty; }
@media (max-width: 860px) { .post-row { grid-template-columns: 1fr; gap: 12px; } }

.res-empty {
  border: 1px solid var(--rule-on-white);
  padding: clamp(32px, 4.6vw, 60px) clamp(24px, 3.4vw, 48px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.res-empty .eyebrow { color: var(--caddy); }
.res-empty h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.028em; line-height: 1.14; font-size: clamp(22px, 2.4vw, 30px); color: var(--cyprus); max-width: 20ch; text-wrap: balance; }
.res-empty p { color: var(--ink-secondary); font-size: 16px; line-height: 1.68; max-width: 58ch; text-wrap: pretty; }
.res-empty .btn { margin-top: 8px; }

.article-body { padding: var(--gap-section) 0; }
.article-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--on-cyprus-label); display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 22px; }
.article-meta span + span::before { content: "·"; padding: 0 14px; color: var(--on-cyprus-faint); }
/* inline-block so it can hold the same 26px the .eyebrow reserves in every
   other page-hero; inline would drop the margin on the floor */
.back-link { display: inline-block; margin-bottom: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--birdie); }
.back-link:hover { color: var(--court); }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 22px; }
.prose p { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.75; color: var(--ink-body); text-wrap: pretty; }
.prose h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.028em;
  line-height: 1.16; font-size: clamp(23px, 2.4vw, 30px); color: var(--cyprus);
  margin-top: clamp(40px, 4.4vw, 60px); text-wrap: balance;
}
.prose h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(18px, 1.8vw, 21px); color: var(--cyprus); margin-top: clamp(30px, 3vw, 40px); }
.prose ul { display: flex; flex-direction: column; gap: 12px; }
/* The diamond is absolutely positioned rather than a flex sibling. As a flex
   container the li split a bold run-in label and the text after it into two
   independently-wrapping columns; normal inline flow keeps them one paragraph
   with wrapped lines aligned under the first. */
.prose ul li {
  position: relative; padding-left: 22px;
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.68;
  color: var(--ink-body); text-wrap: pretty;
}
.prose ul li::before {
  content: ""; position: absolute; left: 1px; top: .62em;
  width: 7px; height: 7px; background: var(--birdie); transform: rotate(45deg);
}
.prose ul li strong { color: var(--cyprus); }
.prose a { color: var(--cyprus); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--caddy); }
.prose blockquote {
  border-left: 2px solid var(--birdie); padding-left: clamp(18px, 2.4vw, 28px);
  font-family: var(--editorial); font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.3; color: var(--cyprus); text-wrap: pretty;
}

/* ---- Services overview (home) ---- */
.svc-overview {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--rule-on-white); border: 1px solid var(--rule-on-white);
}
.svc-ov-card { background: var(--court); padding: var(--card-pad-y) var(--card-pad-x); display: block; transition: background .15s; }
.svc-ov-card:hover { background: var(--bone); }
.svc-ov-card .svc-index { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-label); margin-bottom: 14px; }
.svc-ov-card h4 { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 1.9vw, 22px); letter-spacing: -.025em; color: var(--cyprus); margin-bottom: 10px; }
.svc-ov-card p { color: var(--ink-secondary); font-size: 15px; line-height: 1.65; text-wrap: pretty; }
.svc-ov-card .go { display: inline-block; margin-top: 18px; font-weight: 600; font-size: 14px; color: var(--caddy); }
.svc-ov-card:hover .go { color: var(--cyprus); }
@media (max-width: 700px) { .svc-overview { grid-template-columns: 1fr; } }

/* ---- About (photo + overlapping cyprus bands) ---- */
/* The overlap used to be a percentage, so its depth drifted at every width.
   A px clamp keeps it visually constant from tablet to wide monitor. */
.about-grid {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: stretch;
  --about-pull: clamp(64px, 10vw, 150px);
  --about-indent: clamp(28px, 5vw, 76px);
}
.about-photo { position: relative; min-width: 0; min-height: clamp(520px, 50vw, 780px); }
.about-photo picture { position: absolute; inset: 0; display: block; }
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.about-col { position: relative; z-index: 2; min-width: 0; padding-top: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.about-eyebrow {
  margin-left: calc(-1 * var(--about-pull)); background: var(--cyprus); padding: 12px 20px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--birdie);
}
.about-band { margin-left: calc(-1 * var(--about-pull)); background: var(--cyprus); padding: 26px clamp(22px, 2.6vw, 32px) 30px; align-self: stretch; }
.about-band h1, .about-band h2, .about-band .editorial-headline {
  font-family: var(--editorial); font-weight: 400; font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.04; letter-spacing: -.01em; color: var(--court); text-wrap: balance;
}
.about-body { display: flex; flex-direction: column; gap: 20px; padding: 10px 0 0 var(--about-indent); }
.about-body p { color: var(--ink-about); font-size: clamp(16px, 1.4vw, 17px); line-height: 1.68; margin: 0; text-wrap: pretty; }
.about-quote { margin: 12px 0 0 var(--about-indent); border-left: 2px solid var(--birdie); padding: 4px 0 4px 22px; }
.about-quote .q { font-family: var(--editorial); font-size: clamp(22px, 2.3vw, 26px); line-height: 1.34; color: var(--cyprus); text-wrap: pretty; }
.about-quote .attr { color: var(--ink-muted); font-size: 15px; line-height: 1.6; margin-top: 10px; }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; --about-pull: 0px; --about-indent: 0px; }
  .about-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .about-col { padding-top: 0; }
  .about-body { padding-top: 6px; }
}
@media (max-width: 640px) { .about-photo { aspect-ratio: 1 / 1; } }

/* count-on list */
.counton { margin-top: clamp(38px, 4.6vw, 52px); border-top: 2px solid var(--cyprus); padding-top: 30px; display: grid; grid-template-columns: 0.7fr 2fr; gap: clamp(24px, 3vw, 40px); align-items: start; }
.counton h4 { font-family: var(--display); font-weight: 700; font-size: clamp(21px, 2.1vw, 24px); letter-spacing: -.025em; line-height: 1.15; color: var(--cyprus); }
.counton-lists { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 3vw, 40px); }
.counton ul li { padding: 10px 0; border-bottom: 1px solid #E4E7E2; }
@media (max-width: 900px) {
  .counton { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .counton-lists { grid-template-columns: 1fr; }
}

/* ---- Who we serve ---- */
.serve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.serve-card { border: 1px solid var(--rule-on-white); padding: clamp(24px, 2.8vw, 28px) var(--card-pad-x); display: flex; flex-direction: column; gap: 8px; }
.serve-card h4 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--cyprus); }
.serve-card p { color: var(--ink-muted); font-size: 15px; line-height: 1.6; }
.serve-card--cta { background: var(--cyprus); border-color: var(--cyprus); justify-content: center; }
.serve-card--cta h4 { color: var(--court); }
.serve-card--cta p, .serve-card--cta a { color: var(--birdie); }
@media (max-width: 1000px) { .serve-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .serve-grid { grid-template-columns: 1fr; } }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(40px, 5.6vw, 70px); align-items: start; }
.contact-lead { color: var(--on-cyprus-body); font-size: clamp(16px, 1.5vw, 17px); line-height: 1.65; margin-top: 20px; max-width: 480px; text-wrap: pretty; }
.contact-direct { margin-top: 22px; border-top: 1px solid var(--rule-on-cyprus); padding-top: 26px; }
.contact-direct h4 { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: var(--court); margin-bottom: 14px; }
.contact-direct p { color: var(--on-cyprus-muted); font-size: 15px; line-height: 1.6; }
.contact-direct .line { color: var(--on-cyprus-list); margin-top: 7px; }
.contact-direct .line:first-of-type { margin-top: 14px; }
.contact-direct a { color: var(--birdie); }
.contact-direct .note { color: var(--on-cyprus-faint); font-size: 14px; line-height: 1.6; margin-top: 22px; max-width: 440px; text-wrap: pretty; }
/* phone / email are the primary mobile action — give them real hit area */
@media (max-width: 860px) {
  .contact-direct .line a { display: inline-flex; align-items: center; min-height: 44px; }
}

.contact-form { border: 1px solid var(--rule-on-cyprus); background: rgba(255,255,255,.02); padding: clamp(24px, 3.4vw, 34px) clamp(20px, 3vw, 32px); }
.form-field { margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field label {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--on-cyprus-label); margin-bottom: 7px;
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule-field);
  color: var(--court); font-family: var(--body);
  /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus */
  font-size: 16px; padding: 12px 0 13px;
  transition: border-color .15s;
}
.form-field textarea { resize: vertical; min-height: 104px; border: 1px solid var(--rule-field); padding: 12px 14px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 0; border-color: var(--birdie); }
.form-field input::placeholder, .form-field textarea::placeholder { color: #6F857A; }
/* custom caret so the select doesn't read as a plain text field */
.form-field select {
  appearance: none; -webkit-appearance: none; color: #6F857A;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%239AB0A5' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
.form-field select option { color: #16302B; }
.form-help { font-size: 13px; line-height: 1.5; color: var(--on-cyprus-faint); margin-top: 7px; }
.form-field label + .form-help { margin-top: 0; margin-bottom: 8px; }
.contact-form .btn { margin-top: 6px; font-size: 16px; padding: 17px 30px; min-height: 54px; }
.form-note { font-size: 13px; line-height: 1.55; color: var(--on-cyprus-faint); margin-top: 12px; text-align: center; }
.form-status { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--on-cyprus-body); min-height: 1em; }
.form-status.success { color: var(--birdie); }
.form-status.error { color: #E8B4A2; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-form .btn { width: 100%; }
}

/* ---- CTA band ---- */
.cta-band { background: var(--cyprus); color: var(--court); margin-top: var(--gap-section); }
.cta-band-inner { padding-top: clamp(52px, 5.8vw, 76px); padding-bottom: clamp(52px, 5.8vw, 76px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.cta-band h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; font-size: clamp(26px, 3.2vw, 40px); color: var(--court); text-wrap: balance; }
.cta-band p { color: var(--on-cyprus-body); margin-top: 16px; font-size: clamp(16px, 1.5vw, 17px); line-height: 1.65; }
.cta-band .cta-actions { display: flex; justify-content: flex-end; }
@media (max-width: 860px) {
  .cta-band-inner { grid-template-columns: 1fr; gap: 26px; }
  .cta-band .cta-actions { justify-content: flex-start; }
}

/* ---- Footer ---- */
.site-footer { background: var(--court); border-top: 1px solid var(--rule-on-white-light); }
.footer-top { padding-top: 52px; padding-bottom: 40px; display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(32px, 4.6vw, 60px); flex-wrap: wrap; }
.footer-brand { max-width: 300px; }
.footer-brand .brand { margin-bottom: 16px; }
.footer-brand .logo-mark { width: 34px; height: 34px; }
.footer-brand .wordmark strong { font-size: 22px; }
.footer-brand p { color: var(--ink-muted); font-size: 14px; line-height: 1.6; }
.footer-cols { display: flex; gap: clamp(32px, 5vw, 70px); flex-wrap: wrap; }
.footer-col h5 { font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-meta); margin-bottom: 11px; }
.footer-col a, .footer-col p { display: block; color: var(--ink-body); font-size: 14px; line-height: 1.6; padding: 5px 0; }
.footer-col a:hover { color: var(--cyprus); }
.footer-bottom { border-top: 1px solid var(--rule-on-white-light); padding-top: 26px; padding-bottom: 40px; display: flex; justify-content: space-between; gap: 20px; }
.footer-bottom span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-meta); }
@media (max-width: 860px) {
  /* touch: footer links were ~26px tall — below the 44px floor */
  .footer-col a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .footer-col { min-width: 150px; }
  .footer-bottom { flex-direction: column; gap: 10px; }
}
@media (max-width: 480px) {
  .footer-cols { flex-direction: column; gap: 28px; }
  .footer-brand { max-width: none; }
}

/* ---- Utilities ---- */
.mt-0 { margin-top: 0; }
.hr { height: 1px; background: var(--rule-on-white); border: 0; }

/* ---- Small phones ---- */
@media (max-width: 420px) {
  /* long CTA labels can't stay on one line at 320–380px */
  .btn { white-space: normal; text-align: center; padding: 14px 20px; }
  .hero-actions { gap: 12px; }
  .hero-actions .btn { width: 100%; }
  .wordmark strong { font-size: 19px; }
  .wordmark span { letter-spacing: .36em; }
}

/* ---- Scroll motion ---- */
/* Condensed header: once past the top, the bar tightens and lifts off the page
   on a shadow instead of a hairline. */
.header-inner { transition: padding-top .3s cubic-bezier(.4,0,.2,1), padding-bottom .3s cubic-bezier(.4,0,.2,1); }
.site-header { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
.logo-mark { transition: transform .3s cubic-bezier(.4,0,.2,1); }
.wordmark strong { transition: font-size .3s cubic-bezier(.4,0,.2,1); }
.site-header.is-stuck {
  background: rgba(255,255,255,.9);
  border-bottom-color: transparent;
  box-shadow: 0 14px 34px -24px rgba(22,48,43,.55);
}
.site-header.is-stuck .header-inner { padding-top: 11px; padding-bottom: 11px; }
.site-header.is-stuck .logo-mark { transform: scale(.88); }
.site-header.is-stuck .wordmark strong { font-size: 19px; }
@media (max-width: 860px) {
  .site-header.is-stuck .header-inner { padding-top: 9px; padding-bottom: 9px; }
  /* don't shrink out from under an open menu panel */
  .site-header.is-stuck:has(.nav.open) .header-inner { padding-top: 13px; padding-bottom: 13px; }
}

/* Reveal on scroll. The hidden state is applied by selector (not by a class JS
   adds later) so content never flashes in before the observer attaches. The
   head snippet sets data-motion and drops it again if motion.js never loads. */
@media screen and (prefers-reduced-motion: no-preference) {
  html[data-motion] .hero-inner > *,
  html[data-motion] .hero-strip p,
  html[data-motion] .page-hero-inner > *,
  html[data-motion] .section-head > .eyebrow,
  html[data-motion] .section-head > .section-headline,
  html[data-motion] .section-head-grid > *,
  html[data-motion] .compare-col,
  html[data-motion] .svc-ov-card,
  html[data-motion] .why-row,
  html[data-motion] .post-row,
  html[data-motion] .res-empty,
  html[data-motion] .service-row,
  html[data-motion] .step,
  html[data-motion] .serve-card,
  html[data-motion] .counton,
  html[data-motion] .about-photo,
  html[data-motion] .about-col > *,
  html[data-motion] .contact-grid > *,
  html[data-motion] .cta-band-inner > * {
    opacity: 0;
    transform: translateY(20px);
  }
  /* .is-in doubled so the revealed state outranks every hidden-state selector
     above, including ones that end in an element (.hero-strip p). Without it,
     adding an element-terminated selector to the list silently breaks it. */
  html[data-motion] .is-in.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .72s cubic-bezier(.22,.68,.14,1) var(--rd, 0s),
                transform .72s cubic-bezier(.22,.68,.14,1) var(--rd, 0s);
  }
  /* the photo panel is positioned; nudging it horizontally reads better there */
  html[data-motion] .about-photo { transform: translateY(28px); }
}

/* ---- Print ---- */
@media print {
  .site-header, .nav-toggle, .cta-band, .contact-form, .hero-actions { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .hero, .page-hero, .bg-cyprus, .compare-col--feature, .serve-card--cta, .cta-band {
    background: #fff !important; color: #000 !important;
  }
  .hero-headline, .page-hero h1, .about-band h1, .about-band h2,
  .compare-col--feature p, .compare-col--feature .label,
  .serve-card--cta h4, .serve-card--cta p { color: #000 !important; }
  .about-eyebrow, .about-band { margin-left: 0 !important; background: #fff !important; }
  .about-photo { display: none; }
  .section, .section.bg-bone, .section.bg-cyprus { padding: 24pt 0 0; margin-top: 0; }
  .why-row, .post-row, .svc-overview, .steps, .serve-grid, .compare { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}