/* ---------------------------------------------------------------
   SEER — public site theme (SEER Brand Guidelines, final)
   Exactly four colours, each with one job: Truffle (main brand —
   wordmark, headlines, emphasis, accents), Stone (every light
   background), Burgundy (the three service-line names ONLY), Black
   (body type only). Brand colours are injected into :root at runtime
   by app.js, so the CMS "Branding" panel can recolour the whole site
   live. --truffle-tint / --hairline below are calculated blends of
   those four (for hover states and hairline borders) — never a fifth
   colour, and they update automatically if Truffle or Stone change.
----------------------------------------------------------------*/
/* Brand fonts are SELF-HOSTED (variable woff2, latin subset, downloaded from
   Google Fonts) and preloaded from every shell's <head>. font-display:
   optional means text NEVER swaps fonts mid-view — with the preload + the
   long-cached same-origin files the real font wins first paint on every
   navigation, which is what keeps the menu bar rock steady between pages
   (Google's display=swap repainted the bar in a fallback font for ~100ms on
   EVERY load). Cold first-ever visit worst case: system font for that one
   view, then correct forever. */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("/assets/fonts/inter-tight.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  font-style: italic;
  font-weight: 400 700;
  font-display: optional;
  src: url("/assets/fonts/inter-tight-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("/assets/fonts/playfair-display.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 700;
  font-display: optional;
  src: url("/assets/fonts/playfair-display-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --truffle: #38261C;  /* Truffle — wordmark, headlines, emphasis, accents */
  --stone: #F6F3EC;    /* Stone — every light background */
  --black: #000000;    /* Black — body type only */
  --burgundy: #4A1822; /* Burgundy — service-line names only, nowhere else */
  --white: #FFFFFF;    /* White — pure-white surfaces and reversed type */
  --truffle-tint: color-mix(in srgb, var(--truffle) 85%, var(--stone) 15%); /* hover states, stats band, gradient end */
  --hairline: color-mix(in srgb, var(--truffle) 15%, var(--stone) 85%);    /* hairline borders */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Type scale: --size-hero/-h2/-h3/-body/-lead/-eyebrow are injected here
     at runtime when a design package is uploaded; each rule below falls back
     to its original value when unset. The --scale-* multipliers layer on top —
     set from the CMS "Design → Text sizes" card (see applyStyles in app.js). */
  --wrap: 1180px;
  --radius: 2px;
  --shadow: 0 24px 60px -30px rgba(56, 38, 28, 0.35);
}

* { box-sizing: border-box; }
/* scrollbar-gutter — the page paints before its content lands, so the
   scrollbar appears a beat later; without a reserved gutter that narrows the
   viewport mid-load and every centred column (the menu bar included) shifts
   left on every navigation. Reserving the gutter permanently keeps the bar
   pinned; the empty strip reads as Stone background on short pages. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; font-size: calc(var(--size-body, 100%) * var(--scale-body, 1)); }
/* Reveal/seq animations park elements off to the side (translateX) before they
   animate in, which would widen the page's scrollable area — clip it so phones
   can't drag into a blank right-hand strip. clip (not hidden) keeps sticky
   positioning and doesn't create a scroll container. */
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--truffle);
  background: var(--stone);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: calc(clamp(64px, 9vw, 128px) * var(--scale-section, 1)) 0; }

/* Playfair Display Bold (700) carries every display setting, per brand. */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; margin: 0; }
.eyebrow {
  font-size: calc(var(--size-eyebrow, 0.78rem) * var(--scale-eyebrow, 1)); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--truffle); font-weight: 600; margin: 0 0 18px;
}
/* Italic emphasis is Truffle on light grounds; on Truffle bands it inherits
   the light text colour (the brand renders emphasis in Stone on dark). */
.em { font-style: italic; color: var(--truffle); }
.hero .em, .approach .em, .cta-band .em, .careers-card .em, .stats-band .em { color: inherit; }
/* Service-line lockup: "SEER" roman Truffle + name in italic Burgundy —
   the only place Burgundy ever appears. */
.svc-line { font-style: italic; color: var(--burgundy); }
.lead { font-size: calc(var(--size-lead, clamp(1.05rem, 1.6vw, 1.2rem)) * var(--scale-lead, 1)); color: var(--black); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 2px; font-weight: 600; font-size: 0.95rem;
  border: 1px solid transparent; cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
.btn-primary { background: var(--truffle); color: var(--stone); }
.btn-primary:hover { background: var(--truffle-tint); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--hairline); color: var(--truffle); }
.btn-ghost:hover { border-color: var(--truffle); color: var(--truffle); }
.btn-dark { background: var(--truffle); color: var(--stone); }
.btn-dark:hover { background: var(--truffle-tint); }
.btn-outline-light { border-color: rgba(246,243,236,.35); color: var(--stone); }
.btn-outline-light:hover { border-color: var(--stone); color: var(--stone); }
/* CMS button lists can hold any number of buttons — lay them out in a row */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-row-center { justify-content: center; }

/* ---------------- header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 243, 236, 0.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s;
}
.site-header.scrolled { border-color: var(--hairline); box-shadow: 0 6px 24px -18px rgba(56,38,28,.4); }
.header-inner { display: flex; align-items: center; gap: 24px; height: 76px; }
/* flex:none — in a tight header the logo must never be the thing that gives:
   squeezed, its fixed height + shrunken width distorts the wordmark. */
.brand { display: flex; align-items: center; flex: none; }
/* Logo artwork sits inside a padded canvas — sized larger than it reads so the
   visible wordmark lands around 25px tall in the 76px header. */
.brand img { height: calc(52px * var(--scale-logo, 1)); width: auto; }
.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a { font-size: 0.94rem; color: var(--truffle); position: relative; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--truffle); transition: width .25s; }
.nav a:hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: 8px; }
.header-phone { font-weight: 500; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; flex: none; }
.nav-toggle span { width: 24px; height: 2px; background: var(--truffle); transition: .25s; }

/* Menu-bar dropdowns: a nav item with sub-items renders as a button that
   toggles a small Stone panel (app.js wires the click — one open at a time,
   outside click / Escape closes). The button matches .nav a exactly: same
   type, same underline-on-hover, plus a caret that flips while open. */
.nav-drop { position: relative; }
.nav-drop-btn {
  font: inherit; font-size: 0.94rem; color: var(--truffle); background: none; border: 0; cursor: pointer;
  position: relative; padding: 4px 0; display: inline-flex; align-items: center; gap: 7px;
}
.nav-drop-btn::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--truffle); transition: width .25s; }
.nav-drop-btn:hover::after, .nav-drop.open .nav-drop-btn::after { width: 100%; }
.nav-drop-caret { width: 10px; height: 6px; flex: none; transition: transform .25s; }
.nav-drop.open .nav-drop-caret { transform: rotate(180deg); }
.nav-drop-menu {
  display: none; position: absolute; top: calc(100% + 14px); left: -14px; min-width: 220px;
  background: var(--stone); border: 1px solid var(--hairline); border-radius: 12px;
  box-shadow: 0 24px 48px -24px rgba(56,38,28,.45); padding: 8px; z-index: 60;
}
.nav-drop.open .nav-drop-menu { display: block; }
/* Panel links are a vertical list on their own Stone surface — swap the bar's
   underline animation for a soft hover tint. */
.nav-drop-menu a { display: block; padding: 9px 12px; border-radius: 8px; white-space: nowrap; }
.nav-drop-menu a::after { display: none; }
.nav-drop-menu a:hover { background: color-mix(in srgb, var(--truffle) 8%, transparent); }
/* Sub-sub entries ("– "-prefixed children — the renderers group each run under
   the entry above it, see renderHeader/navLinksHtml) fly out to the RIGHT of
   their parent entry on hover. The parent stays a real link to its own
   sub-page; a chevron marks that more sits behind it. The panel overlaps the
   parent by a few px so the mouse never crosses a dead gap on its way over. */
.nav-sub { position: relative; }
.nav-sub > a { padding-right: 28px; }
.nav-sub > a::before { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg); opacity: .55; }
.nav-sub-menu {
  display: none; position: absolute; left: calc(100% - 4px); top: -9px; min-width: 220px;
  background: var(--stone); border: 1px solid var(--hairline); border-radius: 12px;
  box-shadow: 0 24px 48px -24px rgba(56,38,28,.45); padding: 8px; z-index: 61;
}
.nav-sub:hover > .nav-sub-menu, .nav-sub:focus-within > .nav-sub-menu { display: block; }

/* On pages with a hero (app.js adds .over-hero) the menu bar overlays the
   backdrop rather than sitting above it: the hero slides up underneath via
   the negative margin, the bar goes transparent, and its type flips to Stone
   (the wordmark is repainted white by the filter). Any scroll restores the
   solid Stone bar. The mobile drop-down (.nav.open) carries its own Stone
   background, so its links are excluded and stay Truffle. */
.site-header.over-hero { margin-bottom: -76px; }
.site-header.over-hero:not(.scrolled) { background: transparent; backdrop-filter: none; }
.site-header.over-hero:not(.scrolled) .brand img { filter: brightness(0) invert(1); }
/* Dropdown PANELS keep their own Stone surface, so their links are excluded
   from the over-hero flip (like .nav.open) and stay Truffle; the dropdown
   trigger button flips with the bar links. */
