/* VerdanTech Solutions website styles.
   Minimal layout: square corners, hairline dividers, mono labels, and large
   regular-weight headlines. Colors, fonts, and sizes are tokens in :root.

   Type scale has four real steps, used deliberately:
     h1        page title, once per page
     .display  the one statement a page is built around, once or twice per page
     h2        an ordinary section heading
     h3        an item inside a section
   Putting .display on every h2 flattens the page, so it is reserved. */

:root {
  --color-bg:            #ffffff;
  --color-surface:       #f4f6f1;   /* alternate sections */
  --color-line:          #dde2da;   /* hairline dividers */
  --color-rule:          #b9c3b6;   /* stronger hairline that opens a block */
  --color-text:          #141a15;
  --color-muted:         #525c53;   /* 7.1:1 on white, 6.0:1 on --color-surface */
  --color-forest:        #1c261d;   /* footer card, photo placeholders */
  --color-on-dark:       #e8eee5;
  --color-on-dark-muted: #a9b6aa;   /* 7.3:1 on --color-forest */
  --color-primary:       #1a7a3c;   /* Dashboard button, links; same green as the dashboard */
  --color-primary-hover: #14612f;
  --color-accent:        #2f7a1f;   /* highlighted headline words on light backgrounds */
  --color-accent-light:  #9fd07f;   /* highlighted words on dark backgrounds */
  --color-cta:           #c2410c;   /* orange Contact Us / demo buttons */
  --color-cta-hover:     #9a3412;
  --color-error:         #b91c1c;

  /* Anduril's font is Helvetica Now Display (a paid Monotype license). Inter Tight is
     a free, close match. If you license Helvetica Now for the web, it's already next. */
  --font-sans: 'Inter Tight', 'Helvetica Now Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --max-width:   clamp(1240px, 75vw, 1920px);  /* content width; widens on large monitors */
  --gutter:      clamp(20px, 4vw, 48px);
  --header-h:    72px;
  --section-pad: clamp(72px, 10vw, 136px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  accent-color: var(--color-primary);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  scrollbar-width: thin;
  scrollbar-color: var(--color-rule) transparent;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  caret-color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--color-accent-light); color: var(--color-forest); }

img { display: block; max-width: 100%; }

h1, h2, h3 {
  margin: 0 0 0.5em;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 1.02; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.55rem, 2.3vw, 2.15rem); letter-spacing: -0.025em; }
