/* ============================================================
   Mindful Digital — stylesheet
   Palette derived from the approved mockup.
   ============================================================ */

:root {
  --navy:        #02101F;
  --navy-soft:   #1D3E60;
  --cream:       #FCF7EC;
  --paleblue:    #E2EAF4;
  --orange:      #E86C42;
  --orange-dark: #CE5730;
  --coral:       #FF8A5C;  /* lighter accent for orange text on dark navy (WCAG AA) */
  --slate:       #5A6B7D;
  --slate-light: #8496A6;
  --hairline:    #D6DEE8;
  --white:       #FFFFFF;

  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --maxw: 1120px;
  --gutter: 24px;
  /* Distance from the viewport edge to the content column, matching .wrap.
     Lets a full-bleed element pad itself back to the content edge. */
  --page-gutter: max(24px, calc((100vw - 1120px) / 2 + 24px));
  --radius: 10px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 600;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--orange-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}

strong { color: var(--navy); font-weight: 600; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.narrow { max-width: 760px; }
/* Centred reading measure. `.narrow` alone is left-aligned, which leaves a third
   of a full-width section empty beside the text and reads as a broken column. */
.prose-measure { max-width: 62ch; margin-left: auto; margin-right: auto; }

/* ---------- Sections ---------- */

section { padding: 84px 0; }
.sec-cream   { background: var(--cream); }
.sec-blue    { background: var(--paleblue); }
/* Default slate body text is low-contrast on pale-blue — darken it here. */
.sec-blue p, .sec-blue li { color: #33434F; }
.sec-navy    { background: var(--navy); }
.sec-navy h2, .sec-navy h3 { color: var(--white); }
.sec-navy p  { color: #B9CADA; }
/* Orange accent is too dark on navy — use the lighter coral for text on dark. */
.sec-navy .eyebrow { color: var(--coral); }
.sec-navy a:not(.btn) { color: var(--coral); }
.sec-white   { background: var(--white); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 14px;
}

.sec-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.sec-head p { font-size: 1.06rem; }
.sec-head.left { margin-left: 0; text-align: left; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 24px;
  border-radius: 6px;
  border: 1.5px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  text-decoration: none !important;
  cursor: pointer;
}
.btn-primary { background: var(--orange); color: var(--white); }
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--white); }
.btn-light { background: var(--white); color: var(--navy); }
.btn-light:hover { background: var(--paleblue); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

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

header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(252,247,236,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--navy);
  letter-spacing: -0.02em;
  /* The brand is a flex sibling of the nav list, so by default it shrinks to make
     room and "Mindful Digital" breaks onto two lines. It is the logo: never wrap it. */
  flex-shrink: 0;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  display: grid; place-items: center;
}
.brand .mark::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--navy);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
}
/* Multi-word items such as "IT Team Partnership" break onto two lines once the
   bar is full, which staggers the row. Keep each item on one line. */
.nav-links a { white-space: nowrap; }
.nav-links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--navy);
}
.nav-links a:hover { color: var(--orange-dark); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--orange-dark); }
/* Primary button in the nav keeps white text (the rule above would turn it navy). */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover { color: var(--white); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

/* Below ~960px the five-item bar plus the call button no longer fits the content
   column, so hand over to the menu button here rather than let it overflow. */
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--hairline);
    padding: 8px 24px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links li { padding: 10px 0; }
  .nav-links .btn { text-align: center; margin-top: 8px; }
}

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

.hero { padding: 96px 0 88px; background: var(--cream); }
.hero-grid,
.hero .wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.hero-figure { display: flex; justify-content: center; }
.hero-figure video { border-radius: 12px; }
.hero-figure img { width: 100%; height: auto; border-radius: 12px; }
.hero p.lede { font-size: 1.14rem; max-width: 46ch; }

/* Service-page hero: no figure, so the text runs as a single column. */
.hero--solo .wrap { grid-template-columns: 1fr; }
.hero--solo p.lede { max-width: 62ch; }
.hero-note {
  margin-top: 26px;
  font-size: 0.88rem;
  color: var(--slate-light);
}
/* A hero note that carries a message rather than fine print: readable body size,
   full-strength text, and a coral rule to draw the eye. */