.site-header.over-hero:not(.scrolled) .nav:not(.open) a:not(.nav-drop-menu a),
.site-header.over-hero:not(.scrolled) .nav:not(.open) .nav-drop-btn { color: var(--stone); }
.site-header.over-hero:not(.scrolled) .nav:not(.open) a:not(.nav-drop-menu a)::after,
.site-header.over-hero:not(.scrolled) .nav:not(.open) .nav-drop-btn::after { background: var(--stone); }
.site-header.over-hero:not(.scrolled) .btn-ghost { color: var(--stone); border-color: rgba(246,243,236,.35); }
.site-header.over-hero:not(.scrolled) .btn-ghost:hover { border-color: var(--stone); color: var(--stone); }
.site-header.over-hero:not(.scrolled) .btn-primary { background: transparent; border-color: rgba(246,243,236,.35); color: var(--stone); }
.site-header.over-hero:not(.scrolled) .btn-primary:hover { background: rgba(246,243,236,.14); }
.site-header.over-hero:not(.scrolled) .nav-toggle span { background: var(--stone); }
/* The hero band now starts behind the bar — give the copy the bar's height
   back so it can't collide with the logo and menu on short screens. */
.site-header.over-hero + main .hero-grid { padding-top: 156px; }

/* Cross-document view transitions (Chrome 126+/Safari 18.2+; older browsers
   simply ignore this): keep the old page on screen until the next one has
   rendered, then crossfade — no white flash between pages. The menu bar is
   its own named group, so when it renders identically on both pages (the
   server pre-fills it fully) its pixels never change at all. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------------- hero ---------------- */
/* First paint happens before app.js runs (it revalidates on every nav): an
   unrendered band would paint only its CSS chrome — the CTA band and footer
   showed as bare brown strips on content-light pages. Empty bands stay hidden
   until they have content; the hero instead HOLDS its dark plate at the
   rendered height (matching .hero-grid min-height + padding) so the homepage
   opens on brand truffle, not a white page under an invisible over-hero
   menu bar. */
main > section:empty, .site-footer:empty { display: none; }
.hero:empty { display: block; min-height: calc(clamp(560px, 78vh, 760px) + 160px); }

.hero { position: relative; overflow: hidden; background: var(--truffle); color: var(--stone); }
/* Plain copy stack over the dimmed backdrop — eyebrow, headline (+emphasis),
   subhead, buttons, in reading order, centred vertically in the band. */
.hero-grid {
  display: grid; grid-template-columns: 1fr; align-items: center;
  min-height: clamp(560px, 78vh, 760px); padding: 80px 0;
}
.hero-copy { max-width: 60ch; }
.hero .eyebrow { color: var(--stone); }
.hero h1 { font-size: calc(var(--size-hero, clamp(2.6rem, 5.4vw, 4.4rem)) * var(--scale-hero, 1)); font-weight: 400; }
/* The emphasis field always starts its own line ("See clearly." / "Decide
   confidently."). It carries .em-line plus .em when it's italic throughout;
   with *word* markup in the field it's .em-line alone, roman, with inline
   .em spans for the marked words. */
.hero h1 .em-line { display: block; }
.hero p.lead { color: rgba(246,243,236,.78); max-width: 46ch; margin-top: 22px; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-bg { position: absolute; inset: 0; z-index: 0; opacity: .5; }
.hero-bg img, .hero-bg video { width: 100%; height: 100%; object-fit: cover; }
.hero .wrap { position: relative; z-index: 1; }

/* ---------------- stats ---------------- */
/* The band (not the grid) carries the vertical padding so the Studio's
   spacing sliders (statsStyle) have one carrier to override. */
.stats-band { background: var(--truffle); color: var(--stone); padding: 54px 0; }
/* Studio-set band colour: on a light background the Stone type would vanish,
   so app.js adds .band-light and the type flips to Truffle. */
.stats-band.band-light { color: var(--truffle); }
.stats-band.band-light .stat .num { color: var(--truffle); }
.stats-band.band-light .stat .lbl { color: color-mix(in srgb, var(--truffle) 70%, transparent); }
.stats-band.band-light .stats-grid .stat + .stat { border-left-color: color-mix(in srgb, var(--truffle) 20%, transparent); }
.stats-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 24px; }
.stat { text-align: center; padding: 8px; }
.stat .num { font-family: var(--font-heading); font-size: calc(var(--size-stat, clamp(2.4rem, 4vw, 3.4rem)) * var(--scale-stat, 1)); color: var(--stone); }
.stat .lbl { color: rgba(246,243,236,.7); font-size: 0.95rem; max-width: 26ch; margin: 8px auto 0; }
.stats-grid .stat + .stat { border-left: 1px solid rgba(246,243,236,.15); }

/* ---------------- intro ---------------- */
.intro { padding: calc(clamp(64px, 9vw, 120px) * var(--scale-section, 1)) 0; background: var(--stone); }
.intro-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: start; }
.intro h2 { font-size: calc(var(--size-h2, clamp(1.9rem, 3.4vw, 2.9rem)) * var(--scale-h2, 1)); font-weight: 400; }
.intro .body { color: var(--black); font-size: 1.08rem; }
.rule { width: 64px; height: 3px; background: var(--truffle); margin-bottom: 26px; }

/* ---------------- section headers ---------------- */
.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head h2 { font-size: calc(var(--size-h2, clamp(1.9rem, 3.4vw, 2.8rem)) * var(--scale-h2, 1)); font-weight: 400; }
.section-head p { color: var(--black); margin-top: 12px; font-size: 1.06rem; }

/* homepage links out to each section's standalone page */
.section-more { display: inline-block; margin-top: 18px; color: var(--truffle); font-weight: 500; font-size: 0.95rem; }
.section-more:hover { text-decoration: underline; }
.approach .section-more { color: var(--stone); }
.svc-link { display: inline-block; margin-top: 16px; color: var(--truffle); font-weight: 500; font-size: 0.9rem; }
.svc-link:hover { text-decoration: underline; }

/* ---------------- services ---------------- */
.services { background: var(--stone); }
.svc-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 20px; }
.svc {
  background: var(--stone); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 34px; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.svc:hover { box-shadow: var(--shadow); border-color: var(--truffle); }
.svc-icon { width: 48px; height: 48px; border-radius: 2px; background: var(--truffle); color: var(--stone); display: grid; place-items: center; margin-bottom: 20px; }
.svc-icon svg { width: 24px; height: 24px; }
/* An icon picked from the media library (an image instead of a built-in
   glyph) fills the tile edge to edge. */
.svc-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.svc h3 { font-size: calc(var(--size-h3, 1.35rem) * var(--scale-h3, 1)); margin-bottom: 10px; }
.svc p { color: var(--black); margin: 0; }
.svc-points { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hairline); display: grid; gap: 8px; }
.svc-points li { position: relative; padding-left: 20px; color: var(--black); font-size: 0.92rem; }
.svc-points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 2px; background: var(--truffle); }

/* ---------------- approach ---------------- */
.approach { background: var(--truffle); color: var(--stone); }
.approach .section-head p { color: color-mix(in srgb, var(--stone) 68%, transparent); }
.steps { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 22px; }
.step { border-top: 2px solid color-mix(in srgb, var(--stone) 30%, transparent); padding-top: 22px; }
.step .n { font-family: var(--font-heading); font-style: italic; font-size: 2.4rem; color: var(--stone); }
.step h3 { font-size: calc(var(--size-h3, 1.3rem) * var(--scale-h3, 1)); margin: 8px 0 10px; }
.step p { color: color-mix(in srgb, var(--stone) 68%, transparent); font-size: 0.97rem; margin: 0; }

/* ---------------- global reach ---------------- */
.cases { background: var(--stone); }
.case-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 24px; }
.case {
  background: var(--stone); border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s;
}
.case:hover { box-shadow: var(--shadow); }
.case-img { aspect-ratio: 4/3; overflow: hidden; }
.case-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.case:hover .case-img img { transform: scale(1.09); }
.case-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.tag { align-self: flex-start; font-size: 0.72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--truffle); font-weight: 700; margin-bottom: 12px; }
.case-tags { display: flex; gap: 8px 14px; flex-wrap: wrap; }
.case-tags .tag { margin-bottom: 12px; }
.tag-type { color: var(--black); }
.case h3 { font-size: calc(var(--size-h3, 1.22rem) * var(--scale-h3, 1)); margin-bottom: 10px; }
.case p { color: var(--black); font-size: 0.96rem; flex: 1; }
.case .value { margin-top: 16px; font-weight: 600; color: var(--truffle); border-top: 1px solid var(--hairline); padding-top: 14px; }

/* ---------------- about ---------------- */
.about { background: var(--stone); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.about h2 { font-size: calc(var(--size-h2, clamp(1.9rem, 3.4vw, 2.8rem)) * var(--scale-h2, 1)); font-weight: 400; margin-bottom: 20px; }
.about .body { color: var(--black); font-size: 1.06rem; }
.team { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 20px; margin-top: 8px; }
.member { background: var(--stone); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px; }
.member img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.member .name { font-weight: 600; }
.member .role { color: var(--truffle); font-size: 0.85rem; margin-bottom: 8px; }
.member .bio { color: var(--black); font-size: 0.88rem; }
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.vm { background: var(--stone); border: 1px solid var(--hairline); border-left: 3px solid var(--truffle); border-radius: var(--radius); padding: 22px; }
.vm .eyebrow { margin-bottom: 10px; }
.vm p:last-child { margin: 0; color: var(--black); font-size: 0.98rem; }
/* The About TAB's two sub-pages (About us / Meet the team) + their pill nav —
   shared with the Services tab's sub-pages (.svc-subnav / .svc-sub).
   The Studio preview stacks a tab's sub-pages (data-stacked) with a hairline
   between. */
.about-subnav, .svc-subnav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 42px; }
/* A band that opens with the pill sub-nav sits right under the menu bar — the
   full section padding above such small chrome reads as a hole, so the pills
   hug the header like an extension of the menu (the per-band spacing slider
   still applies). */
.section:has(> .wrap > .about-subnav),
.section:has(> .wrap > .svc-subnav) { padding-top: calc(12px * var(--scale-section, 1)); }
/* Standalone pages that open with a plain section head (Events, Careers,
   Contact, Global Reach) trim the first band's padding too — full padding
   under the menu bar read as a hole of empty Stone. Approach keeps its full
   pad (its dark band owns that space); the homepage is untouched (these
   sections aren't first there). Per-band spacing sliders still override. */