h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
p  { margin: 0 0 1em; text-wrap: pretty; }
a  { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-hover); }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.hero :focus-visible,
.footer-card :focus-visible { outline-color: var(--color-accent-light); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.container { width: 100%; max-width: calc(var(--max-width) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* The one statement a page is built around. Not a default for section headings. */
.display { font-size: clamp(1.9rem, 3.8vw, 3.1rem); line-height: 1.06; letter-spacing: -0.032em; }

/* The green key phrase. At most once per page, on the heading that carries the page. */
.accent { color: var(--color-accent); font-weight: 500; }

.eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.lead { max-width: 56ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.5; color: var(--color-muted); }

/* ── HEADER ── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  color: var(--color-text);
  background: #fff;
  border-bottom: 1px solid var(--color-line);
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
/* Transparent over a full-bleed photo until the visitor scrolls (see site.js). */
.has-dark-hero .site-header:not(.is-solid) { color: #fff; background: transparent; border-bottom-color: transparent; }
.has-dark-hero .site-header.is-solid { background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.4) blur(12px); }
body:not(.has-dark-hero) main { padding-top: var(--header-h); }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }

.wordmark {
  font-size: clamp(1.6rem, 0.3vw + 1.33rem, 1.85rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.wordmark:hover { color: inherit; }
.wordmark-tech { color: var(--color-accent); }
.has-dark-hero .site-header:not(.is-solid) .wordmark-tech,
.site-footer .wordmark-tech { color: var(--color-accent-light); }

.site-nav { display: flex; align-items: center; gap: 40px; }
.site-nav ul { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
/* Nav text and buttons grow a little past 1440px, for large monitors. */
.site-nav ul a { color: inherit; font-size: clamp(17px, 0.18vw + 14.4px, 19px); text-decoration: none; opacity: 0.78; transition: opacity 0.2s var(--ease-out); }
.site-nav ul a:hover,
.site-nav ul a[aria-current="page"] { opacity: 1; }
.site-nav ul a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-actions .btn { padding: 0.95em 1.4em; font-size: clamp(14px, 0.09vw + 12.7px, 15px); }

.nav-toggle { display: none; }

/* ── BUTTONS + LINKS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 22px; border: 1px solid transparent; border-radius: 0;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); color: #fff; }
.btn-cta { background: var(--color-cta); color: #fff; }
.btn-cta:hover { background: var(--color-cta-hover); color: #fff; }
.btn-outline { background: transparent; color: var(--color-text); border-color: currentColor; }
.btn-outline:hover { background: var(--color-text); border-color: var(--color-text); color: #fff; }
.hero .btn-outline { color: #fff; }
.hero .btn-outline:hover { background: #fff; border-color: #fff; color: var(--color-forest); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.text-link {
  display: inline-block; margin-top: 8px; padding-bottom: 4px;
  border-bottom: 1px solid currentColor; color: var(--color-text);
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.text-link::after { content: " \2197"; }
.text-link:hover { color: var(--color-primary); }

/* ── MEDIA (square photos with a placeholder until the file exists) ──
   While a photo is missing the box shows corner registration marks and the file
   name it's waiting for, the way an image is marked up on a drawing. Recolour by
   redefining --mark; the marks disappear as soon as a photo loads. */
.media {
  --mark: rgba(20, 26, 21, 0.22);
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  background-color: #e6eae2;
  background-image:
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark));
  background-repeat: no-repeat;
  background-size: 18px 1px, 1px 18px, 18px 1px, 1px 18px, 18px 1px, 1px 18px, 18px 1px, 1px 18px;
  background-position:
    16px 16px, 16px 16px,
    calc(100% - 34px) 16px, calc(100% - 17px) 16px,
    16px calc(100% - 17px), 16px calc(100% - 34px),
    calc(100% - 34px) calc(100% - 17px), calc(100% - 17px) calc(100% - 34px);
}
.media:has(img) { background-image: none; }
/* A photo whose subject isn't centred sets style="--focus: X% Y%" to keep it in the crop. */
.media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
/* site.js removes images that fail to load, which reveals this label. */
/* Sits inboard of the bottom-left corner mark rather than under it. */
.media:not(:has(img))::after {
  content: attr(data-label);
  position: absolute; left: 42px; bottom: 13px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--color-muted);
}

/* ── HERO (full-bleed photo) ── */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(100vh, 900px); overflow: hidden;
  background: var(--color-forest); color: #fff;
}
.hero-short { min-height: min(68vh, 620px); }
.hero .media,
.site-footer .media { --mark: rgba(255, 255, 255, 0.38); background-color: var(--color-forest); }
/* Full-bleed: corner marks would read as a viewfinder, so the label carries it alone. */
.hero .media { background-image: none; }
.hero .media { position: absolute; inset: 0; aspect-ratio: auto; }
.hero .media:not(:has(img))::after { left: auto; right: var(--gutter); bottom: auto; top: calc(var(--header-h) + 20px); color: rgba(255, 255, 255, 0.45); }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 14, 9, 0.55) 0%, rgba(8, 14, 9, 0.1) 35%, rgba(8, 14, 9, 0.72) 100%);
}
.hero-content { position: relative; z-index: 1; padding-top: calc(var(--header-h) + 64px); padding-bottom: clamp(56px, 9vw, 112px); }
.hero h1 { max-width: 15ch; }
.hero .eyebrow,
.hero .accent { color: var(--color-accent-light); }
.hero .lead { color: rgba(255, 255, 255, 0.84); }

/* Home hero. On laptops and desktops the photo fills the hero, the text sits in a dark green
   box (.hero-panel) over it, and the hero takes about two thirds of the screen so the next
   section shows below. The photo is sized so the trap fills at most --subject-max of the hero's
   height, then placed so the trap is centred in the space right of the box (never closer to it
   than --subject-gap). Where that leaves the photo short of an edge, the edge fades into
   hero-orchard-backdrop.jpg, a blur of the photo's own leaves. The --subject-* fractions are
   measured from this particular photo: re-measure them if hero-orchard.jpg changes. */
