/* ==========================================================================
   Ziantra — homepage stylesheet

   Flattened 2026-09-02. Previously this file was two complete designs stacked
   (a cream/Fraunces original, then an MMGroup-style light/petrol layer) plus
   ~18 appended patch blocks that overrode each other. Every cascade chain has
   been resolved to its winning value, so rendered output is unchanged — with
   one deliberate exception, marked HEADLINE below.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  --ink: #10161c;
  --muted: #4d5866;
  --purple: #7452e8;
  --purple-dark: #5639bd;
  --deep: #0d2430;
  --paper: #fff;
  --paper-2: #f6f8fa;
  --line: #e4e8ed;
  --shadow: 0 18px 40px -24px rgba(13, 36, 48, .45);

  /* Layout: content column width, and the minimum gutter beside it. --edge is
     the inline padding that centres a --maxw column inside a FULL-BLEED
     element (topbar, hero) without ever using vw — vw counts the vertical
     scrollbar and would push the page sideways. Breakpoints only reset
     --gutter; --edge and every width below follow from it. */
  --maxw: 1160px;
  --gutter: 24px;
  /* Masthead height, so the holding page's band can fill what's left. */
  --topbar-h: 88px;
  --edge: max(var(--gutter), calc(50% - var(--maxw) / 2));
}

/* --- Base ----------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2 {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -.025em;
}
h1 { max-width: 12ch; font-size: clamp(2.6rem, 4.8vw, 4.35rem); font-weight: 800; line-height: 1.04; }
h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 700; line-height: 1.12; }

.lead,
.context-copy > p:not(.eyebrow),
.capability-card p,
.closing-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.75; }

.lead { max-width: 57ch; margin: 24px 0 0; font-size: 1.06rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--purple-dark);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow > span { width: 24px; height: 1px; background: currentColor; }
.eyebrow.light { color: #bba8ff; }

/* --- Buttons -------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.button:hover,
.nav-cta:hover { transform: translateY(-2px); }
.button.primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); }
.button.secondary { background: rgba(255, 255, 255, .7); }
.light-button { border-color: transparent; color: var(--ink); background: #fff; }

/* --- Shell + topbar ------------------------------------------------------- */
.site-shell { width: 100%; margin: 0; padding: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  width: 100%;
  min-height: var(--topbar-h);
  margin: 0;
  padding: 0 var(--edge);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
}

.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; font-weight: 800; letter-spacing: -.03em; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.15rem;
}

.nav { display: flex; align-items: center; gap: 28px; color: var(--muted); font-size: .9375rem; font-weight: 500; }
.nav a,
.nav-cta { transition: color 180ms ease, transform 180ms ease; }
.nav a:hover { color: var(--ink); }
.nav-cta {
  justify-self: end;
  padding: .55rem 1.25rem;
  border-radius: 999px;
  color: #fff;
  background: var(--deep);
  font-size: .84rem;
  font-weight: 600;
}

/* --- Mobile menu -----------------------------------------------------------
   Hidden above 980px, where .nav carries the links. The panel is an absolute
   child of the sticky .topbar, so it hangs below it and shares its stacking
   context. Note: never give .mobile-nav a display value — open/closed is the
   `hidden` attribute, and any display rule would override it. */
@media (min-width: 981px) {
  .nav-toggle,
  .mobile-nav { display: none !important; }
}

.nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars:before,
.nav-toggle-bars:after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 180ms ease, background 120ms ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars:before,
.nav-toggle-bars:after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars:before { top: -6px; }
.nav-toggle-bars:after { top: 6px; }
.nav-toggle.is-open .nav-toggle-bars { background: transparent; }
.nav-toggle.is-open .nav-toggle-bars:before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bars:after { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  padding: 8px var(--edge) 18px;
  border-bottom: 1px solid var(--line);
  /* Solid, not translucent: the panel sits over the dark page head and any
     alpha lets the headline ghost through it. */
  background: #fff;
  box-shadow: 0 20px 40px -26px rgba(13, 36, 48, .55);
}
.mobile-nav ul { margin: 0; padding: 0; list-style: none; }
/* Scoped to the list: a bare `.mobile-nav a` also caught the CTA and forced
   it to display:block, which killed the .button flex centring and left its
   label hard against the left edge of a full-width button. */