#eventsMain.section,
main > .careers.section:first-child,
main > .contact.section:first-child,
main > .cases.section:first-child { padding-top: calc(40px * var(--scale-section, 1)); }
.about-subnav a, .svc-subnav a {
  padding: 9px 24px; border: 1px solid var(--hairline); border-radius: 999px;
  font-weight: 600; font-size: 0.95rem; color: var(--truffle);
  transition: background .2s, color .2s, border-color .2s;
}
.about-subnav a:hover, .svc-subnav a:hover { border-color: var(--truffle); }
.about-subnav a.active, .svc-subnav a.active { background: var(--truffle); border-color: var(--truffle); color: var(--stone); }
.about-sub .body { max-width: 76ch; }
.team-page { grid-template-columns: repeat(3, 1fr); }
.team-page .member img { width: 84px; height: 84px; }
.about[data-stacked] .about-sub + .about-sub,
.services[data-stacked] .svc-sub + .svc-sub { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--hairline); }

/* ---------------- careers ---------------- */
.careers { background: var(--stone); }
.careers-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
.careers-benefits h3 { font-size: calc(var(--size-h3, 1.35rem) * var(--scale-h3, 1)); margin-bottom: 20px; }
.careers-benefits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.careers-benefits .benefit {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--stone); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px 20px;
  color: var(--truffle); font-size: 0.98rem;
}
.benefit-mark {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--truffle); color: var(--stone); font-size: 0.8rem; font-weight: 700;
  display: grid; place-items: center; margin-top: 1px;
}
.careers-card {
  background: var(--truffle); color: var(--stone); border-radius: var(--radius);
  padding: 34px; box-shadow: var(--shadow); position: sticky; top: 100px;
}
.careers-card .eyebrow { color: var(--stone); margin-bottom: 12px; }
.careers-card h3 { font-size: calc(var(--size-h3, 1.4rem) * var(--scale-h3, 1)); margin-bottom: 12px; }
.careers-card p { color: color-mix(in srgb, var(--stone) 72%, transparent); font-size: 0.96rem; margin: 0 0 24px; }
.careers-email { display: block; margin-top: 16px; color: var(--stone); font-size: 0.9rem; }
.careers-email:hover { text-decoration: underline; }

/* Careers — open roles (hash-routed sub-pages: cards → /careers#<tag> role
   page → /careers#apply application page) */
.careers-view[hidden] { display: none; }
/* Studio preview stacks every view so all fields stay click-editable. */
.careers[data-stacked] .careers-view { display: block !important; }
.careers[data-stacked] .careers-view + .careers-view { border-top: 1px solid var(--hairline); margin-top: 48px; padding-top: 48px; }
.careers-openings { margin-top: 72px; }
.careers-openings .openings-head { margin-bottom: 36px; }
.careers-openings .openings-head h3 { font-size: calc(var(--size-h3, 1.6rem) * var(--scale-h3, 1)); margin: 0 0 10px; }
.openings-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: stretch; }
.role-card { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px 28px; display: flex; flex-direction: column; }
.role-card[data-role-card-nav] { cursor: pointer; }
.role-card p { flex: 1; }
.role-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.role-meta span {
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600;
  color: var(--truffle); background: var(--stone); border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 11px;
}
.role-card h4 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.015em; font-size: 1.25rem; margin: 0 0 8px; }
.role-card p { color: color-mix(in srgb, var(--truffle) 78%, transparent); font-size: 0.95rem; line-height: 1.6; margin: 0 0 16px; }
.role-apply {
  display: inline-flex; align-items: center; gap: 8px; padding: 0;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--truffle); font-weight: 600; font-size: 0.92rem; text-decoration: none;
}
.role-apply:hover { text-decoration: underline; }
.openings-cta { margin-top: 30px; }
.openings-cta .form-note { margin-top: 12px; }
/* A role's own page — single readable column. */
.role-page { max-width: 800px; }
.role-page .role-meta { margin: 0 0 14px; }
.role-title { font-size: calc(var(--size-h3, 1.9rem) * var(--scale-h3, 1)); margin: 0 0 14px; }
.role-lede { font-size: 1.05rem; line-height: 1.65; color: color-mix(in srgb, var(--truffle) 88%, transparent); margin: 0 0 8px; }
.role-sec { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.015em; font-size: 1.25rem; margin: 30px 0 12px; }
.role-body p { margin: 0 0 14px; line-height: 1.7; color: color-mix(in srgb, var(--truffle) 80%, transparent); }
.role-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.role-reqs li { display: flex; align-items: flex-start; gap: 14px; color: var(--truffle); font-size: 0.98rem; line-height: 1.55; }
.role-cta { margin-top: 34px; }
/* The application page — one centered form. */
.apply-page { max-width: 640px; margin: 0 auto; }
/* The application card sits on the Stone band, so it goes white to stand out
   (the .form base is Stone-on-Stone here); inputs flip to Stone on white. */
.careers-apply.form { background: var(--white); }
.careers-apply h3 { font-size: calc(var(--size-h3, 1.35rem) * var(--scale-h3, 1)); margin: 0 0 8px; }
.careers-apply .apply-intro { font-size: 0.94rem; color: color-mix(in srgb, var(--truffle) 78%, transparent); margin: 0 0 20px; }
.careers-apply .form-note { color: color-mix(in srgb, var(--truffle) 65%, transparent); }
.apply-form select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 2px;
  font-family: inherit; font-size: 0.96rem; background: var(--stone); color: inherit; cursor: pointer;
}
.apply-form select:focus { outline: none; border-color: var(--truffle); }
/* Resume control: the native file input stays rendered (required-field
   validation needs a focusable box) but invisible under the styled label. */
.resume-drop {
  position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--truffle) 40%, transparent);
  border-radius: var(--radius); padding: 13px 14px; background: var(--stone);
}
.resume-drop:hover { border-color: var(--truffle); }
.resume-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.resume-cta {
  flex: none; padding: 8px 14px; border-radius: 2px;
  background: var(--truffle); color: var(--stone); font-size: 0.85rem; font-weight: 600;
}
.resume-name { font-size: 0.82rem; color: color-mix(in srgb, var(--truffle) 65%, transparent); overflow-wrap: anywhere; }
/* Resume auto-fill: the read status under the drop box, and a soft tint on
   every field it filled until the applicant edits it. */
/* Step 1's optional pre-fill box, set apart under the basic details. */
.apply-prefill { margin: 4px 0 22px; padding: 16px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--truffle) 4%, var(--stone)); border: 1px solid var(--hairline); }
.apply-prefill-h { margin: 0 0 4px; font-weight: 700; font-size: 0.95rem; color: var(--truffle); }
.apply-prefill-h span { font-weight: 500; color: color-mix(in srgb, var(--truffle) 55%, transparent); }
.apply-prefill-p { margin: 0 0 12px; font-size: 0.85rem; line-height: 1.5; color: color-mix(in srgb, var(--truffle) 70%, transparent); }
.resume-parse { margin: 8px 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--truffle); }
.resume-parse[hidden] { display: none; }
.resume-parse[data-kind="busy"]::before {
  content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 8px; vertical-align: -0.1em;
  border: 2px solid color-mix(in srgb, var(--truffle) 25%, transparent); border-top-color: var(--truffle);
  border-radius: 50%; animation: resume-spin 0.8s linear infinite;
}
@keyframes resume-spin { to { transform: rotate(360deg); } }
.resume-parse[data-kind="err"] { color: var(--burgundy); }
.apply-form .apply-auto { background: color-mix(in srgb, var(--truffle) 7%, var(--stone)); border-color: color-mix(in srgb, var(--truffle) 35%, transparent); }
.apply-success { font-weight: 600; color: var(--truffle); margin: 0; }
/* The apply page's 5-step wizard (Your resume → About you → Experience →
   Role & questions → Review & send): a slim progress header, one step visible at a time, and a
   read-only recap on the last step. The stacked Studio preview shows every
   step at once with small step tags instead. */
.careers-apply { scroll-margin-top: 90px; }
.apply-progress { margin: 0 0 22px; }
.apply-count { margin: 0 0 8px; font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600;
  color: color-mix(in srgb, var(--truffle) 60%, transparent); }
.apply-count b, .apply-count span { color: var(--truffle); }
.apply-bar { height: 4px; border-radius: 999px; background: var(--stone); overflow: hidden; }
.apply-bar i { display: block; height: 100%; border-radius: 999px; background: var(--truffle); transition: width 0.35s ease; }
.apply-step[hidden] { display: none; }
.apply-nav { display: flex; gap: 12px; margin-top: 4px; }
/* .btn's display would defeat the hidden attribute the wizard toggles. */
.apply-nav .btn[hidden] { display: none; }
.apply-review { margin: 0 0 20px; max-height: 340px; overflow: auto; }
.apply-rev-row { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.apply-rev-row:last-child { border-bottom: 0; }
.apply-rev-row span { display: block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: color-mix(in srgb, var(--truffle) 58%, transparent); margin-bottom: 3px; }
.apply-rev-row p { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--truffle); overflow-wrap: anywhere; }
/* Stacked-preview step tags + the per-role question group labels. */
.apply-step-tag { margin: 26px 0 14px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: color-mix(in srgb, var(--truffle) 55%, transparent); border-top: 1px dashed var(--hairline); padding-top: 16px; }
.apply-quiz-tag { margin: 14px 0 10px; font-size: 0.8rem; font-weight: 700; color: var(--truffle); }
/* Two-column field grid (profile + job-specific blocks); .half shares a row. */
.apply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.apply-grid .field { grid-column: 1 / -1; }
.apply-grid .field.half { grid-column: auto; }
@media (max-width: 560px) { .apply-grid .field.half { grid-column: 1 / -1; } }
.apply-form label .req { color: var(--burgundy); font-weight: 700; }
.apply-hint { margin: 0 0 6px; }
/* In-step section headings (Employment information, Work experience, …). */
.apply-sec { margin: 24px 0 12px; padding-top: 16px; border-top: 1px solid var(--hairline);
  font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700;
  color: color-mix(in srgb, var(--truffle) 70%, transparent); }