.hero-note--lead {
  font-size: 1.06rem;
  line-height: 1.5;
  color: var(--navy);
  max-width: 46ch;
  padding-left: 16px;
  border-left: 3px solid var(--orange);
}

@media (max-width: 900px) {
  .hero-grid,
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 60px 0 64px; }
}

/* ---------- Constellation (signature) ---------- */

.constellation { width: 100%; max-width: 360px; height: auto; overflow: visible; }
.cn-line {
  stroke: var(--slate-light);
  stroke-width: 1.2;
  opacity: 0;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw 0.9s ease forwards;
}
.cn-node {
  fill: var(--navy);
  opacity: 0;
  animation: settle 0.7s cubic-bezier(.34,1.3,.5,1) forwards;
}
.cn-hub {
  fill: var(--orange);
  opacity: 0;
  animation: pop 0.7s cubic-bezier(.34,1.4,.5,1) 1.5s forwards;
}
.cn-label {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--slate);
  opacity: 0;
  animation: fadein 0.5s ease forwards;
}
.cn-hublabel {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  fill: var(--navy);
  opacity: 0;
  animation: fadein 0.6s ease 1.9s forwards;
}

@keyframes settle { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes pop    { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes draw   { from { opacity: 0; stroke-dashoffset: 200; } to { opacity: 0.5; stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .cn-line   { opacity: 0.5; stroke-dashoffset: 0; }
  .cn-node, .cn-hub, .cn-label, .cn-hublabel { opacity: 1; }
}

/* ---------- Cards / grids ---------- */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 28px;
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.96rem; margin: 0; }
.card .quote {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.35;
  margin: 0 0 10px;
}
.card .quote::before { content: '“'; }
.card .quote::after  { content: '”'; }

/* What we build: service cards (icon, name, lead line, body) */
.svc-icon {
  display: block;
  width: 34px;
  height: 34px;
  color: var(--orange);
  margin-bottom: 16px;
}
.card .svc-lead {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 12px;
}
.card h3:has(+ .svc-lead) { margin-bottom: 3px; }

.sec-navy .card {
  background: var(--navy-soft);
  border-color: rgba(255,255,255,0.12);
}
.sec-navy .card p { color: #B9CADA; }

/* People cards (portrait, name, role, body) */
.person-photo {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--hairline);
  margin-bottom: 18px;
}
.person h3 { margin-bottom: 2px; }
.person-role {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--orange-dark);
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}
.person p + p { margin-top: 12px; }

/* ---------- Carousel ---------- */

/* Scroll-snap track. Without JS it still scrolls by touch, trackpad and
   keyboard, so the arrows are an enhancement rather than the only way through. */
.carousel { position: relative; }
.carousel-nav { display: none; gap: 10px; justify-content: flex-end; margin-bottom: 18px; }
.js .carousel-nav { display: flex; }
.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.carousel-btn:hover:not(:disabled) { background: var(--navy); color: var(--white); }
.carousel-btn:disabled { opacity: 0.28; cursor: default; }
/* Full-bleed track: negative margins pull it out of .wrap to the viewport edges
   and matching padding puts the first and last cards back on the content column,
   so the scrollable area uses the full width but the cards still line up with the
   rest of the page. Sized off --page-gutter rather than 100vw, which would
   overflow by the width of a visible scrollbar. scroll-padding must be a length,
   not a percentage: percentages there resolve against the scroll container itself,
   which silently cancels the padding and snaps the first card to the edge. */
.carousel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin-left: calc(-1 * var(--page-gutter));
  margin-right: calc(-1 * var(--page-gutter));
  /* Vertical padding leaves room for focus rings, which a clipped track would cut off. */
  padding: 4px var(--page-gutter) 18px;
  scroll-padding-left: var(--page-gutter);
}
.carousel-track > * {
  flex: 0 0 320px;
  scroll-snap-align: start;
}
.carousel-track:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
@media (max-width: 560px) {
  .carousel-track > * { flex-basis: 82%; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}

/* Project shots. No crop and no fixed ratio: each image keeps its own
   proportions, so a row can have uneven heights by design. align-items:start
   stops the grid stretching the shorter ones. */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 24px;
}
.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
}
@media (max-width: 860px) {
  .shot-grid { grid-template-columns: 1fr; }
}

