/* =========================================================================
   DigitalGeyser Smart Solutions — Design System
   Committed dark-green drench · warm-sand action accent
   Cabinet Grotesk (display) + Satoshi (body)
   ========================================================================= */

/* ---------- Self-hosted fonts (Fontshare, OFL) ---------- */
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Cabinet Grotesk';src:url('../fonts/cabinet-grotesk-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('../fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
:root {
  /* Color — environment (greens) */
  --bg:          #1B211A;
  --bg-deep:     #151A14;
  --surface:     #232A20;
  --surface-2:   #2B3327;
  --green:       #628141;
  --green-soft:  #8BAE66;
  --green-tint:  rgba(139, 174, 102, .12);
  --green-line:  rgba(139, 174, 102, .22);

  /* Color — ink */
  --ink:         #F3EFE4;
  --ink-muted:   #C2CBB4;
  --ink-faint:   #9AA888;

  /* Color — action accent (sand) — locked, used for ALL CTAs */
  --accent:      #EBD5AB;
  --accent-2:    #F1E3C6;
  --accent-ink:  #1B211A;
  --sand-tint:   rgba(235, 213, 171, .10);

  /* Lines */
  --line:        rgba(235, 213, 171, .12);
  --line-strong: rgba(235, 213, 171, .20);

  /* Functional */
  --danger:      #E2876B;
  --success:     #9FCB7E;

  /* Radius lock */
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* Spacing rhythm */
  --section-y: clamp(5rem, 10vw, 9rem);
  --gap:       clamp(1.5rem, 3vw, 2.5rem);

  /* Shadows (tinted, never harsh black) */
  --shadow-sm: 0 2px 8px -2px rgba(0,0,0,.4);
  --shadow:    0 24px 60px -28px rgba(0,0,0,.55);
  --shadow-lg: 0 40px 90px -32px rgba(0,0,0,.65);
  --highlight: inset 0 1px 0 rgba(235,213,171,.07);

  /* Motion */
  --ease:      cubic-bezier(.16, 1, .3, 1);   /* ease-out-expo */
  --ease-soft: cubic-bezier(.32, .72, 0, 1);
  --dur:       .6s;

  /* Type */
  --font-display: "Cabinet Grotesk", "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Layout */
  --content: 1200px;
  --wide:    1320px;
  --pad:     clamp(1.25rem, 4vw, 2.5rem);

  /* Z-scale (semantic) */
  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 1.6rem + 4.2vw, 5rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem); letter-spacing: -.02em; }
h4 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
p  { text-wrap: pretty; }
strong { font-weight: 700; color: var(--ink); }

