/* Fonts are self-hosted (variable woff2, latin + latin-ext) so text does not wait on a
   second domain. The latin files are also preloaded in each page's <head>. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Asphalt shingle + hi-vis safety orange — the palette of the trade */
  --navy:    #141312;   /* deep warm charcoal ground */
  --navy2:   #1B1917;   /* raised band */
  --card:    #2A2624;   /* card surface */
  --border:  #4A433E;   /* hairline */
  --orange:  #F5751F;   /* hi-vis accent — the only accent */
  --orange2: #C4520C;   /* deeper orange, hovers and gradients */
  --purple:  #F5751F;   /* retired: mapped to accent so nothing goes violet */
  --teal:    #F5751F;   /* retired */
  --steel:   #6E8CA6;   /* cool secondary, structure only */
  --paper:   #F7F5F1;   /* light contrast sections */
  --paper-ink:#1A1917;
  --white:   #F6F3EF;   /* warm off-white, not cold slate */
  --muted:   #938981;   /* raised from #64748b — old value failed contrast */
  --muted2:  #BCB2A9;
  --green:   #57A06A;
  /* Text on the orange accent is dark: white on #F5751F is 2.55:1, charcoal is 6.58:1 (WCAG AA needs 4.5) */
  --on-orange: #141312;
  --orange-hover: #FF8A3D;  /* lighter on hover so dark text stays readable (7.9:1) */
}

html { scroll-behavior: smooth; }

body {
  background: var(--navy);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── NOISE OVERLAY ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ── NAV ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  height: 72px;
  background: rgba(20,19,18,0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.3s;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--white);
  text-decoration: none;
}

/* The logo is the Canva lockup (chevron + wordmark) as one image. Sized by
   height so the aspect ratio is never stretched; width:auto does the rest. */
.nav-logo .logo {
  height: 52px;
  width: auto;
  display: block;
  flex: none;
}
.footer-logo .logo {
  height: 42px;
  width: auto;
  display: block;
  flex: none;
}

.nav-logo span { color: var(--orange); }

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  color: var(--muted2);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 400;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--white); }
.nav-links a[aria-current="page"] { color: var(--orange); }

.nav-cta {
  background: var(--orange);
  color: var(--on-orange) !important;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-weight: 500 !important;
  transition: background 0.2s !important;
}

.nav-cta:hover { background: var(--orange-hover) !important; color: var(--on-orange) !important; }

/* ── HERO ── */
#hero {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  padding: clamp(104px, 12vh, 132px) 5% clamp(56px, 8vh, 88px);
  overflow: hidden;
}

.hero-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.orb1 {
  width: 600px; height: 600px;
  background: rgba(245,117,31,0.10);
  top: -100px; right: -100px;
}

.orb2 {
  width: 400px; height: 400px;
  background: rgba(245,117,31,0.10);
  bottom: -50px; left: 10%;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(245,117,31,0.12);
  border: 1px solid rgba(245,117,31,0.3);
  color: var(--orange);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}

.hero-tag-dot {
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.hero-headline {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
  text-wrap: balance;
  max-width: 15ch;
}

.hero-headline .accent { color: var(--orange); white-space: nowrap; }
.hero-headline .accent2 { color: var(--white); }

.hero-sub {
  font-size: 1.15rem;
  color: var(--muted2);
  max-width: 520px;
  margin-bottom: 2.5rem;
  line-height: 1.7;
  font-weight: 300;
}

.hero-sub strong { color: var(--white); font-weight: 500; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--orange);
  color: var(--on-orange);
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.9rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  opacity: 0;
  transition: opacity 0.2s;
}

.btn-primary:hover { background: var(--orange-hover); transform: translateY(-1px); box-shadow: 0 8px 30px rgba(245,117,31,0.35); }
.btn-primary:hover::after { opacity: 1; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted2);
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all 0.2s;
}

.btn-secondary:hover { color: var(--white); border-color: rgba(255,255,255,0.2); }

.hero-btns { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* Hero right — stats card */
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s;
}

.stat-card:hover { transform: translateY(-2px); border-color: rgba(245,117,31,0.3); }

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--purple));
  opacity: 0;
  transition: opacity 0.3s;
}

.stat-card:hover::before { opacity: 1; }

.stat-number {
  font-family: 'Outfit', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.03em;
}