/* Repeatable rows (work experience / education / certifications / languages). */
.apply-rep-row { position: relative; padding: 16px 14px 4px; margin: 0 0 12px;
  border: 1px dashed color-mix(in srgb, var(--truffle) 28%, transparent); border-radius: var(--radius);
  background: color-mix(in srgb, var(--stone) 45%, transparent); }
.apply-rep-remove { position: absolute; top: 8px; right: 12px; background: none; border: none; padding: 2px;
  font: inherit; font-size: 0.76rem; font-weight: 600; color: var(--burgundy); cursor: pointer; }
.apply-rep-remove:hover { text-decoration: underline; }
.apply-rep-add { background: none; border: 1px solid var(--hairline); border-radius: 2px; padding: 8px 14px;
  font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--truffle); cursor: pointer; margin-bottom: 4px; }
.apply-rep-add:hover { border-color: var(--truffle); }
/* The step-5 applicant declaration. The extra .form ancestor matters: the
   generic `.form label { display:block }` outranks a lone .apply-ack and
   would stack the checkbox ABOVE the sentence instead of beside it. */
.form .apply-ack { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; cursor: pointer;
  font-size: 0.9rem; font-weight: 400; line-height: 1.5; color: var(--truffle); }
.form .apply-ack input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--truffle); }
/* Role-page facts strip: Employment type / Work location / Roster. */
.role-facts { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 0 0 20px; padding: 16px 20px;
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); }
.role-fact span { display: block; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: color-mix(in srgb, var(--truffle) 55%, transparent); }
.role-fact p { margin: 3px 0 0; font-size: 0.95rem; font-weight: 600; color: var(--truffle); }

/* ---------------- legal overlay ---------------- */
.legal-overlay {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto;
  background: rgba(56, 38, 28, 0.55); backdrop-filter: blur(6px);
  padding: clamp(20px, 5vw, 60px) 20px; animation: legalFade .25s ease;
}
@keyframes legalFade { from { opacity: 0; } to { opacity: 1; } }
.legal-card {
  position: relative; max-width: 760px; margin: 0 auto;
  background: var(--stone); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(28px, 5vw, 56px); animation: legalUp .3s cubic-bezier(.22,1,.36,1);
}
@keyframes legalUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.legal-card h2 { font-size: calc(var(--size-h2, clamp(1.7rem, 3vw, 2.4rem)) * var(--scale-h2, 1)); font-weight: 400; margin-bottom: 6px; }
.legal-updated { color: var(--black); font-size: 0.85rem; margin: 0 0 22px; }
.legal-body p { color: var(--black); font-size: 0.98rem; margin: 0 0 16px; }
.legal-close {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--hairline); background: var(--stone);
  font-size: 1.3rem; line-height: 1; color: var(--truffle); cursor: pointer; transition: all .2s;
}
.legal-close:hover { border-color: var(--truffle); color: var(--truffle); }

/* Service sub-pages (/services#seer-advisory — used to be the "Learn more"
   popup overlay): icon + title head, then the panels' stacked photo + text
   elements at a readable measure. */
.svc-sub-head { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; }
.svc-sub-head .svc-icon { margin: 0; flex: none; }
.svc-sub-head h2 { margin: 0; font-size: calc(var(--size-h2, clamp(1.7rem, 3vw, 2.4rem)) * var(--scale-h2, 1)); font-weight: 400; }
.svc-sub-body { margin-top: 20px; max-width: 76ch; }
.svc-sub-body p:last-child { margin-bottom: 0; }
/* Extra panels (a card with several) stack under the page head, a hairline
   between; each keeps its own optional h3 heading. */
.svc-sub-panel { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--hairline); }
.svc-sub-panel:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.svc-sub-panel h3 { margin: 0; }
/* Sub-page elements — stacked photos + text blocks, in author order. */
/* Stacked-page text-element looks (a Text element's font/format switch —
   eyebrow, heading, subheading; body + bullets below), plus the non-text
   elements: a button row, and a card (a framed box of nested elements).
   Title/Points are these looks, not separate kinds. */
.svc-sub-h { margin: 32px 0 0; font-size: calc(var(--size-h3, 1.35rem) * var(--scale-h3, 1)); }
.svc-sub-subh { margin: 22px 0 0; font-size: 1.1rem; font-weight: 600; color: var(--truffle); }
.svc-sub-eyebrow { margin: 26px 0 0; }
.svc-sub-points { margin: 20px 0 0; padding-top: 0; border-top: 0; max-width: 76ch; }
/* Points bullet glyph (data-marker) — "" keeps the drawn dash from .svc-points
   above; these swap it for a glyph as the <li>'s ::before. */
.svc-sub-points[data-marker="dot"] li::before,
.svc-sub-points[data-marker="arrow"] li::before,
.svc-sub-points[data-marker="check"] li::before {
  width: auto; height: auto; top: 0; background: none; color: var(--truffle); font-size: 1em; line-height: 1.4;
}
.svc-sub-points[data-marker="dot"] li::before { content: "\2022"; }
.svc-sub-points[data-marker="arrow"] li::before { content: "\2192"; }
.svc-sub-points[data-marker="check"] li::before { content: "\2713"; }
.svc-sub-points[data-marker="none"] li { padding-left: 0; }
.svc-sub-points[data-marker="none"] li::before { content: none; }
.svc-sub-btn { margin: 28px 0 0; }
.svc-sub-card { margin: 28px 0 0; background: var(--stone); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 28px; max-width: 760px; }
.svc-sub-card > :first-child { margin-top: 0; }
.svc-sub-card:empty { display: none; }
/* Liveliness (wired by app.js svcPopEls, no content change): stacked elements
   rise/blur in on scroll with a light stagger; the first body paragraph reads
   as a standfirst; and a run of "service area" pairs — an eyebrow label + its
   short description — groups into a responsive card grid instead of a flat list. */
.reveal[style*="--i:"] { transition-delay: calc(min(var(--i, 0), 8) * 60ms); }
.svc-sub-lead p { font-size: clamp(1.2rem, 2.1vw, 1.55rem); line-height: 1.5; color: var(--truffle); font-weight: 500; }
.svc-sub-lead p:last-child { margin-bottom: 0; }
.svc-tilegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 34px 0 0; }
/* A stacked service tile (Audit) and a free-placed canvas card (Integrity) share
   ONE look, so the two service pages read as the same design. */
.svc-tile, .svc-elcanvas .svc-sub-card {
  background: var(--stone); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 24px 26px;
  max-width: none; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.svc-tile:hover, .svc-elcanvas .svc-sub-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--truffle); }
.svc-tile > :first-child, .svc-elcanvas .svc-sub-card > :first-child { margin-top: 0; }
.svc-tile .svc-sub-eyebrow, .svc-elcanvas .svc-sub-card .svc-sub-eyebrow { margin: 0 0 12px; }
.svc-tile .svc-sub-points, .svc-tile .svc-sub-body,
.svc-elcanvas .svc-sub-card .svc-sub-points, .svc-elcanvas .svc-sub-card .svc-sub-body { margin: 0; max-width: none; }
.svc-tile .svc-sub-body p, .svc-elcanvas .svc-sub-card .svc-sub-body p { margin: 0; }
/* A single-line card description reads cleaner without a bullet glyph. */
.svc-tile .svc-sub-points, .svc-elcanvas .svc-sub-card .svc-sub-points { list-style: none; }
.svc-tile .svc-sub-points li, .svc-elcanvas .svc-sub-card .svc-sub-points li { padding-left: 0; }
.svc-tile .svc-sub-points li::before, .svc-elcanvas .svc-sub-card .svc-sub-points li::before { content: none; }
@media (max-width: 720px) { .svc-tilegrid { grid-template-columns: 1fr; } }

/* ---------------- Service sub-page design pass — the "lens / focus" motif ----
   SEER = see clearly, so the sub-pages lean into a focus theme: a faint lens
   (concentric aperture) watermark, a header banner whose accent line draws in
   like a lens focusing, an editorial Playfair lead statement, and accent-ticked
   service labels. Pure chrome — no content change — so it lifts BOTH the stacked
   pages (Audit/Advisory) and the free-placed canvas pages (Integrity) alike. */
main > section:has(.svc-subnav) { position: relative; overflow: clip; }
main > section:has(.svc-subnav) > .wrap { position: relative; z-index: 1; }
/* Faint concentric "lens" watermark, upper-right — a quiet brand device. */
main > section:has(.svc-subnav)::before {
  content: ""; position: absolute; top: -130px; right: -150px; width: 480px; height: 480px;
  pointer-events: none; z-index: 0; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 131px, color-mix(in srgb, var(--truffle) 7%, transparent) 131px 133px, transparent 134px),
    radial-gradient(circle, transparent 0 179px, color-mix(in srgb, var(--truffle) 6%, transparent) 179px 181px, transparent 182px),
    radial-gradient(circle, transparent 0 227px, color-mix(in srgb, var(--truffle) 5%, transparent) 227px 229px, transparent 230px);
  animation: lensDrift 26s ease-in-out infinite alternate;
}
@keyframes lensDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-22px, 18px) scale(1.06); } }

/* Header banner: a larger icon tile with depth, and an accent line under the
   title that "focuses" in (grows from 0) as the head reveals. */