/* Customer example cards (logo, name, sector tag, what we built, result).
   Flex column so the result block sits on the card's bottom edge and lines up
   across a row, whatever length the description runs to. */
.ex-card { display: flex; flex-direction: column; }
/* Fixed height on every card, whatever shape the logo is, so a tall mark and a
   wide wordmark take the same vertical space and everything below stays aligned.
   Left-aligned to the card's text. */
.ex-logo-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 80px;
  margin-bottom: 16px;
  overflow: hidden;
}
/* Capping height alone let a 3.5:1 wordmark render at 3.5x the area of a square
   mark, so the square ones read as tiny. Both axes are capped instead, so each
   logo is limited by its own long edge: wordmarks hit the width cap, square marks
   hit the height cap and get to use the full height. The box is taller than the
   height cap, and that difference is the padding keeping logos off the edges. */
.ex-logo {
  max-height: 72px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ex-card h3 { margin-bottom: 4px; }
.ex-tag {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 12px;
}
/* `.card.ex-card`, not `.ex-card`: `.card .stat` sets margin-top:20px later in
   this file at equal specificity, so it would win and strand the figure just
   below the description instead of on the card's bottom edge. */
.card.ex-card .stat { margin-top: auto; }
/* One fixed size for every result figure, so the numbers match across cards.
   The shared .stat-fig uses a vw-based clamp, which belongs on the wide stat
   rows, not in a fixed-width card. */
.card.ex-card .stat-fig { font-size: 2.4rem; margin: 0 0 8px; }
.card.ex-card .stat-cap { font-size: 0.96rem; margin: 0; }
/* `.card p` sets margin:0 at higher specificity, so the note needs `.card`
   in the selector or it never gets pushed to the bottom. */
.card.ex-card .ex-note {
  margin: auto 0 0;
  padding-top: 18px;
  border-top: 2px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--navy);
}
/* A note is one line where a stat is a number over a label, so left alone its
   divider would sit lower than its neighbours'. Both blocks are bottom-anchored
   and share this height, which puts every divider on the same line. Matches the
   rendered stat block: 18px padding + 2.4rem figure + 8px + 0.96rem label. */
.card.ex-card .stat,
.card.ex-card .ex-note {
  box-sizing: border-box;
  min-height: 5.85rem;
}

/* ---------- Service list ---------- */

.services { border-top: 1px solid var(--hairline); }
.service {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  padding: 30px 0;
  border-bottom: 1px solid var(--hairline);
}
.service h3 { margin: 0; }
.service p { margin: 0; font-size: 0.98rem; }
@media (max-width: 760px) {
  .service { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Comparison table ---------- */

.compare {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.95rem;
}
.compare th, .compare td {
  text-align: left;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.compare thead th {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-light);
  font-weight: 700;
  background: var(--paleblue);
}
.compare tbody th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  font-size: 1rem;
  width: 25%;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: none; }
.compare tr.us { background: #FFF6F2; }
.compare tr.us th { color: var(--orange-dark); }

.table-scroll { overflow-x: auto; }
@media (max-width: 760px) {
  .compare { min-width: 640px; }
}

/* ---------- Pricing ---------- */

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; } }
.price {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
}
.price.feature { border-color: var(--orange); border-width: 2px; }
.price .tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}
.price .figure {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 4px 0 4px;
}
.price .figure small { font-size: 0.9rem; font-weight: 400; color: var(--slate); letter-spacing: 0; }
.price ul { list-style: none; margin: 16px 0 0; padding: 0; font-size: 0.94rem; }
.price li { padding: 7px 0 7px 22px; position: relative; }
.price li::before {
  content: '';
  position: absolute; left: 0; top: 15px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
}

