/* Statamic overrides layered on top of the original compiled theme CSS */

/* ============================================================
   Design tokens — 2026 warm/soft refresh (brand kept, refined)
   See DESIGN.md. Layered over bundle.css.
   ============================================================ */
:root {
  /* Brand */
  --blue: #3b5f9e;      --blue-700: #2a4c87;
  --cream: #f8f5ee;     --cream-200: #efece6;
  --sand: #d8cfb9;      /* accent */
  --grey: #c4c1bc;      --grey-400: #aeaeae;
  --paper: #ffffff;

  /* Warm neutrals (refine: warm near-black instead of pure #000) */
  --ink: #211d1a;
  --ink-soft: #4a443d;

  /* Accent (highlighted words in titles). Two values, because one cannot serve both
     surfaces: sand is 5.5:1 on the dark blue hero and 1.5:1 on white. The layout
     overrides both from the accent_colour global; these are the fallbacks for pages
     that render outside it, such as the design system. */
  --accent-on-dark: #d8cfb9;
  --title-accent: #3b5f9e;   /* default surface is the page, which is white */

  /* Muted text — the small mono labels, meta and captions.
     These were picked by eye and every one of them failed WCAG AA: an audit of every
     text node on all 14 pages found 24 distinct failures, worst 2.22:1 against a 4.5:1
     requirement. Muted has to mean "quieter than the body", not "hard to read", so each
     of these is the same hue and saturation as the colour it replaces, moved on
     lightness only until it clears 4.5:1 with margin on every surface it lands on.
     Small text never gets the 3:1 large-text allowance — none of these reach 24px. */
  --muted-on-light: #746d60;      /* 5.12:1 on white, 4.71:1 on cream */
  --muted-on-blue: #d7dfec;       /* 4.72:1 on --blue, 5.97:1 on the inset panel */
  --muted-on-blue-700: #b7c2d5;   /* 4.71:1 on --blue-700 */
  --sand-sm: #e4dece;             /* sand for small text: --sand itself is 4.08:1 on --blue */
  --muted-on-ink: #8a8275;        /* 4.70:1 on the near-black footer */

  /* Radius — restrained/subtle (original theme was square, radius:0) */
  --radius-sm: 8px;  --radius: 10px;  --radius-lg: 14px;  --radius-btn: 14px;

  /* Soft, warm-tinted shadows (light) */
  --shadow-sm: 0 1px 2px rgba(33,29,26,.03), 0 1px 4px rgba(33,29,26,.04);
  --shadow:    0 4px 16px rgba(33,29,26,.06);
  --shadow-lg: 0 12px 40px rgba(33,29,26,.09);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .25s;
}

/* ---- Foundations (global) ---- */
body { color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }
::selection { background: var(--sand); color: var(--ink); }