.svc-sub-head { position: relative; padding-bottom: 28px; margin-bottom: 16px; }
.svc-sub-head .svc-icon { width: 58px; height: 58px; box-shadow: 0 8px 24px color-mix(in srgb, var(--truffle) 24%, transparent); }
.svc-sub-head .svc-icon svg { width: 28px; height: 28px; }
.svc-sub-head::after {
  content: ""; position: absolute; left: 78px; bottom: 10px; height: 2px; width: 0;
  background: var(--truffle); transition: width 1.1s var(--ease-out) .25s;
}
.svc-sub-head.in::after { width: 104px; }

/* Editorial lead — the "See…" hook becomes a Playfair italic signature line. */
.svc-sub-lead p {
  font-family: var(--font-heading); font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.36; color: var(--truffle); letter-spacing: -0.01em;
}
/* Each service label carries a small accent tick, so the areas read as designed
   (applies to canvas eyebrows on Integrity too). */
.svc-sub-eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 2px; vertical-align: middle;
  background: var(--truffle); margin: -3px 12px 0 0;
}
.svc-tile .svc-sub-eyebrow::before { margin-right: 10px; }
/* A band built from elements (a new element section, or an element page) —
   renderElementSection. Text elements stack full-width; runs of Card elements
   grid into --el-cols columns. Head text adapts to the band colour; cards are
   light boxes with dark text (so a heading, which carries no colour, stays
   visible on the card rather than inheriting a dark band's light text). */
.element-page > :first-child { margin-top: 0; }
.element-page > .svc-sub-eyebrow, .element-page > .svc-sub-body { color: inherit; }
.element-page > .svc-sub-body { opacity: .82; max-width: 640px; }
.el-grid { display: grid; grid-template-columns: repeat(var(--el-cols, 3), 1fr); gap: 20px; margin: 32px 0 0; }
.el-card { background: var(--stone); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 28px; color: var(--black); }
.el-card > :first-child { margin-top: 0; }
.el-card .svc-sub-body { max-width: none; }
@media (max-width: 860px) { .el-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .el-grid { grid-template-columns: 1fr; } }
.svc-sub-fig { margin: 24px 0 0; max-width: 760px; }
.svc-sub-fig img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.svc-sub-fig figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--truffle); opacity: 0.75; }
/* A sub-page's own sub-sub-pages: an "In this section" quick-nav — grouped in a
   soft panel and shown right under the page header (Services) so it's visible
   without scrolling — plus the back-link that heads each sub-sub-page. The
   panel + label read as "jump to a part of this service", set apart from the
   top service selector. */
.svc-sub-kids {
  margin: 20px 0 34px; align-items: center; gap: 10px 12px;
  padding: 14px 18px; border: 1px solid var(--hairline); border-radius: 16px;
  background: color-mix(in srgb, var(--truffle) 5%, var(--stone));
}
.svc-sub-kids-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--truffle); opacity: 0.55; margin-right: 2px;
}
.svc-sub-kids a { background: var(--white); }
.svc-sub-back { display: inline-block; margin-bottom: 22px; font-size: 0.9rem; text-decoration: none; color: var(--truffle); opacity: 0.75; }
.svc-sub-back:hover { opacity: 1; text-decoration: underline; }

/* "Client Discovery Questionnaire" call-out — the coded /questionnaire page's
   entry points: the Approach tab and the foot of every Services sub-page.
   The Approach band is Truffle-dark, so the button flips to Stone there. */
.quest-cta { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--hairline); }
.quest-cta p { max-width: 56ch; margin: 0 0 18px; color: var(--black); }
.approach .quest-cta { border-top-color: color-mix(in srgb, var(--stone) 30%, transparent); }
.approach .quest-cta p { color: color-mix(in srgb, var(--stone) 68%, transparent); }
.approach .quest-cta .btn-primary { background: var(--stone); color: var(--truffle); }
.approach .quest-cta .btn-primary:hover { background: var(--white, #FFFFFF); }

/* ---------------- CTA band ---------------- */
.cta-band { background: linear-gradient(120deg, var(--truffle), var(--truffle-tint)); color: var(--stone); text-align: center; padding: calc(clamp(60px, 8vw, 100px) * var(--scale-section, 1)) 0; }
.cta-band h2 { font-size: calc(var(--size-h2, clamp(1.9rem, 3.6vw, 2.9rem)) * var(--scale-h2, 1)); font-weight: 400; max-width: 20ch; margin: 0 auto 16px; }
.cta-band p { color: color-mix(in srgb, var(--stone) 72%, transparent); margin-bottom: 28px; }

/* ---------------- contact ---------------- */
.contact { background: var(--stone); }
/* The 1.7fr right column dated from the big enquiry form; the lone
   questionnaire card wants the NARROW side or it stretches into a bar. */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; }
.contact h2 { font-size: calc(var(--size-h2, clamp(1.9rem, 3.4vw, 2.6rem)) * var(--scale-h2, 1)); font-weight: 400; margin-bottom: 16px; }
.contact .body { color: var(--black); }
.contact-details { margin-top: 26px; display: grid; gap: 14px; }
.contact-details a, .contact-details span { display: flex; align-items: center; gap: 12px; color: var(--truffle); font-weight: 500; }
.contact-details .ico { width: 38px; height: 38px; border-radius: 2px; background: var(--truffle); color: var(--stone); display: grid; place-items: center; flex: none; }
.form { background: var(--stone); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 30px; }
.form label { display: block; font-size: 0.85rem; font-weight: 600; margin: 0 0 6px; }
.form .field { margin-bottom: 16px; }
.form input, .form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 2px;
  font-family: inherit; font-size: 0.96rem; background: var(--stone);
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--truffle); background: var(--stone); }
.form textarea { min-height: 110px; resize: vertical; }
.form-note { font-size: 0.82rem; color: var(--black); margin-top: 10px; }

/* Anti-bot honeypot: off-screen, never seen or tabbed to by humans. */
.hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Slide-to-verify puzzle (finance background drawn client-side; see app.js).
   The stage layers a background canvas (with the piece-shaped hole) under a
   transparent piece canvas; a track + handle below drives the piece. */
.slidecap { user-select: none; }
.slidecap-stage { position: relative; width: 100%; max-width: 260px; aspect-ratio: 320 / 180; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--truffle) 6%, var(--stone)); }
.slidecap-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.slidecap-track { position: relative; width: 100%; max-width: 260px; height: 42px; margin-top: 12px;
  border-radius: 999px; background: color-mix(in srgb, var(--truffle) 8%, #fff); border: 1px solid var(--hairline);
  display: flex; align-items: center; }
.slidecap-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--truffle) 16%, transparent); pointer-events: none; }
.slidecap-hint { position: absolute; left: 0; right: 0; text-align: center; font-size: 0.82rem; font-weight: 500;
  color: color-mix(in srgb, var(--black) 55%, transparent); pointer-events: none; transition: opacity .2s; }