/* ---------- Steps ---------- */

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 28px 56px;
  border-left: 1px solid var(--hairline);
  margin-left: 16px;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: -16px; top: -2px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paleblue);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  display: grid; place-items: center;
}
.steps h3 { margin-bottom: 4px; font-size: 1.05rem; }
.steps p { margin: 0; font-size: 0.96rem; }

/* ---------- Key findings ---------- */

.findings {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  padding: 30px 32px;
  margin: 0 0 48px;
}
.findings h2 { font-size: 1.15rem; margin-bottom: 14px; }
.findings ul { margin: 0; padding-left: 20px; }
.findings li { margin-bottom: 10px; font-size: 0.98rem; }
.findings li:last-child { margin-bottom: 0; }

/* ---------- Prose (content pages) ---------- */

.prose h2 { margin-top: 48px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 32px; font-size: 1.1rem; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1.2em; }
.prose li { margin-bottom: 8px; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: 0.95rem;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.prose th, .prose td { padding: 12px 16px; border-bottom: 1px solid var(--hairline); text-align: left; }
.prose thead th { background: var(--paleblue); color: var(--navy); font-weight: 600; }
.prose tbody tr:last-child td { border-bottom: none; }

.page-head { padding: 72px 0 40px; background: var(--paleblue); }
/* Cream hero, matching the homepage, for pages that follow its section order.
   Two classes so it beats the pale-blue default regardless of source order. */
.page-head.is-cream { background: var(--cream); }
.page-head h1 { max-width: 20ch; }
.page-head p { font-size: 1.08rem; max-width: 60ch; margin-top: 16px; color: #33434F; }

.callout {
  background: var(--paleblue);
  border-radius: var(--radius);
  padding: 26px 30px;
  margin: 32px 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout p, .callout li { color: #33434F; }

/* ---------- CTA band ---------- */

/* The band sits directly above the navy footer, so it cannot be navy itself or
   the two merge into one dark block. Orange also separates it from whichever
   section precedes it, which is cream on some pages and white or pale-blue on
   others. Note: white on --orange measures 3.16:1, so the heading clears AA at
   large-text sizes but the body copy sits below the 4.5:1 threshold. */
.cta-band { background: var(--orange); color: var(--white); padding: 76px 0; text-align: center; }
.cta-band .eyebrow { color: var(--white); }
.cta-band h2 { color: var(--white); max-width: 20ch; margin: 0 auto 16px; }
.cta-band p { color: var(--white); max-width: 52ch; margin: 0 auto 28px; }
.cta-band .btn-row { justify-content: center; margin-top: 0; }
/* An orange button would disappear into the band, so the primary button renders
   white here. Done in CSS to keep the CTA markup identical across every page. */
.cta-band .btn-primary { background: var(--white); color: var(--navy); }
.cta-band .btn-primary:hover { background: var(--paleblue); }

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

footer.site {
  background: var(--navy);
  color: #93A8BC;
  padding: 56px 0 40px;
  font-size: 0.9rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
footer.site a { color: #D6E1EC; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } }
footer.site .brand { color: var(--white); margin-bottom: 12px; }
footer.site .brand .mark { border-color: var(--white); }
footer.site .brand .mark::after { background: var(--white); }
footer.site h4 {
  color: var(--white);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-body);
  margin-bottom: 14px;
}
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { margin-bottom: 9px; }
.foot-base {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.84rem;
  color: #6D8399;
}

/* ---------- Utility ---------- */

.skip {
  position: absolute;
  left: -9999px;
  background: var(--navy);
  color: var(--white);
  padding: 12px 18px;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

.muted { color: var(--slate-light); font-size: 0.88rem; }
.center { text-align: center; }
/* Inline accent for a phrase inside a heading. `--orange-dark`, not `--orange`:
   on cream the lighter token lands at 2.95:1, just under the 3:1 AA floor for
   large text. On navy use `--coral` instead, per the accent rule. */
.accent { color: var(--orange-dark); }
.sec-navy .accent { color: var(--coral); }
/* Keep on one line from tablet up; still wraps on narrow phones to avoid overflow. */
@media (min-width: 760px) { .nowrap-md { white-space: nowrap; } }

/* ============================================================
   Component styles (method, calc, stats, trap, door, faq,
   eligibility, reveal). Restored — these were missing.
   ============================================================ */

/* ---------- Scroll reveal ---------- */
/* Only hide when JS is present; without JS everything stays visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.in { opacity: 1; transform: none; }

.js-only { display: none; }
.js .js-only { display: block; }

/* ---------- Method / trap (numbered blocks) ---------- */

.method, .trap {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 28px;
  align-items: start;
  padding: 30px 0;
  border-top: 1px solid var(--hairline);
}
.method:last-child, .trap:last-child { border-bottom: 1px solid var(--hairline); }
.method-num, .trap-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--orange);
  line-height: 1;
  margin: 0;
}
.method h3, .trap h3 { margin-bottom: 2px; }
.method-lead {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 0.9em;
}
@media (max-width: 640px) {
  .method, .trap { grid-template-columns: 1fr; gap: 10px; }
  .method-num, .trap-num { font-size: 1.8rem; }
}

/* ---------- Stat row ---------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr; gap: 24px; } }
.stat { padding-top: 18px; border-top: 2px solid var(--hairline); }
.stat--bad { border-top-color: var(--orange); }
.stat-fig {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 8px;
}
.stat-cap { font-size: 0.96rem; margin: 0; }

/* A stat used as a result figure inside a card. `.card p` would otherwise
   out-specify .stat-fig and shrink the figure to body size. */
.card .stat { margin-top: 20px; }
.card .stat-fig { font-size: clamp(2rem, 4vw, 2.7rem); margin: 0 0 8px; }
.stat--onnavy { border-top-color: rgba(255,255,255,0.18); }
.stat--onnavy.stat--bad { border-top-color: var(--orange); }
.stat--onnavy .stat-fig { color: var(--white); }
.stat--onnavy .stat-cap { color: #B9CADA; }
.stat--onnavy.stat--bad .stat-fig { color: var(--coral); }

/* ---------- Cost calculator ---------- */

.calc {
  display: none;                 /* revealed only when JS is present */
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 34px;
}
.js .calc.js-only { display: grid; }
@media (max-width: 760px) { .calc { grid-template-columns: 1fr; gap: 30px; } }

.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-weight: 600;
  color: var(--navy);
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.field .val { float: right; color: var(--orange-dark); font-weight: 600; }
.field input[type="range"] { width: 100%; accent-color: var(--orange); }

.calc-band {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  font-size: 1.05rem;
  margin: 0 0 14px;
}
.calc-split dl, .calc-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: baseline;
}
.calc-split dt, .calc-dl dt { margin: 0; color: var(--slate); font-size: 0.94rem; }
.calc-split dd, .calc-dl dd {
  margin: 0;
  text-align: right;
  color: var(--navy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.calc-split dl dt:last-of-type, .calc-split dl dd:last-of-type,
.calc-dl dt:last-of-type, .calc-dl dd:last-of-type {
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
  margin-top: 4px;
}
dd.hero-num { font-family: var(--font-display); font-size: 1.2rem; color: var(--orange-dark); }
.calc-note { font-size: 0.85rem; color: var(--slate-light); }

.calc-out {
  background: var(--paleblue);
  border-radius: var(--radius);
  padding: 26px;
  align-self: start;
}
.calc-gap { margin-top: 22px; padding-top: 20px; border-top: 2px solid var(--orange); }
.calc-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 6px;
}
.calc-figure {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0;
}
.calc-sub { font-size: 0.9rem; color: var(--slate); margin: 6px 0 0; }
.calc-aside { font-size: 0.88rem; color: var(--slate); margin: 16px 0 0; }

/* ---------- Cost comparison table (hire vs build) ---------- */

.cost-table-wrap { overflow-x: auto; }
.cost-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.98rem;
}
.cost-table th, .cost-table td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--hairline);
  text-align: right;
  vertical-align: middle;
}
.cost-table thead th {
  background: var(--paleblue);
  vertical-align: bottom;
  text-align: center;
}
.cost-table thead th:first-child { background: var(--paleblue); }
.cost-table tbody th[scope="row"] { text-align: left; font-weight: 600; }
.cost-table tbody tr:last-child th,
.cost-table tbody tr:last-child td { border-bottom: none; }
.cost-table td { color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }

.ct-size, .ct-who {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
}
.ct-size { font-size: 1.02rem; }
.ct-who  { font-size: 1.05rem; }
.ct-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--slate-light);
}