.hero-boxed {
  --subject-left:   0.374;   /* tip of the trap's left side plate, across the photo */
  --subject-right:  0.68;    /* tip of its right side plate */
  --subject-middle: 0.4975;  /* middle of the trap, down the photo */
  --subject-size:   0.334;   /* the trap's height, as a fraction of the photo's width */
  --subject-gap:    40px;    /* least space between the box and the trap */
  --subject-max:    0.64;    /* most of the hero's height the trap may fill */
  /* The box, and everything in it (sized in em), grows between 1920px and 2560px wide screens. */
  --panel-font:  clamp(16px, 0.75vw + 1.6px, 20.8px);
  --panel-width: clamp(480px, 22.5vw + 48px, 624px);  /* 30em */
  /* About the hero's height: two thirds of the screen, or what the box needs if that's more. */
  --hero-h: max(67vh, clamp(600px, 25.36vw + 190px, 839px));
  --box-right: calc(max(var(--gutter), (100vw - var(--max-width)) / 2) + var(--panel-width));
  --photo-w: calc(var(--subject-max) * var(--hero-h) / var(--subject-size));
  /* Left tip of the trap, then the photo's left edge worked back from it. */
  --trap-x: max(var(--box-right) + var(--subject-gap),
                (var(--box-right) + 100vw - (var(--subject-right) - var(--subject-left)) * var(--photo-w)) / 2);
  --photo-x: calc(var(--trap-x) - var(--subject-left) * var(--photo-w));
}
.hero-backdrop { display: none; }

@media (min-width: 1041px) {
  .hero-boxed { min-height: 67vh; align-items: center; }
  .hero-boxed .hero-content { padding-top: calc(var(--header-h) + 32px); padding-bottom: 32px; }
  /* Only the top is shaded, for the white nav over bright leaves; the box handles the text. */
  .hero-boxed::after { background: linear-gradient(180deg, rgba(8, 14, 9, 0.7) 0%, rgba(8, 14, 9, 0) 24%); }
  .hero-boxed .hero-backdrop { display: block; position: absolute; inset: 0; }
  /* The trap's middle sits halfway down the hero below the header (or down the screen, when
     the box makes the hero taller than it). */
  .hero-boxed .hero-photo {
    position: absolute; left: var(--photo-x); top: calc(min(50%, 50vh) + var(--header-h) / 2);
    width: var(--photo-w); max-width: none; height: auto;
    transform: translateY(calc(var(--subject-middle) * -100%));
    /* An edge that stops short of the screen's edge fades out over up to 300px; an edge past
       the screen's edge doesn't fade at all. */
    --fade-l: clamp(0px, 3 * var(--photo-x), 300px);
    --fade-r: clamp(0px, 3 * (100vw - var(--photo-x) - var(--photo-w)), 300px);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  }
  .hero-boxed .hero-panel {
    width: min(100%, var(--panel-width)); font-size: var(--panel-font); padding: clamp(1.75em, 3vw, 2.5em);
    background: rgba(28, 38, 29, 0.9); /* --color-forest; the slight see-through keeps the photo behind it */
    backdrop-filter: blur(12px) saturate(1.2);
  }
  .hero-boxed .eyebrow { font-size: 0.75em; }
  .hero-boxed h1 { font-size: clamp(2.4em, 3.8vw, 3.4em); }
  .hero-boxed .lead { font-size: 1.05em; }
  .hero-boxed .actions { margin-top: 1.75em; }
  .hero-boxed .actions .btn { font-size: 0.8125em; padding: 1.15em 1.7em; }
}

/* Too narrow for the trap to fit beside the box: the whole photo sits under the header
   and the text follows on the dark field. */
@media (max-width: 1040px) {
  .hero.hero-boxed { flex-direction: column; align-items: stretch; min-height: 0; padding-top: var(--header-h); }
  .hero-boxed::after { display: none; }
  .hero-boxed .media { position: relative; inset: auto; aspect-ratio: 3 / 2; }
  .hero-boxed .hero-content { padding-top: 40px; }
}

/* The page's one authored motion: the hero settles once on arrival. Elements are
   visible by default, so nothing depends on the animation running. */