.mobile-nav li a {
  display: block;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}
.mobile-nav li:last-child a { border-bottom: 0; }
.mobile-nav-cta { width: 100%; margin-top: 16px; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 48px;
  width: 100%;
  min-height: 650px;
  margin: 0;
  padding: clamp(4rem, 7vw, 6rem) var(--edge);
  color: #fff;
}
/* Dark backdrop. The hero is full-bleed and holds its own gutters, so this
   just fills it — it used to be stretched out to 50vw either side, which
   overhung the document by half a scrollbar and caused sideways scrolling. */
.hero:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(80rem 34rem at 78% -10%, #2f2267 0%, transparent 58%),
    linear-gradient(160deg, #0d2430 0%, #152e3b 55%, #0d2430 100%);
}

.hero .eyebrow { color: #b8a8ff; }
.hero .lead { max-width: 52ch; color: rgba(255, 255, 255, .76); }
.hero .button.secondary { color: #fff; border-color: rgba(255, 255, 255, .34); background: transparent; }
.hero .signal-row span { color: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); }

/* HEADLINE — the two <span> children of the h1 are the line breaks. The accent
   phrase stays inline so it shares line one with the text that follows it;
   it was previously display:block, which split the heading over three lines. */
.hero h1 { max-width: none; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.1; letter-spacing: -.02em; }
.hero-title-line,
.hero-title-rest { display: block; }
.hero-title-accent { color: #b8a8ff; }
.hero-title-rest { white-space: nowrap; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 28px; }

.signal-row { display: flex; flex-wrap: wrap; gap: 8px; }
.signal-row span {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, .42);
  font-size: .76rem;
  font-weight: 700;
}

.hero-copy > h1 + .eyebrow { margin: 16px 0 14px; }
.hero-copy > .signal-row { margin: 0 0 24px; }
.hero-copy > .signal-row span { display: inline-flex; align-items: center; gap: 8px; }
.hero-copy > .signal-row span:before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9f87ff;
  box-shadow: 0 0 0 3px rgba(159, 135, 255, .14);
}

/* The hero visual is the same figure as the alternating sections' — the
   screenshot, then a caption beneath it. It used to sit in a translucent
   padded panel with the label above; that panel is gone.
   These two carry .context-visual as well so they beat the .context-visual
   rules further down whatever the source order — the shadow has to be the
   heavy one on this dark ground, and the caption has to be legible on it. */
/* A dark hairline rather than the sections' light --line, which read as a
   white frame here. The sections' --shadow is a dark navy tuned for white
   cards and is invisible on this ground, so the hero lifts off a white glow
   instead — with no vertical offset, since a white shadow cast downward
   reads as light coming from below. */
.hero-visual.context-visual .screenshot-shell { border: 1px solid rgba(0, 0, 0, .5); box-shadow: 0 0 55px -6px rgba(255, 255, 255, .3); }
.hero-visual.context-visual figcaption { color: rgba(255, 255, 255, .72); }
.status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #52b788; box-shadow: 0 0 0 5px rgba(82, 183, 136, .12); }

/* --- Screenshot frames ---------------------------------------------------- */
.screenshot-shell { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #eee9f4; }
.screenshot-shell img { position: relative; z-index: 2; aspect-ratio: 16 / 10; object-fit: cover; }

/* The hero frame follows its image's natural height instead of a fixed ratio. */
.hero-visual .screenshot-shell { aspect-ratio: auto; }
.hero-visual .screenshot-shell img { background: #eee9f4; }

/* Every screenshot opens in the lightbox. They are focusable, so they keep a
   visible ring when reached by keyboard — site.js takes Enter and Space. */
.screenshot-shell img[data-lightbox] { cursor: pointer; }
.screenshot-shell img[data-lightbox]:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.hero-visual .screenshot-shell img[data-lightbox]:focus-visible { outline-color: #b8a8ff; }

/* Revealed by site.js when the image fails to load. */
.image-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 26px;
  background: linear-gradient(135deg, #ede6f7, #f8efe6);
}
.image-fallback span { color: var(--muted); }
.screenshot-shell:not(.missing) .image-fallback { display: none; }
.screenshot-shell.missing img { display: none; }

/* --- Holding page ---------------------------------------------------------
   index.php. The masthead is the shared one; everything below it is a single
   dark band that fills the rest of the viewport, with the copyright line
   standing at its foot. Full-bleed via --edge, never vw. */
.soon {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 100%;
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100svh - var(--topbar-h));
  padding: clamp(2.5rem, 5vw, 4rem) var(--edge) 20px;
  color: #fff;
}
.soon:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(80rem 34rem at 78% -10%, #2f2267 0%, transparent 58%),
    linear-gradient(160deg, #0d2430 0%, #152e3b 55%, #0d2430 100%);
}
.soon-inner { display: grid; align-content: center; justify-items: start; }
/* Set in caps: the base h1's -.025em tracking is tuned for lowercase and
   closes caps up too far, so it is relaxed here. */
.soon h1 { max-width: 17ch; letter-spacing: -.005em; text-transform: uppercase; }
.soon .eyebrow { margin-bottom: 14px; }
.soon .lead { max-width: 54ch; color: rgba(255, 255, 255, .76); }

.soon-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 34px; }
.soon-mail { color: rgba(255, 255, 255, .72); font-size: .92rem; font-weight: 600; transition: color 180ms ease; }
.soon-mail:hover { color: #b8a8ff; }

.soon-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .55);
  font-size: .8125rem;
}

@media (max-width: 640px) {
  .soon-foot span:last-child { display: none; }
}

/* --- Inner-page head ------------------------------------------------------
   The masthead for pages that aren't the homepage: the hero's dark ground and
   type, without its 650px minimum or its screenshot. Full-bleed the same way,
   via --edge. */
.page-head {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: clamp(3.25rem, 5.5vw, 5rem) var(--edge) clamp(2.75rem, 4.5vw, 4rem);
  color: #fff;
}
.page-head:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(80rem 34rem at 78% -10%, #2f2267 0%, transparent 58%),
    linear-gradient(160deg, #0d2430 0%, #152e3b 55%, #0d2430 100%);
}
.page-head .eyebrow { color: #b8a8ff; }
/* Set in caps, like the holding page's. The -.02em tracking is tuned for
   lowercase and closes capitals up too far, so it is relaxed; caps also run
   wider, hence the roomier measure. */
.page-head h1 { max-width: 26ch; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.12; letter-spacing: -.005em; text-transform: uppercase; }
.page-head .lead { max-width: 58ch; color: rgba(255, 255, 255, .76); }
/* The homepage puts the capability grid's 80px between its hero and the first
   context section; here nothing sits between them, so the section carries it. */
.page-head + .context-section { margin-top: 56px; }

/* --- Capability cards ----------------------------------------------------- */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: min(var(--maxw), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
  padding: 80px 0;
}
.capability-card { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.capability-card h2 { font-size: 1.35rem; }
.capability-card p { margin: 12px 0 0; font-size: .975rem; }

/* Icon tile and step number share one row above the heading. The number used
   to carry the 28px gap on its own; .card-head owns that spacing now. */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.card-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--purple-dark);
  background: linear-gradient(155deg, rgba(116, 82, 232, .15), rgba(116, 82, 232, .05));
  box-shadow: inset 0 0 0 1px rgba(116, 82, 232, .17);
}
.card-icon svg { width: 24px; height: 24px; }
.card-number { display: inline-block; margin: 0; color: var(--purple-dark); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }

/* --- Alternating copy / screenshot sections ------------------------------- */
.context-section,
.context-section.reverse {
  width: min(var(--maxw), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
  padding: clamp(4rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  gap: clamp(2.5rem, 6vw, 5rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper-2);
}
.context-section { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; }
.context-section + .context-section { margin-top: 32px; }
.context-section.reverse { grid-template-columns: 1.12fr .88fr; background: #fff; }

.context-copy > p:not(.eyebrow) { margin: 22px 0 0; font-size: .975rem; }

.check-list { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 23px; color: #4f495a; font-size: .9375rem; font-weight: 600; line-height: 1.5; }
/* A bullet, matching the dot on the pills and the section headings. */
.check-list li:before {
  content: "";
  position: absolute;
  top: .55em;
  left: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 3px rgba(116, 82, 232, .14);
}

.context-visual { margin: 0; }
.context-visual .screenshot-shell { box-shadow: var(--shadow); }
/* These two screenshots are cropped to their panel content, so show them whole
   at their own ratio — the shared 16/10 + cover above was slicing the right
   edge off the table. */
.context-visual .screenshot-shell img { height: auto; aspect-ratio: auto; object-fit: contain; }

/* Section headings sit a step below the hero headline rather than matching it. */
.context-copy h2 { font-size: clamp(1.6rem, 2.05vw, 1.95rem); }
/* Caption matches the hero's UNIFIED PLATFORM OVERVIEW label: green status
   dot, uppercase, tracked out. Uppercasing is done here rather than in the
   markup so the caption text stays readable in index.php. */
.context-visual figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- Grouped card lists ---------------------------------------------------
   accounts.php and infrastructure.php: a heading, a line, then cards. The
   tool names reuse the hero's pill styling rather than inventing a third. */
.group-section {
  width: min(var(--maxw), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
  padding: clamp(2.75rem, 4.5vw, 4rem) 0 0;
}
.group-section > h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.35rem, 1.9vw, 1.7rem); }
.group-intro { max-width: 64ch; margin: 12px 0 0; color: var(--muted); font-size: .95rem; }

/* Bullet to the left of a heading — same dot as the pills and the check-lists. */
.group-section > h2:before,
.group-card h3:before,
.contact-form-panel > h2:before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 0 3px rgba(116, 82, 232, .14);
}

/* A hairline with a soft shadow beneath it, between a heading and the line
   that explains it. It sits on the heading rather than the paragraph so it
   spans the whole block — the intro text is capped at 64ch and the rule
   would otherwise stop short of the edge. */
.group-section > h2:has(+ .group-intro),
.context-copy h2:has(+ p:not(.eyebrow)),
.contact-form-panel > h2 {
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 5px 6px -6px rgba(13, 36, 48, .4);
}
.group-section > h2 + .group-intro,
.context-copy h2 + p:not(.eyebrow) { margin-top: 17px; }

/* Row gap deliberately larger than the column gap: the cards are tall, and
   at a matched 22px the rows ran together. */
.group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; margin-top: 26px; }
.group-grid--tight { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Tinted body so the tiles inside it read as tiles — the same grey-panel,
   white-tile relationship the actual Tools & Settings screen uses. No shadow:
   the tint and the border already separate it, and the tiles carry the only
   lift in the group. */
.group-card {
  min-width: 0;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper-2);
}
.group-card h3 { display: flex; align-items: center; gap: 11px; margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; }
.group-card p { margin: 8px 0 0; color: var(--muted); font-size: .92rem; }
.group-card .signal-row { margin-top: 16px; }
/* The same static bullet the hero pills carry, in the on-light purple —
   infrastructure.php's tool groups and pricing.php's licence cards. */
/* wrap-reverse stacks the lines bottom-up, so a card's short last row is
   drawn at the top and the full rows sit beneath it. DOM order is untouched;
   only the lines are reordered. */
.group-card .signal-row { flex-wrap: wrap-reverse; }

/* Justified: each pill grows so every row sits flush to both edges of the
   card, the way a justified line of text does. nowrap keeps a two-word label
   on one line while it stretches. No bullet on these — the heading above the
   card carries the only dot. */
/* Tiles, not pills: white on the card's tinted body, squared off, label to
   the left where a stretched item reads better than centred.
   The basis is a quarter minus three-quarters of the 8px gap, so four sit on
   a row exactly — change the gap and this has to change with it, or a
   six-item group starts splitting 3 + 3 instead of the 2 + 4 it should. */
.group-card .signal-row span {
  display: inline-flex;
  flex: 1 1 calc(25% - 6px);
  align-items: center;
  justify-content: flex-start;
  padding: 10px 11px;
  border-radius: 10px;
  border-color: rgba(13, 36, 48, .07);
  background: #fff;
  color: var(--ink);
  font-size: .76rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(13, 36, 48, .06), 0 6px 14px -12px rgba(13, 36, 48, .5);
  white-space: nowrap;
}

/* --- Not found ------------------------------------------------------------ */
.notfound-section {
  width: min(var(--maxw), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
  padding: clamp(2.75rem, 4.5vw, 4rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}
.notfound-section > h2 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); }
.notfound-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 26px; }
.notfound-card {
  position: relative;
  min-width: 0;
  padding: 24px 26px 46px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform 180ms ease, border-color 180ms ease;
}
.notfound-card:hover { transform: translateY(-2px); border-color: rgba(116, 82, 232, .45); }
.notfound-card h3 { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -.015em; }
.notfound-card p { margin: 10px 0 0; color: var(--muted); font-size: .93rem; }
.notfound-go { position: absolute; bottom: 22px; left: 26px; color: var(--purple-dark); font-size: 1.1rem; font-weight: 800; }

/* --- Pricing --------------------------------------------------------------
   The quote panel stands in for a price table while there are no published
   figures; .tier-card is the priced layout, used the moment $tiers is filled. */
.quote-section {
  width: min(var(--maxw), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
  padding: clamp(2.75rem, 4.5vw, 4rem) 0 0;
}
.quote-panel {
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(70rem 30rem at 80% -10%, #2f2267 0%, transparent 58%),
    linear-gradient(160deg, #0d2430, #152e3b);
}
.quote-panel h2 { max-width: 20ch; font-size: clamp(1.5rem, 2.2vw, 1.95rem); }
.quote-panel > p:not(.eyebrow) { max-width: 64ch; margin: 14px 0 0; color: rgba(255, 255, 255, .7); font-size: .975rem; }
.quote-panel .eyebrow { margin-bottom: 14px; }
.quote-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; }
.quote-mail { color: rgba(255, 255, 255, .72); font-size: .92rem; font-weight: 600; transition: color 180ms ease; }
.quote-mail:hover { color: #b8a8ff; }

.tier-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}
.tier-card h3 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; }
.tier-price { margin: 12px 0 0; color: var(--ink); font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.tier-price span { margin-left: 6px; color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: 0; }
.tier-card > p:not(.tier-price) { margin: 10px 0 0; color: var(--muted); font-size: .93rem; }
.tier-card .check-list { margin-top: 20px; }
.tier-card .button { margin-top: auto; align-self: flex-start; }
.tier-card .check-list + .button { margin-top: 24px; }

.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 26px 0 0; }
.faq { min-width: 0; padding: 22px 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper-2); }
.faq dt { color: var(--ink); font-size: .98rem; font-weight: 700; letter-spacing: -.01em; }
.faq dd { margin: 8px 0 0; color: var(--muted); font-size: .93rem; line-height: 1.7; }
.faq dd code { color: var(--purple-dark); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

/* --- Contact --------------------------------------------------------------
   Form on the left, the details that don't need a form on the right. */
.contact-section {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  width: min(var(--maxw), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
  padding: clamp(2.75rem, 4.5vw, 4rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}

.contact-form-panel,
.contact-details {
  min-width: 0;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}
.contact-details { background: var(--paper-2); }
/* The form's heading is the panel's title, so it takes the section-heading
   treatment: bullet, a size up, and the divider rule above. .form-note h2 is
   not a direct child, so the success and error panels are unaffected. */
.contact-form-panel > h2 {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 1.25rem;
}
.contact-details > h2 { font-size: 1.05rem; }
.contact-details > h2 + .contact-list { margin-top: 14px; }
.contact-details > .contact-list + h2 { margin-top: 26px; }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 7px; margin-top: 16px; }
.field-row .field { margin-top: 0; }
.field label { color: var(--ink); font-size: .8rem; font-weight: 700; }
.field label span { color: var(--muted); font-weight: 500; }
.field input,
.field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--paper-2);
  font: inherit;
  font-size: .93rem;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--purple);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(116, 82, 232, .16);
}
.field--error input,
.field--error textarea { border-color: #c2454a; background: rgba(194, 69, 74, .04); }
.field-error { margin: 0; color: #a8383c; font-size: .8rem; font-weight: 600; }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-form-panel form { margin-top: 18px; }
.contact-form-panel .button { margin-top: 22px; }

.form-note { margin: 0 0 20px; padding: 15px 17px; border-radius: 12px; font-size: .92rem; }
.form-note h2 { margin: 0 0 6px; font-size: 1.05rem; }
.form-note p { margin: 0; }
.form-note a { color: var(--purple-dark); font-weight: 700; text-decoration: underline; }
.form-note--ok { color: #1d5b40; border: 1px solid rgba(82, 183, 136, .4); background: rgba(82, 183, 136, .1); }
.form-note--ok a { color: #1d5b40; }
.form-note--bad { color: #8f2f33; border: 1px solid rgba(194, 69, 74, .32); background: rgba(194, 69, 74, .07); }
.form-note--bad a { color: #8f2f33; }

.contact-list { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.contact-list li { display: grid; gap: 3px; color: var(--ink); font-size: .93rem; line-height: 1.5; }
.contact-list span { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.contact-list a { font-weight: 600; transition: color 180ms ease; }
.contact-list a:hover { color: var(--purple-dark); }

/* --- Closing CTA + footer ------------------------------------------------- */
/* A band, not a billboard: copy left, action right, both vertically centred.
   It was a centred stack with 13ch headings and 6.5rem of padding, which threw
   a three-line shout the size of the hero at the end of the page. */
.closing-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  width: min(var(--maxw), calc(100% - var(--gutter) * 2));
  margin: clamp(2.75rem, 4.5vw, 3.75rem) auto 0;
  padding: clamp(2.25rem, 3.6vw, 3rem) clamp(1.75rem, 3.2vw, 2.75rem);
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(70rem 30rem at 80% -10%, #2f2267 0%, transparent 58%),
    linear-gradient(160deg, #0d2430, #152e3b);
}
.closing-section h2 { max-width: 46ch; font-size: clamp(1.4rem, 1.85vw, 1.7rem); }
.closing-copy .eyebrow { margin-bottom: 14px; }
.closing-copy > p:not(.eyebrow) { max-width: 62ch; margin: 12px 0 0; font-size: .95rem; color: rgba(255, 255, 255, .68); }
.closing-section .light-button { flex: none; }

/* --- Footer ---------------------------------------------------------------
   The MMGroup house footer: full-bleed dark band, brand column plus three
   link columns, bottom bar. Full-bleed the same way the topbar and hero are —
   --edge padding, never vw. */
.site-footer {
  /* Every line in the footer is exactly this tall and carries no margin of its
     own, so a line in one column lands on the same pixel as the line beside
     it — blurb and link lists alike. */
  --foot-row: 1.95rem;
  width: 100%;
  margin-top: 72px;
  padding-inline: var(--edge);
  background: var(--deep);
  color: rgba(255, 255, 255, .7);
  font-size: .9375rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
  gap: 2.5rem;
  padding-block: 4.5rem 2.5rem;
}

.footer-brand { padding-right: .5rem; }
/* Sized to the footer's line grid: the three columns beside this one spend
   their heading plus its margin before the first link, and the lockup and the
   margin under it spend the same, so the blurb's lines land on their links. */
/* 28px of lockup plus 1px is the 29px the three columns beside this one spend
   on their heading and its margin, so the blurb's lines land exactly on their
   first two links. */
.footer-brand .brand { margin-bottom: 1px; color: #fff; font-size: 1rem; }
.footer-brand .brand-mark { width: 28px; height: 28px; border-radius: 8px; font-size: .85rem; }

.footer-col h2 {
  margin: 0 0 .9rem;
  color: #fff;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer-col ul { margin: 0; padding: 0; list-style: none; }

.footer-brand p,
.footer-col li {
  margin: 0;
  font-size: inherit;
  line-height: var(--foot-row);
}
.footer-brand p { max-width: 30ch; }

.footer-col a { color: #fff; transition: color 180ms ease; }
.footer-col a:hover { color: #b8a8ff; }
.footer-col span { color: rgba(255, 255, 255, .55); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .875rem;
}
.footer-bottom p { margin: 0; font-size: inherit; }
.footer-bottom p span + span { margin-left: 1.25rem; }

/* --- Entrance animation --------------------------------------------------- */
.reveal { animation: rise 720ms ease both; }
.hero-visual,
.capability-card:nth-child(2) { animation-delay: 100ms; }
.capability-card:nth-child(3) { animation-delay: 180ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Lightbox (opened by site.js) ----------------------------------------- */
body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background: rgba(13, 36, 48, .9);
  cursor: zoom-out;
}
.lightbox img {
  width: auto;
  max-width: 94vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .4);
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

/* --- Responsive ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none; }
}

/* NOTE: the hero keeps its 650px min-height at every width, and the capability
   grid its 80px vertical padding. In the original file the breakpoint that
   relaxed those sat above the second design layer, so the layer's unwrapped
   rules won — media queries carry no extra specificity. Preserved as-is. */

@media (max-width: 980px) {
  :root { --gutter: 16px; }

  .topbar { grid-template-columns: 1fr auto auto; gap: 14px; }
  .nav { display: none; }
  .nav-toggle { display: grid; }

  .hero { grid-template-columns: 1fr; padding-block: 4.5rem; }
  .hero-copy { max-width: 720px; }

  .capability-grid { grid-template-columns: 1fr; }
  .group-grid,
  .group-grid--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-section { grid-template-columns: 1fr; }
  .group-grid,
  .group-grid--tight { grid-template-columns: 1fr; }
  .faq-list { grid-template-columns: 1fr; }
  .notfound-grid { grid-template-columns: 1fr; }

  /* Touch sizing. An inline link's hit area is its ~19px text box, however
     tall the line is — so the text links become blocks with real padding at
     these widths. Scoped here on purpose: on desktop the footer's --foot-row
     line grid needs each line to be exactly one row tall. */
  /* 44px is the smallest comfortable touch target; the CTA's padding alone
     left it at 37. inline-flex so min-height actually applies to an <a>. */
  .nav-cta { display: inline-flex; align-items: center; min-height: 44px; }

  .footer-col ul { gap: 2px; }
  .footer-col li { line-height: 1.35; }
  .footer-col a,
  .contact-list a { display: block; padding-block: 11px; }
  .footer-brand .brand { padding-block: 7px; }
  .soon-mail,
  .quote-mail { display: inline-block; padding-block: 9px; }

  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; padding-right: 0; }

  .context-section,
  .context-section.reverse { grid-template-columns: 1fr; padding: 4rem 2rem; }
  .context-section.reverse .context-visual { order: 2; }
}

@media (max-width: 640px) {
  :root { --gutter: 12px; }

  :root { --topbar-h: 72px; }
  /* Brand, CTA and toggle will not all fit on a phone — the CTA is the
     last item inside the panel instead. */
  .topbar { grid-template-columns: 1fr auto; }
  .topbar > .nav-cta { display: none; }

  .hero { padding-block: 3.75rem; }
  .hero h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); }
  .hero-title-rest { white-space: normal; }
  .hero-actions { align-items: stretch; flex-direction: column; }

  .context-section,
  .context-section.reverse { padding: 3.5rem 1.25rem; }

  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field-row .field + .field { margin-top: 16px; }

  .closing-section { grid-template-columns: 1fr; gap: 1.75rem; padding: 2.5rem 1.25rem; }
  .closing-section .light-button { justify-self: start; }

  .footer-inner { gap: 2rem 1.5rem; padding-block: 3rem 1.5rem; }
  /* The bare domain only repeats the address bar on a phone, and it would wrap
     onto its own line under the copyright. Hidden, not dropped — it still
     balances the bar on a wide screen. */
  .footer-bottom p:last-child { display: none; }
  .footer-bottom { padding-block: 1rem 1.75rem; }
}