/* Buttons: rounded + a gentle lift on hover (were square, static) */
.btn {
  border-radius: var(--radius-btn);
  /* True Medium weight (the theme only ships 400 + Medium-500; the default
     btn weight:500 fell back to the 400 file, so text looked light) */
  font-family: GeneralSansMedium, Helvetica, Arial, sans-serif;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Calm hover — a gentle warm colour shift, all properties transition together */
.btn:hover { transform: none; box-shadow: none; }
.btn--white:hover { background-color: var(--sand); }
.btn--dark:hover { background-color: #322c26; }
/* Outline -> fills in; only the text COLOUR changes on the span (no instant box) */
.btn--border-dark:hover { background-color: var(--ink); border-color: var(--ink); color: #fff; }
.btn--border-dark:hover > * { color: #fff; }
/* No sliding underline on buttons (keep it only on plain text links) */
.btn.hover-underline > :before { display: none; }

a.tags__item { text-decoration: none; display: inline-block; }

/* Card images: WP emits width/height on <img>; ours don't, so give the
   image box a definite height so object-fit/height:100% resolves and the
   flex row doesn't blow out. */
.card__image--sm { height: 150px; }
.card__image--sm img { height: 100%; width: 100%; object-fit: cover; }

/* Title highlight accent.
   Which colour is readable depends on what is behind it, and section backgrounds are
   an editor field rather than a class — so the value is computed per block by
   accent_on() and written inline as --title-accent. These rules cover the surfaces
   whose colour lives in CSS instead of in content: the default (set at :root by the
   layout) is the page itself, white, and the dark surfaces opt back into the warm
   accent. The two case-study modifiers are named for their *text* being light, which
   is the editor's way of saying the background image behind it is dark. */
.title-accent { color: var(--title-accent); }

.hero--dark,
.cta__wrap,
.case-studies__header--light,
.case-studies__body--light { --title-accent: var(--accent-on-dark); }

/* Header logo (the original theme had none) */
.page-header__logo{height:22px;width:auto;display:block;}

/* Per-region contact: drop the phone just below the (absolutely-positioned) email */
.page-footer__email--phone{top:134px;}

/* Per-region locale / currency indicator under the copyright */
.page-footer__locale{opacity:.55;font-size:13px;margin-top:6px;}

/* ============================================================
   Blocks — 2026 warm/soft refresh (rounded corners only — no shadows)
   ============================================================ */

/* ---- Hero (2026 minimal: tighter headline + refined staggered entrance) ---- */

/* The text column is `justify-content: space-between` in the theme, and the picture
   column sets the row height — so two short blocks get pushed to opposite ends of a box
   sized by something else entirely. Measured: a 252px hole on the home page and 390px on
   the service pages, which have less copy and therefore spray further apart.
   Top-aligned with a real gap instead, so the headline still lines up with the top of
   the picture and the sub-text sits under it where it belongs. The space that lands at
   the foot of the column is invisible — the hero is one flat colour. */
.hero__col-text { justify-content: flex-start; gap: clamp(24px, 3vw, 44px); }

.hero__title > * { line-height: 1.04; letter-spacing: -0.03em; }
/* The hero is two colours side by side: the section is #2a4c87 and the picture column is
   the lighter panel from bg_color, #3b5f9e on the home page. Both used to run flush to the
   foot of the section (the column even hung 6-8px past it), which no single-colour seam
   below can match — it measured a 23/255 step under the picture column at every width.
   Clip the overflow, and end the row above the section's foot so the hero's own colour
   forms a full-width band for the melt to start from. The panel is unchanged otherwise. */
.hero { overflow: hidden; }
.hero__wrap { margin-bottom: 40px; }
.hero__picture { border-radius: var(--radius-lg); overflow: hidden; }
/* Square by convention: every image in the library is 900x900 or 1024x1024. A 700x875
   portrait dropped in for /about-me made its picture column 895px against 748px on every
   other page — and the text column is sized by the picture, so the extra 147px landed as
   dead space under the button. Pin the ratio: the shape of a file can't reshape the page. */
.hero__picture img { border-radius: inherit; display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.hero__text-bottom { margin-top: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .hero__title, .hero__col-picture, .hero__link, .hero__text-bottom { animation: heroIn .7s var(--ease) both; }
  .hero__title { animation-delay: .06s; }
  .hero__col-picture { animation-delay: .12s; }
  .hero__link { animation-delay: .20s; }
  .hero__text-bottom { animation-delay: .28s; }
}
@keyframes heroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ---- Cards (service / post / text) ---- */
.card__link { border-radius: var(--radius); overflow: hidden; }
/* Related-articles (post) cards: flat; only the thumbnail is rounded */
.card--lg .card__link { border-radius: 0; overflow: visible; }
.card--lg .card__image { border-radius: var(--radius); overflow: hidden; }
.card > .card__main { border-radius: var(--radius); }
.card__title { color: var(--ink); }

/* ---- CTA ---- */
.cta__wrap { border-radius: var(--radius-lg); overflow: hidden; }
.cta__title > * { line-height: 1.12; letter-spacing: -0.01em; }

/* ---- Case studies ---- */
.case-studies__row { border-radius: var(--radius-lg); overflow: hidden; }
.case-studies__title > * { line-height: 1.12; letter-spacing: -0.01em; }

/* ---- Two-column / image+text ---- */
.two-columns-picture__img { border-radius: var(--radius-lg); display: block; }
.two-column__title > *, .two-columns-text__title > *, .two-columns-picture__title > * { line-height: 1.12; letter-spacing: -0.01em; }
/* The bundle sets these section titles to #b1aca0: 2.26:1 on white and 2.08:1 on cream,
   under the 3:1 floor that even large text has to clear. They are the section's name
   ("How I got here", "Why I do this"), not decoration. Same warm grey, taken down until
   it passes at any size on both backgrounds — 5.29:1 on white, 4.86:1 on cream — so it
   still reads quieter than the statement it introduces. */
.two-column__title > *, .two-columns-text__title > *, .two-columns-picture__title > * { color: #706b62; }

/* ============================================================
   Footer — one line

   Replaced a 455px three-column footer carrying 16 links, six of which spelled out the
   services under a Services link already in the fixed header. Two rows and a rule: mark
   and navigation, then the credit, the legal pair and the profiles.
   ============================================================ */
.site-footer { color: #a8a193; padding: 30px 0 26px; }

.site-footer__row {
  display: flex; align-items: center; gap: 32px 40px; flex-wrap: wrap;
  padding-bottom: 26px;
}
.site-footer__row--bottom { padding: 20px 0 0; }
.site-footer__rule { height: 1px; background: rgba(255,255,255,.09); }

.site-footer__logo { height: 24px; width: auto; display: block; }
.site-footer__logo-link { display: block; }

.site-footer__nav { display: flex; gap: 26px; flex-wrap: wrap; margin-left: auto; }
.site-footer__nav a {
  font-size: 14px; color: #ddd6c8; text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.site-footer__nav a:hover { color: #fff; }

.site-footer__credit { font-size: 12.5px; line-height: 1.7; color: var(--muted-on-ink); margin: 0; }
.site-footer__credit a { color: #a8a193; text-decoration: none; transition: color var(--dur) var(--ease); }
.site-footer__credit a:hover { color: #fff; }
.site-footer__sep { margin: 0 8px; color: var(--muted-on-ink); }

.site-footer__socials { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.site-footer__social {
  display: inline-flex; align-items: center; color: #b3ab9c;
  transition: color var(--dur) var(--ease);
}
.site-footer__social:hover { color: #fff; }
.site-footer__social svg { display: block; }

@media (max-width: 720px) {
  .site-footer { padding: 26px 0 24px; }
  .site-footer__row { gap: 20px; }
  .site-footer__nav, .site-footer__socials { margin-left: 0; }
  .site-footer__row--bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================================
   Header — minimal flat nav. Solid bar kept from the theme (the transparent
   "melt into hero" was removed: it went invisible on light pages that aren't
   flagged header_light, e.g. blog posts).
   ============================================================ */

/* Minimal nav: plain text links, no sliding underline, calm fade on hover */
.main-nav .hover-underline > :before { display: none; }
.main-nav__item a, .main-nav__link { transition: opacity var(--dur) var(--ease); }
.main-nav__item a:hover, .main-nav__link:hover { opacity: .55; }

/* "Let's Talk" CTA -> clean text link, not a boxed button */
.main-nav__item.btn { border: 0; background: none; padding: 0; min-width: 0; width: auto; max-width: none; border-radius: 0; }
.main-nav__item.btn > a { padding: 0; }

/* Globe icon: white on the dark header, dark on the light header */
.page-header--light .main-nav__icon { filter: brightness(0); }

/* Content sits flush below the fixed 72px header (kills the ~30px white gap
   left by the theme's old 102px offset). */
.page-main, .site-main { margin-top: 72px; }

/* ---- Contact form (warm, soft inputs + calm focus) ---- */
.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea {
  background-color: #faf8f3; border-color: #e7e1d6; color: var(--ink);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #a89f8f; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue); background-color: #fff; }

/* ---- Calendly embed: soft rounded ---- */
.calendly-inline-widget { border-radius: var(--radius-lg); overflow: hidden; }

/* ============================================================
   Motion — tasteful 2026 scroll reveals (data-reveal added by JS,
   so no-JS keeps everything visible; respects reduced motion)
   ============================================================ */
/* The section's CONTENT animates, never the section itself.

   This used to fade and lift the <section>, which also faded its background colour — so
   until a section had revealed, the page showed white where its colour should be. That
   was invisible while every boundary was a hard edge between two already-painted blocks.
   With a melt above it, the seam's bottom is the section's colour and the section is not
   painting it yet: a hard line, on scroll, at exactly the place the melt exists to remove.
   Backgrounds now paint immediately and always; only what sits inside them moves. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    will-change: opacity, transform;
  }
  [data-reveal].is-in > * { opacity: 1; transform: none; }
}

/* Card cascade: cards rise in sequence as their section reveals.
   Translate-only (the section handles the fade) so nothing double-fades.
   Skips swiper slides to avoid clashing with the slider's transforms. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] .card:not(.swiper-slide) { transform: translateY(16px); transition: transform .55s var(--ease); }
  [data-reveal].is-in .card:not(.swiper-slide) { transform: none; }
  [data-reveal].is-in .card:not(.swiper-slide):nth-child(2) { transition-delay: .08s; }
  [data-reveal].is-in .card:not(.swiper-slide):nth-child(3) { transition-delay: .16s; }
  [data-reveal].is-in .card:not(.swiper-slide):nth-child(4) { transition-delay: .24s; }
}

/* ============================================================
   Work timeline (sections/work_timeline.blade.php)

   A true proportional time axis. All geometry derives from --t0 / --tspan set
   on .wtl-ch by the template, and --s / --e per bar. Nothing about a bar's size
   comes from its text, and nothing about its text is constrained by its size —
   the chart and the prose are separate objects sharing one ruler.

   Gridlines are two repeating gradients on .wtl-pad rather than elements, so
   there is nothing to keep in sync: changing the span is a maths change.
   Everything is namespaced wtl- to stay clear of the compiled bundle.css.
   ============================================================ */
.wtl { padding: 64px 0 20px; }
.wtl__head { max-width: 60ch; margin-bottom: 38px; }
.wtl__intro { font-size: 16px; line-height: 1.62; color: var(--ink-soft); margin-top: 14px; }

.wtl-ch {
  --lab: 176px;   /* row-label column */
  --gut: 52px;    /* "still running" gutter past the today rule */
  --rowh: 46px;
  --barh: 26px;
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 26px 28px 22px;
}
.wtl-r { display: flex; align-items: stretch; }
.wtl-r__lab { width: var(--lab); flex: none; padding-right: 20px; display: flex; flex-direction: column; justify-content: center; }
.wtl-r__track { flex: 1; min-width: 0; position: relative; height: var(--rowh); }
.wtl-pad {
  position: absolute; inset: 0 var(--gut) 0 0;
  border-right: 1px dashed var(--blue);
  /* Both rule sets are driven by the same --step / --minor the template used to place
     the tick labels, so gridlines and labels cannot drift apart. Nothing here assumes a
     particular span: change the years and the grid re-derives itself. */
  background-image:
    repeating-linear-gradient(to right, rgba(33,29,26,.15) 0 1px,
      transparent 1px calc(var(--step) * 100% / var(--tspan))),
    repeating-linear-gradient(to right, rgba(33,29,26,.055) 0 1px,
      transparent 1px calc(var(--minor) * 100% / var(--tspan)));
}
/* When the span is long enough that --minor collapses onto --step, the second gradient
   would just double-draw the first. */
.wtl-ch[style*="--minor: 1"] .wtl-pad { background-blend-mode: normal; }

.wtl-r--axis .wtl-r__track { height: 22px; }
.wtl-r--axis .wtl-pad { background-image: none; border-right-color: transparent; }
.wtl-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  left: calc((var(--y) - var(--t0)) / var(--tspan) * 100%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; color: var(--muted-on-light); white-space: nowrap;
}
.wtl-tick--first { transform: none; }
.wtl-now {
  position: absolute; top: 0; left: calc(100% - var(--gut)); margin-left: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--blue); white-space: nowrap;
}

.wtl-r--v { border-top: 1px solid rgba(33,29,26,.07); }
.wtl-r--v:first-of-type { border-top: 1px solid rgba(33,29,26,.2); }
.wtl-r__n { font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-size: 13.5px; letter-spacing: -.015em; line-height: 1.15; }
.wtl-r__m { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; letter-spacing: .05em; color: var(--muted-on-light); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.wtl-pip { width: 5px; height: 5px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--c) 22%, transparent); }

.wtl-bar {
  position: absolute; top: 50%; height: var(--barh); margin-top: calc(var(--barh) / -2);
  border-radius: 5px; text-decoration: none; background: var(--c); min-width: 9px;
  left: calc((var(--s) - var(--t0)) / var(--tspan) * 100%);
  width: calc((var(--e) - var(--s)) / var(--tspan) * 100%);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
/* A live venture has no right edge — it runs off into the gutter past today. */
.wtl-bar[data-live] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wtl-bar[data-live]::after {
  content: ""; position: absolute; left: 100%; top: 0; bottom: 0;
  width: calc(var(--gut) - 15px); border-radius: 0 2px 2px 0;
  background: linear-gradient(to right, var(--c), transparent);
}
.wtl-bar[data-live]::before {
  content: ""; position: absolute; top: 50%; left: 100%;
  margin-left: calc(var(--gut) - 20px); width: 7px; height: 7px;
  border-top: 1.5px solid var(--c); border-right: 1.5px solid var(--c);
  transform: translateY(-50%) rotate(45deg);
}
.wtl-bar:hover, .wtl-bar:focus-visible { transform: scaleY(1.18); box-shadow: 0 2px 10px rgba(33,29,26,.22); }

.wtl-ch__foot { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgba(33,29,26,.1); font-size: 12.5px; color: var(--muted-on-light); line-height: 1.5; }
.wtl-ch__foot b { color: var(--ink-soft); font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-weight: 400; }

/* ---- prose entries ---- */
.wtl-work { margin-top: 8px; }
.wtl-en { border-top: 1px solid rgba(33,29,26,.1); scroll-margin-top: 90px; }
.wtl-en:first-of-type { border-top: 0; }
.wtl-en__in { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 14px 56px; padding: 44px 0 46px; }
.wtl-en__rail { position: relative; padding-left: 20px; }
.wtl-en__rail::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 2px; width: 4px; border-radius: 2px; background: var(--c); }
.wtl-en__span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .08em; color: var(--muted-on-light); margin: 0; }
.wtl-en__h { font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-size: clamp(22px, 2.3vw, 29px); line-height: 1.05; letter-spacing: -.03em; margin: 9px 0 0; }
.wtl-en__what { font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); margin: 8px 0 0; max-width: 26ch; }
.wtl-en__facts { margin-top: 22px; border-top: 1px solid rgba(33,29,26,.12); }
.wtl-en__facts div { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(33,29,26,.08); }
.wtl-en__facts .k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted-on-light); width: 66px; flex: none; padding-top: 3px; }
.wtl-en__facts .v { font-size: 13px; line-height: 1.5; }
.wtl-en__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px 44px; align-content: start; padding-top: 4px; }
.wtl-en__k { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--blue); margin: 0 0 10px; }
.wtl-en__col p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 12px; }
.wtl-en__col p:last-child { margin-bottom: 0; }

/* ---- shorter engagements ---- */
.wtl-sm { border-top: 1px solid rgba(33,29,26,.14); padding: 46px 0 8px; }
.wtl-sm__h { font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-size: 22px; letter-spacing: -.02em; margin: 0; }
.wtl-sm__p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 58ch; margin: 10px 0 24px; }
.wtl-sm__list { border-top: 1px solid rgba(33,29,26,.1); }
.wtl-sm__list div { display: flex; gap: 22px; padding: 13px 0; border-bottom: 1px solid rgba(33,29,26,.08); }
.wtl-sm__list .y { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--muted-on-light); width: 58px; flex: none; padding-top: 2px; }
.wtl-sm__list .t { font-size: 14.5px; line-height: 1.5; }

.wtl-disc { margin: 34px 0 0; padding: 22px 24px; background: var(--cream); border-radius: var(--radius); font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); max-width: 74ch; }
.wtl-disc p { margin: 0; }

/* ---- narrow: the chart keeps its axis, the label column moves above the track ---- */
@media (max-width: 860px) {
  .wtl-ch { --lab: 0px; --gut: 34px; --rowh: 38px; --barh: 22px; padding: 20px 18px 18px; }
  .wtl-r { display: block; }
  .wtl-r__lab { width: auto; padding: 0 0 5px; }
  .wtl-r--v { padding-top: 14px; }
  .wtl-r--axis .wtl-r__lab { display: none; }
  .wtl-en__in { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 32px 0 34px; }
  .wtl-en__what { max-width: none; }
}

/* ============================================================
   Venture bands (sections/venture_bands.blade.php)

   One ink panel per venture with the start year set very large. The year sizes off
   the container rather than the viewport, so a band keeps its proportions wherever
   it is placed. Namespaced vb- to stay clear of bundle.css.
   ============================================================ */
.vb { padding: 64px 0; }
.vb__head { max-width: 60ch; margin-bottom: 34px; }
.vb__intro { font-size: 16px; line-height: 1.62; color: var(--ink-soft); margin-top: 14px; }
.vb__list { display: flex; flex-direction: column; gap: 14px; }

.vb__band {
  container-type: inline-size;
  background: var(--blue-700); color: #eef1f7;
  border-radius: var(--radius-lg);
  padding: 34px 36px 30px;
  display: grid; grid-template-columns: minmax(0, auto) 1fr; gap: 40px; align-items: center;
}
.vb__yr {
  font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: clamp(56px, 11cqw, 128px); line-height: .82; letter-spacing: -.055em;
  color: var(--sand); margin: 0; white-space: nowrap;
}
.vb__yr small {
  display: block; font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted-on-blue-700); margin-top: 14px; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.vb__name {
  font-family: GeneralSansMedium, Helvetica, Arial, sans-serif;
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--sand); margin: 0 0 8px;
}
.vb__ttl {
  font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1.18; letter-spacing: -.02em; margin: 0 0 12px;
}
.vb__line { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: #c3cddf; max-width: 54ch; }
.vb__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.vb__tags span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px;
  letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid #4a6699; border-radius: 999px; padding: 4px 10px; color: var(--muted-on-blue-700);
}
.vb__more { margin-top: 26px; }

/* The year stops being a display element below this width, so it steps down and the
   band stacks rather than squeezing two columns that no longer fit. */
@media (max-width: 720px) {
  .vb__band { grid-template-columns: 1fr; gap: 18px; padding: 26px 22px; }
  .vb__yr { font-size: 60px; }
  .vb__yr small { margin-top: 8px; }
}

/* ============================================================
   CTA — full bleed

   Replaces a two-column layout in which a 550px square image set the row height and the
   text column stretched to match it: 231px of ink in a 744px box, 69% empty.

   The tint is a gradient rather than a flat overlay so the image stays visible on the
   right while the text side stays dark enough to hold white type. Measured on all nine
   pages by hiding the copy and sampling the lightest pixel behind it: worst case 7.24:1
   (home), best 8.29:1 — comfortably past the 4.5:1 floor for body text.

   Margin is deliberately smaller than the site's usual block rhythm: the sections either
   side already carry 72–100px of their own padding, and a full-bleed panel does not need
   the same air as a column of text.
   ============================================================ */
/* Spacing around this block is mostly not its own. Measured from the last card above to
   the top of the panel it came to 208px, made of four stacked pieces:
   24px card margin + 48px grid trailing margin + 72px container padding + 64px here.
   The 48px is pure trailing space — the container's padding already closes the section —
   so it is removed below, and this margin is small because it is the fourth thing in
   the stack, not the first. */
.cta { margin: 32px 0; }
.cta--sm { margin: 24px 0; }

/* The card grid already ends on a 24px row gutter and sits inside 72px of container
   padding. Its own 48px bottom margin is a third helping of the same thing.

   The replacement is padding rather than nothing, because this section paints no
   background of its own: with the grid flush to its foot, the last card — which is cream —
   met the seam directly, and the seam correctly begins at the page's white, so there was a
   15/255 step at 390px where the cards stack full width. Padding cannot collapse out of
   the section the way the original margin did, so the section's own colour always gets a
   few pixels before the melt starts. */
.services-posts-wrap { margin-bottom: 0; padding-bottom: 34px; }

/* The theme's `mb_mobile` flag is a MOBILE modifier — bundle.css zeroes it below 768
   and restores 100px above. Redefining it as an unconditional `margin-bottom: 0`
   welded the block to whatever followed it at every width. */
.cta--mb-0 { margin-bottom: 0; }
@media screen and (min-width: 768px) {
  .cta--mb-0 { margin-bottom: 72px; }
  .cta--sm.cta--mb-0 { margin-bottom: 24px; }
}

/* Vertically centred, not bottom-anchored. With `align-items: flex-end` against a fixed
   360px floor the copy sank to the bottom and whatever was left over became the gap
   above — so it measured 130px above / 56px below on one page and 82/56 on another. The
   inconsistency between pages is what made it look unarranged rather than merely loose.
   Centred, the two are equal by construction whatever the headline length.

   Height scales with width so the panel keeps a deliberate shape instead of becoming a
   letterbox on wide screens: every source image is square, and at 1079x360 the crop was
   throwing away two thirds of it. */
.cta__wrap {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: clamp(280px, 24vw, 360px);
  /* Flex, not grid: `max-width: 58%` on a grid item inside an `auto` track is circular
     — the track sizes to the item, the item sizes to a percentage of the track — and
     Chrome resolved it by collapsing the column to 27%. */
  display: flex; align-items: center;
  background: var(--blue-700);   /* the floor if the image never loads */
}
.cta__wrap--flat { background: var(--blue); min-height: 0; }

.cta__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Square sources in a wide box: bias the crop upward, where these images carry
     their structure. Dead centre was cutting through the middle of every one. */
  object-position: 50% 42%;
}
/* The dark end of the gradient has to cover the text column, which runs to ~47% of the
   panel. The old stops faded from 42%, so the last words of a long headline sat on the
   part where the image comes through. */