.slidecap-handle { position: absolute; left: 0; top: -1px; bottom: -1px; width: 46px; border: 1px solid var(--hairline);
  border-radius: 999px; background: var(--truffle); color: var(--stone); display: grid; place-items: center;
  cursor: grab; touch-action: none; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.slidecap-handle:active { cursor: grabbing; }
.slidecap.is-solved .slidecap-handle { background: #2f6b3d; cursor: default; }
.slidecap.is-solved .slidecap-fill { background: color-mix(in srgb, #2f6b3d 22%, transparent); }
.slidecap.is-solved .slidecap-hint { color: #2f6b3d; }
.slidecap.is-error .slidecap-track { animation: slidecap-shake .4s; }
.slidecap.is-error .slidecap-handle { background: var(--burgundy); }
@keyframes slidecap-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

/* The contact section's right column holds the questionnaire card (the AI
   concierge is the site-wide floating chat bot, not embedded here). */
.contact-right { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; align-self: center; }

/* Contact CTA cards — the enquiry and questionnaire boxes share ONE look: a
   Truffle card that starts as a simple prompt, reveals a slide-to-verify gate
   on click, then flips to the form. */
.cta-card { background: var(--truffle); color: var(--stone); border-radius: var(--radius); padding: 30px; }
.cta-card h3 { color: var(--stone); font-size: 1.3rem; font-weight: 400; margin: 0 0 10px; }
.cta-card p { color: color-mix(in srgb, var(--stone) 80%, transparent); font-size: 0.95rem; margin: 0 0 18px; }
.cta-card .btn-primary { width: 100%; background: var(--stone); color: var(--truffle);
  white-space: normal; line-height: 1.35; }
.cta-card .btn-primary:hover { background: var(--white, #FFFFFF); }
.cta-face[hidden] { display: none; }
.cta-gate-title { color: color-mix(in srgb, var(--stone) 85%, transparent); font-size: 0.9rem; font-weight: 500; margin: 0 0 14px; }
.cta-back { display: block; margin: 14px auto 0; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.85rem; color: color-mix(in srgb, var(--stone) 70%, transparent); }
.cta-back:hover { color: var(--stone); }
.cta-body { display: grid; gap: 12px; }
.cta-body form, .disc-fields { display: grid; gap: 12px; }
.disc-fields { margin: 0; }
.cta-in {
  width: 100%; padding: 11px 13px; border-radius: 2px; font-family: inherit; font-size: 0.92rem;
  border: 1px solid color-mix(in srgb, var(--stone) 30%, transparent);
  background: color-mix(in srgb, var(--stone) 8%, transparent); color: var(--stone);
}
textarea.cta-in { min-height: 96px; resize: vertical; }
.cta-in::placeholder { color: color-mix(in srgb, var(--stone) 55%, transparent); }
.cta-in:focus { outline: none; border-color: var(--stone); background: color-mix(in srgb, var(--stone) 14%, transparent); }
.cta-body .form-note { color: color-mix(in srgb, var(--stone) 85%, transparent); margin-top: 4px; }
/* Thank-you face — swaps in for the whole form after a successful enquiry. */
.cta-thanks { text-align: center; padding: 8px 0 4px; }
.cta-tick { width: 54px; height: 54px; border-radius: 50%; background: var(--stone); color: var(--truffle);
  display: grid; place-items: center; margin: 4px auto 18px; }
.cta-thanks h3 { margin: 0 0 8px; }
.cta-thanks p { margin: 0; }
/* Studio preview stacks the faces (intro + form) so every line stays editable. */
.cta-card.cta-stacked .cta-body { border-top: 1px solid color-mix(in srgb, var(--stone) 22%, transparent);
  margin-top: 20px; padding-top: 20px; }

/* The questionnaire card is now the contact page's primary call-to-action, so
   give it more presence: roomier padding and a larger heading / intro / button. */
.discovery-card { padding: 30px 28px; }
.discovery-card h3 { font-size: 1.4rem; line-height: 1.25; margin-bottom: 12px; }
.discovery-card p { font-size: 0.98rem; line-height: 1.55; margin-bottom: 22px; }
.discovery-card .btn-primary { font-size: 0.98rem; padding: 13px 20px; }
@media (max-width: 640px) { .discovery-card { padding: 24px 22px; } }

/* Floating "SEER concierge" chat bot — a site-wide launcher (bottom-right)
   that opens a chat panel, the way most sites carry a live-chat widget.
   Answers questions about SEER and guides interested visitors to the
   questionnaire. Mounted by app.js mountChatbot(); hidden in the Studio. */
.seerbot { position: fixed; right: 22px; bottom: 22px; z-index: 95; }
.seerbot-launch { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0;
  cursor: pointer; background: var(--truffle); color: var(--stone); display: grid; place-items: center;
  box-shadow: 0 12px 30px -8px rgba(56,38,28,.55); transition: transform .18s ease, box-shadow .18s ease; }
.seerbot-launch:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(56,38,28,.6); }
.seerbot-launch svg { position: absolute; transition: opacity .18s ease, transform .18s ease; }
.seerbot-ic-close { opacity: 0; transform: rotate(-45deg) scale(.6); }
.seerbot.open .seerbot-ic-open { opacity: 0; transform: rotate(45deg) scale(.6); }
.seerbot.open .seerbot-ic-close { opacity: 1; transform: none; }

.seerbot-panel { position: absolute; right: 0; bottom: 72px; overflow: hidden;
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column; background: var(--stone); color: var(--truffle);
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--truffle) 12%, transparent);
  box-shadow: 0 24px 60px -12px rgba(56,38,28,.45); transform-origin: bottom right;
  animation: seerbot-in .22s ease; }
.seerbot-panel[hidden] { display: none; }
@keyframes seerbot-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

.seerbot-head { display: flex; align-items: center; gap: 10px; padding: 13px 12px 13px 16px;
  background: var(--truffle); color: var(--stone); }
.seerbot-dot { width: 9px; height: 9px; border-radius: 50%; background: #6fcf7f; flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, #6fcf7f 28%, transparent); }
.seerbot-head-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.seerbot-head-txt strong { font-weight: 600; font-size: 0.98rem; }
.seerbot-head-txt span { font-size: 0.74rem; color: color-mix(in srgb, var(--stone) 70%, transparent);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.seerbot-x { flex: none; background: none; border: 0; padding: 4px; cursor: pointer; border-radius: 6px;
  color: color-mix(in srgb, var(--stone) 80%, transparent); display: grid; place-items: center; }
.seerbot-x:hover { color: var(--stone); background: color-mix(in srgb, var(--stone) 14%, transparent); }

.seerbot-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin; }
.seerbot-msg { max-width: 84%; }
.seerbot-msg p { margin: 0; font-size: 0.9rem; line-height: 1.5; padding: 10px 13px; border-radius: 14px;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.seerbot-msg.bot { align-self: flex-start; }
.seerbot-msg.bot p { background: var(--white, #FFFFFF); color: var(--truffle);
  border: 1px solid color-mix(in srgb, var(--truffle) 10%, transparent); border-bottom-left-radius: 4px; }
.seerbot-msg.user { align-self: flex-end; }
.seerbot-msg.user p { background: var(--truffle); color: var(--stone); border-bottom-right-radius: 4px; }
.seerbot-msg.typing p { display: inline-flex; gap: 5px; align-items: center; }
.seerbot-msg.typing span { width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--truffle) 45%, transparent); animation: seerbot-blink 1.2s infinite ease-in-out both; }
.seerbot-msg.typing span:nth-child(2) { animation-delay: .2s; }
.seerbot-msg.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes seerbot-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Questionnaire button — revealed once the concierge invites them to it. */
.seerbot-cta { padding: 0 14px 8px; }
.seerbot-cta[hidden] { display: none; }
.seerbot-cta .btn-primary { width: 100%; }

/* Page-link buttons the concierge can offer under a reply. */
.seerbot-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.seerbot-linkbtn { font-size: 0.82rem; padding: 7px 12px; text-decoration: none; }

.seerbot-composer { display: flex; gap: 8px; align-items: center; padding: 12px;
  border-top: 1px solid color-mix(in srgb, var(--truffle) 10%, transparent); }
.seerbot-input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 22px; font-family: inherit; font-size: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--truffle) 20%, transparent); background: var(--white, #FFFFFF); color: var(--truffle); }
.seerbot-input::placeholder { color: color-mix(in srgb, var(--truffle) 45%, transparent); }
.seerbot-input:focus { outline: none; border-color: var(--truffle); }
.seerbot-send { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--truffle); color: var(--stone); display: grid; place-items: center; }
.seerbot-send:hover { background: color-mix(in srgb, var(--truffle) 86%, black); }

/* When the chat bot is present, lift the background-music toggle clear of it. */
body:has(#seerbot) .music-toggle { bottom: 92px; }

@media (max-width: 520px) {
  .seerbot { right: 14px; bottom: 14px; }
  .seerbot-panel { bottom: 68px; width: calc(100vw - 24px); height: min(72vh, calc(100vh - 96px)); }
  body:has(#seerbot) .music-toggle { bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .seerbot-panel { animation: none; }
  .seerbot-msg.typing span { animation: none; }
}

/* ---------------- contact action card ---------------- */
/* SEER-branded stand-in for the browser's bare tel:/maps hand-off (app.js
   wireContactActions): a tel: link opens Call now / Copy number; the contact
   address opens Google Maps / Apple Maps directions / Copy address. */
.seer-cx { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 20px; }
.seer-cx-back { position: absolute; inset: 0; background: rgba(30, 20, 14, .55); backdrop-filter: blur(3px); }
.seer-cx-card { position: relative; width: min(420px, 94vw); background: var(--stone); color: var(--truffle);
  border-radius: var(--radius, 2px); padding: 32px 30px 24px; text-align: center;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
.seer-cx-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--truffle); }
.seer-cx-mark { font-family: var(--font-heading); font-weight: 700; font-size: .92rem; letter-spacing: .18em; margin: 0 0 14px;
  color: color-mix(in srgb, var(--truffle) 62%, var(--stone)); }
.seer-cx-h { font-family: var(--font-heading); font-weight: 700; font-size: 1.55rem; margin: 0 0 8px; }
.seer-cx-line { font-size: 1.04rem; line-height: 1.5; margin: 0 auto 20px; max-width: 34ch;
  color: color-mix(in srgb, var(--truffle) 82%, var(--stone)); }
.seer-cx-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.seer-cx-tag { margin: 20px 0 0; font-size: .78rem; font-style: italic; letter-spacing: .05em;
  color: color-mix(in srgb, var(--truffle) 52%, var(--stone)); }
.seer-cx-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--truffle); cursor: pointer; display: grid; place-items: center; }
.seer-cx-x:hover { background: color-mix(in srgb, var(--truffle) 10%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .seer-cx-back { animation: seercx-fade .18s ease both; }
  .seer-cx-card { animation: seercx-rise .22s ease both; }
}
@keyframes seercx-fade { from { opacity: 0; } }
@keyframes seercx-rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------------- 404 ---------------- */
/* Static copy in 404.html (no CMS section) — header/nav/footer still render. */
.notfound { background: var(--stone); min-height: 48vh; display: flex; align-items: center; }
.notfound h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--truffle); margin: 0 0 18px; }
.notfound .lead { max-width: 560px; margin: 0 0 28px; }

/* ---------------- footer ---------------- */
.site-footer { background: var(--truffle); color: rgba(246,243,236,.72); padding: 56px 0 32px; }
.footer-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.footer-brand { display: flex; align-items: center; }
/* Footer sits on dark ink — flatten the logo to a light silhouette so any
   uploaded colourway stays legible. CSS filter() can't target an exact hex,
   so this lands on pure white rather than Stone — the one spot on the site
   where that's true; brand guidelines treat the two as interchangeable on
   designed backgrounds, and the effect is a filter on uploaded art, not a
   background/fill colour choice. */
.footer-brand img { height: 48px; width: auto; filter: brightness(0) invert(1); }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a:hover { color: var(--stone); }
.footer-blurb { max-width: 52ch; font-size: 0.9rem; margin-top: 24px; }
.footer-bottom { border-top: 1px solid rgba(246,243,236,.15); margin-top: 30px; padding-top: 20px; font-size: 0.85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------------- scroll progress + reveal ---------------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--truffle); z-index: 100; transition: width .1s; }

/* Motion easing: --ease-out settles smoothly, --ease-pop overshoots slightly
   for a punchier arrival. Dial the whole system up/down from here. */
:root { --ease-out: cubic-bezier(.22,1,.36,1); --ease-pop: cubic-bezier(.3,1.36,.42,1); --rv: .95s; }

/* whole-section transitions (homepage, wired in app.js) — each band rises,
   sharpens and unveils before its own cards cascade in. Exits are quick so
   scrolling back up never feels like wading through animation. */
