/* ==========================================================================
   Monarch & Co. | Business, Land & Commercial Real Estate landing page
   Brand tokens are taken from the askmonarch.com Elementor global kit:
   ink #252525, white #FFFFFF, off-white #F7F7F7, hairline #E7E5E4,
   stone #B2B0AE, taupe accent #A89283, deep navy #04051F.
   Type: Noto Serif (headings) + Manrope (body) + DM Sans Light (hero display word),
   with the live site's accent voice (Manrope 500, 12px, uppercase, 0.15em) for eyebrows
   and buttons, and its italic taupe highlight word inside headings.
   ========================================================================== */

@font-face {
  font-family: "Noto Serif";
  src: url("../fonts/NotoSerif-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif";
  src: url("../fonts/NotoSerif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light; /* Brand is light-only, matching askmonarch.com */

  --ink: #252525;
  --ink-soft: #3d3b39;
  --navy: #04051f;
  --white: #fefefd;
  --stone-50: #f7f7f7;
  --stone-100: #efeeec;
  --stone-200: #e7e5e4;
  --stone-300: #d3d0cc;
  --stone-400: #b2b0ae;
  --stone-500: #857f77;
  --stone-700: #57534d;
  --taupe: #a89283;          /* decorative accent only */
  --taupe-deep: #7a6656;     /* text-safe accent, 5.4:1 on white */
  --taupe-light: #c9b39f;    /* accent on navy (hero eyebrow, tagline), 7.9:1 */
  --error: #b3261e;
  --success: #2f6b4a;

  --font-serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "DM Sans", "Manrope", system-ui, sans-serif;   /* live hero word */
  --slate: #284a64;          /* live stat labels */
  --h2-size: 3rem;           /* live section headings: 48px, 35px tablet, 25px phone */

  --r-sm: 4px;   /* buttons, inputs, chips */
  --r-md: 8px;   /* cards, images */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.35s;

  --container: 1240px;
  --gutter: 24px;
  --header-h: 96px;          /* a single centred wordmark with air around it (2026-09-18) */

  --shadow-card: 0 32px 64px -28px rgba(4, 5, 31, 0.55);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  text-wrap: balance;
}
/* Highlight word, as on the live site ("The Brokerage Philosophy"): italic serif in taupe. */
h1 em, h2 em, h3 em { font-style: italic; font-weight: inherit; color: var(--taupe-deep); }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.hero-copy :focus-visible, .site-header :focus-visible, .closing :focus-visible, .site-footer :focus-visible {
  outline-color: var(--white);
}

::selection { background: var(--taupe); color: var(--ink); }

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

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 14px;
  background: var(--white); color: var(--ink);
  border-radius: var(--r-sm);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon {
  width: 1.25em; height: 1.25em;
  flex: 0 0 auto;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   Buttons: the live site's accent voice. Manrope 500, 12px, uppercase, 0.15em
   tracking, square corners, 30px side padding, arrow-up-right icon. Hover
   inverts to an outlined button, as on askmonarch.com.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px;
  padding: 0 30px;
  border-radius: 0;
  font-weight: 500; font-size: 0.75rem; line-height: 1; letter-spacing: 0.15em; text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform 0.15s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn .icon { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease); }
.btn:hover .icon { transform: translate(2px, -2px); }
.btn-lg { min-height: 54px; font-size: 0.875rem; }

.btn-primary { background: var(--ink); color: var(--stone-200); border: 1px solid var(--ink); }
.btn-primary:hover { background: transparent; color: var(--ink); }

.btn-light { background: var(--stone-50); color: var(--ink); border: 1px solid var(--white); }
.btn-light:hover { background: transparent; color: var(--stone-50); border-color: var(--white); }

.btn-ghost { background: transparent; color: var(--white); border: 1px solid var(--white); }
.btn-ghost:hover { background: var(--stone-50); color: var(--ink); border-color: var(--stone-50); }

/* Underlined text link from the live hero ("Residential Division") */
.btn-line {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.69);
  color: var(--white);
  font-weight: 500; font-size: 0.75rem; line-height: 1; letter-spacing: 0.15em; text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-line:hover { color: var(--stone-50); border-color: var(--white); }
.btn-line .icon { width: 1rem; height: 1rem; }

.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.65; cursor: progress; }
.btn[disabled]:hover .icon { transform: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  color: var(--white);
}
/* Dark bar for pages with no hero photograph behind the header (legal pages). */
.site-header.is-solid {
  background: rgba(37, 37, 37, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* The landing page's header is the wordmark alone, centred, the way luxury brokerages do it:
   the hero window below is the call to action, so the bar carries nothing else (the
   "Speak With an Advisor" button was removed 2026-09-18). The legal pages keep a left logo
   and a right-hand link back to the form. */
.site-header .container {
  display: flex; align-items: center; justify-content: center; gap: 24px;
}
.legal-page .site-header .container { justify-content: space-between; }
/* The nav (2026-09-19, "a nav bar of our sections", "make it look like a nav bar premium"): a
   floating glass pill, centred, the construction fora.so and the portfolio use for their top bar.
   Dark glass over the sky (blur is what makes it read as glass; the scene behind it is the
   effect), a 1px light edge, a soft drop. Inside: the four section links in the kit's accent
   voice (Manrope 500, 12px, 0.15em, caps; white at 78%, white on hover with a hairline that
   draws in) and the live site's "Speak With an Advisor" as a filled white pill at the right end. */
.site-nav {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 32px;
  border-radius: 999px;
  background: rgba(10, 11, 28, 0.42);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -32px rgba(0, 0, 0, 0.85);
}
.site-nav ul { list-style: none; margin: 0 24px 0 0; padding: 0; display: flex; align-items: center; gap: 30px; }
.site-nav ul a {
  position: relative; display: inline-block; padding: 6px 0;
  font-size: 0.75rem; font-weight: 500; line-height: 1; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78); text-decoration: none; white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.site-nav ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--white); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.site-nav ul a:hover, .site-nav ul a:focus-visible { color: var(--white); }
.site-nav ul a:hover::after, .site-nav ul a:focus-visible::after { transform: scaleX(1); }
.site-nav ul a:focus-visible { outline-color: var(--white); outline-offset: 6px; }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  font-size: 0.75rem; font-weight: 500; line-height: 1; letter-spacing: 0.15em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-cta:hover { background: var(--white); transform: translateY(-1px); }
.nav-cta:focus-visible { outline-color: var(--white); outline-offset: 4px; }
/* Phones: the links fold into a dropdown behind a "Menu" button (main.js toggles .is-open). */
.nav-toggle { display: none; }
.brand { display: inline-flex; align-items: center; }
/* The wordmark is the live site's own "MONARCH & Co." artwork (black on transparent, inverted
   to white exactly as askmonarch.com does) with its strapline cropped off: logo only, no
   tagline, no badge (Pat, 2026-09-18). Single line, so it runs wide: 36px tall is ~255px. */
.brand img { height: 36px; width: auto; filter: brightness(0) invert(1); }
.legal-page .brand img { height: 30px; }
.header-cta { min-height: 42px; padding: 0 22px; }

/* --------------------------------------------------------------------------
   Hero (split: copy left, intake form right, photograph behind)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Hero: a layered parallax stage (the fora.so construction, as on Pat's
   portfolio). Six depth planes back to front, each carrying a scroll factor
   --k (translateY = k * scrollY over --hero-range; a bigger k lags more and
   reads farther away): sky 0.50, downtown towers 0.40, mid-rise district 0.20,
   copy (fades out), front oak canopy -0.35 (nearer than the page, so it moves
   FASTER than the page and the scene sinks behind it). A near plane of tall
   oaks (0.16) sat between the district and the copy until Pat found it too
   much foliage (2026-09-18); its rules stay so it can be re-added.
   Cutouts live in assets/img/hero/; the generation brief is
   docs/hero-layers-prompt.md.
   -------------------------------------------------------------------------- */
.hero {
  --hero-range: 1800px;
  /* Median crown height across the middle 60% of layer-front's columns as a fraction of its
     width, measured on the 3840px master. The plane renders at 100vw, so crown * 100vw is how
     tall its middle crowns stand at any viewport. Re-measure if the image changes. */
  --hero-front-crown: 0.2388;
  /* How much of those crowns stands above the hero's bottom edge at rest; the rest hangs below
     and rises on scroll. A pixel cap, so the coverage stops growing on wide monitors. */
  --hero-front-show: clamp(110px, 7vw, 150px);
  /* The section runs this far past the fold: an apron under the scene where the canopy
     melts into the shared transition below. Nothing of the dissolve shows in the first screen
     (Pat, 2026-09-18: "the fade is already visible even if I don't scroll yet"). The far and
     mid planes anchor to the fold, the canopy to the section's real bottom. */
  /* Dusk, not blue (Pat, 2026-09-19: "too much blue in our hero section"): brand navy only at the
     zenith, then ink and a warm grey down to the taupe horizon, the way fora's sky reads. It was
     #04051f / #0a1330 / #284a64 / #6f5a4d, a navy-to-slate sky. */
  --hero-sky: radial-gradient(200% 83% at 50% 0%, #0a0b1c 0%, #161a2c 38%, #3b4250 76%, #6f5a4d 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
  min-height: calc(100dvh + var(--hero-apron));
  /* Copy, then the window, stacked to the bottom: the window's bottom edge stands on the fold
     (the apron is padding below it) and whatever the screen has to spare opens up above the
     copy. Same construction as the portfolio's hero (copy + window, window bottom = section
     bottom), with the apron added for the dissolve. */
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end;
  padding-top: calc(var(--header-h) + 8px);   /* clears the nav bar painted over the top */
  padding-bottom: var(--hero-apron);
}
/* One smoothstep curve, f(t) = 3t² - 2t³, sampled every 0.1 in OKLab.
   Both surfaces use the same physical stop positions, translated by --seam-origin:
   no independent endpoint or slope to tune at the section boundary. */
.hero, .clients {
  --seam-origin: 60px;
  --hero-apron: clamp(140px, 16vh, 200px);
  --clients-fade: 0px;     /* 270 until the wave edge (2026-09-20); the band is white from its top */   /* 300 until the 2026-09-19 evening pass; with the canopy now dissolving over the whole apron the eye reaches white ~75px sooner. 220 was tried and made the steepest 10px step exceed 6% of the rise */
  --seam-length: calc(var(--hero-apron) + var(--clients-fade));
  --seam-gradient: linear-gradient(to bottom in oklab,
    var(--navy) var(--seam-origin),
    color-mix(in oklab, var(--navy), #fff 2.8%) calc(var(--seam-origin) + var(--seam-length) * 0.1),
    color-mix(in oklab, var(--navy), #fff 10.4%) calc(var(--seam-origin) + var(--seam-length) * 0.2),
    color-mix(in oklab, var(--navy), #fff 21.6%) calc(var(--seam-origin) + var(--seam-length) * 0.3),
    color-mix(in oklab, var(--navy), #fff 35.2%) calc(var(--seam-origin) + var(--seam-length) * 0.4),
    color-mix(in oklab, var(--navy), #fff 50%) calc(var(--seam-origin) + var(--seam-length) * 0.5),
    color-mix(in oklab, var(--navy), #fff 64.8%) calc(var(--seam-origin) + var(--seam-length) * 0.6),
    color-mix(in oklab, var(--navy), #fff 78.4%) calc(var(--seam-origin) + var(--seam-length) * 0.7),
    color-mix(in oklab, var(--navy), #fff 89.6%) calc(var(--seam-origin) + var(--seam-length) * 0.8),
    color-mix(in oklab, var(--navy), #fff 97.2%) calc(var(--seam-origin) + var(--seam-length) * 0.9),
    #fff calc(var(--seam-origin) + var(--seam-length)));
}
/* The first 60px stay completely transparent, protecting the first viewport.
   The canopy is fully covered before the join, including its tall outer crowns. */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--hero-apron) + 60px);
  background: var(--seam-gradient);
  /* The texture dissolves across the whole apron (it reached full cover at 0.7 of it until the
     2026-09-19 evening pass, which left a flat near-navy plateau between the last crowns and the
     lift). Smoothstep in five stops; full cover exactly at the hero's bottom edge, where the
     ramp below is already a few percent lighter, so texture fades straight into the lift. */
  mask-image: linear-gradient(to bottom,
    transparent 60px,
    rgb(0 0 0 / 0.104) calc(60px + var(--hero-apron) * 0.2),
    rgb(0 0 0 / 0.352) calc(60px + var(--hero-apron) * 0.4),
    rgb(0 0 0 / 0.648) calc(60px + var(--hero-apron) * 0.6),
    rgb(0 0 0 / 0.896) calc(60px + var(--hero-apron) * 0.8),
    #000 calc(60px + var(--hero-apron)));
  z-index: 4;
  pointer-events: none;
}
/* Grain over the seam: a 3% film of monochrome noise (inline SVG feTurbulence, blended with
   soft-light) on both halves of the ramp, so the slow dark start does not band into visible
   steps on 8-bit displays. Too faint to read as texture; it only breaks up the quantisation. */
.hero-grain, .clients::before {
  content: "";
  position: absolute; left: 0; right: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: soft-light;
  opacity: 0.30;
}
.hero-grain { bottom: 0; height: var(--hero-apron); z-index: 5; }
/* Wave edge: white S-curve over everything at the hero's foot; the band below is plain white,
   so the ramp that used to continue under the join (.clients::before) is off. */
.hero-edge {
  position: absolute; left: 0; right: 0; bottom: -1px;
  display: block; width: 100%; height: clamp(44px, 7vw, 104px);
  z-index: 6; pointer-events: none;
}
.hero-edge path { fill: var(--white); }
/* No-fade variant (body.seam-cut, 2026-09-19): the dissolve, its grain and the ramp are off; the
   hero ends where the canopy is cut and the logo band is plain white from its first pixel. */
.seam-cut .hero::after, .seam-cut .hero-grain, .seam-cut .clients::before { display: none; }
.seam-cut .clients { background: #fff; padding-top: 56px; }
.clients { position: relative; }
.clients::before { display: none; }   /* ramp retired 2026-09-20 with the wave edge */
.clients > * { position: relative; z-index: 1; }
/* Registered so the keyframes below can read it as a length on every plane. */
@property --hero-shift {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.hero-sky {
  --k: 0.5;
  position: absolute; left: 0; right: 0;
  top: -40%; height: 140%;   /* oversized so its own drift never exposes an edge */
  background: var(--hero-sky);
  z-index: 0;
  pointer-events: none;
}
.hero-layer {
  /* Background planes stand on the fold; only the canopy reaches the section's real bottom. */
  position: absolute; left: 0; right: 0; bottom: var(--hero-apron);
  width: 100%; height: auto;
  max-height: 60%;
  /* A capped plane crops its BOTTOM rows, which the plane in front of it hides. */
  object-fit: cover; object-position: center top;
  z-index: 0;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.hero-layer--far  { --k: 0.40; }
.hero-layer--mid  { --k: 0.20; }
.hero-layer--near { --k: 0.16; }   /* optional plane, not in the markup today */
.hero-front { display: contents; }
.hero-layer--front {
  --k: -0.35;
  bottom: 0;
  /* Crown height at this width, minus the apron below the fold, minus what should show
     above the fold. Never negative in practice. */
  --hero-shift: max(0px, calc(100vw * var(--hero-front-crown) - var(--hero-apron) - var(--hero-front-show)));
  z-index: 3;
  max-height: none;                 /* natural height, bottom-anchored: its crowns are never cropped */
  object-position: center bottom;
  /* Resting pose. The scroll-driven animation (or the JS fallback) takes over from here. */
  transform: translate3d(0, var(--hero-shift), 0);
}

.hero-inner { position: relative; z-index: 2; width: 100%; display: flex; justify-content: center; }
/* Centred: the mid and near planes are tall at the edges and open in the middle. */
/* No darkening behind the copy: a radial navy pool sat here until 2026-09-18 and read as a
   smudge on the sky (Pat: "the fading bg is not clean"); the bold serif holds on its own. */
.hero-copy { position: relative; max-width: 880px; text-align: center; }
/* ===== The window: a glass panel standing on the fold, between the district and the canopy.
   fora.so's hero mockup as the portfolio rebuilt it (960px, 24px top radii, 1px light edge,
   translucent over the scene), carrying Monarch's quick start instead of an app. --k 0.10:
   it lags the page a little, so the canopy (rising at 1.35x) visibly climbs over its foot. */
.hero-window-wrap {
  --k: 0.10;
  position: relative; z-index: 1;
  width: 100%; max-width: 1008px;
  margin: clamp(32px, 4.5vh, 52px) auto 0;
  padding: 0 24px;
}
.hero-window {
  position: relative;
  display: flex; gap: 6px; padding: 6px;
  /* Sized from the canopy, not the viewport: the card (head + buttons + stats) plus the height
     the canopy's crowns stand above the window's bottom at rest, so everything in the card
     clears the foliage at every width; the lower part of the panel is plain, as the covered
     part of fora's window is. Two constraints, the larger wins: the buttons against the EDGE
     crowns (11.6vw = natural canopy height minus middle crown height; buttons end ~170px below
     the window's top) and the centred stats row against the MIDDLE crowns (stats end ~260px
     down). The constants were 300 / 400 for the old outlined tiles with their sentences;
     re-derived 2026-09-19 for the simplified card. */
  min-height: max(calc(200px + 11.6vw + var(--hero-front-show)), calc(300px + 2vw + var(--hero-front-show)));
  /* fora.so's frame as the portfolio rebuilt it (HeroWindow.tsx): a 6px gasket, 24px outer and
     18px inner radii so the corners stay concentric, rounded on top only because the bottom
     edge is the hero's. Solid, not glass (Pat, 2026-09-18: "make our panel solid"): a deep navy a
     step lighter than the section floor, so it still reads as a panel against the canopy. */
  border-radius: 24px 24px 0 0;
  background: #15161e;   /* ink, not navy (Pat, 2026-09-19: "too much blue"); was #090c2e */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 90px -40px rgba(0, 0, 0, 0.7);
  color: var(--white);
  overflow: clip;
}
.hero-window > * { border-radius: 18px; }
/* Sidebar (decorative chrome, 2026-09-19, "like my portfolio"): fora's own recipe via the
   portfolio, 220px, 16px padding, an 18px search row (61x16 pill at white 10%, glyph at 50%),
   then rows on a 33px pitch: 15px icon at 80%, 14px label at white 72%. No active row, no
   status line (fora's sidebar is rows alone; Pat: "looks clean", 2026-09-19). Monochrome. */
.hero-window-side {
  flex: 0 0 220px; display: flex; flex-direction: column;
  padding: 16px;
  color: rgba(255, 255, 255, 0.8);
  user-select: none; -webkit-user-select: none;
}
.hero-side-search { display: flex; align-items: center; justify-content: space-between; height: 18px; }
.hero-side-pill { display: block; width: 61px; height: 16px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); }
.hero-side-search .icon { width: 18px; height: 18px; opacity: 0.5; }
.hero-side-nav { list-style: none; margin: 20px -8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hero-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.875rem; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap;
}
.hero-side-item .icon { width: 15px; height: 15px; opacity: 0.8; flex: 0 0 auto; }
/* The pane: the WebGL silk wave (hero-wave.js) fills it, luminous like fora's: charcoal to taupe
   folds with champagne creases (palette in the canvas's data-palette; it was navy-to-slate until
   Pat's "too much blue", 2026-09-19);
   the card stands at its top so it clears the canopy, and the wave runs on under the trees.
   The gradients are the no-WebGL fallback, painted from the same palette. */
.hero-window-pane {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 32px 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, #6f5a4d 0%, transparent 55%),
    radial-gradient(90% 80% at 85% 70%, #2b2a30 0%, transparent 60%),
    #0e0f18;
}
.hero-wave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-wave[hidden] { display: none; }
.hero-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 640px;
  text-align: center;
  animation: card-in 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) 0.75s both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.no-js .hero-card { animation: none; }
.hero-window-title { font-size: 1.5rem; line-height: 1.2; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); }
.hero-window-lede { margin-top: 6px; font-size: 1rem; line-height: 1.5; color: var(--stone-300); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); }
/* Counters under the tiles (Pat, 2026-09-19: "below the two buttons, fit, clean"): a hairline,
   then three centred figures with dividers, serif numbers in taupe, accent-voice labels. */
.hero-stats {
  display: flex; justify-content: center;
  list-style: none; margin: 24px 0 0; padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.hero-stats li { padding: 0 36px; }
.hero-stats li + li { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.hero-stats strong { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1.5rem; line-height: 1; color: var(--taupe-light); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); }
.hero-stats span { display: block; margin-top: 8px; font-size: 0.6875rem; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-400); white-space: nowrap; }
/* The two answers (Pat, 2026-09-19: "simpler, easy to use and read"): two light pill buttons,
   fora's "Join now" recipe, ink type on warm white, an arrow that slides on hover. They were
   outlined cards with a kicker, a sentence and a "Start here" link each. */
.hero-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.hero-tile {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink); text-decoration: none;
  font-family: var(--font-serif); font-weight: 500; font-size: 1.25rem; line-height: 1;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hero-tile .icon { width: 1.125rem; height: 1.125rem; transition: transform var(--dur) var(--ease); }
.hero-tile:hover { background: var(--white); transform: translateY(-1px); }
.hero-tile:hover .icon { transform: translateX(3px); }
.hero-tile:focus-visible { outline-color: var(--white); outline-offset: 4px; }

/* Laptops and ordinary desktops (1024-1799px): the panel takes a bigger share of the width than
   on a wide monitor, so at natural size the district looked small beside it (Pat, 2026-09-19:
   "make small screens look like the wide monitor, more buildings at the back"). Both
   background planes are cover-scaled by viewport height to the proportions a 2500px screen
   gets naturally: the district's lit edge buildings then rise to about 30% from the top,
   flanking the copy, and the towers stand taller behind the panel. Cover crops the outermost
   ~12% of each image's width, which both planes tolerate (their edges are their tallest, most
   repetitive parts). Wide monitors keep the natural planes. */
@media (min-width: 1024px) and (max-width: 1799px) {
  .hero-layer--far { height: 42vh; max-height: none; object-position: center bottom; }
  .hero-layer--mid { height: 68vh; max-height: none; object-position: center bottom; }
}

/* Short laptops (768-820px tall): fewer crowns at rest and a more compact copy block, so the
   copy plus the canopy-sized window still fit above the fold at 1366x768. */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero { --hero-front-show: 50px; padding-top: var(--header-h); }
  .eyebrow { margin-bottom: 10px; }
  .hero h1 { font-size: 3rem; }
  .hero-brand img { height: 44px; }
  .hero-tagline { margin-top: 8px; font-size: 0.8125rem; }
  .hero-window-wrap { margin-top: 22px; }
}
/* Narrow desktops (1024-1200px): the window is nearly full-bleed, so its lower corners sit in
   the canopy's tall edge bands. Fewer crowns at rest and no "Start here" line (the whole tile
   is the link), so both tiles stay clear. Placed after the short-laptop rule to win at 1024x768. */
@media (min-width: 1024px) and (max-width: 1200px) {
  .hero { --hero-front-show: 40px; }
}

/* The wordmark sat at the top of the copy (in place of a "Commercial Division" eyebrow) for
   a day on 2026-09-18; it lives in the nav bar again (.site-header .brand). */
/* Live accent style ("Houston, Texas"): Manrope 500, 12px, uppercase, 0.15em. */
.eyebrow {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 0.75rem; font-weight: 500; line-height: 1; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--white);
}
/* Headline in the live homepage's display voice: the "MONARCH" treatment, DM Sans 300,
   uppercase, 0.15em tracking (live: 98px with 15px tracking), scaled so the word holds one
   line inside the 880px copy column. The word is the live "MONARCH" itself (2026-09-19; "BUY OR
   SELL" doubled the panel's question and "COMMERCIAL" left out business and land, both Pat). History: it was this on 2026-09-18, then Noto Serif 600
   mixed case while the wordmark sat directly above it (the two read as one typeface); with the
   wordmark back in the nav bar Pat asked for the live hero again (2026-09-19, "so we don't have
   a boring headline"). */
.hero h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 0.5rem + 5.6vw, 6.125rem);
  line-height: 1.05;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
}
/* The wordmark as the display word (2026-09-19, "move the monarch logo here from the nav bar"):
   the live "MONARCH" is 98px tall thin caps, ~585px wide; the artwork at 66px tall runs ~470px
   wide, so the two hold about the same footprint at 1920. */
.hero-brand { display: inline-block; line-height: 0; }
.hero-brand img { height: clamp(34px, 1rem + 3.4vw, 68px); width: auto; filter: brightness(0) invert(1); }
.hero-brand:focus-visible { outline-color: var(--white); outline-offset: 10px; }
/* Sub line in the live "A HIGHER STANDARD" voice: Manrope 400, 18px, 10px tracking (0.55em),
   caps, white, and the live words, "A HIGHER STANDARD". (An italic serif taupe scope line sat
   here 2026-09-18/19; the scope is the panel's lede now.) */
.hero-tagline {
  margin-top: 22px;
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 0.55rem + 0.5vw, 1.125rem); font-weight: 400; line-height: 1.5;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--white);
}
.hero-tagline .sep { margin: 0 0.1em 0 0.6em; opacity: 0.55; }

/* --------------------------------------------------------------------------
   Intake form (last section before the footer). Buyer / Seller tabs reveal
   the matching question set above a shared contact block; everything on the
   chosen path is visible at once, with a single submit.
   -------------------------------------------------------------------------- */
/* The form's head sits left-aligned like every other section head, on the card's own column.
   From 1100px the section is two columns, head on the left and form on the right, so the
   whole thing fits closer to one screen (Pat, 2026-09-20: "make it fit in one page"). */
.connect .section-head-form { max-width: 840px; margin-inline: auto; }
@media (min-width: 1100px) {
  .section.connect { padding-block: clamp(28px, 3.5vw, 56px); }
  /* The head's paragraph sits right beside the card, so the card's own lede would say it twice. */
  .connect .intake-lede { display: none; }
  .connect .intake-intro { margin-bottom: 18px; }
  .connect .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 760px);
    gap: 40px 64px;
    align-items: start;
  }
  .connect .section-head-form { max-width: 440px; margin: 0; position: sticky; top: 32px; }
  .connect .role-prompt { margin-top: 32px; }
  .connect .role-tabs { grid-template-columns: 1fr; margin-bottom: 0; }
  .connect .intake { max-width: none; margin: 0; }
}

.intake {
  position: relative;
  width: 100%; max-width: 840px;
  margin-inline: auto;
  color: var(--ink);
  scroll-margin-top: 16px;
}

/* Buyer / Seller switch: two large choice cards under a plain prompt. Same ring-and-check
   marker as the answer buttons, so "pick one" reads the same everywhere in the form. */
.role-prompt { font-weight: 600; font-size: 1.125rem; margin-bottom: 10px; color: var(--ink); }
.role-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.role-tabs[hidden] { display: none; }
.role-tab {
  display: flex; align-items: center; gap: 16px;
  min-height: 76px; padding: 14px 20px;
  text-align: left;
  background: var(--white);
  color: var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(37, 37, 37, 0.14), 0 14px 32px -16px rgba(4, 5, 31, 0.32);
  font-size: 1rem;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.role-tab:hover { background: var(--stone-50); box-shadow: inset 0 0 0 1px var(--ink), 0 14px 28px -18px rgba(4, 5, 31, 0.36); }
.role-tab:focus-visible { outline-offset: 3px; }
.role-mark {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--stone-500); background: var(--white);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.role-tab:hover .role-mark { border-color: var(--ink); }
.role-text { display: grid; gap: 4px; }
.role-tab strong { font-family: var(--font-serif); font-weight: 500; font-size: 1.375rem; line-height: 1.15; }
.role-tab small { font-size: 1rem; line-height: 1.4; color: var(--stone-700); transition: color 0.2s var(--ease); }
.role-tab[aria-selected="true"] { background: var(--ink); color: var(--white); box-shadow: 0 16px 32px -18px rgba(4, 5, 31, 0.55); }
.role-tab[aria-selected="true"] small { color: rgba(255, 255, 255, 0.82); }
.role-tab[aria-selected="true"] .role-mark {
  border-color: var(--white);
  background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23252525'><path d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/></svg>") center / 14px no-repeat;
}

/* The card: lifted off the tinted section like the testimonial cards, with a hairline ring
   and a layered navy shadow so the form reads as the section's one premium object
   (2026-09-20, "make our contact section more premium"; a taupe top edge was removed the
   same day). */
.intake-card {
  position: relative;
  background: var(--white);
  padding: clamp(24px, 3.5vw, 36px);
  border-radius: 14px;
  /* Deepened 2026-09-20 (Pat: "add more shadow so it will look stunning"): the page went
     white the same day, so the card needs a wider, darker spread to float. Four layers: a
     hairline ring, a contact shadow, a mid halo, and a long ambient drop. */
  box-shadow:
    inset 0 0 0 1px rgba(37, 37, 37, 0.08),
    0 2px 4px rgba(4, 5, 31, 0.06),
    0 16px 32px -12px rgba(4, 5, 31, 0.16),
    0 48px 96px -24px rgba(4, 5, 31, 0.32),
    0 80px 140px -40px rgba(4, 5, 31, 0.22);
}
.intake-body[hidden] { display: none; }
.intake-intro { margin-bottom: 20px; }
.intake-title { font-family: var(--font-serif); font-size: 1.625rem; font-weight: 500; line-height: 1.2; }
.intake-lede { margin-top: 8px; line-height: 1.6; color: var(--stone-700); max-width: 60ch; }

/* Question sets: the selected tab decides which one is in the document flow. */
.branch { animation: step-in var(--dur) var(--ease) both; }
.branch[hidden] { display: none; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.contact { margin-top: 26px; }
.contact-q { font-family: var(--font-serif); font-size: 1.375rem; font-weight: 500; margin-bottom: 12px; }

/* Questions and labels: 16px minimum, high contrast, generous targets (older readers). */
.step-q {
  display: block;
  font-weight: 600; font-size: 1.0625rem; line-height: 1.35;
  margin-bottom: 8px;
}
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field[hidden] { display: none; }

/* Chips (single-select button groups) */
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chips .chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Each track is at least its label's width, so "Commercial Real Estate" never wraps while the others stay near-equal. */
.chips.is-grid { grid-template-columns: repeat(3, minmax(max-content, 1fr)); }
.chips.is-grid .chip:last-child:nth-child(odd) { grid-column: auto; }
/* Chips read as pick-one buttons in the hero window's voice (2026-09-20, "like our laptop in
   the hero": the ink-outlined rectangles looked like default UI): a warm filled surface with
   a hairline ring, an inset top highlight and soft corners; a radio ring on the left fills
   with a check when chosen, and the chosen chip goes ink with a lifted shadow. */
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 14px;
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--stone-300), 0 1px 2px rgba(4, 5, 31, 0.04);
  font-size: 1rem; font-weight: 600;
  text-align: left; line-height: 1.25;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
}
.chip::before {
  content: ""; flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--stone-400);
  background: var(--white);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.chip:hover {
  box-shadow: inset 0 0 0 1px var(--ink), 0 10px 24px -16px rgba(4, 5, 31, 0.3);
  transform: translateY(-1px);
}
.chip:hover::before { border-color: var(--ink); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] {
  background: var(--ink); color: var(--white);
  box-shadow: 0 14px 28px -16px rgba(4, 5, 31, 0.55);
}
.chip[aria-pressed="true"]::before {
  border-color: var(--white);
  background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23252525'><path d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/></svg>") center / 12px no-repeat;
}
.q-hint { font-weight: 500; font-size: 0.9375rem; color: var(--stone-700); margin-left: 6px; }

/* Inputs and selects: clean white boxes with a plain 1px border and a tight corner (Pat,
   2026-09-20: "white not muted color, a box type clean text box"). Hover darkens the border;
   focus swaps it for an ink ring with a soft drop shadow so the active field lifts. */
.label { display: block; font-weight: 600; font-size: 1.0625rem; margin-bottom: 8px; }
.input, .select {
  width: 100%; min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--stone-300);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font-size: 1.0625rem;
  box-shadow: 0 1px 2px rgba(4, 5, 31, 0.04);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.input::placeholder { color: var(--stone-500); opacity: 1; }
.input:hover, .select:hover { border-color: var(--stone-500); }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink), 0 10px 28px -14px rgba(4, 5, 31, 0.35);
}
.select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23252525'><path d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}
.select.is-placeholder { color: var(--stone-500); }
.select option { color: var(--ink); }

/* Custom dropdown (2026-09-20, Pat: "make our dropdown premium, not this default"). main.js
   wraps each select, hides it (it still carries the value for validation and the payload),
   and draws a trigger box plus a floating listbox in the card's own language: white sheet,
   hairline ring, deep shadow, rounded rows, a check on the chosen row. Without JS the native
   select stays as it was. */
.select-wrap { position: relative; }
.select-wrap .select.is-enhanced {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 50px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--stone-300);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font-size: 1.0625rem; line-height: 1.3; text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(4, 5, 31, 0.04);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.select-trigger > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger.is-placeholder { color: var(--stone-500); }
.select-trigger:hover { border-color: var(--stone-500); }
.select-trigger:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 10px 28px -14px rgba(4, 5, 31, 0.35); }
.select-trigger[aria-expanded="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 10px 28px -14px rgba(4, 5, 31, 0.35); }
.select-chevron { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ink); transition: transform 0.25s var(--ease); }
.select-trigger[aria-expanded="true"] .select-chevron { transform: rotate(180deg); }
.field.has-error .select-trigger { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }

.select-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  margin: 0; padding: 8px; list-style: none;
  max-height: min(340px, 50vh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--white);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(37, 37, 37, 0.1),
    0 2px 4px rgba(4, 5, 31, 0.06),
    0 24px 48px -16px rgba(4, 5, 31, 0.28),
    0 48px 96px -32px rgba(4, 5, 31, 0.24);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(0.985);
  transform-origin: top center;
  transition: opacity 0.2s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
.select-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.select-menu.is-up { top: auto; bottom: calc(100% + 8px); transform-origin: bottom center; }
.select-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 1rem; line-height: 1.35;
  cursor: pointer;
  transition: background-color 0.15s var(--ease);
}
.select-option + .select-option { margin-top: 2px; }
.select-option.is-active, .select-option:hover { background: var(--stone-50); }
.select-option[aria-selected="true"] { font-weight: 600; }
.select-option .select-check { flex: 0 0 auto; width: 16px; height: 16px; opacity: 0; color: var(--taupe-deep); transition: opacity 0.15s var(--ease); }
.select-option[aria-selected="true"] .select-check { opacity: 1; }

.field.has-error .input, .field.has-error .select { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.field.has-error .chip:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px var(--error); }
.error-msg {
  display: none;
  margin-top: 8px;
  font-size: 0.9375rem; font-weight: 500; color: var(--error);
  align-items: center; gap: 6px;
}
.error-msg .icon { width: 1.1em; height: 1.1em; }
.field.has-error .error-msg { display: flex; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; margin-bottom: 14px; }
.two-col > .field { margin-bottom: 0; }
.two-col:last-child { margin-bottom: 0; }