/* The "Us" row is the hero: bold coral figures, larger. */
.ct-us .ct-who { color: var(--orange-dark); }
.ct-us .ct-fig {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--orange-dark);
}
.ct-us .ct-time {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--slate);
}

.ct-foot {
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--slate-light);
}

/* On narrow screens each pricing tier stacks into its own labelled block. */
@media (max-width: 640px) {
  .cost-table, .cost-table thead, .cost-table tbody,
  .cost-table tr, .cost-table th, .cost-table td { display: block; width: 100%; }
  .cost-table { border-radius: var(--radius); }
  .cost-table thead { display: none; }
  .cost-table tbody tr {
    border-bottom: 1px solid var(--hairline);
    padding: 6px 0;
  }
  .cost-table tbody tr:last-child { border-bottom: none; }
  .cost-table tbody th[scope="row"] {
    border-bottom: none;
    padding: 16px 22px 8px;
  }
  .cost-table td {
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 6px 22px;
    text-align: right;
  }
  .cost-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--slate);
    text-align: left;
  }
  .ct-us .ct-fig { font-size: 1.3rem; }
}

/* ---------- Card number badge ---------- */

.card-num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--orange);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #FCEBE3;
  display: grid; place-items: center;
  margin: 0 0 16px;
}

/* ---------- Funding doors ---------- */