.stat-number span { color: var(--orange); }
.stat-label { color: var(--muted2); font-size: 0.9rem; margin-top: 0.2rem; }

.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── SECTION COMMON ── */
section { padding: 100px 5%; }
.section-inner { max-width: 1200px; margin: 0 auto; }

.section-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
}

.section-headline {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.section-sub {
  color: var(--muted2);
  max-width: 560px;
  font-size: 1.05rem;
  font-weight: 300;
}

/* ── PAIN POINTS ── */
#pain { background: var(--navy2); }

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}

.pain-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  transition: all 0.3s;
}

.pain-card:hover { transform: translateY(-4px); border-color: rgba(245,117,31,0.25); }

.pain-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
}

.pain-icon.orange { background: rgba(245,117,31,0.15); }
.pain-icon.purple { background: rgba(110,140,166,0.16); }
.pain-icon.teal   { background: rgba(245,117,31,0.14); }

.pain-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.pain-body { color: var(--muted2); font-size: 0.95rem; line-height: 1.65; }

/* ── WORKFLOW ── */
#workflow { position: relative; }

.workflow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  margin-top: 3.5rem;
}

.flow-steps { display: flex; flex-direction: column; gap: 0; }

.flow-step {
  display: flex;
  gap: 1.5rem;
  position: relative;
  padding-bottom: 2rem;
}

.flow-step:last-child { padding-bottom: 0; }

.flow-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.flow-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.flow-num.orange { background: var(--orange); color: var(--on-orange); }
.flow-num.purple { background: var(--purple); color: var(--white); }
.flow-num.teal   { background: var(--teal);   color: var(--navy); }
.flow-num.green  { background: var(--green);  color: var(--navy); }
.flow-num.gray   { background: var(--border); color: var(--muted2); }

.flow-line {
  width: 2px;
  flex: 1;
  background: var(--border);
  margin: 6px 0;
}

.flow-content { padding-top: 0.6rem; }

.flow-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.flow-sub { color: var(--muted2); font-size: 0.9rem; }

.flow-badge {
  display: inline-block;
  background: rgba(245,117,31,0.12);
  border: 1px solid rgba(245,117,31,0.25);
  color: var(--orange);
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 100px;
  margin-top: 0.4rem;
  font-weight: 500;
}

.flow-feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flow-feature-card h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.feature-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}

.feature-dot.orange { background: var(--orange); }
.feature-dot.purple { background: var(--purple); }
.feature-dot.teal   { background: var(--teal); }
.feature-dot.green  { background: var(--green); }

.feature-text { font-size: 0.92rem; color: var(--muted2); line-height: 1.5; }
.feature-text strong { color: var(--white); font-weight: 500; }

/* ── CRM LOGOS ── */
#crms {
  background: var(--navy2);
  padding-left: 0; padding-right: 0;   /* rows run edge to edge */
  overflow: hidden;
}
#crms .section-inner { padding: 0 5%; }

.crm-section-header { text-align: center; margin-bottom: 3rem; }
.crm-section-header .section-sub { margin: 0 auto; }

.crm-group-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-bottom: 1.25rem;
}

.marquee-row { margin-bottom: 2.75rem; }
.marquee-row:last-of-type { margin-bottom: 0; }

/* Edge fade so chips enter and leave the viewport rather than being cut off */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 0.4rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* Each chip carries its own right margin instead of the track using gap, so
   the duplicated set makes translateX(-50%) land exactly one set along and
   the loop is seamless. */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-left var(--marquee-duration, 40s) linear infinite;
  will-change: transform;
}
.marquee.reverse .marquee-track { animation-name: marquee-right; }

/* Hovering holds the row still so a visitor can actually find their CRM —
   the reason a moving strip is usable here at all. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

@keyframes marquee-left  { from { transform: translateX(0);     } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0);     } }

.crm-chip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  margin-right: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.8rem 1.35rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
  cursor: default;
}

.crm-chip:hover {
  border-color: rgba(245,117,31,0.45);
  background: rgba(245,117,31,0.06);
  transform: translateY(-2px);
}

.crm-chip img.crm-logo {
  width: 32px; height: 32px;
  flex-shrink: 0;
  padding: 3px;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.crm-note {
  margin-top: 3rem;
  text-align: center;
  color: var(--muted2);
  font-size: 0.9rem;
}

/* No motion: fall back to a centred wrapped row and drop the repeated set */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none; mask-image: none;
    overflow: visible;
  }
  .marquee-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .crm-chip.is-dup { display: none; }
  .crm-chip { margin: 0 0.5rem 0.75rem; }
}