.btn-submit {
  margin-top: 22px; min-height: 56px; font-size: 1rem; letter-spacing: 0.12em;
  border-radius: 6px;
  box-shadow: 0 14px 28px -16px rgba(4, 5, 31, 0.5);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -16px rgba(4, 5, 31, 0.6); }

.fine-print { margin-top: 12px; font-size: 0.8125rem; line-height: 1.5; color: var(--stone-700); }
.fine-print a { color: var(--ink); }

.form-alert {
  display: none;
  align-items: flex-start; gap: 10px;
  margin-top: 16px; padding: 12px 14px;
  border-radius: 6px;
  background: #fbeeed; color: var(--error);
  font-size: 0.875rem;
}
.form-alert.is-visible { display: flex; }
.form-alert .icon { margin-top: 0.15em; }

.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Success state */
.success { display: none; text-align: left; }
.success.is-active { display: block; animation: step-in var(--dur) var(--ease) both; }
.success > .icon { width: 2.25rem; height: 2.25rem; color: var(--success); margin-bottom: 14px; }
.success h3 { font-size: 1.5rem; margin-bottom: 10px; }
.success p { color: var(--stone-700); font-size: 0.9375rem; }
.success .summary {
  margin: 18px 0 0; padding: 0;
  list-style: none;
  font-size: 0.875rem; color: var(--ink);
  display: grid; gap: 6px;
}
.success .summary span { color: var(--stone-500); }
.success .mail { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--ink); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(72px, 9vw, 120px); }
/* White since 2026-09-20 (Pat: "use a white bg in all muted gray color bg"); was stone-50.
   The class stays on the process and connect sections so the tint can return in one line. */