.sec-fx {
  opacity: 0; transform: translateY(64px) scale(.985); filter: blur(7px);
  transition: opacity 1.05s var(--ease-out), transform 1.05s var(--ease-pop), filter 1.05s var(--ease-out);
  will-change: opacity, transform, filter;
}
.sec-fx.sec-in { opacity: 1; transform: none; filter: none; }
.sec-fx:not(.sec-in) { transition-duration: .45s; }

/* base reveal + directional variants — travel, de-focus blur, gentle overshoot */
.reveal { opacity: 0; transform: translateY(44px); filter: blur(5px); transition: opacity var(--rv) var(--ease-out), transform var(--rv) var(--ease-pop), filter var(--rv) var(--ease-out); will-change: opacity, transform, filter; }
.reveal.reveal-left { transform: translateX(-64px) rotate(-1.2deg); }
.reveal.reveal-right { transform: translateX(64px) rotate(1.2deg); }
.reveal.reveal-scale { transform: scale(.9); }
.reveal.in { opacity: 1; transform: none; filter: none; }
/* exits are quick so scrolling back never feels like wading through animation */
.reveal:not(.in) { transition-duration: .45s; }

/* cascading sequence groups — children assemble with an overlapping stagger.
   Travel/rotation is deliberately pronounced so the Studio's Motion variants
   (Design → Motion & transitions) read clearly different from one another. */
.seq-item { opacity: 0; filter: blur(8px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-pop), filter 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 130ms); will-change: opacity, transform, filter; }
.sv-up   { transform: translateY(110px); }
.sv-left { transform: perspective(1100px) translateX(-130px) rotateY(28deg); }
.sv-right{ transform: perspective(1100px) translateX(130px) rotateY(-28deg); }
.sv-rise { transform: perspective(1100px) translateY(140px) rotateX(20deg) scale(.8); transform-origin: bottom center; }
.sv-row  { transform: translateX(-90px); }
.sv-flip { transform: perspective(1100px) rotateX(-80deg) translateY(64px); transform-origin: top center; }
.sv-fade { transform: none; } /* opacity + blur only — no travel */
.seq.seq-in .seq-item { opacity: 1; filter: none; transform: perspective(1100px) rotateX(0) rotateY(0) translate(0, 0) scale(1); }
.seq:not(.seq-in) .seq-item { transition-duration: .4s; transition-delay: calc(var(--i, 0) * 35ms); }

/* Studio live pane only (wired by app.js primeMotion until first user gesture):
   snap entrances to their end state so silent edit-sync scroll-restores don't
   replay the transition every second. Cleared the moment the editor scrolls. */
.motion-instant .sec-fx, .motion-instant .reveal, .motion-instant .seq-item { transition: none !important; }

/* ------- 3D pointer tilt (wired by app.js on cards) -------
   While .tilt-live, an rAF loop lerps the transform, so CSS transitions are
   silenced to avoid fighting the JS. The glare follows the pointer. */
.tilt { transform-style: preserve-3d; }
.tilt.tilt-live { transition: none !important; will-change: transform; z-index: 2; box-shadow: var(--shadow); }
.tilt-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 50%), rgba(246,243,236,.28), transparent 62%);
  opacity: 0; transition: opacity .4s ease;
}
.tilt.tilt-live .tilt-glare { opacity: 1; }
/* card innards float at different depths while tilting (needs overflow visible) */
.svc .svc-icon, .svc h3, .svc p, .svc .svc-points, .svc .svc-link { transition: transform .5s var(--ease-out); }
.svc.tilt-live .svc-icon { transform: translateZ(42px); }
.svc.tilt-live h3 { transform: translateZ(28px); }
.svc.tilt-live p, .svc.tilt-live .svc-points, .svc.tilt-live .svc-link { transform: translateZ(16px); }