.cta__tint {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(28, 46, 80, .95) 0%,
    rgba(28, 46, 80, .92) 38%,
    rgba(28, 46, 80, .78) 55%,
    rgba(28, 46, 80, .34) 100%);
}

.cta__in { position: relative; padding: 48px 52px; max-width: 58%; color: #fff; }
.cta__wrap--flat .cta__in { max-width: 46ch; }

/* The theme is mobile-first centred — `.cta__title { padding: 20px 11% 0; text-align:
   center }` — and only un-centres it at a desktop breakpoint this layout no longer
   matches. Left-aligned at every width, and the percentage side padding removed, since
   .cta__in already owns the inset. */
.cta__title, .cta__content { text-align: left; padding: 0; }

.cta__title > * {
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.14;
  letter-spacing: -.025em; margin: 0; color: #fff;
}
.cta__content, .cta__content > * {
  font-size: 15px; line-height: 1.6; color: #d6dded; margin: 0;
}
.cta__content { margin: 14px 0 0; max-width: 46ch; }
.cta__btn { margin-top: 26px; }

@media (max-width: 860px) {
  /* Shorthand here would re-zero what .cta--mb-0 controls, so set the sides
     individually and leave the bottom to the modifier. */
  .cta { margin-top: 28px; margin-bottom: 24px; }
  .cta--mb-0 { margin-bottom: 0; }
  .cta__wrap { min-height: 280px; }
  .cta__in { padding: 36px 26px; max-width: 100%; }
  /* On a narrow screen the gradient runs out of room, so flatten it — the image is
     still there, just uniformly darkened enough to keep the type readable. */
  .cta__tint { background: rgba(28, 46, 80, .9); }
}

/* ============================================================
   Steps — the block that replaced the "how this goes" accordion

   The first step carries the button; the rest sit after a labelled divider, so the
   layout states the same condition the copy does. Nothing is hidden — the accordion it
   replaced kept 94% of its own text behind clicks, including the price.

   Works on any background: --title-accent already resolves per surface, and .steps--dark
   flips the text and hairline colours when the panel is dark.
   ============================================================ */
.steps { padding: 64px 0 72px; }
.steps--mt { margin-top: 48px; }

.steps__title > * { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.18; letter-spacing: -.02em; margin: 0; }
/* The lede is a bard field but these blocks store it as a bare string, so style the
   wrapper as well as any paragraph inside it — otherwise it silently inherits. */
.steps__lede, .steps__lede p {
  font-size: 15px; line-height: 1.62; color: var(--ink-soft); margin: 0;
}
.steps__lede { margin-top: 12px; max-width: 60ch; }

.steps__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px; align-items: start; margin-top: 38px;
}
.steps__grid--solo { grid-template-columns: minmax(0, 620px); }