/* ── GUIDES / BLOG ── */

/* Breadcrumb is a <nav> for semantics, so it must opt out of the fixed
   site-nav styling that the bare `nav` element selector applies. */
.crumb {
  position: static;
  display: block;
  height: auto;
  padding: 0;
  background: none;
  backdrop-filter: none;
  border-bottom: none;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}
/* Underlined like the article links: colour alone does not mark a link (WCAG 1.4.1) */
.crumb a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.crumb a:hover { color: var(--white); }

.guides-header { text-align: center; margin-bottom: 3.5rem; }
.guides-header .section-sub { margin: 0 auto; }

.guide-grid {
  display: grid;
  /* auto-fit rather than a fixed count: one CRM at launch should not sit in a
     half-empty two-column grid, and adding CRMs needs no CSS change */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
}

.guide-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  transition: all 0.3s;
}

.guide-card:hover { transform: translateY(-4px); border-color: rgba(245,117,31,0.25); }

.guide-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Logos here are not all square (the roofline mark is 340x121): fit, never stretch */
.guide-head .crm-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }

.guide-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.guide-lede {
  color: var(--muted2);
  font-size: 0.95rem;
  font-weight: 300;
  margin-bottom: 1.25rem;
}

.guide-parts { list-style: none; counter-reset: guidepart; }

.guide-parts li {
  counter-increment: guidepart;
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.6rem;
  font-size: 0.92rem;
}

.guide-parts li::before {
  content: counter(guidepart);
  position: absolute;
  left: 0; top: 0.15rem;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: rgba(245,117,31,0.12);
  color: var(--orange);
  font-size: 0.7rem;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-parts a {
  color: var(--muted2);
  text-decoration: none;
  transition: color 0.2s;
}

.guide-parts a:hover { color: var(--orange); }

.guide-title a { color: var(--white); text-decoration: none; transition: color 0.2s; }
.guide-title a:hover { color: var(--orange); }

/* ── HOW IT WORKS ── */
#how {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3.5rem;
  position: relative;
}

.steps-grid::before {
  content: '';
  position: absolute;
  top: 52px;
  left: calc(16.666% + 1rem);
  right: calc(16.666% + 1rem);
  height: 1px;
  background: linear-gradient(90deg, var(--orange), var(--purple));
  opacity: 0.3;
}

.step-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem;
  text-align: center;
  position: relative;
  transition: all 0.3s;
}

.step-card:hover { transform: translateY(-4px); border-color: rgba(245,117,31,0.35); }

.step-num-wrap {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  position: relative;
}

.step-num-wrap.orange { background: rgba(245,117,31,0.15); border: 2px solid rgba(245,117,31,0.4); }
.step-num-wrap.purple { background: rgba(110,140,166,0.16); border: 2px solid rgba(110,140,166,0.42); }
.step-num-wrap.teal   { background: rgba(245,117,31,0.14);  border: 2px solid rgba(245,117,31,0.4); }

.step-num-inner {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
}

.step-num-inner.orange { color: var(--orange); }
.step-num-inner.purple { color: var(--purple); }
.step-num-inner.teal   { color: var(--teal); }

.step-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.step-body { color: var(--muted2); font-size: 0.92rem; line-height: 1.65; }

/* ── CTA SECTION ── */
#cta {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-inner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 5rem 3rem;
  position: relative;
  overflow: hidden;
}

.cta-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(245,117,31,0.08), transparent);
  pointer-events: none;
}

.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.3);
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
  letter-spacing: 0.06em;
}

.cta-headline {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.cta-sub {
  color: var(--muted2);
  font-size: 1.05rem;
  max-width: 520px;
  margin: 0 auto 2.5rem;
  font-weight: 300;
}

.cta-sub strong { color: var(--white); font-weight: 500; }

.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.cta-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 1.25rem;
}

/* ── FOOTER ── */
footer {
  background: var(--navy2);
  border-top: 1px solid var(--border);
  padding: 2.5rem 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--white);
  text-decoration: none;
}