@media (prefers-reduced-motion: no-preference) {
  :is(.hero-content, .hero-panel) > :not(.hero-panel) { animation: hero-settle 900ms var(--ease-out) backwards; }
  :is(.hero-content, .hero-panel) > :nth-child(1) { animation-delay: 40ms; }
  :is(.hero-content, .hero-panel) > :nth-child(2) { animation-delay: 140ms; }
  :is(.hero-content, .hero-panel) > :nth-child(3) { animation-delay: 240ms; }
  :is(.hero-content, .hero-panel) > :nth-child(4) { animation-delay: 340ms; }
}
@keyframes hero-settle {
  from { opacity: 0; transform: translateY(16px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ── PAGE HEAD (text-only pages) ── */
.page-head { padding: clamp(64px, 9vw, 128px) 0 clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--color-line); }
.page-head h1 { max-width: 16ch; font-size: clamp(2.5rem, 5.6vw, 4.25rem); }
.page-head .lead { margin: 28px 0 0; }

/* ── SECTIONS + LAYOUTS ── */
.section       { padding: var(--section-pad) 0; }
.section-alt   { background: var(--color-surface); }
/* Rhythm variants, so spacing reflects a section's weight instead of repeating. */
.section-tight { padding: clamp(56px, 7vw, 92px) 0; }
.section-flush { padding-top: 0; }

.section-head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.section-head h2 { max-width: 22ch; margin: 0; }
.section-head .lead { margin: 20px 0 0; }

/* Big statement left, short body text right. */
.intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 7vw, 120px); align-items: start; }
.intro h2 { margin: 0; }
.intro-body { max-width: 62ch; padding-top: 0.6em; font-size: 1rem; }
.intro-body p:last-child { margin-bottom: 0; }
.intro + .features,
.intro + .table-wrap,
.intro + .spec { margin-top: clamp(56px, 7vw, 96px); }

/* Heading column left (sticky on desktop), content right. */
.two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 7vw, 120px); align-items: start; }
.two-col > .section-head { margin-bottom: 0; }