.door {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 44px;
  align-items: start;
  padding: 44px 0;
  border-top: 1px solid var(--hairline);
}
.door:last-child { border-bottom: 1px solid var(--hairline); }
.door-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--orange);
}
.door h2 { margin-top: 0; }
.door .btn { margin-top: 8px; margin-right: 10px; }
@media (max-width: 720px) {
  .door { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- Muted tag / labels ---------- */

.muted-tag {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate-light);
  margin: 0 0 12px;
}

/* ---------- Pull quote ---------- */

.quote-block {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 44px;
  text-align: center;
}
.quote-big {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
  margin: 0;
}

/* ---------- FAQ (details/summary) ---------- */

.faq-nav {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 44px;
}
.faq-nav ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.faq-nav li { margin: 0; }
.faq-nav a { font-size: 0.92rem; }

.faq { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex: none;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--orange);
}
.faq[open] summary::after { content: '\2013'; }
.faq-body { padding: 0 0 20px; }
.faq-body > :first-child { margin-top: 0; }

/* ---------- Eligibility checker ---------- */

.elig {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 30px 32px;
  margin: 28px 0;
}
.elig fieldset { border: none; margin: 0 0 24px; padding: 0; }
.elig legend {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy);
  font-size: 1.02rem;
  padding: 0;
  margin-bottom: 12px;
}
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--hairline);
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 0.95rem;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.opt:hover { border-color: var(--slate-light); }
.opt input { accent-color: var(--orange); }
.opt:has(input:checked) { border-color: var(--orange); background: #FFF6F2; }

.elig-result {
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-top: 8px;
  background: var(--paleblue);
}
.elig-result h3 { margin: 0 0 6px; }
.elig-result p:last-child { margin-bottom: 0; }
.elig-result[data-state="yes"]   { background: #E9F6EE; border-left: 4px solid #2E9E5B; }
.elig-result[data-state="maybe"] { background: #FFF4E2; border-left: 4px solid #DFA02E; }
.elig-result[data-state="no"]    { background: #FBEAE4; border-left: 4px solid var(--orange-dark); }

/* ---------- CTA button on navy ---------- */

.btn-onnavy { background: var(--orange); color: var(--white); }
.btn-onnavy:hover { background: var(--orange-dark); transform: translateY(-1px); }