.footer-logo span { color: var(--orange); }
.footer-copy { color: var(--muted); font-size: 0.85rem; }

.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { color: var(--muted2); font-size: 0.85rem; text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--white); }

/* ── ANIMATIONS ── */
.fade-up {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
/* Only hide ahead of the reveal when JS is actually running to bring it back */
html.js .fade-up:not(.visible) {
  opacity: 0;
  transform: translateY(30px);
}
@media (prefers-reduced-motion: reduce) {
  html.js .fade-up:not(.visible) { opacity: 1; transform: none; }
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up-delay-1 { transition-delay: 0.1s; }
.fade-up-delay-2 { transition-delay: 0.2s; }
.fade-up-delay-3 { transition-delay: 0.3s; }
.fade-up-delay-4 { transition-delay: 0.4s; }
.fade-up-delay-5 { transition-delay: 0.5s; }

/* ── HAMBURGER ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  /* it is a <button>: strip the browser's button styling */
  background: none;
  border: 0;
  margin: 0;
  font: inherit;
  color: inherit;
}

.hamburger span {
  width: 24px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all 0.3s;
}

/* ── RESPONSIVE ── */

/* Tablet: keep two columns where the content genuinely supports them */
@media (max-width: 1024px) and (min-width: 901px) {
  .hero-grid { gap: 2.5rem; }
  .hero-headline { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
  section { padding: 88px 6%; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }

  /* The proof numbers used to be display:none below 900px, which threw away
     the strongest credibility signal on the devices most visitors use.
     Below the fold they become a compact horizontal strip instead. */
  .hero-right {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    align-items: stretch;
  }
  .hero-right .stat-row {
    display: contents;              /* let the two inner cards join the strip */
  }
  .hero-right > .stat-card:last-child {
    grid-column: 1 / -1;            /* availability note spans the full width */
  }
  .hero-right .stat-card { padding: 1rem 1.1rem; }
  .hero-right .stat-number { font-size: 1.9rem; }
  .hero-right .stat-label { font-size: 0.82rem; line-height: 1.45; }
  .pain-grid { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; }
  .workflow-grid { grid-template-columns: 1fr; gap: 3rem; }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid::before { display: none; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  section { padding: 70px 5%; }
}

/* ── MOBILE FONT SWITCH (≤600px) ──
   Desktop keeps Syne (heavy, dramatic, great at large sizes on big screens).
   Mobile switches all display headings to Outfit — wider letterforms,
   more open at small sizes, far easier to read on a 390px screen.
   Body copy (DM Sans) and UI elements stay unchanged everywhere.
──────────────────────────────────── */
@media (max-width: 600px) {

  /* Stat cards: two-up on phones, three across is too tight at 390px */
  .stat-row { grid-template-columns: 1fr; }
  .hero-right { grid-template-columns: repeat(2, 1fr); }
  .hero-right .stat-number { font-size: 1.65rem; }
  .hero-right > .stat-card:first-child { grid-column: 1 / -1; }
  .marquee-row { margin-bottom: 2rem; }
  .crm-chip { padding: 0.7rem 1.1rem; font-size: 0.9rem; }

  /* ── HERO headline ── */
  .hero-headline {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 2.05rem;
    line-height: 1.14;
    letter-spacing: -0.015em;
    max-width: none;
  }

  /* ── All section headlines ── */
  .section-headline {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.9rem;
    line-height: 1.18;
    letter-spacing: -0.01em;
  }

  /* ── CTA headline ── */
  .cta-headline {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  /* ── Card & flow titles ── */
  .pain-title,
  .flow-title,
  .step-title,
  .flow-feature-card h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: 0em;
  }

  /* ── Stat numbers ── */
  .stat-number {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    letter-spacing: -0.02em;
  }

  /* ── Step number badges ── */
  .step-num-inner {
    font-family: 'Outfit', sans-serif;
  }

  /* ── Nav logo & footer logo ── */
  .nav-logo,
  .footer-logo {
    font-family: 'Outfit', sans-serif;
  }

  /* Smaller lockup on phones so it clears the hamburger at 390px. */
  .nav-logo .logo { height: 40px; }
  .footer-logo .logo { height: 36px; }

  /* ── Flow step numbers ── */
  .flow-num {
    font-family: 'Outfit', sans-serif;
  }

  /* ── Tighten section padding on small screens ── */
  section { padding: 56px 5%; }
  #hero { padding: 100px 5% 60px; }

  /* ── CTA inner padding ── */
  .cta-inner { padding: 3rem 1.5rem; }

  /* ── Pain cards slightly less padding ── */
  .pain-card { padding: 1.5rem; }

  /* ── Step cards slightly less padding ── */
  .step-card { padding: 1.5rem; }

  /* ── Body text slightly smaller ── */
  body { font-size: 15px; }

  /* ── Buttons full width on tiny screens ── */
  .hero-btns { flex-direction: column; align-items: flex-start; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }

  /* ── CTA buttons stack ── */
  .cta-btns { flex-direction: column; align-items: center; }
  .cta-btns .btn-secondary { width: auto; }
}
/* ── GUIDES DROPDOWN ── */
.nav-links li { position: relative; }
.nav-guides { position: relative; }
.nav-guides > a { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-guides > a svg { width: 10px; height: 10px; transition: transform 0.2s; }
.nav-guides:hover > a svg,
.nav-guides:focus-within > a svg { transform: rotate(180deg); }

/* hover bridge across the gap between the link and the panel */
.nav-guides::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 30px; }

.nav-dropdown {
  /* Sits under the Guides item itself. It used to be centred on the whole nav
     bar so a four-column panel could not overflow; with one CRM the panel is
     narrow and centring just stranded it in the middle of the screen. */
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(300px, 92vw);
  max-width: calc(100vw - 2rem);
  background: rgba(27,25,23,0.98);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 120;
}
.nav-guides:hover .nav-dropdown,
.nav-guides:focus-within .nav-dropdown,
.nav-guides.is-open .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* The panel is far wider than the Guides item, so travelling diagonally to an
   outer column would otherwise leave the item's hover area and shut the menu.
   This strip spans the whole bar across the gap between the item and the panel.
   It only becomes interactive when the panel does, inheriting pointer-events. */
.nav-dropdown::before {
  content: '';
  position: absolute;      /* the panel's transform is its containing block */
  left: 0; right: 0;
  top: -28px; height: 28px;
}

.nav-dd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.25rem; }
.nav-dd-col { min-width: 0; }
.nav-dd-head {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.88rem;
  color: var(--white) !important;
  margin-bottom: 0.6rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.nav-dd-head img {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 5px; background: #fff; padding: 2px; object-fit: contain;
}
.nav-dd-col a:not(.nav-dd-head) {
  display: block; font-size: 0.82rem; line-height: 1.45;
  color: var(--muted2); padding: 0.28rem 0;
}
.nav-dd-col a:not(.nav-dd-head):hover { color: var(--orange); }
.nav-dd-all {
  display: block; margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem; font-weight: 500;
  color: var(--orange) !important;
}

@media (max-width: 900px) {
  /* inside the hamburger menu the panel sits inline and expands on tap */
  .nav-dropdown {
    position: static; transform: none; width: 100%;
    display: none; opacity: 1; visibility: visible; pointer-events: auto;
    background: none; border: none; box-shadow: none;
    backdrop-filter: none; padding: 0.6rem 0 0.2rem;
  }
  .nav-guides.open .nav-dropdown { display: block; }
  .nav-guides:hover .nav-dropdown,
  .nav-guides:focus-within .nav-dropdown { transform: none; }
  .nav-guides.open > a svg { transform: rotate(180deg); }
  .nav-guides::after { display: none; }
  .nav-dd-grid { grid-template-columns: 1fr; gap: 0.15rem; }
  /* only the four series headings on mobile — 16 links is too long */
  .nav-dd-col a:not(.nav-dd-head) { display: none; }
  .nav-dd-head {
    margin: 0; padding: 0.45rem 0 0.45rem 0.9rem;
    border-bottom: none; font-size: 0.85rem; font-weight: 600;
  }
  .nav-dd-all { margin-top: 0.5rem; padding: 0.5rem 0 0 0.9rem; border-top: none; }
}

/* two columns where a four-across panel would crowd */
@media (max-width: 1150px) and (min-width: 901px) {
  .nav-dd-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.1rem 1.5rem; }
  .nav-dropdown { width: min(300px, 92vw); }
}

/* ── SCROLLBAR ── */
/* Firefox */
html { scrollbar-width: thin; scrollbar-color: var(--orange) var(--navy2); }

/* WebKit / Chromium — applies to the page and to any inner scroll area
   such as the wide tables inside articles */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--navy2); }