.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.035em;
}
.lead {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 54ch;
}
.measure { max-width: 68ch; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-soft);
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 1px;
  background: var(--green-soft);
  opacity: .6;
}
.accent-text { color: var(--accent); }
.green-text  { color: var(--green-soft); }
.muted { color: var(--ink-muted); }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--pad); }
.wrap--wide { max-width: var(--wide); }
.wrap--narrow { max-width: 820px; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--deep { background: var(--bg-deep); }
.divider { height: 1px; background: var(--line); border: 0; }

.grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.flex { display: flex; }
.between { justify-content: space-between; }
.items-center { align-items: center; }
.gap-sm { gap: .75rem; }
.gap-md { gap: 1.25rem; }
.stack > * + * { margin-top: 1.1rem; }

.section-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head .stack > * + * { margin-top: 1rem; }

/* ---------- Buttons (sand accent = action) ---------- */
.btn {
  --bg-btn: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.15rem .85rem 1.4rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, var(--shadow-sm);
}
.btn--primary:hover { background: var(--accent-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--primary:active { transform: translateY(0) scale(.985); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding-inline: 1.3rem;
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

.btn--soft {
  background: var(--green-tint);
  color: var(--ink);
  border: 1px solid var(--green-line);
}
.btn--soft:hover { background: rgba(139,174,102,.18); transform: translateY(-2px); }

.btn--lg { padding: 1.05rem 1.3rem 1.05rem 1.6rem; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }

/* Button-in-button trailing icon */
.btn__icon {
  display: inline-grid;
  place-items: center;
  width: 1.65rem; height: 1.65rem;
  border-radius: var(--r-pill);
  background: rgba(27,33,26,.14);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.btn--ghost .btn__icon, .btn--soft .btn__icon { background: rgba(235,213,171,.12); }
.btn:hover .btn__icon { transform: translate(2px, -1px); }
.btn__icon svg { width: .95rem; height: .95rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--accent);
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.link-arrow svg { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.link-arrow:hover { gap: .7rem; }
.link-arrow:hover svg { transform: translateX(2px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(21,26,20,.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 54px; width: auto; display: block; }
.footer-brand .brand__logo { height: 58px; }
.nav__links { display: flex; align-items: center; gap: .35rem; }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: .55rem .85rem; border-radius: var(--r-pill);
  font-size: .95rem; font-weight: 500; color: var(--ink-muted);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__links a:hover { color: var(--ink); background: rgba(235,213,171,.07); }
.nav__links a[aria-current="page"] { color: var(--ink); background: var(--green-tint); }
.nav__cta { display: flex; align-items: center; gap: .6rem; }
.nav__phone { font-size: .9rem; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.nav__phone:hover { color: var(--accent); }

/* Mobile menu panel is hidden on desktop; the @media (max-width:768px) block
   re-shows it (and body.nav-open toggles it). Without this base rule it renders
   as a second, left-aligned "header" below the real one on wide screens. */
.nav__panel { display: none; }
.nav-toggle { display: none; width: 44px; height: 44px; place-items: center; border-radius: var(--r-md); border: 1px solid var(--line-strong); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
body.nav-open .nav-toggle .icon-open { display: none; }
body.nav-open .nav-toggle .icon-close { display: block; }

/* ---------- Cards / panels (double-bezel) ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--highlight);
}
.shell {
  background: rgba(235,213,171,.04);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: .5rem;
}
.shell > .core {
  background: var(--surface);
  border-radius: calc(var(--r-xl) - .5rem);
  box-shadow: var(--highlight);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--highlight);
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.card--hover:hover { transform: translateY(-4px); border-color: var(--green-line); }

.icon-chip {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: var(--r-md);
  background: var(--green-tint);
  color: var(--green-soft);
  border: 1px solid var(--green-line);
  margin-bottom: 1.25rem;
}
.icon-chip svg { width: 1.5rem; height: 1.5rem; }
.icon-chip--sand { background: var(--sand-tint); color: var(--accent); border-color: var(--line-strong); }

.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem; border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  background: var(--sand-tint); color: var(--accent);
  border: 1px solid var(--line-strong);
}
.badge .dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--green-soft); }

.pill-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.pill {
  padding: .5rem .9rem; border-radius: var(--r-pill);
  background: var(--green-tint); border: 1px solid var(--green-line);
  font-size: .9rem; font-weight: 500; color: var(--ink);
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: var(--section-y); overflow: hidden; }
.hero__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}
.hero__copy { max-width: 36ch; }
.hero h1 { margin-block: 1.4rem 1.4rem; }
.hero .lead { margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.hero__visual { position: relative; }
.hero__art { width: 100%; height: auto; filter: drop-shadow(var(--shadow-lg)); border-radius: var(--r-xl); }
.hero__logo { width: clamp(300px, 90%, 480px); height: auto; margin-bottom: .5rem; }
.page-hero .hero__logo { margin-bottom: 1.5rem; }

/* ---------- Hero · cinematic full-bleed variant (home) ----------
   Brand voice: unhurried, well-made, quiet. One focused lower-left column,
   full-bleed calm photography, a whisper of grain, one orchestrated entrance. */
.hero--cinematic { --header-h: 72px; padding: 0; overflow: visible; }
/* Full-bleed: the frame spans the entire viewport width, edge to edge */
.hero__frame { position: relative; isolation: isolate; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% center;
  transform-origin: 60% 40%;
}
/* Film grain — a well-made, physical texture; not glass, not gradient. Softest touch. */
.hero__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .45; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
/* Contrast scrim: pools shadow in the lower-left where the copy lives; lets the dusk sky breathe top-right */
.hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(17,22,16,.93) 0%, rgba(17,22,16,.55) 26%, rgba(17,22,16,.12) 50%, transparent 72%),
    linear-gradient(102deg, rgba(17,22,16,.74) 0%, rgba(17,22,16,.30) 34%, transparent 60%),
    radial-gradient(85% 70% at 100% 2%, rgba(139,174,102,.10), transparent 58%);
}
.hero__stage {
  position: relative; z-index: 3;
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(2rem, 5vh, 3.5rem) clamp(3rem, 9vh, 5.5rem);
  /* Image is edge-to-edge, but the copy aligns to the site's content column on large screens */
  padding-inline: max(var(--pad), calc((100% - var(--wide)) / 2 + var(--pad)));
}
.hero__lede { display: flex; flex-direction: column; align-items: flex-start; max-width: 47rem; }
.hero--cinematic .hero__wordmark {
  width: clamp(186px, 20vw, 248px); height: auto;
  margin-bottom: clamp(1.4rem, 3.5vh, 2.4rem);
  opacity: .95;
}
.hero__title {
  margin: 0; max-width: 16ch;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.25rem);
  line-height: 1.02; letter-spacing: -.035em; text-wrap: balance;
  color: #F7F3E9; text-shadow: 0 2px 40px rgba(0,0,0,.45);
}
.hero__sub {
  margin: clamp(1.15rem, 2.6vh, 1.7rem) 0 0; max-width: 46ch;
  font-size: clamp(1.02rem, .96rem + .4vw, 1.22rem);
  line-height: 1.55; color: #E8E5DA; text-wrap: pretty;
  text-shadow: 0 1px 18px rgba(0,0,0,.5);
}
.hero__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .85rem;
  margin-top: clamp(1.7rem, 3.6vh, 2.5rem);
}
/* Secondary CTA sits on photography — give it a solid-dark backing + hairline (no glass blur) for AA contrast */
.hero--cinematic .btn--ghost {
  background: rgba(18,23,17,.44);
  border-color: rgba(247,243,233,.32);
  color: var(--ink);
}
.hero--cinematic .btn--ghost:hover {
  background: rgba(18,23,17,.64);
  border-color: var(--accent); color: var(--accent);
}

/* Quiet scroll affordance → the proof band directly below */
.hero__scroll {
  position: absolute; z-index: 3;
  right: max(var(--pad), calc((100% - var(--wide)) / 2 + var(--pad)));
  bottom: clamp(1.4rem, 3vh, 2.4rem);
  display: inline-flex; align-items: center; gap: .7rem;
  color: rgba(247,243,233,.72); font-size: .82rem; font-weight: 500;
  letter-spacing: .01em; text-decoration: none;
  transition: color .25s var(--ease);
}
.hero__scroll:hover { color: var(--ink); }
.hero__scroll-track {
  position: relative; width: 1px; height: 38px; overflow: hidden;
  background: rgba(247,243,233,.24);
}
.hero__scroll-dot {
  position: absolute; left: -1px; top: 0; width: 3px; height: 11px; border-radius: 2px;
  background: var(--ink);
}

/* ---- Motion: one orchestrated entrance (visible by default; JS enhances) ---- */
.hero__lede [data-hero] { opacity: 1; }
.reveal-ready .hero__lede [data-hero] {
  opacity: 0; animation: heroRise .95s var(--ease) forwards;
}
.reveal-ready .hero__lede [data-hero="1"] { animation-delay: .18s; }
.reveal-ready .hero__lede [data-hero="2"] { animation-delay: .30s; }
.reveal-ready .hero__lede [data-hero="3"] { animation-delay: .46s; }
.reveal-ready .hero__lede [data-hero="4"] { animation-delay: .60s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
/* Slow cinematic settle on the photo — alive, but calm */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .hero__bg { animation: heroDrift 24s var(--ease-soft) both; }
  .hero__scroll-dot { animation: scrollHint 2.4s var(--ease-soft) infinite; }
}
@keyframes heroDrift { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes scrollHint {
  0% { transform: translateY(-13px); opacity: 0; }
  30%, 65% { opacity: 1; }
  100% { transform: translateY(38px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready .hero__lede [data-hero] { opacity: 1; animation: none; }
}
@media (prefers-reduced-transparency: reduce) { .hero__grain { display: none; } }

/* ---------- Overture · ambient "breathe." eye-candy hero ----------
   Text-behind-subject depth: ambient video → the word → the subjects layer on top.
   The video uses object-fit:cover; the subjects are a WIDTH-COVER wrapper (subjects
   image + a pixel-perfect continuation stacked below it) so that when the parallax
   lifts the foreground, the continuation fills the gap instead of exposing the video
   underneath. Everything is clipped to the stage (overflow:hidden), so the
   continuation can never bleed past the divider / next section below. */
.overture {
  --header-h: 72px;
  --stage-h: calc(100svh - var(--header-h));
  /* Replicate object-fit:cover for the foreground with plain width sizing so we can
     append the continuation image beneath it. Cover width = max(stage width, needed
     width to fill the height at the 1.75 image aspect). Uses vw so the value is
     available in the vertical (top) calc, where % would resolve against height. */
  --fg-cover-w: max(100vw, calc(var(--stage-h) * 1.75));
  --fg-subjects-h: calc(var(--fg-cover-w) / 1.75);
  position: relative; background: var(--bg-deep);
}
.overture__stage {
  position: relative; isolation: isolate; overflow: hidden;
  height: var(--stage-h);
  min-height: 30rem;
}
.overture__media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* The person/dog sit left-of-centre; anchoring at 40% keeps them framed on narrow
     crops (on wide screens the image fills the width, so X is a no-op there). The
     foreground below uses the same 40% anchor so the subjects register over the plate. */
  object-position: 40% center;
  pointer-events: none; user-select: none;
}
/* Foreground (subjects + seamless continuation) — sits above the word. */
.overture__fg {
  position: absolute; z-index: 2; pointer-events: none; user-select: none;
  width: var(--fg-cover-w);
  left: calc(-0.4 * (var(--fg-cover-w) - 100vw));      /* 40% horizontal anchor */
  top: calc(-0.5 * (var(--fg-subjects-h) - var(--stage-h))); /* centre-crop like the plate */
}
.overture__fg-img { display: block; width: 100%; height: auto; }
/* Both layers are parallax-animated on every device, so keep them on their own compositor
   layer for smooth, repaint-free transforms (paired with translate3d in JS). */
.overture__fg, .overture__word { will-change: transform; }
/* Very slow ambient settle on the footage — alive but calm */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .overture__media { animation: overtureSettle 30s var(--ease-soft) both; }
}
@keyframes overtureSettle { from { transform: scale(1.06); } to { transform: scale(1); } }

.overture__word {
  position: absolute; z-index: 1; left: 50%; top: 72%;
  transform: translate(-50%, -50%);
  margin: 0; white-space: nowrap; user-select: none; pointer-events: none;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(4rem, 21vw, 20rem);
  line-height: .9; letter-spacing: -.03em;
  color: #F7F3E9;
  /* Sits low on the brighter sand — keep it legible under the subjects */
  text-shadow: 0 12px 70px rgba(9,13,9,.62), 0 3px 20px rgba(9,13,9,.55);
}
/* Crisp round sand dot as the full-stop (Cabinet Grotesk's period reads boxy at this size) */
.overture__word .overture__stop {
  display: inline-block; width: .13em; height: .13em; margin-left: .05em;
  border-radius: 50%; background: var(--accent); vertical-align: baseline;
  overflow: hidden; text-indent: 110%; white-space: nowrap;
  box-shadow: 0 2px 20px rgba(235,213,171,.35);
}

/* Bottom veil seats the divider and adds depth under the subjects */
.overture__veil {
  position: absolute; inset: auto 0 0; z-index: 3; height: 40%; pointer-events: none;
  background: linear-gradient(to top, var(--bg-deep) 2%, rgba(21,26,20,.42) 34%, transparent 78%);
}

/* Prominent, minimal seam between the two heroes */
.overture__divider {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 4vw, 2.5rem);
  padding-block: clamp(1.4rem, 3.4vw, 2.2rem);
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: var(--highlight);
}
.overture__rule {
  flex: 1; max-width: 22rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
}
.overture__spark { display: inline-grid; place-items: center; color: var(--accent); flex: none; }
.overture__spark svg { width: 1.15rem; height: 1.15rem; filter: drop-shadow(0 0 10px rgba(235,213,171,.35)); }
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .overture__spark { animation: sparkGlow 4.5s var(--ease-soft) infinite; }
}
@keyframes sparkGlow { 0%,100% { opacity: .7; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }

.glow {
  position: absolute; pointer-events: none; z-index: 0;
  width: 46rem; height: 46rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(98,129,65,.22), transparent 62%);
}
.glow--tr { top: -22rem; right: -16rem; }
.glow--bl { bottom: -26rem; left: -20rem; background: radial-gradient(circle, rgba(235,213,171,.10), transparent 64%); }
.hero > .wrap, .section > .wrap { position: relative; z-index: var(--z-base); }

/* ---------- Full-bleed band (strong section delimiter under the cinematic hero) ---------- */
.band { position: relative; }
.band--stats {
  background: var(--surface);
  border-block: 1px solid var(--line-strong);
  box-shadow: var(--highlight), var(--shadow-sm);
}
.band--stats .statline { border-block: 0; }

/* ---------- Stat strip ---------- */
.statline {
  display: grid; gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--line);
}
.stat .k { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); color: var(--ink); letter-spacing: -.02em; }
.stat .l { color: var(--ink-muted); font-size: .98rem; margin-top: .25rem; }

/* ---------- Feature rows (alternating) ---------- */
.feature {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  grid-template-columns: repeat(2, 1fr);
}
.feature + .feature { margin-top: clamp(4rem, 8vw, 7rem); }
.feature__media { order: 2; }
.feature--flip .feature__media { order: -1; }
.feature__media .shell { transition: transform .5s var(--ease); }
.feature__media:hover .shell { transform: translateY(-4px); }
/* Full-bleed product screenshots: image fills the panel, corners clipped to the core radius */
.core--flush { padding: 0; overflow: hidden; }
.feature__shot { display: block; width: 100%; height: auto; }
/* Floating transparent device mockup (no panel) */
.feature__shot--device { filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
/* Academia hero: give the mockup more room and let it run toward the edge so it reads large */
.hero__grid--media { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.hero__art--device { width: 122%; max-width: none; justify-self: start; }
.feature__media:hover .feature__shot--device { transform: translateY(-4px); transition: transform .5s var(--ease); }

/* Stacked feature: copy on top, showcase spans full width below so screenshots read large */
.feature--stack { grid-template-columns: 1fr; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
.feature--stack .feature__body { max-width: 68ch; }
.feature--stack .feature__media { order: 2; }
.feature__list { display: grid; gap: .75rem; margin-top: 1.5rem; }
.feature__list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-muted); }
.feature__list svg { flex: none; width: 1.2rem; height: 1.2rem; color: var(--green-soft); margin-top: .15rem; }
.kicker-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; color: var(--accent);
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
}
.kicker-num b { font-size: 1.05rem; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
.step { position: relative; padding-top: 2.5rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--green-tint);
  color: var(--green-soft); border: 1px solid var(--green-line);
}
.step h4 { margin-bottom: .5rem; }
.step p { color: var(--ink-muted); }

/* ---------- Differentiator grid ---------- */
.diff-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; grid-template-columns: repeat(3, 1fr); }
.diff { background: var(--surface); padding: clamp(1.4rem, 3vw, 1.9rem); transition: background .3s var(--ease); }
.diff:hover { background: var(--surface-2); }
.diff h4 { display: flex; align-items: center; gap: .65rem; margin-bottom: .5rem; }
.diff h4 svg { width: 1.25rem; height: 1.25rem; color: var(--green-soft); flex: none; }
.diff p { color: var(--ink-muted); font-size: .96rem; }

/* ---------- Compare (generic chatbot vs Academia Plus) ---------- */
.compare { display: grid; gap: var(--gap); grid-template-columns: 1fr 1fr; align-items: start; }
.compare__col { padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--r-lg); border: 1px solid var(--line); }
.compare__col--muted { background: var(--bg-deep); }
.compare__col--brand { background: linear-gradient(180deg, var(--green-tint), var(--surface) 60%); border-color: var(--green-line); box-shadow: var(--highlight); }
.compare__label { display: flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; margin-bottom: 1.4rem; }
.compare__col--muted .compare__label { color: var(--ink-muted); }
.compare__mark { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: var(--r-pill); flex: none; }
.compare__mark svg { width: 1.05rem; height: 1.05rem; }
.compare__col--muted .compare__mark { background: rgba(226,135,107,.12); color: var(--danger); border: 1px solid rgba(226,135,107,.28); }
.compare__col--brand .compare__mark { background: var(--sand-tint); color: var(--accent); border: 1px solid var(--line-strong); }
.compare__list { display: grid; gap: .9rem; }
.compare__list li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.5; }
.compare__list svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .2rem; }
.compare__col--muted .compare__list li { color: var(--ink-faint); }
.compare__col--muted .compare__list svg { color: var(--danger); opacity: .75; }
.compare__col--brand .compare__list li { color: var(--ink-muted); }
.compare__col--brand .compare__list svg { color: var(--green-soft); }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.price-hero { display: grid; gap: var(--gap); grid-template-columns: 1.1fr .9fr; align-items: stretch; }
.price-define { display: grid; gap: 1rem; align-content: center; }
.price-define .big { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.5rem, 2rem + 3vw, 4rem); letter-spacing: -.03em; }
.price-define .big small { font-size: 1rem; font-weight: 600; color: var(--ink-muted); letter-spacing: 0; display: block; margin-top: .5rem; }