/* Photo beside text. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split + .split { margin-top: var(--section-pad); }
.split.reverse > .media { order: 2; }
.split-body { max-width: 520px; }
.split-body h2 { margin-bottom: 20px; }
.split-body > p:not(.eyebrow):not(.placeholder-note) { color: var(--color-muted); }

/* ── NUMBERED FEATURE COLUMNS ── */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: item; }
.features.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature { counter-increment: item; padding: 28px 32px 36px 0; border-top: 1px solid var(--color-line); }
.features:not(.cols-2) .feature:not(:nth-child(3n+1)),
.features.cols-2 .feature:nth-child(2n) { padding-left: 32px; border-left: 1px solid var(--color-line); }
.feature::before {
  content: counter(item, decimal-leading-zero); display: block; margin-bottom: 28px;
  font-family: var(--font-mono); font-size: 12px; color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.feature h3 { margin-bottom: 10px; }
.feature p { max-width: 46ch; margin: 0; color: var(--color-muted); font-size: 0.97rem; }
.feature p + p { margin-top: 0.7em; }

/* ── NUMBERED LIST (vertical) ── */
.numbered { margin: 0; padding: 0; list-style: none; counter-reset: item; border-top: 1px solid var(--color-line); }
.numbered > li {
  counter-increment: item; display: grid; grid-template-columns: 56px minmax(0, 1fr);
  padding: 28px 0; border-bottom: 1px solid var(--color-line);
}
.numbered > li::before {
  content: counter(item, decimal-leading-zero); padding-top: 5px;
  font-family: var(--font-mono); font-size: 12px; color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.numbered h3 { margin-bottom: 8px; }
.numbered p { margin: 0; color: var(--color-muted); }

/* ── LIST ROWS (case studies) ── */
.rows { border-top: 1px solid var(--color-line); counter-reset: item; }
.row {
  counter-increment: item; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px 32px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--color-line);
}
.row::before {
  content: counter(item, decimal-leading-zero); padding-top: 5px;
  font-family: var(--font-mono); font-size: 12px; color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.row h3 { margin-bottom: 6px; }
.row p { max-width: 56ch; margin: 0; color: var(--color-muted); }

/* ── SPEC LIST ──
   Mono field name against a plain-language description. Used for what a single
   detection contains, where the mono face carries real data rather than decoration. */
.spec { border-top: 1px solid var(--color-text); }
.spec-row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 6px 48px; padding: 20px 0; border-bottom: 1px solid var(--color-line);
}
.spec-key {
  margin: 0; padding-top: 2px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.spec-val { max-width: 62ch; margin: 0; color: var(--color-muted); font-size: 0.97rem; }
.spec-note { max-width: 62ch; margin: 20px 0 0; color: var(--color-muted); font-size: 0.9rem; }

/* ── DIAGRAM (authored line art; not one of the photo slots) ── */
.diagram { display: block; width: 100%; height: auto; }
.diagram .d-line  { fill: none; stroke: var(--color-text); stroke-width: 1; vector-effect: non-scaling-stroke; }
.diagram .d-faint { fill: none; stroke: var(--color-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.diagram .d-beam  { fill: none; stroke: var(--color-accent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.diagram .d-dash  { stroke-dasharray: 3 4; }
.diagram .d-fill  { fill: var(--color-text); stroke: none; }
.diagram .d-mark  { fill: var(--color-accent); stroke: none; }
.diagram text {
  font-family: var(--font-mono); font-size: 6.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; fill: var(--color-muted);
}
.diagram text.is-beam { fill: var(--color-accent); }
.diagram-frame { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--color-line); background: #fff; }
.diagram-caption { max-width: 46ch; margin: 18px 0 0; color: var(--color-muted); font-size: 0.9rem; }

/* ── DOCUMENT TILES ── */
.doc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.doc-tile { display: flex; flex-direction: column; min-height: 268px; padding: 28px; background: #fff; border: 1px solid var(--color-line); }
.doc-tile-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 40px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted);
}
.doc-tile h3 { margin-bottom: 10px; }
/* Only the description takes the slack, so the footer line stays pinned down. */
.doc-tile > p:not(.doc-status) { flex: 1; margin: 0; color: var(--color-muted); font-size: 0.97rem; }
.doc-tile .btn { align-self: flex-start; margin-top: 28px; }
/* A guide with no PDF yet says so on one line, rather than offering a button that
   cannot be pressed. Swap it for the download link once the file exists. */
.doc-status {
  flex: 0 0 auto;
  margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--color-line);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted);
}
@media (max-width: 960px) { .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Stacked, tiles size to their own content instead of matching a column. */
@media (max-width: 640px) {
  .doc-grid { grid-template-columns: 1fr; }
  .doc-tile { min-height: 0; padding: 24px; }
  .doc-tile-meta { margin-bottom: 20px; }
}

/* ── PRODUCT TILES ── */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.tile .media { aspect-ratio: 4 / 5; margin-bottom: 24px; }
.tile .eyebrow { margin-bottom: 10px; }
.tile ul { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
.tile li { padding: 10px 0; border-bottom: 1px solid var(--color-line); color: var(--color-muted); font-size: 0.95rem; }

/* ── COMPARISON TABLE ── */
.table-wrap { overflow-x: auto; border-top: 1px solid var(--color-text); scrollbar-width: thin; scrollbar-color: var(--color-rule) transparent; }
.compare { width: 100%; min-width: 600px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.compare th,
.compare td { padding: 18px 24px 18px 0; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; font-weight: 400; }
.compare thead th {
  padding-top: 16px; padding-bottom: 16px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted);
}
.compare thead th.is-ours { color: var(--color-primary); }
.compare tbody th { width: 32%; color: var(--color-muted); }
.compare .tbd {
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted);
}
.table-caption { max-width: 62ch; margin-top: 16px; color: var(--color-muted); font-size: 0.9rem; }

/* ── FAQ ── */
.faq-list { display: grid; gap: 8px; }
.faq-item { background: var(--color-surface); }
.section-alt .faq-item { background: #fff; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 24px; list-style: none; cursor: pointer;
  font-size: 1.05rem; font-weight: 500; letter-spacing: -0.015em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex-shrink: 0; font-size: 1.6rem; font-weight: 300; line-height: 1;
  color: var(--color-primary); transition: transform 0.25s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { max-width: 68ch; padding: 0 24px 24px; color: var(--color-muted); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ── SMALL BITS ── */
/* Marks a slot still being written. Hairline only, no colored bar. */
.placeholder-note {
  max-width: 62ch; margin-top: 4px; padding-top: 14px;
  border-top: 1px solid var(--color-line);
  color: var(--color-muted); font-size: 0.95rem;
}
.placeholder-note::before {
  content: "To be added"; display: block; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent);
}
.badge {
  display: inline-block; padding: 5px 9px; border: 1px solid var(--color-line);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-muted); white-space: nowrap;
}

/* ── CONTACT / DEMO REQUEST FORM ── */
.contact-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.contact-aside .eyebrow { margin-bottom: 16px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted);
}
.required { color: var(--color-cta); }
.field input,
.field select,
.field textarea {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--color-line); border-radius: 0;
  background: #fff; color: var(--color-text);
  font-family: inherit; font-size: 1rem; letter-spacing: -0.01em;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.field textarea { min-height: 140px; resize: vertical; }
.field ::placeholder { color: #737d74; opacity: 1; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--color-rule); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); }

/* Spam trap: kept off-screen so people never see or fill it. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { max-width: 62ch; margin: 24px 0; color: var(--color-muted); font-size: 0.9rem; }
.form-status { min-height: 1.5em; margin-top: 16px; font-size: 0.95rem; }
.form-status.error { color: var(--color-error); }
.form-success { padding-top: 32px; border-top: 1px solid var(--color-text); }
.form-success h2 { margin-bottom: 12px; }
.form-success p { color: var(--color-muted); }
.form-success:focus { outline: none; }

/* ── CTA ── */
.cta-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 48px; }
.cta h2 { max-width: 20ch; margin: 0; }
.cta .actions { margin-top: 0; }

/* ── FOOTER CARD ── */
.site-footer { padding: var(--gutter); }
.footer-card {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px);
  max-width: calc(var(--max-width) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(28px, 4vw, 56px);
  background: var(--color-forest); color: var(--color-on-dark);
}
.footer-brand .wordmark { font-size: clamp(2rem, 4vw, 3rem); }
.footer-tagline { margin: 14px 0 0; color: var(--color-accent-light); font-size: 1.1rem; }
.footer-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: clamp(40px, 5vw, 64px); font-size: 0.95rem; }
.footer-label {
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-on-dark-muted);
}
.footer-details address { display: flex; flex-direction: column; gap: 6px; font-style: normal; }
.footer-details address span { color: var(--color-on-dark-muted); }
.footer-links { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.footer-card a { color: var(--color-on-dark); text-decoration: none; }
.footer-card a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-card .media { align-self: start; }
.footer-bottom {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--color-on-dark-muted); font-size: 0.85rem;
}
.footer-bottom a { color: var(--color-on-dark-muted); }

/* ── RESPONSIVE ── */
/* The header holds four links plus two buttons, so it collapses early. */
@media (max-width: 1180px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit; cursor: pointer;
  }
  .nav-toggle-bar,
  .nav-toggle-bar::before,
  .nav-toggle-bar::after { display: block; width: 18px; height: 1.5px; background: currentColor; }
  .nav-toggle-bar { position: relative; transition: background-color 0.2s var(--ease-out); }
  .nav-toggle-bar::before,
  .nav-toggle-bar::after { content: ""; position: absolute; left: 0; transition: transform 0.25s var(--ease-out); }
  .nav-toggle-bar::before { top: -6px; }
  .nav-toggle-bar::after  { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after  { transform: translateY(-6px) rotate(-45deg); }

  .site-nav {
    display: none; position: fixed; top: var(--header-h); left: 0; right: 0;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 24px; padding: 8px var(--gutter) 28px;
    background: #fff; color: var(--color-text); border-bottom: 1px solid var(--color-line);
  }
  .site-nav.open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { display: block; padding: 16px 0; border-bottom: 1px solid var(--color-line); font-size: 1.1rem; opacity: 1; }
  .nav-actions { flex-direction: column; align-items: stretch; }
  .nav-actions .btn { padding: 15px 20px; font-size: 13px; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 960px) {
  .tiles { grid-template-columns: 1fr; }
  .tile .media { aspect-ratio: 16 / 10; }
}

@media (max-width: 880px) {
  .intro, .two-col, .split, .contact-layout, .footer-card { grid-template-columns: 1fr; }
  .split.reverse > .media { order: 0; }
  .features, .features.cols-2 { grid-template-columns: 1fr; }
  /* Stacked, the number reads as a marker on the rule above it rather than a
     column header, so it sits tight to its own heading. */
  .features .feature { padding: 20px 0 32px; border-left: 0 !important; }
  .features .feature::before { margin-bottom: 14px; }
  .spec-row { grid-template-columns: 1fr; gap: 8px; }
}

@media (min-width: 881px) {
  .two-col > .section-head { position: sticky; top: calc(var(--header-h) + 32px); }
}

@media (max-width: 640px) {
  .form-grid, .footer-details { grid-template-columns: 1fr; }
  .row { grid-template-columns: 40px minmax(0, 1fr); }
  .row > .badge { grid-column: 2; justify-self: start; }
  .cta-inner { align-items: flex-start; }
  .hero { min-height: min(92vh, 780px); }
}

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