::-webkit-scrollbar-thumb {
  background: var(--orange);
  border-radius: 8px;
  border: 3px solid var(--navy2);
}
::-webkit-scrollbar-thumb:hover { background: var(--orange2); }
::-webkit-scrollbar-corner { background: var(--navy2); }

/* ══════════════════════════════════════════════════════════════════
   PROSE PAGES  (/about/, /audit/)
   Long-form content pages. Constrained measure, styled links and
   lists — without this they inherit browser defaults and read as a
   raw document rather than part of the site.
   ══════════════════════════════════════════════════════════════════ */

.prose {
  max-width: 68ch;            /* keeps lines readable instead of 1250px wide */
  margin: 0 auto;
}

.prose > * + * { margin-top: 1.1rem; }

.prose h1 {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-top: 0.6rem;
}

.prose h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.prose h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--white);
  margin-top: 1.9rem;
}

.prose p, .prose li { color: var(--muted2); }
.prose strong { color: var(--white); font-weight: 600; }

/* The lede: first paragraph carries more weight than the rest */
.prose > p:first-of-type {
  font-size: 1.15rem;
  color: var(--white);
  line-height: 1.6;
}

.prose ul, .prose ol { padding-left: 1.25rem; margin-top: 0.9rem; }
.prose li { margin-bottom: 0.5rem; }
.prose li::marker { color: var(--orange); }