.tiers { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, 1fr); }
.tier { display: flex; flex-direction: column; gap: .35rem; padding: clamp(1.4rem, 3vw, 1.8rem); position: relative; }
.tier.is-best { border-color: var(--green-line); background: linear-gradient(180deg, var(--green-tint), var(--surface) 55%); }
.tier__range { font-weight: 600; color: var(--ink-muted); font-size: .95rem; }
.tier__price { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); letter-spacing: -.02em; }
.tier__price span { font-size: 1rem; font-weight: 500; color: var(--ink-muted); font-family: var(--font-body); }
.tier__save { display: inline-flex; align-self: flex-start; margin-top: .4rem; padding: .25rem .65rem; border-radius: var(--r-pill); font-size: .8rem; font-weight: 700; background: var(--sand-tint); color: var(--accent); border: 1px solid var(--line-strong); }
.tier__best-tag { position: absolute; top: -.7rem; left: 1.4rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink); padding: .25rem .7rem; border-radius: var(--r-pill); }
.tier__note { color: var(--ink-faint); font-size: .85rem; margin-top: .25rem; }

.note-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.75rem; color: var(--ink-muted); font-size: .95rem; }
.note-row span { display: inline-flex; align-items: center; gap: .5rem; }
.note-row svg { width: 1.1rem; height: 1.1rem; color: var(--green-soft); }