.section-tint { background: var(--white); }
/* Navy section: the hero's floor colour, so the scene above blends straight into it. */
/* Unused since 2026-09-19 (the asset-classes section went white); kept for a dark section if one returns. */
.section-dark { background: var(--navy); color: var(--white); }
.section-dark .section-head p, .section-dark .asset-body p { color: var(--stone-300); }
.section-dark h2 em, .section-dark h3 em { color: var(--taupe); }
.section-dark :focus-visible { outline-color: var(--white); }
.section-head { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 {
  font-size: var(--h2-size);
  line-height: 1.2;
  text-wrap: balance;
}
.section-head p { margin-top: 16px; color: var(--stone-700); max-width: 56ch; }

/* Asset classes bento: 3 items, 3 cells */
/* Asset classes (2026-09-20, Pat: "3 all side by side, premium and stunning", then "more
   premium and clean"): three equal portrait tiles. The photo fills each tile; the title and
   line sit at the foot over a navy scrim. Luxury cues are quiet: a hairline frame inset in
   the tile, a short taupe rule between title and copy, a lift and deeper scrim on hover, and
   the middle tile stepped down so the row has rhythm. Was a tall-plus-two bento. */
.assets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}
.asset {
  position: relative; isolation: isolate;
  aspect-ratio: 7 / 10;
  overflow: hidden;
  border-radius: 14px;
  background: var(--stone-100);
  box-shadow:
    inset 0 0 0 1px rgba(37, 37, 37, 0.08),
    0 2px 4px rgba(4, 5, 31, 0.05),
    0 32px 64px -28px rgba(4, 5, 31, 0.35);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.asset:nth-child(2) { margin-top: 36px; }
.asset:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1px rgba(37, 37, 37, 0.1),
    0 4px 8px rgba(4, 5, 31, 0.06),
    0 44px 80px -30px rgba(4, 5, 31, 0.45);
}
.asset figure { position: absolute; inset: 0; margin: 0; }
.asset figure img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: scale(1.001);
  transition: transform 1.2s var(--ease);
}
.asset:hover figure img { transform: scale(1.06); }
/* Scrim: clear over the top half, navy deepening to ink at the foot so white copy holds contrast. */
.asset::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 5, 31, 0.12) 0%, rgba(4, 5, 31, 0) 28%),
    linear-gradient(180deg, rgba(4, 5, 31, 0) 40%, rgba(4, 5, 31, 0.6) 68%, rgba(21, 22, 30, 0.92) 100%);
  transition: opacity 0.6s var(--ease);
}
/* Hairline frame inset in the tile: the one detail that reads as a printed plate, not a card. */
.asset::before {
  content: ""; position: absolute; inset: 14px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  transition: border-color 0.6s var(--ease);
}
.asset:hover::before { border-color: rgba(255, 255, 255, 0.4); }
.asset-body {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  display: grid; gap: 12px;
  padding: clamp(28px, 2.6vw, 36px);
  color: var(--white);
}
/* Title carries the tile on its own (icons dropped 2026-09-20, Pat: "bigger and outstanding"). */
.asset-body h3 { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.375rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); }
.asset-body h3::after {
  content: ""; display: block;
  width: 32px; height: 1px; margin-top: 14px;
  background: var(--taupe-light);
  transform-origin: left; transition: transform 0.6s var(--ease);
}
.asset:hover .asset-body h3::after { transform: scaleX(1.75); }
.asset-body p { font-size: 0.9375rem; line-height: 1.55; color: rgba(255, 255, 255, 0.82); max-width: 32ch; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); }