/* Inline links were rendering as browser-default blue */
.prose a:not(.btn-primary):not(.btn-secondary) {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s;
}
.prose a:not(.btn-primary):not(.btn-secondary):hover { color: var(--white); }

.prose .btn-primary, .prose .btn-secondary { margin-top: 0.4rem; }

/* Ordered step list on /audit/ reads as a sequence, not a bullet dump */
.prose ol.steps { list-style: none; padding-left: 0; counter-reset: step; }
.prose ol.steps li {
  counter-increment: step;
  position: relative;
  padding: 0.9rem 1rem 0.9rem 3.1rem;
  margin-bottom: 0.7rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.prose ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 1rem; top: 0.9rem;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.8rem;
  color: var(--orange);
  background: rgba(245,117,31,0.14);
  border-radius: 6px;
}

@media (max-width: 600px) {
  .prose h2 { margin-top: 2.1rem; }
  .prose > p:first-of-type { font-size: 1.05rem; }
}

/* Author byline — a real face and name is the E-E-A-T signal on a solo site */
.byline {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--border);
}
.byline img {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.byline div { display: flex; flex-direction: column; gap: 0.15rem; }
.byline-name {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 1.05rem; color: var(--white);
}
.byline-role { font-size: 0.88rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 600px) {
  .byline img { width: 60px; height: 60px; }
  .byline-role { font-size: 0.82rem; }
}

/* ── GUIDE TILES ──
   One card per guide. The old layout wrapped all four links inside a single
   CRM card, which made sense when four CRMs sat side by side; with one CRM it
   left a lone card stranded beside a centred heading. ── */
.guide-tile {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.guide-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(245,117,31,0.45);
  background: #2F2A27;
}
.guide-tile-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--orange);
}
.guide-tile-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.25;
  color: var(--white);
}
.guide-tile-lede { font-size: 0.92rem; line-height: 1.55; color: var(--muted2); }
.guide-tile:hover .guide-tile-title { color: var(--orange); }

/* ── WHO BUILDS IT ──
   Was centred text stranded in whitespace. Now a portrait beside the claim,
   with the three facts a sceptical owner actually checks. ── */