/* ---- the featured first step ---- */
.steps__lead {
  border: 1px solid rgba(33,29,26,.16); border-radius: var(--radius-lg);
  padding: 28px 30px 30px; background: rgba(255,255,255,.5);
}
.steps__k {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--title-accent);
}
.steps__lead-ttl {
  font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: clamp(19px, 1.8vw, 22px); line-height: 1.25; letter-spacing: -.02em; margin: 12px 0 8px;
}
.steps__lead-body p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 12px; }
.steps__lead-body p:last-child { margin-bottom: 0; }
.steps__btn { margin-top: 20px; }

/* ---- the conditional rest ---- */
.steps__gate {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-on-light);
}
.steps__gate::after { content: ""; flex: 1; height: 1px; background: rgba(33,29,26,.14); }

.steps__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.steps__item {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 14px;
  padding: 16px 0 17px; border-bottom: 1px solid rgba(33,29,26,.11);
}
.steps__item:last-child { border-bottom: 0; padding-bottom: 0; }
.steps__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: var(--title-accent); padding-top: 3px;
}
.steps__item-ttl {
  font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: 15.5px; line-height: 1.3; margin: 0 0 5px;
}
.steps__item-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted-on-light); margin-left: 9px;
}
.steps__item-body p { font-size: 13.5px; line-height: 1.58; color: var(--ink-soft); margin: 0; }