/* How it works (premium pass 2026-09-20): the two paths are white cards in the page's surface
   language (14px corners, hairline ring, navy-tinted shadow); steps are numbered in the brand
   serif and separated by hairlines. The icon rings and the drawn vertical line are gone. */
.paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}
.path {
  padding: clamp(28px, 3.2vw, 44px);
  border-radius: 14px;
  background: var(--white);
  box-shadow:
    inset 0 0 0 1px rgba(37, 37, 37, 0.08),
    0 2px 4px rgba(4, 5, 31, 0.05),
    0 32px 64px -28px rgba(4, 5, 31, 0.3);
}
.path h3 { font-size: 1.625rem; line-height: 1.2; margin-bottom: 8px; }
.path ol { list-style: none; margin: 0; padding: 0; }
.path li {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: 12px; align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--stone-200);
}
.path li:last-child { padding-bottom: 4px; }
.step-num {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem; line-height: 1;
  letter-spacing: -0.02em; color: var(--taupe-deep);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.path li strong { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1.25rem; line-height: 1.3; margin-bottom: 6px; }
.path li p { color: var(--stone-700); font-size: 1rem; line-height: 1.55; max-width: 44ch; }
/* One button for the section (Pat, 2026-09-20: "add cta button"), centred under the cards. */
.paths-cta { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
.paths-cta .btn { border-radius: 6px; box-shadow: 0 14px 28px -16px rgba(4, 5, 31, 0.5); }

/* Why Monarch: photo + statement + stats */
/* About (premium pass 2026-09-20; 2026-09-24 team photo leads): each block is a 7 / 5 split,
   so the landscape team photo in block one takes the wider column and the portrait founders
   photo in block two the narrower one, and the stats in a full-width band between them. Photos
   carry the form card's rounded corners, hairline ring and navy-tinted shadow. */
.why {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.why-photo {
  margin: 0; overflow: hidden;
  border-radius: 14px;
  background: var(--stone-100);
  box-shadow:
    inset 0 0 0 1px rgba(37, 37, 37, 0.08),
    0 2px 4px rgba(4, 5, 31, 0.05),
    0 32px 64px -28px rgba(4, 5, 31, 0.35);
}
/* No forced crop (Pat, 2026-09-20: "the people in the image can't see"): each photo shows
   at its own aspect ratio, so nobody at the edges of the group shot is cut off. These two
   also skip the scroll drift (parallax-img), whose 16% zoom was clipping heads. */
.why-photo img { display: block; width: 100%; height: auto; }
/* Feature photo (2026-09-24): the lead team shot gets an offset taupe hairline frame behind it,
   a soft shade along the bottom, a slow zoom on hover, and a caption plate on the lower edge. */
.feature-photo {
  position: relative;
  margin: 0 clamp(14px, 1.8vw, 24px) clamp(60px, 5.6vw, 76px) 0;
}
.feature-photo::before {
  content: ""; position: absolute; z-index: 0;
  inset: clamp(14px, 1.8vw, 24px) calc(-1 * clamp(14px, 1.8vw, 24px)) calc(-1 * clamp(14px, 1.8vw, 24px)) clamp(14px, 1.8vw, 24px);
  border: 1px solid var(--taupe); border-radius: 16px;
  opacity: 0.55;
  pointer-events: none;
}
.feature-photo .why-photo { position: relative; z-index: 1; }
.feature-photo .why-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(4, 5, 31, 0.28), rgba(4, 5, 31, 0) 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  border-radius: inherit;
}
.feature-photo img { transition: transform 1.2s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .feature-photo:hover img { transform: scale(1.025); }
}
.feature-plate {
  position: absolute; z-index: 2;
  /* Only the top 14px of the plate overlaps the photo, so it never covers anyone's feet. */
  left: clamp(16px, 2.4vw, 32px); bottom: 0; transform: translateY(calc(100% - 14px));
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(14px, 1.4vw, 18px) clamp(18px, 2vw, 26px);
  border-radius: 12px;
  background: var(--white);
  box-shadow:
    inset 0 0 0 1px rgba(37, 37, 37, 0.07),
    0 24px 48px -24px rgba(4, 5, 31, 0.4);
}
.feature-plate-kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--stone-700);
}
.feature-plate-kicker::before { content: ""; width: 22px; height: 1px; background: var(--taupe); }
.feature-plate-title { font-family: var(--font-serif); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.25; color: var(--ink); }
.feature-plate-title em { font-style: italic; color: var(--taupe-deep); }

/* Legacy album (2026-09-24): heading left, copy right, then both photos on one matted page.
   Each shot's flex-grow is its aspect ratio, so the two images share one height uncropped. */