.who-band {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 2.5rem;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2.25rem 2.5rem;
  max-width: 980px;
  margin: 0 auto;
}
.who-portrait img {
  width: 160px; height: 160px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid var(--border);
}
.who-body { display: flex; flex-direction: column; gap: 0.85rem; align-items: flex-start; }
.who-headline {
  font-family: 'Outfit', sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.14; letter-spacing: -0.02em; color: var(--white);
  margin: 0;
}
.who-lede { color: var(--muted2); font-size: 1rem; line-height: 1.65; margin: 0; }
.who-proof {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1.75rem;
  list-style: none; padding: 0.9rem 0 0.3rem; margin: 0;
  border-top: 1px solid var(--border);
  width: 100%;
}
.who-proof li { display: flex; flex-direction: column; gap: 0.15rem; }
.who-proof strong {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 1.3rem; color: var(--orange); line-height: 1;
}
.who-proof span { font-size: 0.83rem; color: #9E948C; line-height: 1.4; }  /* --muted is 4.38:1 on the card; this is 5.04:1 */

@media (max-width: 900px) {
  .who-band { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem; }
  .who-portrait img { width: 96px; height: 96px; }
}
@media (max-width: 600px) {
  .who-proof { grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
  .who-proof li:last-child { grid-column: 1 / -1; }
}

/* ── LINK FALLBACK ──
   Specificity 0-0-1, so every component rule still wins. This exists so a link
   added anywhere later cannot land on the browser default blue, which is what
   the email link in the closing CTA was doing. ── */
a { color: var(--orange); }
a:hover { color: var(--white); }

.cta-note a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.cta-note a:hover { color: var(--orange); }

/* ══════════════════════════════════════════════════════════════════
   QUOTE FORM
   ══════════════════════════════════════════════════════════════════ */
.quote-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem;
  margin: 1.75rem 0 2.5rem;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field label {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: 0.86rem; color: var(--white);
}
.field .opt { font-weight: 400; color: #9E948C; font-size: 0.8rem; }  /* --muted is 4.37:1 on the form card */
.quote-form .req { color: var(--orange); font-weight: 700; }

.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.98rem;
  color: var(--white);
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.2s, background 0.2s;
}
.quote-form textarea { resize: vertical; line-height: 1.6; min-height: 120px; }
.quote-form input::placeholder,
.quote-form textarea::placeholder { color: var(--muted); }

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--navy);
}
/* keyboard users must still get a visible ring */
.quote-form input:focus-visible,
.quote-form select:focus-visible,
.quote-form textarea:focus-visible,
.quote-form button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.quote-form [aria-invalid="true"] { border-color: #E0705F; }

.field-hint { font-size: 0.84rem; color: var(--muted); margin: 0; line-height: 1.5; }
.quote-form .btn-primary { align-self: flex-start; margin-top: 0.3rem; }

.form-status { font-size: 0.9rem; margin: 0; min-height: 1.2em; }
.form-status.is-error { color: #E0705F; }
.form-status.is-ok { color: var(--green); }

/* Replaces the form once the enquiry is sent */
.form-sent {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--orange);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  margin: 1.75rem 0 2.5rem;
  animation: form-sent-in 0.35s ease-out;
}
.form-sent:focus { outline: none; }
.form-sent[hidden], .quote-form[hidden] { display: none; }
.form-sent-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: rgba(87, 160, 106, 0.15); color: var(--green);
  font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem;
}
.prose .form-sent h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.form-sent p { color: var(--muted2); }
.form-sent strong { color: var(--white); word-break: break-all; }
.form-sent-again {
  margin-top: 0.5rem;
  font: 600 0.92rem 'Outfit', sans-serif;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.form-sent-again:hover { border-color: var(--orange); color: var(--orange); }
.form-sent-again:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@keyframes form-sent-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .form-sent { animation: none; } }

/* honeypot: off-screen for people, still filled by naive bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .quote-form { padding: 1.25rem; }
}

/* The quote request is the alternative route, not a rival to the call */
.cta-alt {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.6;
}
.cta-alt a { color: var(--white); text-decoration: underline; text-underline-offset: 0.18em; }
.cta-alt a:hover { color: var(--orange); }

/* ── FAQ ── */
#faq { background: var(--navy); }
.faq-list { max-width: 820px; margin: 3rem auto 0; display: grid; gap: 0.85rem; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.2s;
}
.faq-item[open], .faq-item:hover { border-color: rgba(245,117,31,0.35); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 3.25rem 1.15rem 1.4rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--white);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute; right: 1.4rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--orange);
  transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 14px; }
.faq-item p { padding: 0 1.4rem 1.25rem; margin: 0; color: var(--muted2); line-height: 1.7; }
@media (max-width: 600px) {
  .faq-item summary { padding: 1rem 3rem 1rem 1.1rem; font-size: 0.97rem; }
  .faq-item p { padding: 0 1.1rem 1.1rem; }
}