/* ---- on a dark panel ---- */
.steps--dark { color: #fff; }
.steps--dark .steps__lede, .steps--dark .steps__lede p { color: var(--muted-on-blue); }
/* Inset, not raised. A 9% white veil over the brand blue lands on #4d6da7, where even
   pure white is only 5.17:1 — so nothing quieter than the body copy could be readable on
   it, and four labels on it failed. Tinting down instead gives #325085 and 8.01:1, which
   leaves room for a hierarchy. It also reads better: the featured step is a well the eye
   drops into rather than a card floating off the panel. */
.steps--dark .steps__lead { background: rgba(0,0,0,.16); border-color: rgba(255,255,255,.26); }
/* The step numerals and kickers take --title-accent, which on a dark panel resolves to
   sand: fine for a heading at 3:1, but these are 9.5-11px. Same hue, lifted to clear 4.5. */
.steps--dark .steps__n, .steps--dark .steps__k { color: var(--sand-sm); }
/* Blog card dates come from the bundle at #aeaeae: 2.22:1, the worst text on the site. */
.card__date { color: #737373; }
.steps--dark .steps__lead-body p { color: #dbe3f0; }
.steps--dark .steps__gate { color: var(--muted-on-blue); }
.steps--dark .steps__gate::after { background: rgba(255,255,255,.18); }
.steps--dark .steps__item { border-bottom-color: rgba(255,255,255,.13); }
.steps--dark .steps__item-meta { color: var(--muted-on-blue); }
.steps--dark .steps__item-body p { color: var(--muted-on-blue); }

@media (max-width: 860px) {
  .steps { padding: 48px 0 54px; }
  .steps__grid, .steps__grid--solo { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   Type scale — 2026

   The compiled theme has no inherited scale: nearly every text element carries its
   own hardcoded px size, restated at four breakpoints. Setting `body` alone therefore
   changed almost nothing that is actually read — measured on a 1440 laptop, body copy
   still rendered at 20px, post titles at 64.5px and FAQ answers at 24px, because
   `.two-column__main-text > p` and friends each pin their own value.

   So this block does two things: it re-anchors the element-level ladder (h1–h5, p),
   and it neutralises each block-level size that would otherwise sit outside it.

   The ladder is a 1.25 major third off a 15px body, measured at 1440:

       15 → 18 → 22 → 28 → 36        (copy · h4 · h3 · h2 · h1)
                              42     hero, one step clear of everything

   Third pass on the size, and the smallest of the three. The theme shipped 20px body
   copy; 16px was the first correction and still read large on a laptop, where most of
   this site is seen. 15px is deliberately at the low end for body text — it works here
   because the measure is capped near 62ch and the line-height is generous, which is
   what makes small text comfortable rather than the size on its own.

   Everything overrides bundle.css on source order alone (custom.css loads second,
   equal specificity), so no !important is needed anywhere below. Headings are clamp()
   so the steps between breakpoints stop being visible mid-resize.
   ============================================================ */

/* ---- Anchor ---- */
body { font-size: 15px; line-height: 1.62; }

/* ---- Element ladder. Reaches rich-text content (blog posts, page copy) too, which
        block-level selectors never do. ---- */
h1 { font-size: clamp(27px, 2.8vw, 36px); line-height: 1.1; }
h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.18; }
h3 { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.3; }
h4 { font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.42; }
h5 { font-size: 15.5px; line-height: 1.45; }

/* ---- Block titles. One rule for every block that carries one, so they cannot drift
        apart the way they had (40 / 42 / 43 / 45px across four breakpoints). These
        beat the element ladder on specificity, which is the point: a section title is
        a role, not a heading level, and blocks disagree about which tag to use. ---- */
.hero__title > * { font-size: clamp(29px, 3.2vw, 42px); }

.two-column__title > *,
.two-columns-text__title > *,
.two-columns-picture__title > *,
.case-studies__title > *,
.accordion__title > *,
.faq__title > *,
.blogs__title > * { font-size: clamp(21px, 2.2vw, 28px); }

.cta__title > * { font-size: clamp(19px, 2vw, 25px); }

/* ---- Copy. Every one of these was pinned at 18–24px by the theme; left alone they
        make body text the loudest thing on the page after the headline. ---- */
.two-column__main-text > p,
.two-columns-picture__text > *,
.case-studies__subtitle,
.cta__content > * { font-size: 15px; line-height: 1.62; }

/* Lead paragraphs — one step up from copy, not three. */
.two-column__main-text--large-size > p,
.hero__text-bottom p { font-size: clamp(16px, 1.3vw, 17px); line-height: 1.52; }

.faq-section__content,
.faq-section__content p { font-size: 15px; line-height: 1.62; }
.accordion__caption { font-size: clamp(16.5px, 1.25vw, 18px); }

/* Measure. Shrinking the type lengthened the line — the columns are fixed in px, so
   16px copy in a 702px column runs to 88 characters and on /contact to 118, well past
   the ~66 where the eye starts losing its place returning to the left edge. Capping in
   ch ties the limit to the typeface rather than to a guessed pixel width. Left-aligned
   everywhere on this site, so no centring to preserve. */
.two-column__main-text > p,
.one-column__content > p,
.one-column__content > ul,
.one-column__content > ol,
.faq-section__content p { max-width: 62ch; }

/* ---- Cards sit in grids of three or four, so they take the biggest cut. ---- */
/* Card numerals — what replaced the stroke pictograms. See partials/cards/card.blade.php.
   Colour comes from --title-accent, so it follows the same surface rule as accented
   title words: brand blue on the cream and white the cards actually sit on, and the
   warm accent if a card is ever placed on a dark block. The sand accent straight onto
   cream measures 1.43:1, which is the pairing that made "You're unclear" unreadable —
   a 26px numeral is large text and still needs 3:1. */
.card__num {
  font-family: GeneralSansMedium, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--title-accent);
  padding: 26px 0 18px;
}

.card__title { font-size: 16.5px; line-height: 1.34; }
.card--lg .card__title,
.card__title--lg-size { font-size: 18px; line-height: 1.36; }
.card__excerpt, .card__date { font-size: 13.5px; }

/* ---- Custom sections, drawn against the old scale. The big year in a venture band
        is deliberately exempt: it is a display number, not type. ---- */
.vb__ttl { font-size: clamp(17px, 1.8vw, 20px); }
.vb__line { font-size: 13.5px; }
.vb__intro { font-size: 15px; }
.wtl__intro { font-size: 14.5px; }
.wtl-en__h { font-size: clamp(19px, 1.8vw, 22px); }
.wtl-en__col p { font-size: 13.5px; }
.wtl-en__what { font-size: 13.5px; }
.wtl-sm__h { font-size: 18px; }
.wtl-sm__p { font-size: 14px; }

/* ============================================================
   Who this is for · Margin note · What it costs

   Three blocks that used to be raw HTML with a <style> tag pasted into a two-column
   text field. A control-panel save stripped all of it — bard sanitises markup it does
   not recognise — taking 35 hand-written classes with it and leaving bare <p> and <ul>.
   The design lives here now, where a save cannot reach it.
   ============================================================ */

/* ---------------------------------------------------------------- who this is for */
.audf { padding: 64px 0 72px; }
.audf__ttl {
  font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: clamp(21px, 2.2vw, 28px); line-height: 1.18; letter-spacing: -.02em; margin: 0;
}
.audf__lede { font-size: 15px; line-height: 1.62; color: var(--ink-soft); margin: 10px 0 0; max-width: 56ch; }
.audf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }

.audf__p { border-radius: var(--radius); padding: 26px 28px 28px; }
.audf__p--yes { background: var(--blue); color: #fff; }
.audf__p--no { background: transparent; border: 1px solid rgba(33,29,26,.16); }

.audf__k {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase;
}
.audf__p--yes .audf__k { color: var(--sand-sm); }
.audf__p--no .audf__k { color: var(--muted-on-light); }

.audf__p ul { list-style: none; margin: 14px 0 0; padding: 0; }
.audf__p li { font-size: 14.5px; line-height: 1.5; padding: 10px 0; }
.audf__p--yes li { color: #dbe3f0; border-top: 1px solid rgba(255,255,255,.14); }
.audf__p--no li { color: var(--ink-soft); border-top: 1px solid rgba(33,29,26,.1); }
.audf__p li:first-of-type { border-top: 0; padding-top: 4px; }

.audf--dark .audf__ttl { color: #fff; }
.audf--dark .audf__lede { color: var(--muted-on-blue); }
.audf--dark .audf__p--no { border-color: rgba(255,255,255,.24); }
.audf--dark .audf__p--no li { color: var(--muted-on-blue); border-top-color: rgba(255,255,255,.14); }

/* ---------------------------------------------------------------- margin note */
.disc { padding: 56px 0 60px; }
.disc__note { border-left: 2px solid var(--sand); padding-left: 26px; max-width: 74ch; }
.disc__stmt {
  font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: 17px; line-height: 1.35; letter-spacing: -.01em; margin: 0 0 10px;
}
.disc__body p { font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); margin: 0 0 10px; }
.disc__body p:last-child { margin-bottom: 0; }
.disc--dark { color: #fff; }
.disc--dark .disc__body p { color: var(--muted-on-blue); }

/* ---------------------------------------------------------------- what it costs */
.prc { padding: 64px 0 72px; }
.prc__ttl {
  font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: clamp(21px, 2.2vw, 28px); line-height: 1.18; letter-spacing: -.02em; margin: 0;
}
.prc__lede { font-size: 15px; line-height: 1.62; color: var(--ink-soft); margin: 10px 0 0; max-width: 56ch; }
.prc__grid {
  display: grid; grid-template-columns: repeat(var(--prc-cols, 3), minmax(0, 1fr));
  gap: 14px; margin-top: 34px; align-items: stretch;
}
.prc__c {
  background: #fff; border: 1px solid rgba(33,29,26,.14); border-radius: var(--radius);
  padding: 26px 26px 28px; display: flex; flex-direction: column;
}
.prc__c--hi { background: var(--blue); border-color: var(--blue); color: #fff; }

.prc__k {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-on-light);
}
.prc__c--hi .prc__k { color: var(--sand-sm); }

.prc__n {
  font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: 17px; letter-spacing: -.01em; margin: 12px 0 4px;
}
.prc__amt {
  font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: 26px; line-height: 1.12; letter-spacing: -.03em;
  color: var(--blue); margin: 0 0 14px;
}
/* Terms rather than a figure — set down so a row of cards still scans as a row. */
.prc__amt--terms { font-size: 16.5px; line-height: 1.3; letter-spacing: -.01em; }
.prc__c--hi .prc__amt { color: var(--sand); }
.prc__amt span {
  display: block; margin-top: 5px; font-family: GeneralSans, Helvetica, Arial, sans-serif;
  font-size: 12.5px; line-height: 1.4; letter-spacing: 0; color: var(--muted-on-light);
}
.prc__c--hi .prc__amt span { color: var(--muted-on-blue); }

.prc__d { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.prc__c--hi .prc__d { color: #dbe3f0; }

.prc--dark .prc__ttl { color: #fff; }
.prc--dark .prc__lede { color: var(--muted-on-blue); }
.prc--dark .prc__c { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: #fff; }
.prc--dark .prc__d { color: var(--muted-on-blue); }

@media (max-width: 900px) {
  .audf { padding: 48px 0 52px; }
  .prc { padding: 48px 0 52px; }
  .disc { padding: 40px 0 44px; }
  .audf__grid { grid-template-columns: 1fr; }
  .prc__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Legal pages

   The privacy policy and terms were a 639px column of prose sitting in a 1440px page
   with nothing on the right and no structure at all — 2,365px of text, seven headings,
   no numbering, no contents. Numbers and hairlines give the page a shape you can see;
   the empty right-hand side becomes the index it always needed.
   ============================================================ */
.legal { padding: 64px 0 88px; }
.legal__grid {
  display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  gap: 0 72px; align-items: start;
}

/* ---- sticky side ---- */
.legal__side { position: sticky; top: 96px; }
.legal__stamp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-on-light);
  padding-bottom: 18px; border-bottom: 1px solid rgba(33,29,26,.14);
}
.legal__stamp span { display: block; margin-top: 6px; color: var(--title-accent); }

.legal__index { margin-top: 22px; }
.legal__index-k {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-on-light); margin-bottom: 14px;
}
.legal__index ol { list-style: none; margin: 0; padding: 0; counter-reset: legal; }
.legal__index li { counter-increment: legal; margin-bottom: 9px; }
.legal__index a {
  display: grid; grid-template-columns: 26px 1fr; gap: 8px;
  font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.legal__index a::before {
  content: counter(legal, decimal-leading-zero);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
  color: #b3ab9c; padding-top: 2px;
}
.legal__index a:hover { color: var(--title-accent); }

/* ---- prose ---- */
.legal__intro {
  font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; color: var(--ink);
  margin: 0 0 8px; max-width: 54ch;
}
.legal__sec { padding: 34px 0 4px; border-top: 1px solid rgba(33,29,26,.12); margin-top: 30px; }
.legal__sec:first-of-type { border-top: 0; }
.legal__h {
  display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: baseline;
  font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: clamp(19px, 1.9vw, 23px); line-height: 1.22; letter-spacing: -.02em;
  margin: 0 0 14px; scroll-margin-top: 96px;
}
.legal__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  letter-spacing: .06em; color: var(--title-accent);
}

.legal__prose { padding-left: 52px; max-width: 62ch; }
.legal__prose p { font-size: 15px; line-height: 1.68; color: var(--ink-soft); margin: 0 0 14px; }
.legal__prose p:last-child { margin-bottom: 0; }
.legal__prose strong { font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-weight: 400; color: var(--ink); }
.legal__prose em { font-style: italic; }
.legal__prose a { color: var(--title-accent); text-decoration: underline; text-underline-offset: 2px; }
.legal__prose ul { margin: 0 0 14px; padding: 0; list-style: none; }
.legal__prose li {
  font-size: 15px; line-height: 1.6; color: var(--ink-soft);
  padding: 9px 0 9px 20px; position: relative; border-bottom: 1px solid rgba(33,29,26,.08);
}
.legal__prose li:first-child { border-top: 1px solid rgba(33,29,26,.08); }
.legal__prose li::before {
  content: ""; position: absolute; left: 0; top: 17px;
  width: 8px; height: 1px; background: #b3ab9c;
}

@media (max-width: 900px) {
  .legal { padding: 40px 0 60px; }
  .legal__grid { grid-template-columns: 1fr; gap: 30px; }
  .legal__side { position: static; }
  .legal__h { grid-template-columns: 34px 1fr; }
  .legal__prose { padding-left: 0; }
}


/* ============================================================
   Header — named masthead

   Three faults in the header this replaces:

     · `main-nav__item--current` was emitted on every page and matched by no CSS rule
       anywhere, so the current page looked exactly like the other four.
     · "Let's Talk" carried `.btn` but rendered 69px wide with no border and no fill —
       `min-width: 280px` is overridden to `auto` at the desktop breakpoint.
     · Nothing separated a fixed bar from the content scrolling under it.

   The name slot answers the first by stating the page in words, which lets every link go
   quiet because none has to carry a state.
   ============================================================ */
/* `position: fixed` with no width shrink-to-fits: the markup used to carry a `w-100`
   utility and dropping it collapsed the bar to 215px, which put the mobile drawer's
   right edge in the middle of the screen. */
/* 72px, not 68: `.page-main` carries `margin-top: 72px` to clear the fixed bar, so any
   other height leaves a strip of page background showing between the two. */
.page-header { min-height: 72px; display: flex; align-items: center; left: 0; right: 0; width: 100%; }
.page-header__in { display: flex; align-items: center; gap: 24px; width: 100%; }

/* ---- masthead ---- */
.page-header__mast { display: flex; align-items: center; gap: 12px; min-width: 0; }
.page-header__home { display: block; flex: none; }
.page-header__slash { color: var(--muted-on-blue); font-size: 15px; line-height: 1; }
.page-header__name {
  font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; font-weight: 400;
  font-size: 15px; letter-spacing: -.01em; color: #fff;
  /* Capped, so a long fallback title can never break the bar. */
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-header--light .page-header__slash { color: var(--muted-on-light); }
.page-header--light .page-header__name { color: var(--ink); }

/* ---- nav: one weight, one colour, no state to carry ---- */
.main-nav { margin-left: auto; }
.main-nav__list { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.main-nav__item a {
  font-size: 14px; color: rgba(255,255,255,.62); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.main-nav__item a:hover { color: #fff; }
.main-nav__item--cta a { color: #fff; font-family: GeneralSansMedium, Helvetica, Arial, sans-serif; }
/* The bundle gives the dark header its links at 4.36:1 — just under the floor at 14px.
   The --light rule below is more specific, so it still wins on the cream pages. */
.main-nav__item a { color: var(--muted-on-blue); }
.page-header--light .main-nav__item a { color: var(--ink-soft); }
.page-header--light .main-nav__item a:hover { color: var(--ink); }
.page-header--light .main-nav__item--cta a { color: var(--ink); }

/* ---- burger ---- */
.page-header__nav-btn { background: none; border: 0; padding: 8px; cursor: pointer; display: none; }
.page-header__nav-icon { display: flex; flex-direction: column; gap: 4px; }
.page-header__nav-icon span { display: block; width: 20px; height: 1.5px; background: #fff; transition: .25s var(--ease); }
.page-header__nav-icon--light span { background: var(--ink); }

/* ---- the drawer ----
   It used to sit permanently at translateX(-390px) with `visibility: visible`, so five
   links stayed in the tab order while invisible: five presses of Tab sent focus off the
   left edge with nothing on screen moving. bundle.js sets `display: flex` inline and that
   cannot be overridden — but visibility is a different property, so it can. */
@media screen and (max-width: 1023px) {
  .page-header__nav-btn { display: block; }
  .main-nav {
    left: auto; right: 0;                    /* slide from the side the button is on */
    transform: translateX(100%);
    width: min(340px, 86vw);
  }
  .main-nav:not(.main-nav--active) { visibility: hidden; pointer-events: none; }
  .main-nav--active { transform: translateX(0); visibility: visible; }
  .main-nav__list { flex-direction: column; align-items: flex-start; gap: 4px; margin: 28px 0 0; padding: 0 28px; }
  .main-nav__item a { font-size: 17px; padding: 10px 0; display: block; }
  .page-header__name { max-width: 18ch; }
}

/* Content scrolls under a fixed bar, so give it an edge once the page has moved. The top
   of every page stays clean; the rule only arrives when there is something to separate. */
.page-header {
  transition: border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.page-header.is-stuck { border-bottom-color: rgba(255,255,255,.16); }
.page-header--light.is-stuck { border-bottom-color: rgba(33,29,26,.12); }

/* ============================================================
   Section seams — the melt
   ============================================================ */

/* Height is the one thing that makes a blend work, so it scales with the viewport rather
   than being a fixed number: a 460px band is most of a laptop screen and a third of a
   large monitor. Quiet seams (cream against white, a luminance gap of 0.03) get a shorter
   band — stretching almost no colour change over half a screen just wastes the page. */
.seam {
  display: block;
  height: clamp(120px, 20vh, 240px);
  position: relative;
  pointer-events: none;
  background: linear-gradient(to bottom,
      color-mix(in oklab, var(--to) 0.00%, var(--from)) 0.00%,
      color-mix(in oklab, var(--to) 0.09%, var(--from)) 4.55%,
      color-mix(in oklab, var(--to) 0.65%, var(--from)) 9.09%,
      color-mix(in oklab, var(--to) 2.05%, var(--from)) 13.64%,
      color-mix(in oklab, var(--to) 4.49%, var(--from)) 18.18%,
      color-mix(in oklab, var(--to) 8.10%, var(--from)) 22.73%,
      color-mix(in oklab, var(--to) 12.89%, var(--from)) 27.27%,
      color-mix(in oklab, var(--to) 18.80%, var(--from)) 31.82%,
      color-mix(in oklab, var(--to) 25.67%, var(--from)) 36.36%,
      color-mix(in oklab, var(--to) 33.33%, var(--from)) 40.91%,
      color-mix(in oklab, var(--to) 41.52%, var(--from)) 45.45%,
      color-mix(in oklab, var(--to) 50.00%, var(--from)) 50.00%,
      color-mix(in oklab, var(--to) 58.48%, var(--from)) 54.55%,
      color-mix(in oklab, var(--to) 66.67%, var(--from)) 59.09%,
      color-mix(in oklab, var(--to) 74.33%, var(--from)) 63.64%,
      color-mix(in oklab, var(--to) 81.20%, var(--from)) 68.18%,
      color-mix(in oklab, var(--to) 87.11%, var(--from)) 72.73%,
      color-mix(in oklab, var(--to) 91.90%, var(--from)) 77.27%,
      color-mix(in oklab, var(--to) 95.51%, var(--from)) 81.82%,
      color-mix(in oklab, var(--to) 97.95%, var(--from)) 86.36%,
      color-mix(in oklab, var(--to) 99.35%, var(--from)) 90.91%,
      color-mix(in oklab, var(--to) 99.91%, var(--from)) 95.45%,
      color-mix(in oklab, var(--to) 100.00%, var(--from)) 100.00%);
}
.seam--loud { height: clamp(200px, 42vh, 460px); }

/* A section that paints no background of its own hands the seam whatever its content
   painted last, and block_bg() can only know about the section. The CTA is the case that
   bites: its section is transparent and its content is a full-bleed dark panel, and the
   theme's mb_mobile flag zeroes the bottom margin below 992px — which was right when the
   next section began immediately underneath, and wrong now that a melt does. Flush, the
   dark panel met a seam correctly starting from the page's white: a 225/255 step on every
   service page at 390 and 768. Give it back a floor, but only where a seam follows. */
.cta:has(+ .seam) { margin-bottom: 40px; }

/* The two washes. Both are transparent by 58%, so neither can reach a horizontal edge and
   reintroduce the line the melt exists to remove. Alternate seams mirror them, so a page
   with several melts does not repeat the same lighting down its whole length. */
.seam--loud::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(78% 46% at 80% 42%, color-mix(in oklab, var(--to) 30%, transparent), transparent 58%),
    radial-gradient(64% 40% at 14% 62%, color-mix(in oklab, var(--sand-sm) 22%, transparent), transparent 58%);
}
.seam--loud.seam--alt::before {
  background:
    radial-gradient(78% 46% at 20% 42%, color-mix(in oklab, var(--to) 30%, transparent), transparent 58%),
    radial-gradient(64% 40% at 86% 62%, color-mix(in oklab, var(--sand-sm) 22%, transparent), transparent 58%);
}

/* No noise overlay here, deliberately. One was added to break up the banding a 460px
   ramp between two close colours would show at 8 bits per channel — but measuring the
   ramp with and without it gave identical results (longest flat run 17/33/19 rows either
   way), because Chromium already dithers gradients itself. All the overlay contributed
   was grain, and a texture edge where the grain stopped at the seam's boundary: pixel-to-
   pixel variation went 0.00 on the flat section to 0.5 inside the seam over one pixel,
   which reads as a line just as readily as a colour step does. The browser's own
   dithering is measured at 0.46 through the middle of a seam and 0.10 at its edges. */

/* A seam is a colour transition, not content. With no colour it has nothing to say. */
@media (forced-colors: active) { .seam { display: none; } }