.legacy-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
.legacy-head .lede:first-child { margin-top: 10px; }
.legacy-copy .lede { max-width: 60ch; }
.album {
  display: flex; gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(36px, 5vw, 64px);
  padding: clamp(10px, 1.4vw, 18px);
  border-radius: 18px;
  background: var(--white);
  box-shadow:
    inset 0 0 0 1px rgba(37, 37, 37, 0.07),
    0 2px 4px rgba(4, 5, 31, 0.04),
    0 40px 80px -36px rgba(4, 5, 31, 0.32);
}
.album-shot { flex: calc(var(--ar)) 1 0; min-width: 0; margin: 0; }
.album-shot img {
  display: block; width: 100%; height: auto; aspect-ratio: var(--ar);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(37, 37, 37, 0.08);
  background: var(--stone-100);
}
.album-shot figcaption {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 14px; padding: 0 4px 2px;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--stone-700);
}
.album-shot figcaption span {
  font-family: var(--font-serif); font-style: italic; font-size: 1rem;
  letter-spacing: 0; text-transform: none; color: var(--taupe-deep);
}
.album-shot figcaption::after {
  content: ""; flex: 1; align-self: center; height: 1px; background: var(--stone-200);
}
/* Live section eyebrow ("WHO WE ARE"): Manrope, 20px, uppercase, 16px on tablet. */
.eyebrow-dark { color: var(--ink); margin-bottom: 14px; font-size: 1.25rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.04em; }
.why h2, .legacy h2 { font-size: var(--h2-size); line-height: 1.2; padding-bottom: 0.08em; text-wrap: balance; }
.why .lede, .legacy .lede { margin-top: 20px; color: var(--stone-700); max-width: 52ch; }
.why .lede + .lede, .legacy .lede + .lede { margin-top: 14px; }
.why .lede strong, .legacy .lede strong { color: var(--ink); font-weight: 600; }
/* Stats band: three figures across the full container, hairlines above and below, thin
   dividers between; the numbers are the section's second read. */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: clamp(56px, 7vw, 96px) 0;
  padding: clamp(28px, 3vw, 40px) 0;
  border-top: 1px solid var(--stone-200);
  border-bottom: 1px solid var(--stone-200);
  list-style: none; padding-left: 0;
}
.stat { padding: 4px 0 4px 28px; border-left: 1px solid var(--stone-200); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat strong { display: block; font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--taupe-deep); }
.stat span { display: block; margin-top: 10px; font-size: 1rem; color: var(--slate); line-height: 1.5; }

/* Testimonials: the live askmonarch.com "Client Trust Stories" slider (autoplay + dots only,
   six cards, avatar / small-caps name / gold stars), restyled 2026-09-19 at Pat's request
   ("more premium and clean, I don't want the muted colour"): white cards on the white page,
   held by a hairline and a soft shadow instead of the live grey gradient fill; the stars lead,
   the quote is set in the brand serif in ink, a hairline separates the person; the role is
   slate, the kit's stat-label colour, not grey. */
.section-head-wide { max-width: none; }
.section-head-wide h2 { text-wrap: nowrap; }
.section-head-wide p { max-width: 64ch; }

.carousel { position: relative; }
.carousel-track {
  position: relative;
  list-style: none; margin: 0; padding: 12px 0 28px;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 30px) / 3);
  gap: 30px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
/* While the glide runs, snapping and smooth scrolling would fight the frame-by-frame motion. */
.carousel-track.is-auto { scroll-snap-type: none; scroll-behavior: auto; }
.carousel-track:focus-visible { outline-offset: 6px; }
.quote-card {
  scroll-snap-align: start;
  display: flex;
  padding: 36px 34px 32px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(37, 37, 37, 0.08), 0 28px 56px -36px rgba(4, 5, 31, 0.28);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.quote-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(37, 37, 37, 0.12), 0 32px 64px -34px rgba(4, 5, 31, 0.38); }
.quote-card figure { margin: 0; display: flex; flex-direction: column; gap: 0; width: 100%; }
.stars { display: inline-flex; gap: 3px; color: #d4a017; }
.stars .icon { width: 0.875rem; height: 0.875rem; }
.quote-card blockquote {
  margin: 18px 0 0; flex: 1;
  font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.6;
  color: var(--ink); text-wrap: pretty;
}
.quote-card figcaption {
  display: flex; align-items: center; gap: 16px;
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid rgba(37, 37, 37, 0.08);
}
.avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; object-position: 50% 30%;
  background: var(--stone-100);
  box-shadow: 0 0 0 1px rgba(37, 37, 37, 0.06);
}
.who { display: grid; gap: 4px; }
.quote-card figcaption strong { display: block; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.quote-card figcaption small { display: block; font-size: 0.9375rem; line-height: 1.3; color: var(--slate); }

/* Dots: small grey circles, active one an outlined pill. Each has a 44px tap area. */
.carousel-dots { display: flex; justify-content: center; gap: 2px; margin-top: 30px; }

/* Client logos: mirrors the live "Trusted by 900+" running strip. Noto Serif 25px heading
   (20 tablet, 14 phone), 215px logos with a 50px gap (180/30 tablet, 100 phone), one pass
   of the row every 33s, paused on hover, static under reduced motion. */
/* Continue the apron's curve; finish on pure white 24px before the heading.
   HAR, Escatta and The Foundry contain opaque white image backgrounds. */
.clients {
  --seam-origin: calc(0px - var(--hero-apron));
  padding: calc(var(--clients-fade) + 24px) 0 56px;
  background: var(--seam-gradient);
  color: var(--ink);
  text-align: center;
}
/* The strip's sides fade out so logos dissolve at the viewport edges instead of clipping. An
   eased curve over the outer 22% each side (Pat, 2026-09-19: "side by side is fading, a smooth
   fade, not too much"); a straight 0-12% ramp read as a hard mask edge before. */
.clients .marquee {
  --side-fade: 22%;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    rgb(0 0 0 / 0.10) calc(var(--side-fade) * 0.25),
    rgb(0 0 0 / 0.50) calc(var(--side-fade) * 0.5),
    rgb(0 0 0 / 0.90) calc(var(--side-fade) * 0.75),
    #000 var(--side-fade),
    #000 calc(100% - var(--side-fade)),
    rgb(0 0 0 / 0.90) calc(100% - var(--side-fade) * 0.75),
    rgb(0 0 0 / 0.50) calc(100% - var(--side-fade) * 0.5),
    rgb(0 0 0 / 0.10) calc(100% - var(--side-fade) * 0.25),
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0,
    rgb(0 0 0 / 0.10) calc(var(--side-fade) * 0.25),
    rgb(0 0 0 / 0.50) calc(var(--side-fade) * 0.5),
    rgb(0 0 0 / 0.90) calc(var(--side-fade) * 0.75),
    #000 var(--side-fade),
    #000 calc(100% - var(--side-fade)),
    rgb(0 0 0 / 0.90) calc(100% - var(--side-fade) * 0.75),
    rgb(0 0 0 / 0.50) calc(100% - var(--side-fade) * 0.5),
    rgb(0 0 0 / 0.10) calc(100% - var(--side-fade) * 0.25),
    transparent 100%);
}
/* Phones are narrow: a shorter fade so the middle logos stay fully visible. */
@media (max-width: 767px) { .clients .marquee { --side-fade: 14%; } }
/* A section title like the others (Pat, 2026-09-19: "make this more big and black solid font",
   then "make it look like a title"): the live kit's h2 recipe, Noto Serif 500 at --h2-size (48 /
   35 / 25px) in ink with the italic taupe highlight word. It was a 12px taupe eyebrow for an evening. */
.clients-title { font-size: var(--h2-size); font-weight: 500; line-height: 1.2; letter-spacing: normal; color: var(--ink); margin: 0 var(--gutter) 40px; text-wrap: balance; }
.clients-title em { font-style: italic; color: var(--taupe); }
.clients .marquee-track img { max-height: 54px; }
.marquee { overflow: hidden; width: 100%; }
.marquee-inner { display: flex; width: max-content; --logo-w: 180px; --logo-gap: 56px; }   /* 215 / 50 until Pat asked to "reduce a little bit the size of logos" (2026-09-19) */
.marquee-track {
  display: flex; align-items: center; flex: 0 0 auto;
  list-style: none; margin: 0; padding: 0;
  animation: marquee 33.3s linear infinite;
}
.marquee-track li { width: var(--logo-w); margin-right: var(--logo-gap); display: flex; align-items: center; justify-content: center; }
.marquee-track img { width: 100%; height: auto; max-height: 120px; object-fit: contain; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee-track[aria-hidden="true"] { display: none; }
  .marquee-inner { width: auto; justify-content: center; flex-wrap: wrap; }
  .marquee-track { flex-wrap: wrap; justify-content: center; row-gap: 24px; }
}
.carousel-dots button { position: relative; width: 44px; height: 44px; padding: 0; background: none; border-radius: 22px; }
.carousel-dots button::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 6px; border-radius: 3px;
  background: rgba(37, 37, 37, 0.18); border: 1px solid transparent;
  transition: width 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.carousel-dots button:hover::before { background: var(--stone-500); }
.carousel-dots button[aria-current="true"]::before { width: 26px; background: var(--white); border-color: var(--ink); }