/* ---------- CTA band ---------- */
.core.cta-band { padding: clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1.3fr .7fr; align-items: center; position: relative; overflow: hidden; }
.cta-band h2 { max-width: 16ch; }
.cta-band .actions { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.cta-band .contact-line { display: flex; flex-direction: column; gap: .4rem; color: var(--ink-muted); font-size: .98rem; }
.cta-band .contact-line a { color: var(--ink); font-weight: 600; }
.cta-band .contact-line a:hover { color: var(--accent); }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.field label .req { color: var(--accent); }
.field .hint { font-size: .82rem; color: var(--ink-faint); }
.input, .textarea, .select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: .85rem 1rem;
  color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(235,213,171,.18); background: var(--surface); }
.textarea { min-height: 8rem; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.field.has-error .input, .field.has-error .textarea, .field.has-error .select { border-color: var(--danger); }
.error-text { display: none; color: var(--danger); font-size: .85rem; align-items: center; gap: .35rem; }
.field.has-error .error-text { display: flex; }

.form-aside { display: grid; gap: 1.25rem; align-content: start; }
.form-status { display: none; }
.form-status[data-state="success"] { display: block; }

.contact-card { display: grid; gap: 1.1rem; }
.contact-item { display: flex; gap: .9rem; align-items: flex-start; }
.contact-item .icon-chip { margin: 0; width: 2.6rem; height: 2.6rem; }
.contact-item .icon-chip svg { width: 1.25rem; height: 1.25rem; }
.contact-item .l { font-size: .82rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.contact-item a, .contact-item .v { font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.contact-item a:hover { color: var(--accent); }

/* ---------- Legal / prose ---------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top: 2.75rem; }
.prose h3 { margin-top: 1.75rem; }
.prose p, .prose li { color: var(--ink-muted); }
.prose ul { display: grid; gap: .6rem; padding-left: 1.1rem; list-style: disc; }
.prose ul li::marker { color: var(--green-soft); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.toc { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 2.5rem; }
.toc a { font-size: .9rem; padding: .5rem .9rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ink-muted); }
.toc a:hover { color: var(--accent); border-color: var(--line-strong); }
.legal-meta { color: var(--ink-faint); font-size: .92rem; }

/* ---------- Page hero (interior) ---------- */
.page-hero { padding-top: clamp(3.5rem, 6vw, 5.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-hero .lead { max-width: 60ch; }
.breadcrumb { display: flex; gap: .5rem; align-items: center; font-size: .9rem; color: var(--ink-faint); margin-bottom: 1.25rem; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb svg { width: .9rem; height: .9rem; opacity: .6; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .75rem; max-width: 820px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 0 1.4rem; overflow: hidden;
}
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 0; font-weight: 600; font-size: 1.05rem; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; width: 1.25rem; height: 1.25rem; color: var(--green-soft); transition: transform .3s var(--ease); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details > p { color: var(--ink-muted); padding-bottom: 1.4rem; max-width: 65ch; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-deep); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
.footer-brand .lead { font-size: 1rem; margin-top: 1rem; max-width: 32ch; }
.footer-col h5 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: 1rem; font-weight: 600; }
.footer-col a { display: block; color: var(--ink-muted); padding: .45rem 0; font-size: .96rem; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: .9rem; }
.footer-bottom nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--accent); }

/* ---------- Value list (divided rows, alternative to card trio) ---------- */
.value-list { display: grid; gap: 0; }
.value-row { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; padding-block: clamp(1.5rem, 3vw, 2rem); }
.value-row + .value-row { border-top: 1px solid var(--line); }
.value-row .icon-chip { margin: 0; }
.value-row h3 { margin-bottom: .4rem; }
.value-row p { color: var(--ink-muted); max-width: 60ch; }

/* ---------- Responsive split utilities (replace inline grids) ---------- */
.contact-split { display: grid; grid-template-columns: 1.35fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.mini-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) {
  .contact-split { grid-template-columns: 1fr; }
  .value-row { grid-template-columns: auto 1fr; }
}
@media (max-width: 520px) { .mini-tiers { grid-template-columns: 1fr; } }

/* ---------- Motion: reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); }
.reveal-ready [data-reveal] { transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
/* If JS never runs, content stays visible (no-JS safety) */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* Hero entrance */
.hero [data-enter] { opacity: 0; transform: translateY(18px); }
.reveal-ready .hero [data-enter] { animation: enter .9s var(--ease) forwards; }
.reveal-ready .hero [data-enter][data-delay="1"] { animation-delay: .1s; }
.reveal-ready .hero [data-enter][data-delay="2"] { animation-delay: .22s; }
.reveal-ready .hero [data-enter][data-delay="3"] { animation-delay: .34s; }
.reveal-ready .hero [data-enter][data-delay="4"] { animation-delay: .46s; }
.no-js .hero [data-enter] { opacity: 1; transform: none; }
@keyframes enter { to { opacity: 1; transform: none; } }

/* Floating art idle */
@keyframes float-soft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float { animation: float-soft 7s ease-in-out infinite; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__grid--media { grid-template-columns: 1fr; }
  .hero__art--device { width: 100%; }
  .hero__copy { max-width: 100%; }
  .hero__visual { max-width: 560px; }
  .hero__title { max-width: 20ch; }
  .hero__lede { max-width: 100%; }
  .hero__sub { max-width: 56ch; }
  .price-hero { grid-template-columns: 1fr; }
  .core.cta-band { grid-template-columns: 1fr; }
  .feature, .feature--flip { grid-template-columns: 1fr; }
  .feature__media, .feature--flip .feature__media { order: -1; }
  .feature--stack .feature__media { order: 2; }
  .steps { grid-template-columns: 1fr; }
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav__links, .nav__phone, .nav__cta { display: none; }
  .nav-toggle { display: grid; }
  .nav { height: 64px; }
  .hero--cinematic, .overture { --header-h: 64px; }
  .hero__scroll { display: none; }
  /* Tall/narrow crops sit the subjects a little lower — keep the word tucked behind them */
  .overture__word { top: 66%; }
  .brand__logo { height: 46px; }
  .footer-brand .brand__logo { height: 50px; }

  /* Mobile slide-down menu */
  .nav__panel {
    position: fixed; inset: 64px 0 auto 0; z-index: var(--z-overlay);
    background: rgba(21,26,20,.97); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    padding: 1.25rem var(--pad) 2rem;
    display: none; flex-direction: column; gap: .25rem;
    max-height: calc(100dvh - 64px); overflow-y: auto;
  }
  body.nav-open .nav__panel { display: flex; }
  body.nav-open { overflow: hidden; }
  .nav__panel a { padding: .9rem 1rem; border-radius: var(--r-md); color: var(--ink); font-size: 1.05rem; font-weight: 500; }
  .nav__panel a:hover, .nav__panel a[aria-current="page"] { background: var(--green-tint); }
  .nav__panel .btn { margin-top: .75rem; justify-content: center; }
  /* Primary CTA keeps its dark ink on the sand fill (override the panel's light link color) */
  .nav__panel a.btn--primary, .nav__panel a.btn--primary:hover { color: var(--accent-ink); background: var(--accent); }
  .nav__panel .nav__phone { display: flex; justify-content: center; margin-top: .5rem; }

  /* Comfortable tap targets for footer links on touch devices */
  .footer-col a { display: flex; align-items: center; min-height: 44px; padding-block: .25rem; }
  .footer-bottom nav a { display: inline-flex; align-items: center; min-height: 44px; }

  .form-grid { grid-template-columns: 1fr; }
  .statline { grid-template-columns: 1fr 1fr; }
  .tiers, .diff-grid { grid-template-columns: 1fr; }
  .cols-auto { grid-template-columns: 1fr; }
}
@media (min-width: 769px) { .nav__panel-only { display: none; } }
@media (max-width: 420px) { .statline { grid-template-columns: 1fr; } .hero__actions { width: 100%; } .hero__actions .btn { flex: 1; justify-content: center; } }
/* Cinematic hero: the "Explore Academia Plus" label can't shrink (btn is white-space:nowrap),
   so stack the two CTAs full-width on narrow screens instead of letting them overflow the frame. */
@media (max-width: 480px) {
  .hero__cta { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__cta .btn { flex: none; width: 100%; justify-content: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal], .hero [data-enter], .hero__title .word { opacity: 1 !important; transform: none !important; }
  .float { animation: none; }
}

/* ---------- Reduced transparency fallback ---------- */
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-scrolled, .nav__panel { backdrop-filter: none; background: var(--bg-deep); }
}