/* hero entrance — the copy lines cascade in on load */
.hero-anim .hero-copy > * { opacity: 0; animation: heroIn 1s var(--ease-pop) forwards; }
.hero-copy, .hero-bg { will-change: transform; }
.hero-anim .hero-copy > .eyebrow { animation-delay: .10s; }
.hero-anim .hero-copy > h1       { animation-delay: .24s; }
.hero-anim .hero-copy > .lead    { animation-delay: .44s; }
.hero-anim .hero-copy > .hero-cta{ animation-delay: .64s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(40px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* slow Ken-Burns drift + pan on the hero backdrop (settles at 1.08 so the
   scroll parallax on .hero-bg never exposes an edge) */
.hero-bg img { animation: kenburns 24s ease-out forwards; transform-origin: 60% 40%; }
@keyframes kenburns { from { transform: scale(1.2) translate(2%, -1%); } to { transform: scale(1.08) translate(0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .seq-item, .sec-fx { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .hero-anim .hero-copy > * { opacity: 1; animation: none; }
  .hero-bg img { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------------- page blocks canvas ----------------
   Free-form per-page section: the CMS adds any number of heading/subheading/
   text/button/media blocks, drag-positions them on the desktop grid and sizes
   them (columns + data-cw). Phones restack them like every other grid. */
.canvas { background: var(--stone); }
/* A page can hold several canvas sections ("+ New section" in the Studio) —
   each renders as its own full-bleed band inside #canvas, so the bands own
   the section's vertical padding (and can carry their own background). */
.canvas.section { padding: 0; }
.canvas-band { position: relative; padding: calc(clamp(64px, 9vw, 128px) * var(--scale-section, 1)) 0; }
/* The section's Studio name, shown in the corner of its band — preview only
   (app.js renders it solely in ?preview=1 mode). */
.canvas-band-tag { position: absolute; top: 10px; left: 24px; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--truffle) 45%, transparent); border: 1px dashed color-mix(in srgb, var(--truffle) 30%, transparent); border-radius: 6px; padding: 3px 8px; pointer-events: none; }
.canvas-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 24px; align-items: start; }
.cv-heading { font-size: calc(var(--size-h2, clamp(1.9rem, 3.4vw, 2.8rem)) * var(--scale-h2, 1)); font-weight: 400; }
.cv-subheading { font-size: calc(var(--size-h3, 1.35rem) * var(--scale-h3, 1)); }
.cv-text { color: var(--black); margin: 0; }
/* A copied service-card "Learn more" — the block's own spot/flow spaces it,
   so the link's usual card-gap margin would push it out of place. */
.cv-text .svc-link { margin-top: 0; }
/* *emphasis* inside a canvas block follows the block's own colour — the
   default .em Truffle would vanish on a dark copied band. */
.cv-block .em { color: inherit; }
.cv-media img, .cv-media video { width: 100%; border-radius: var(--radius); display: block; }
/* A media block copied from a round source (team avatars) keeps its circle —
   square-cropped so it stays a true circle at any box width. Inside a group
   (team card) it's capped to avatar size so it doesn't blow up full-width. */
.cv-media[data-round] img, .cv-media[data-round] video { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }
.cv-group .cv-media[data-round] { max-width: 96px; }
/* A copied service-card icon tile: a small fixed square (the tile's fill and
   glyph are baked into the image) rather than stretching to the block width. */
.cv-media[data-icon] { width: -moz-fit-content; width: fit-content; }
.cv-media[data-icon] img, .cv-media[data-icon] video { width: 48px; height: 48px; object-fit: cover; border-radius: 2px; }
/* A Code bank component's sandboxed frame — the block's --fw sets the width,
   the frame reports its own height (app.js wireComponentFrames sizes it). */
.cv-component .cv-frame { width: 100%; height: 120px; border: 0; display: block; }
.cv-media-empty { display: grid; place-items: center; min-height: 120px; border: 2px dashed var(--hairline); border-radius: var(--radius); color: var(--black); font-size: 0.9rem; padding: 12px; text-align: center; }
/* A "Group" clusters blocks into one sized/positioned unit — no border or
   background of its own, so its children read as one cohesive piece rather
   than a boxed widget. */
.cv-group { display: flex; flex-direction: column; gap: 20px; }
/* …unless the Studio gives it the "Card look": the same Stone plate,
   hairline border and radius the fixed sections' cards wear (.svc/.case),
   so "As elements" section copies keep their card chrome. The tokens are
   var()-based, so cards flip correctly on dark section backgrounds too. */
.cv-group.cv-card { background: var(--stone); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 34px; gap: 14px; }
.cv-group.cv-card .cv-block { margin: 0; }
/* A group whose children each carry a spot becomes its own mini-canvas: it
   positions relative so its children (absolute, on desktop) anchor to its box.
   Its explicit height (--gh) is applied desktop-only, below — on phones the
   box collapses and the children restack in reading order. */
.cv-group-free { position: relative; display: block; }
/* A converted sub-page element region ("the edit preview is the canvas"):
   once every element carries a spot, svcPopEls wraps the region in this free
   grid. It IS a .canvas-grid[data-free], so the responsive rules below place
   its elements exactly like the page bands (drag anywhere on desktop,
   restack in reading order on phones); this is just its footprint where the
   stacked flow used to be. */
.svc-elcanvas { margin: 20px 0 0; }

/* ---------------- responsive ----------------
   The desktop layout is the source of truth: the CMS sets each grid's column
   count (--cols, inline) and per-card widths (data-cw). Smaller screens derive
   their layout automatically — the media queries below override the column
   count and ignore card spans, re-stacking cards in desktop reading order. */
@media (min-width: 961px) {
  [data-cw="2"] { grid-column: span 2; }
  [data-cw="3"] { grid-column: span 3; }
  [data-cw="full"] { grid-column: 1 / -1; }
  /* Columns: "Fit" — every card in one row, however many there are.
     Smaller screens below keep their derived stacking. */
  [data-cols="fit"] { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
  [data-cols="fit"] [data-cw] { grid-column: auto; }
  /* Freely-positioned canvas blocks land exactly where they were dragged
     (--fx/--fy/--fw set inline by app.js, dragged in the Studio preview) —
     content without coordinates (no [data-free]) keeps the grid layout.
     --free-h is measured by app.js (absolute blocks give the band no
     intrinsic height). Blocks may overlap on purpose. */
  .canvas-grid[data-free] { display: block; position: relative; min-height: var(--free-h, 120px); }
  .canvas-grid[data-free] > * { position: absolute; left: var(--fx, 0%); top: var(--fy, 0px); width: var(--fw, 100%); margin: 0; }
  /* Text auto-sizes: it hugs its content (no invisible box catching clicks
     meant for whatever's beside or beneath it) and wraps against the band's
     right edge, with a readable cap on paragraphs. Photos, videos, groups
     and components keep their explicit box (--fw, corner-grip resized). */
  .canvas-grid[data-free] > :not(.cv-media):not(.cv-group):not(.cv-component):not(.cv-section):not(.cv-form):not([data-boxed]) { width: fit-content; }
  .canvas-grid[data-free] > .cv-text:not([data-boxed]) { max-width: min(65ch, 100%); }
  /* A free group holds its editor-set height and lays its children out exactly
     like the band above — absolute at their spot, text hugging its content
     until boxed. Its children position against the group box, not the band. */
  .cv-group-free { min-height: var(--gh, 160px); }
  .cv-group-free > .cv-block { position: absolute; left: var(--fx, 0%); top: var(--fy, 0px); width: var(--fw, 100%); margin: 0; }
  .cv-group-free > :not(.cv-media):not(.cv-component):not(.cv-section):not(.cv-form):not([data-boxed]) { width: fit-content; }
  .cv-group-free > .cv-text:not([data-boxed]) { max-width: 100%; }
}
@media (max-width: 960px) {
  /* The full menu (6 links + phone + button + logo) overflows tablet widths,
     crushing the logo out of the header — collapse to the burger here, not
     just on phones. The hidden nav carried the margin-left:auto that pushed
     everything right, so the actions take it over: logo left, CTA + burger
     right. */
  .nav, .header-phone { display: none; }
  .header-actions { margin-left: auto; }
  .nav-toggle { display: flex; }
  .nav.open {
    display: flex; flex-direction: column; position: absolute; top: 76px; left: 0; right: 0;
    background: var(--stone); border-bottom: 1px solid var(--hairline); padding: 18px 24px; gap: 16px;
  }
  /* In the burger menu a dropdown expands in place — an indented sub-list
     under its button rather than a floating panel. Flyouts have no hover to
     open on here, so they inline too: always visible, one level deeper. */
  .nav-drop-menu { position: static; min-width: 0; border: 0; box-shadow: none; padding: 6px 0 0 14px; }
  .nav-drop-menu a { padding: 7px 0; white-space: normal; }
  .nav-drop-menu a:hover { background: none; }
  .nav-sub > a { padding-right: 0; }
  .nav-sub > a::before { display: none; }
  .nav-sub-menu { display: block; position: static; min-width: 0; border: 0; box-shadow: none; padding: 0 0 0 14px; background: none; }
  .intro-grid, .about-grid, .contact-grid, .careers-grid, .openings-list { grid-template-columns: 1fr; }
  .careers-card { position: static; }
  .svc-grid, .team { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .case-grid, .canvas-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid .stat + .stat { border-left: 0; }
  /* Free-form canvas blocks stack in reading order by default at this size —
     the desktop --fx/--fy vars are ignored, so a desktop arrangement never
     lands on top of itself on a tablet. A block the Studio "fitted" for tablet
     (data-placed-t) is re-pinned with its own --fx-t/--fy-t/--fw-t; a block
     hidden for tablet (data-hide-t) drops out. */
  .canvas-grid[data-free] { display: block; position: relative; min-height: var(--free-h, auto); grid-template-columns: none; }
  .canvas-grid[data-free] > * { position: static; left: auto; top: auto; width: auto; margin: 0 0 18px; }
  .canvas-grid[data-free] > [data-placed-t] { position: absolute; left: var(--fx-t, 0%); top: var(--fy-t, 0px); width: var(--fw-t, 100%); margin: 0; }
  .canvas-grid[data-free] > [data-hide-t] { display: none; }
  /* A free group has no per-device layer — it collapses to its restacked
     children (in reading order) at tablet/phone widths, like the band does. */
  .cv-group-free { min-height: 0; }
  .cv-group-free > .cv-block { position: static; left: auto; top: auto; width: auto; margin: 0 0 14px; }
}
@media (max-width: 680px) {
  /* Logo + CTA + burger need ~440px — they don't fit a phone without
     crushing something. The CTA goes (the hero's own buttons carry the same
     call to action right below); phones get the classic logo + burger. */
  .header-actions .btn-primary { display: none; }
  .svc-grid, .team, .steps, .case-grid, .stats-grid, .vm-grid, .canvas-grid { grid-template-columns: 1fr; }
  .contact-right { grid-template-columns: 1fr; } /* enquiry + questionnaire stack on phones */
  /* Phone is independent of tablet: reset any tablet-only placement/hide, then
     apply this device's own fit (data-placed-m / data-hide-m). A block fitted
     only for tablet stacks here; each breakpoint stands alone. */
  .canvas-grid[data-free] > [data-placed-t] { position: static; left: auto; top: auto; width: auto; margin: 0 0 18px; }
  .canvas-grid[data-free] > [data-hide-t] { display: block; }
  .canvas-grid[data-free] > [data-placed-m] { position: absolute; left: var(--fx-m, 0%); top: var(--fy-m, 0px); width: var(--fw-m, 100%); margin: 0; }
  .canvas-grid[data-free] > [data-hide-m] { display: none; }
}

/* ---------- text effects (the Studio's per-field "UX" button) ---------- */
.fx-split .fx-u { display: inline-block; opacity: 0; transform: translateY(0.85em); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
/* Per-letter effects wrap each word's letters here so a line never breaks
   between two letters — the word wraps whole to the next row instead. */
.fx-split .fx-word { white-space: nowrap; }
[data-fx="fadewords"].fx-split .fx-u { transform: translateY(16px); }
[data-fx-unit="letter"].fx-split { clip-path: inset(-0.15em 0); } /* letters roll up from below the baseline — shared by "rolling" and any custom letter-by-letter effect */
.fx-go .fx-u { opacity: 1; transform: none; filter: none; }
/* Instant, un-animated reset while a sub-page swap replays its effects (app.js
   replayFx) — so settled text snaps back to hidden rather than fading out
   before it rolls in again. */
.fx-replaying, .fx-replaying .fx-u { transition: none !important; }
.fx-typing::after { content: "|"; margin-left: 1px; animation: fx-caret 1s steps(1) infinite; }
@keyframes fx-caret { 50% { opacity: 0; } }
[data-fx="fadeup"] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
[data-fx="fadeup"].fx-go { opacity: 1; transform: none; }
[data-fx="blur"] { opacity: 0; filter: blur(10px); transition: opacity .7s ease, filter .7s ease; }
[data-fx="blur"].fx-go { opacity: 1; filter: blur(0); }
[data-fx="underline"] { position: relative; display: inline-block; }
[data-fx="underline"]::after {
  content: ""; position: absolute; left: 0; bottom: -0.15em; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
[data-fx="underline"].fx-go::after { transform: scaleX(1); }
/* Studio-authored custom effects (whole-line only — split ones reset via .fx-go .fx-u above).
   Their initial (hidden) state is injected at runtime by initFx() in app.js. */
[data-fx].fx-go:not(.fx-split):not([data-fx="typewriter"]):not([data-fx="countup"]) { opacity: 1; transform: none; filter: blur(0); }

/* ---------- background music toggle ---------- */
.music-toggle {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--truffle); color: var(--stone); border: 1px solid rgba(246, 243, 236, .22);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .55); transition: transform .2s, opacity .2s;
}
.music-toggle svg { width: 20px; height: 20px; }
.music-toggle:hover { transform: translateY(-2px); }
.music-toggle:not(.playing) { opacity: .7; }
.music-toggle:not(.playing)::after {
  content: ""; position: absolute; width: 26px; height: 2px; border-radius: 2px;
  background: currentColor; transform: rotate(-45deg);
}
.music-toggle.playing { animation: music-pulse 2.4s ease-in-out infinite; }
@keyframes music-pulse {
  0%, 100% { box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .55), 0 0 0 0 rgba(246, 243, 236, .38); }
  70% { box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .55), 0 0 0 12px rgba(246, 243, 236, 0); }
}

/* Invitation-only launch mode (server.js LAUNCH_MODE=events): the events page
   renders as a chrome-less one-page invitation — no menu bar, footer, chat
   bubble or music, no "All events" back buttons (the bare address opens the
   event itself), and a centred brand mark on top in the menu bar's place. */
body[data-launch="events"] .site-header,
body[data-launch="events"] .site-footer,
body[data-launch="events"] #seerbot,
body[data-launch="events"] .music-toggle,
body[data-launch="events"] #invBackBtn,
body[data-launch="events"] #leadBackBtn { display: none !important; }
.launch-mast { display: flex; justify-content: center; padding: 38px 20px 0; }
.launch-mast a { display: inline-flex; line-height: 0; }
.launch-mast img { height: 54px; width: auto; display: block; } /* the current SEER Financial Group lockup — tall enough for its second line */
.launch-wordmark { font-family: var(--font-heading); font-weight: 700; font-size: 1.7rem; letter-spacing: -.01em; color: var(--truffle); line-height: 1; }
body[data-launch="events"] #eventsMain { padding-top: calc(32px * var(--scale-section, 1)); }
@media (max-width: 640px) {
  .launch-mast { padding-top: 26px; }
  .launch-mast img { height: 42px; }
}