/* Closing banner: centered copy over a dark photograph, as on askmonarch.com ("Your Next Chapter"). */
/* Live banner: a 435px band (390 tablet, 368 phone) with the copy centered. */
.closing {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--white); text-align: center;
  min-height: 435px; padding-block: 20px;
  display: flex; flex-direction: column; justify-content: center;
}
.closing > .container { width: 100%; }
/* Like the live banner: the photo is pinned to the viewport (background-attachment: fixed), so the
   band acts as a window onto it while the page scrolls. Phones and tablets fall back to a normal
   cover background because fixed attachment is unreliable there. */
.closing-media {
  position: absolute; inset: 0; z-index: -2;
  background: var(--ink) url("../img/closing-live.png") center top / cover no-repeat;
  background-attachment: fixed;
}
@media (max-width: 1023px), (hover: none) {
  .closing-media { background-attachment: scroll; }
}
/* Live banner overlay, exactly: 8% ink at the top to solid ink by 90%. The photo itself is not
   scaled or drifted, so it stays as sharp as the live one. */
.closing-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28, 28, 28, 0.08) 0%, var(--ink) 90%); }
.closing-inner { display: grid; justify-items: center; max-width: 960px; }
/* Live banner type: Manrope 20px eyebrow, Noto Serif 500 70px heading (35 tablet, 25 phone), 18px stone copy. */
.closing-eyebrow { font-size: 1.25rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 15px; }
.closing h2 { font-size: 4.375rem; line-height: 1.2; color: var(--white); }
.closing p { margin-top: 20px; font-size: 1.125rem; line-height: 1.6; color: var(--stone-200); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }

/* Footer: three rows matching the live site. */
/* Footer rows sized like the live footer template: 249px, 186px and 72px at desktop widths. */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.86); font-size: 0.9375rem; }
/* Cleaned 2026-09-20 (Pat: "more correct and clean"): the statement in sentence case, emails
   and addresses in normal case under small uppercase labels, Instagram handles beside the
   icons, and the Services column set over the third contact column on a shared 3-col grid.
   The Quick Links column left the same day (it pointed at the live site). */
.footer-top {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
  padding-block: 56px 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-brand { grid-column: 1 / 3; }
.footer-brand img { height: 34px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.footer-statement { margin-top: 22px; max-width: 38ch; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
.site-footer h4 { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-bottom: 16px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a, .footer-division a {
  font-size: 0.9375rem; font-weight: 500; line-height: 1.5;
  color: rgba(255, 255, 255, 0.88); text-decoration: none;
  transition: color 0.2s var(--ease);
}
.footer-links a:hover, .footer-division a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.footer-divisions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
  padding-block: 36px 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-division { display: grid; gap: 8px; justify-items: start; align-content: start; }
.footer-division h5 { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.6); margin: 0 0 6px; }
.footer-social { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-top: 4px; color: rgba(255, 255, 255, 0.88); }
.footer-social .icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  padding-block: 27px;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--white); text-decoration: underline; }

/* Legal pages (privacy-policy.html, terms-and-conditions.html) */
.legal-page .site-header { position: relative; inset: auto; }
.legal { padding-block: clamp(48px, 6vw, 80px) clamp(72px, 9vw, 120px); }
.legal-body { max-width: 76ch; }
.legal h1 { font-size: clamp(2.1rem, 1.4rem + 2vw, 3rem); line-height: 1.1; margin-bottom: 10px; }
.legal-meta { font-size: 0.9375rem; color: var(--stone-500); margin-bottom: 28px; }
.legal h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.legal h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; margin: 18px 0 8px; }
.legal p, .legal li { font-size: 1.0625rem; line-height: 1.65; color: var(--stone-700); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 8px 0 0; padding-left: 1.25rem; display: grid; gap: 6px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); }
.legal-contact { margin-top: 12px; color: var(--ink); }


/* --------------------------------------------------------------------------
   Motion
   1. Scroll reveal: IntersectionObserver adds .is-in (works everywhere).
   2. Hero entrance on load.
   3. Scroll-driven parallax and line drawing: CSS scroll timelines, gated
      behind @supports so unsupported browsers simply get the static page.
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.no-js .reveal { opacity: 1; transform: none; }
/* Logo strip reveal (2026-09-20, Pat: "add a reveal effect when scrolling down"): the strip
   itself only fades in; each logo lifts into place on a 60ms stagger, left to right, the
   same on the static wrapped rows phones get. The clone row follows the same delays. */
.clients .marquee.reveal { transform: none; }
.clients .marquee.reveal .marquee-track li {
  opacity: 0; transform: translateY(16px) scale(0.96);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.clients .marquee.reveal.is-in .marquee-track li { opacity: 1; transform: none; }
.clients .marquee.reveal .marquee-track li:nth-child(1) { transition-delay: 0.10s; }
.clients .marquee.reveal .marquee-track li:nth-child(2) { transition-delay: 0.16s; }
.clients .marquee.reveal .marquee-track li:nth-child(3) { transition-delay: 0.22s; }
.clients .marquee.reveal .marquee-track li:nth-child(4) { transition-delay: 0.28s; }
.clients .marquee.reveal .marquee-track li:nth-child(5) { transition-delay: 0.34s; }
.clients .marquee.reveal .marquee-track li:nth-child(6) { transition-delay: 0.40s; }
.clients .marquee.reveal .marquee-track li:nth-child(7) { transition-delay: 0.46s; }
.clients .marquee.reveal .marquee-track li:nth-child(8) { transition-delay: 0.52s; }
.clients .marquee.reveal .marquee-track li:nth-child(9) { transition-delay: 0.58s; }
.clients .marquee.reveal .marquee-track li:nth-child(10) { transition-delay: 0.64s; }
.clients .marquee.reveal .marquee-track li:nth-child(11) { transition-delay: 0.70s; }
.no-js .clients .marquee.reveal .marquee-track li { opacity: 1; transform: none; }

/* Hero entrance: eyebrow, headline, lede and buttons rise in sequence. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.hero-copy > * { animation: rise-in 0.9s var(--ease) both; }
.hero-copy > :nth-child(1) { animation-delay: 0.05s; }
.hero-copy > :nth-child(2) { animation-delay: 0.15s; }
.hero-copy > :nth-child(3) { animation-delay: 0.28s; }
.hero-copy > :nth-child(4) { animation-delay: 0.4s; }
.hero-copy > :nth-child(5) { animation-delay: 0.52s; }
.no-js .hero-copy > * { animation: none; }
/* The window drops in from above once the copy has risen, settling behind the canopy so its
   foot is covered as it lands (Pat, 2026-09-18: "from up, then going to hide, smoothly"). On
   the inner panel, not the wrapper: the wrapper carries the scroll-driven parallax. */
@keyframes window-in {
  from { opacity: 0; transform: translateY(-88px); }
  to   { opacity: 1; transform: none; }
}
.hero-window { animation: window-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }
.no-js .hero-window { animation: none; }

/* Scroll-driven parallax (Chromium, Safari 26+). Browsers without animation-timeline get the
   identical mapping from a rAF-batched listener in main.js. Each plane resolves --k and
   --hero-shift against itself. */
@keyframes hero-plane {
  from { transform: translate3d(0, var(--hero-shift, 0px), 0); }
  to   { transform: translate3d(0, calc(var(--hero-shift, 0px) + var(--hero-range, 1800px) * var(--k, 0)), 0); }
}
/* The front canopy rises from its resting shift to its natural bottom-anchored position and
   HOLDS there: the cutout's bottom edge must never lift off the hero's. Its range ends where
   the rise completes (shift / 0.35), so its speed matches --k until then. */
@keyframes hero-front-rise {
  from { transform: translate3d(0, var(--hero-shift, 0px), 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes hero-copy-out {
  to { opacity: 0; transform: translateY(-48px); }
}
@keyframes img-drift {
  from { transform: translateY(-7%) scale(1.16); }
  to   { transform: translateY(7%) scale(1.16); }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-parallax {
      animation: hero-plane linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 var(--hero-range, 1800px);
      will-change: transform;
    }
    .hero-layer--front {
      animation-name: hero-front-rise;
      animation-range: 0 calc(var(--hero-shift, 0px) / 0.35);
    }
    .hero-copy {
      animation: hero-copy-out linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 70vh;
    }
    .parallax-img {
      animation: img-drift linear both;
      animation-timeline: view(block);
      animation-range: entry 0% exit 100%;
    }
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Fill the first screen plus fora's 64px overshoot, so the first screen ends in foliage and
     the canopy's baked-dark bottom rows land below the fold. */
  .hero, .clients { --hero-apron: 64px; --clients-fade: 0px; }
  .hero { min-height: calc(100svh + 64px); padding-top: calc(var(--header-h) + 8px); padding-bottom: var(--hero-apron); }
  .hero-copy { max-width: 640px; }
  /* Window at phone size: 16px in from the edges, tiles stacked, compact stats; the canopy
     climbs ~150px up its foot (portfolio: ~160 of a 459px window). */
  /* On phones the panel runs to the fold like the desktop one and the canopy climbs its foot;
     the counters are pinned to that foot, down in the covered zone, so they sit "in the layer"
     behind the crowns and only peek through the gaps (Pat, 2026-09-19: "hide in the layer").
     A card that ended above the canopy was tried in between. */
  .hero-window-wrap { margin-top: 28px; padding: 0 16px; }
  /* The frame shrinks to a 5px gasket and 20px radii; the sidebar becomes a 42px icon rail
     (portfolio phone recipe): search glyph, four icons, the status dot. The pane's card runs
     the full height so the stats can pin to its foot. */
  /* 540px, was 640 (Pat, 2026-09-20: "reduce the size of the laptop, it's too long"). */
  .hero-window { min-height: 540px; padding: 5px; gap: 5px; border-radius: 20px 20px 0 0; }
  .hero-window > * { border-radius: 15px; }
  .hero-window-side { flex-basis: 42px; padding: 12px 0; align-items: center; }
  .hero-side-pill, .hero-side-item span { display: none; }
  .hero-side-search { justify-content: center; }
  .hero-side-nav { margin: 18px 0 0; gap: 2px; align-items: center; }
  .hero-side-item { width: 34px; padding: 8px 0; justify-content: center; gap: 0; }
  .hero-side-item .icon { width: 16px; height: 16px; }
  .hero-window-pane { padding: 18px 16px 18px; }
  .hero-card { display: flex; flex-direction: column; flex: 1 1 auto; }
  .hero-stats { margin-top: auto; padding-top: 16px; }
  .hero-stats li { padding: 0 12px; }
  .hero-stats strong { font-size: 1.125rem; }
  .hero-stats span { margin-top: 6px; font-size: 0.5625rem; letter-spacing: 0.1em; white-space: normal; }
  .hero-window-title { font-size: 1.375rem; }
  .hero-window-lede { margin-top: 6px; font-size: 0.9375rem; }
  .hero-tiles { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .hero-tile { min-height: 50px; font-size: 1.125rem; }

  /* The background planes are cover-scaled from the bottom edge so no sky shows under a
     cutout's hard bottom; the trade is a crop. On a phone the panel is full-width, so the only
     place the scene can show is the band above it: both planes are tall enough to stand behind
     the copy (Pat, 2026-09-19: "fix the layers in mobile view"). Far keeps its centre (the
     tallest towers, cresting just above the panel); mid is anchored toward its left third so a
     lit office building rises behind the headline instead of the empty central dip. */
  .hero-layer { height: auto; max-height: none; object-fit: cover; object-position: center bottom; }
  /* Wider spread of factors than the desktop's, so the depth reads on a small screen
     (Pat, 2026-09-20: "make the layers more obvious when scrolling"). */
  .hero-layer--far  { --k: 0.48; height: 62%; }
  /* Anchored to the district's right edge: its lit hotel and the office blocks beside it fill
     the phone's width behind the copy. The image's middle is a low dip, which at phone width
     showed as empty sky (Pat, 2026-09-19: "add buildings at the back"). */
  .hero-layer--mid  { --k: 0.26; height: 74%; object-position: 100% bottom; }
  .hero-layer--near { --k: 0.22; height: 40%; }
  /* The phone canopy (layer-front-phone.webp via <picture>) rises like the desktop one
     (2026-09-20, Pat: "the trees going up"; it moved with the page before): it rests 100px
     low and climbs to its natural bottom-anchored pose over the first ~290px of scroll,
     faster than the page (k -0.35), so the panel sinks behind the crowns. Tall enough that
     ~165px of crown still stands above the panel's foot at rest, ~265px once risen, which
     still clears the tiles as they leave the screen. */
  .hero-layer--front {
    --k: -0.35;
    --hero-shift: 100px;
    height: clamp(310px, 39svh, 370px);
    transform: translate3d(0, var(--hero-shift), 0);
    animation-name: hero-front-rise;
    animation-range: 0 calc(var(--hero-shift, 0px) / 0.35);
  }
  :root { --h2-size: 2.1875rem; }
  .eyebrow-dark, .closing-eyebrow { font-size: 1rem; }
  .closing { min-height: 390px; }
  .clients { padding-block: calc(var(--clients-fade) + 24px) 20px; }
  .clients-title { margin-bottom: 28px; }
  .marquee-inner { --logo-w: 150px; --logo-gap: 34px; }
  .closing h2 { font-size: 2.1875rem; }
  .header-cta { display: none; }
  .assets { gap: 14px; }
  .asset { aspect-ratio: 4 / 5; }
  .asset:nth-child(2) { margin-top: 24px; }
  .asset::before { inset: 10px; }
  .asset-body { padding: 20px; gap: 10px; }
  .asset-body h3 { font-size: 1.625rem; }
  .asset-body h3::after { margin-top: 10px; }
  .asset-body p { font-size: 0.875rem; }
  .why { grid-template-columns: 1fr; gap: 28px; }
  .why > .why-photo:first-child, .why > .feature-photo { order: 1; }  /* copy first on a single column, photo below it */
  .legacy-head { grid-template-columns: 1fr; gap: 0; }
  .legacy-head .lede:first-child { margin-top: 20px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / 2; }
  .carousel-track { grid-auto-columns: calc((100% - 30px) / 2); }
  .section-head-wide h2 { text-wrap: balance; }
}

@media (max-width: 767px) {
  .album { flex-direction: column; }
  .album-shot { flex: none; }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; --header-h: 76px; }
  .brand img { height: 26px; }
  :root { --h2-size: 1.5625rem; }
  .eyebrow { margin-bottom: 14px; font-size: 0.6875rem; }
  .hero h1 { font-size: 2.25rem; letter-spacing: 0.12em; }
  .hero-brand img { height: 32px; }
  /* The pill holds "Menu" and the button; the links drop down under it when opened. */
  .site-nav { gap: 4px; padding: 5px 5px 5px 4px; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 0 14px 0 18px;
    border: 0; border-radius: 999px; background: transparent;
    color: rgba(255, 255, 255, 0.85); cursor: pointer;
    font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500; line-height: 1; letter-spacing: 0.15em; text-transform: uppercase;
  }
  .nav-toggle svg { width: 12px; height: 12px; transition: transform var(--dur) var(--ease); }
  .nav-toggle:focus-visible { outline-color: var(--white); outline-offset: 2px; }
  .site-nav.is-open .nav-toggle svg { transform: rotate(180deg); }
  .site-nav ul {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 8px;
    border-radius: 20px;
    background: rgba(10, 11, 28, 0.92);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  }
  .site-nav.is-open ul { display: flex; }
  .site-nav ul a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 0.6875rem; }
  .site-nav ul a::after { display: none; }
  .site-nav ul a:hover, .site-nav ul a:focus-visible { background: rgba(255, 255, 255, 0.06); border-radius: 12px; }
  .nav-cta { min-height: 40px; padding: 0 16px; font-size: 0.6875rem; }
  .hero-tagline { margin-top: 14px; font-size: 0.6875rem; letter-spacing: 0.3em; }
  .hero-tagline .sep { margin: 0 0.05em 0 0.35em; }
  .intake-card { padding: 26px 18px 24px; border-radius: 12px; }
  .role-tabs { grid-template-columns: 1fr; gap: 10px; }
  .role-tab { min-height: 72px; padding: 14px 16px; }
  .chips.is-grid { grid-template-columns: 1fr 1fr; }
  .chips.is-grid .chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .two-col { grid-template-columns: 1fr; }
  .assets { grid-template-columns: 1fr; gap: 16px; }
  .asset { aspect-ratio: 4 / 3; }
  .asset:nth-child(2) { margin-top: 0; }
  .asset::before { inset: 12px; }
  .asset-body { padding: 24px; }
  .asset-body h3 { font-size: 1.875rem; }
  .asset-body p { font-size: 1rem; }
  .paths { grid-template-columns: 1fr; gap: 20px; }
  .path { padding: 24px 20px; }
  .path li { grid-template-columns: 2.75rem 1fr; padding: 18px 0; }
  .step-num { font-size: 1.5rem; }
  /* Stacked and centred on phones (Pat, 2026-09-20: left-aligned rows "not look good"). */
  .stats { grid-template-columns: 1fr; gap: 0; padding: 8px 0; text-align: center; }
  .stat { padding: 20px 0; border-left: 0; }
  .stat + .stat { border-top: 1px solid var(--stone-200); }
  .stat span { margin-inline: auto; }
  .carousel-track { grid-auto-columns: 88%; gap: 14px; }
  .quote-card { padding: 26px 22px 24px; }
  .quote-card blockquote { margin-top: 14px; font-size: 1.0625rem; }
  .quote-card figcaption { margin-top: 20px; padding-top: 18px; }
  .avatar { width: 48px; height: 48px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-brand { grid-column: auto; }
  .footer-divisions { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; }
  .closing-eyebrow { font-size: 0.875rem; }
  .closing { min-height: 368px; }
  .marquee-inner { --logo-w: 88px; --logo-gap: 28px; }
  .closing h2 { font-size: 1.5625rem; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@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;
  }
  .reveal { opacity: 1; transform: none; }
  .clients .marquee.reveal .marquee-track li { opacity: 1; transform: none; transition: none; }
  .hero-copy > *, .intake, .hero-parallax, .hero-copy, .hero-window, .hero-card, .parallax-img { animation: none !important; }
  .hero-parallax { will-change: auto; } /* planes freeze in their resting pose */
  .carousel-track { scroll-behavior: auto; }
}