/* ==========================================================================
   Drive Digital Traffic — design tokens
   Source: HOMEPAGE_DESIGN_HANDOFF.md §3, §5; approved design direction.
   Five brand colours exactly. Two derived neutral inks.
   ========================================================================== */

:root {
  /* --- Brand palette (exact) ------------------------------------------- */
  --c-frost: #e6ecec;
  --c-silver: #b2c4c4;
  --c-signal: #16b9b7;
  --c-teal: #11636a;
  --c-depth: #102e33;

  /* --- Derived inks (neutrals from the palette only) -------------------- */
  --c-ink: #1c4046; /* body copy on pale — 9.39:1 on Frost */
  --c-ink-muted: #3a5c61; /* secondary copy / indices — 6.09:1 on Frost */

  /* --- Rules, glass, dark-surface text --------------------------------- */
  --c-hairline: rgba(17, 99, 106, 0.16);
  --c-hairline-strong: rgba(17, 99, 106, 0.28);
  --c-hairline-dark: rgba(230, 236, 236, 0.22);
  --c-glass: rgba(239, 247, 247, 0.52);
  /* Measured from rendered pixels: the specified 0.48 composites to #7B8E91
     (4.21:1) over a pure Depth band, below AA for 16px labels. 0.52 renders
     #839799 (4.69:1) and still reads as glass. Recorded deviation. */
  --c-glass-edge: rgba(255, 255, 255, 0.66);
  --c-glass-fallback: #f2f7f6;
  --c-text-on-dark: rgba(230, 236, 236, 0.82); /* 8.9:1 on Depth */
  --c-text-on-dark-soft: rgba(230, 236, 236, 0.64); /* 5.6:1 on Depth */

  /* --- Focus (two-tone: works on Frost and on Depth) -------------------- */
  --c-focus-a: #e6ecec;
  --c-focus-b: #11636a;

  /* --- Type families: system only, zero network requests ---------------- */
  --font-display: Georgia, 'Times New Roman', 'Liberation Serif', serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;

  /* --- Page shell ------------------------------------------------------- */
  --page-max: 1360px;
  --gutter: clamp(20px, 5.6vw, 96px);
  --grid-gap: 24px;
  --section-pad: clamp(88px, 9vw, 136px);

  /* --- Radii ------------------------------------------------------------ */
  --r-xs: 6px;
  --r-control: 8px;
  --r-media: 10px;
  --r-panel: 14px;
  --r-nav: 18px;
  --r-pill: 999px;

  /* --- Borders, edges, shadows, blur ------------------------------------ */
  --b-hairline: 1px solid var(--c-hairline);
  --b-plate: 1px solid var(--c-hairline-strong);
  --b-dark: 1px solid var(--c-hairline-dark);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.62);
  --edge-dark: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --shadow-nav: 0 18px 48px -18px rgba(16, 46, 51, 0.28),
    0 2px 6px rgba(16, 46, 51, 0.06);
  --shadow-panel: 0 24px 48px -36px rgba(16, 46, 51, 0.35);
  --blur-nav: blur(16px) saturate(1.12);

  /* --- Dimensional control material (owner feedback, this pass) ---------
     ONE primary material for every CTA sitewide, inherited from :root.
     A clearly visible soft white radiance blooms from the upper-left corner
     and along the border: the radial is elliptical and anchored above the
     button so its light falls on the corner and top edge, not behind the
     centred label (label contrast stays 5.8:1). Layers, back to front:
       1. deeper teal base gradient
       2. corner bloom (::before)
       3. 1px luminous border + outer light rim (box-shadow)
       4. inset specular top edge
       5. arrow lens
     -------------------------------------------------------------------- */
  --c-control-base: #0c4d53;
  --c-control-edge: rgba(206, 240, 238, 0.52);
  --grad-control: linear-gradient(
    178deg,
    #136a72 0%,
    #11636a 44%,
    #0e585f 72%,
    #0b4a50 100%
  );
  --grad-control-bloom: radial-gradient(
    78% 58% at 10% 0%,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(240, 251, 250, 0.4) 26%,
    rgba(230, 236, 236, 0.13) 52%,
    rgba(230, 236, 236, 0) 74%
  );
  --shadow-control: inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(7, 38, 43, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 24px -6px rgba(214, 246, 245, 0.9),
    0 16px 30px -16px rgba(16, 46, 51, 0.55);
  --shadow-control-hover: inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(7, 38, 43, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.34),
    0 0 30px -4px rgba(220, 250, 249, 1),
    0 20px 34px -16px rgba(16, 46, 51, 0.6);

  /* --- Button halo: one control, two contexts ---------------------------
     The inner white/silver luminosity and the drop shadow never change.
     Only the outer halo is swapped, by the section the button sits in:
       pale Frost surfaces  → visible teal/cyan glow
       dark Depth surfaces  → the approved white/silver halo
     Sections override --btn-halo; no second button class set exists.
     -------------------------------------------------------------------- */
  --btn-halo: 0 0 20px -2px rgba(22, 185, 183, 0.52),
    0 0 44px -12px rgba(22, 185, 183, 0.34);
  --btn-halo-hover: 0 0 26px -1px rgba(22, 185, 183, 0.68),
    0 0 56px -12px rgba(22, 185, 183, 0.44);
  --btn-halo-dark: 0 0 24px -6px rgba(214, 246, 245, 0.9);
  --btn-halo-dark-hover: 0 0 30px -4px rgba(220, 250, 249, 1);

  /* --- Secondary control: pale glass, teal outline, no bloom -------------
     The outline is a solid #3F7A7D: 4.10:1 against Frost and 4.42:1
     against the button's own fill, so it reads as a real control edge.
     -------------------------------------------------------------------- */
  --c-secondary-bg: rgba(255, 255, 255, 0.5);
  --c-secondary-bg-hover: rgba(17, 99, 106, 0.12);
  --c-secondary-edge: #3f7a7d;
  --c-secondary-edge-hover: #11636a;
  --c-secondary-label: #0b2529;

  /* --- Form fields ------------------------------------------------------ */
  --c-field-bg: rgba(255, 255, 255, 0.66);
  --c-field-edge: rgba(17, 99, 106, 0.26);
  --c-field-edge-focus: #11636a;
  --c-error: #8c2f24; /* 7.4:1 on Frost, 6.0:1 on the field fill */

  /* --- Motion ----------------------------------------------------------- */
  --dur-material: 200ms;
  --dur-feedback: 170ms;
  --dur-nav: 320ms;
  --dur-section: 380ms;
  --dur-headline: 560ms;
  --dur-hero: 780ms;
  --dur-materialize: 880ms;
  --ease-arrive: cubic-bezier(0.22, 0.68, 0.16, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Anchor offset under the fixed bar -------------------------------- */
  --anchor-offset: 88px;
}

@media (min-width: 1024px) {
  :root {
    --anchor-offset: 116px;
    /* Desktop-only section rhythm. Tablet and mobile keep --section-pad. */
    --section-pad-desktop: clamp(76px, 6.6vw, 104px);
  }
}
/* ==========================================================================
   Base layer — reset, shell, shared type devices, focus, buttons, motion.
   No framework. Everything here is hand-written CSS.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-frost);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: clamp(16px, 0.35vw + 15px, 18px);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

::selection {
  background: rgba(17, 99, 106, 0.16);
}

/* --- Page shell --------------------------------------------------------- */

.wrap {
  width: min(100% - 2 * var(--gutter), var(--page-max));
  margin-inline: auto;
}

/* Sections that receive an in-page anchor clear the fixed bar. */
:target,
section[id],
article[id] {
  scroll-margin-top: var(--anchor-offset);
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Display type ------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--c-depth);
  text-wrap: balance;
}

/* --- Micro devices: eyebrow + section marker ---------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-teal);
}

.eyebrow::before {
  content: '';
  inline-size: 28px;
  block-size: 1px;
  background: var(--c-signal);
  flex: none;
}

.marker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-muted);
}

.marker::before {
  content: '';
  inline-size: 24px;
  block-size: 1px;
  background: currentColor;
  opacity: 0.6;
  flex: none;
}

/* Dark-band variants (Depth surface) */
.eyebrow--dark {
  color: var(--c-text-on-dark-soft);
}

.marker--dark {
  color: var(--c-text-on-dark-soft);
}

/* --- Focus: two-tone ring, legible on Frost and on Depth ---------------- */

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--c-focus-a), 0 0 0 4px var(--c-focus-b);
}

/* --- Skip link: first focusable element --------------------------------- */

.skip {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 300;
  padding: 12px 18px;
  background: var(--c-frost);
  color: var(--c-depth);
  border: 2px solid var(--c-teal);
  border-radius: var(--r-control);
  font-size: 15px;
  font-weight: 500;
  transform: translateY(-220%);
  transition: transform var(--dur-feedback) var(--ease-standard);
}

.skip:focus-visible {
  transform: translateY(0);
  box-shadow: 0 0 0 2px var(--c-focus-a), 0 0 0 4px var(--c-focus-b);
}

/* ==========================================================================
   BUTTON SYSTEM — the one primary material and the one secondary material.
   Every CTA on every page uses .btn or .btn--secondary. No page variants.
   ========================================================================== */

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-block-size: 52px;
  padding: 0 24px 0 26px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-control-edge);
  background-color: var(--c-control-base);
  background-image: var(--grad-control);
  color: var(--c-frost);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.006em;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(7, 38, 43, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.22), var(--btn-halo),
    0 16px 30px -16px rgba(16, 46, 51, 0.55);
  transition: box-shadow var(--dur-material) var(--ease-standard),
    transform var(--dur-material) var(--ease-standard);
  cursor: pointer;
}

/* Dark bands keep the approved white/silver halo. The section owns the
   switch; the button component stays identical. */
:is(
  .closing,
  .work,
  .ownership,
  .about-sec--dark,
  .footer,
  .error,
  .st,
  .product
) {
  --btn-halo: var(--btn-halo-dark);
  --btn-halo-hover: var(--btn-halo-dark-hover);
}

/* The bloom. Its own layer so the transform can widen the light smoothly.
   Anchored above the label; peak alpha sits on the upper-left corner. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--grad-control-bloom);
  background-repeat: no-repeat;
  transform-origin: 8% 0%;
  transition: transform var(--dur-material) var(--ease-standard),
    filter var(--dur-material) var(--ease-standard);
  pointer-events: none;
}

@media (hover: hover) {
  .btn:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(7, 38, 43, 0.42),
      0 0 0 1px rgba(255, 255, 255, 0.34), var(--btn-halo-hover),
      0 20px 34px -16px rgba(16, 46, 51, 0.6);
    transform: translateY(-2px);
  }

  .btn:hover::before {
    transform: scale(1.14);
    filter: brightness(1.12);
  }
}

.btn:focus-visible {
  transition: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(7, 38, 43, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.34), var(--btn-halo-hover),
    0 20px 34px -16px rgba(16, 46, 51, 0.6), 0 0 0 2px var(--c-focus-a),
    0 0 0 4px var(--c-focus-b);
}

.btn:active {
  transform: translateY(0);
}

.btn--wide {
  inline-size: 100%;
}

/* Arrow lens: a small illuminated disc at the trailing edge. */
.btn__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 27px;
  block-size: 27px;
  border-radius: 50%;
  border: 1px solid rgba(230, 248, 247, 0.34);
  background-color: rgba(230, 236, 236, 0.04);
  background-image: radial-gradient(
    circle at 50% 22%,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(230, 236, 236, 0.05) 68%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 10px -2px rgba(220, 248, 247, 0.5);
  flex: none;
}

.btn__disc svg {
  inline-size: 12px;
  block-size: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Static (non-interactive) treatment for affordances that are not yet
   available. Never a <button>; always accompanied by a visible status. */
.btn--static {
  cursor: default;
  color: var(--c-text-on-dark);
  background-image: none;
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(230, 236, 236, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn--static::before {
  display: none;
}

/* --- Secondary material: one style, pale glass with a teal outline ------ */

.btn--secondary {
  color: var(--c-secondary-label);
  background-color: var(--c-secondary-bg);
  background-image: none;
  border: 1px solid var(--c-secondary-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 10px 20px -18px rgba(16, 46, 51, 0.55);
}

.btn--secondary::before {
  display: none;
}

@media (hover: hover) {
  .btn--secondary:hover {
    color: var(--c-depth);
    background-color: var(--c-secondary-bg-hover);
    border-color: var(--c-secondary-edge-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85),
      0 14px 24px -18px rgba(16, 46, 51, 0.6);
    transform: translateY(-2px);
  }
}

.btn--secondary:active {
  background-color: rgba(17, 99, 106, 0.16);
  border-color: var(--c-teal);
}

/* --- Quiet text link (email, inline CTAs) ------------------------------- */

.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--c-depth);
  text-decoration: underline;
  text-decoration-color: rgba(16, 46, 51, 0.38);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--dur-feedback) var(--ease-standard);
  overflow-wrap: anywhere;
}

.link-quiet:hover {
  text-decoration-color: rgba(16, 46, 51, 0.8);
}

.link-quiet--dark {
  color: var(--c-frost);
  text-decoration-color: rgba(230, 236, 236, 0.45);
}

.link-quiet--dark:hover {
  text-decoration-color: rgba(230, 236, 236, 0.95);
}

/* --- Action rows -------------------------------------------------------- */

.actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

@media (min-width: 640px) {
  .actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }
}

@media (max-width: 639px) {
  .actions .btn {
    inline-size: 100%;
    max-inline-size: 340px;
  }
}

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .btn--secondary:hover,
  .btn:active {
    transform: none;
  }

  .btn:hover::before {
    transform: none;
    filter: none;
  }
}
/* ==========================================================================
   Floating navigation — one glass surface, one navigation landmark.
   Six primary entries. Services and About use a split control: the label is
   a real link, the adjoining chevron button owns the submenu.
   ========================================================================== */

.site-header {
  position: fixed;
  inset-block-start: 20px;
  inset-inline: 0;
  z-index: 100;
}

.nav {
  /* 20px padding + 1px border = 21px of visible inset from the bar's right
     edge to the Contact capsule (required band: 18–24px). */
  --nav-inset: 20px;
  --nav-link-size: 16px;
  --nav-link-pad: 12px;

  position: relative;
  width: min(100% - 2 * var(--gutter), var(--page-max));
  margin-inline: auto;
  block-size: 88px;
  padding-inline: var(--nav-inset);
  display: flex;
  align-items: center;
  gap: 12px;

  /* Surface alpha, never element opacity: the labels stay fully opaque. */
  background: var(--c-glass);
  -webkit-backdrop-filter: var(--blur-nav);
  backdrop-filter: var(--blur-nav);
  border: 1px solid var(--c-glass-edge);
  border-radius: var(--r-nav);
  box-shadow: var(--shadow-nav), var(--edge-light),
    inset 0 -1px 0 rgba(17, 99, 106, 0.08);
}

/* Opaque fallback when backdrop-filter is unavailable. */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .nav {
    background: var(--c-glass-fallback);
    border-color: rgba(17, 99, 106, 0.14);
  }
}

/* --- Brand lockup: emblem + real HTML wordmark, no plaque ---------------- */

.brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  min-inline-size: 0;
  border-radius: var(--r-control);
  background: transparent;
  border: 0;
  padding: 0;
}

.brand__mark {
  display: block;
  inline-size: auto;
  block-size: 34px;
  aspect-ratio: 1 / 1;
  flex: none;
  object-fit: contain;
}

.brand__name {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--c-depth);
  white-space: nowrap;
}

/* --- Desktop link cluster ---------------------------------------------- */

.nav__links {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
}

.nav__item {
  position: relative;
  flex: 0 0 auto;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 10px var(--nav-link-pad);
  border-radius: var(--r-control);
  font-size: var(--nav-link-size);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.002em;
  color: var(--c-depth);
  white-space: nowrap;
  transition: background-color var(--dur-feedback) var(--ease-standard);
}

.nav__link:hover {
  background: rgba(17, 99, 106, 0.06);
}

/* Split control: one visual item, two hit targets. */
.nav__pair {
  display: flex;
  align-items: center;
  border-radius: var(--r-control);
  transition: background-color var(--dur-feedback) var(--ease-standard),
    box-shadow var(--dur-feedback) var(--ease-standard);
}

.nav__pair:hover,
.nav__item[data-open='true'] .nav__pair,
.nav__pair:focus-within {
  background: rgba(17, 99, 106, 0.07);
}

/* One focus indicator for the whole split control. The inset ring is bounded
   by the 44px control, so it can never escape the 80/88px bar or be clipped.
   The label and chevron no longer draw separate rings. */
.nav__pair:focus-within {
  box-shadow: inset 0 0 0 2px var(--c-teal);
}

.nav__link--parent:focus-visible,
.nav__toggle:focus-visible {
  box-shadow: none;
}

.nav__link--parent {
  padding-inline: var(--nav-link-pad) 2px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.nav__link--parent:hover {
  background: transparent;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 26px;
  block-size: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: transparent;
  color: var(--c-depth);
  cursor: pointer;
}

.nav__toggle svg,
.nav__group-summary svg {
  inline-size: 10px;
  block-size: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-feedback) var(--ease-standard);
}

.nav__item[data-open='true'] .nav__toggle svg,
.nav__group[open] > .nav__group-summary svg {
  transform: rotate(180deg);
}

/* Current page: Signal hairline under the label + aria-current.
   Decoration only; the state is never carried by colour alone. */
.nav__link[aria-current]::after {
  content: '';
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 12px;
  block-size: 1px;
  background: var(--c-signal);
}

/* --- Submenu ------------------------------------------------------------ */

.nav__menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: -8px;
  z-index: 2;
  display: none;
  min-inline-size: 300px;
  max-inline-size: calc(100vw - 40px);
  padding-block-start: 10px;
}

/* The hover bridge above is part of the panel so a pointer can travel from
   the trigger into the menu without crossing a dead gap. */
.nav__menu-surface {
  padding: 6px;
  background: #f4f9f8;
  border: 1px solid rgba(17, 99, 106, 0.18);
  border-radius: var(--r-panel);
  box-shadow: 0 22px 48px -20px rgba(16, 46, 51, 0.32),
    0 2px 6px rgba(16, 46, 51, 0.06), var(--edge-light);
}

.nav__item[data-open='true'] > .nav__menu {
  display: block;
}

/* No-JS fallback: hover and keyboard focus open the submenu on fine
   pointers. With JS the same states are driven by data-open so Escape can
   close the panel and return focus to the trigger. */
html:not(.js) .nav__item--parent:hover > .nav__menu,
html:not(.js) .nav__item--parent:focus-within > .nav__menu {
  display: block;
}

html:not(.js) .nav__item--parent:hover .nav__toggle svg,
html:not(.js) .nav__item--parent:focus-within .nav__toggle svg {
  transform: rotate(180deg);
}

.nav__menu-link {
  display: flex;
  align-items: center;
  min-block-size: 46px;
  padding: 8px 14px;
  border-radius: var(--r-control);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--c-depth);
  transition: background-color var(--dur-feedback) var(--ease-standard);
}

.nav__menu-link + .nav__menu-link,
.nav__menu-list li + li .nav__menu-link {
  box-shadow: inset 0 1px 0 rgba(17, 99, 106, 0.12);
}

.nav__menu-link:hover {
  background: rgba(17, 99, 106, 0.07);
}

/* --- Contact accent action (shared primary material) -------------------- */

.nav__contact {
  flex: 0 0 auto;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-block-size: 46px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-control-edge);
  background-color: var(--c-control-base);
  background-image: var(--grad-control);
  color: var(--c-frost);
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.002em;
  white-space: nowrap;
  box-shadow: var(--shadow-control);
  transition: box-shadow var(--dur-material) var(--ease-standard),
    transform var(--dur-material) var(--ease-standard);
}

.nav__contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--grad-control-bloom);
  background-repeat: no-repeat;
  transform-origin: 8% 0%;
  transition: transform var(--dur-material) var(--ease-standard),
    filter var(--dur-material) var(--ease-standard);
  pointer-events: none;
}

@media (hover: hover) {
  .nav__contact:hover {
    box-shadow: var(--shadow-control-hover);
    transform: translateY(-1px);
  }

  .nav__contact:hover::before {
    transform: scale(1.14);
    filter: brightness(1.1);
  }
}

.nav__contact:focus-visible {
  transition: none;
  box-shadow: var(--shadow-control-hover), 0 0 0 2px var(--c-focus-a),
    0 0 0 4px var(--c-focus-b);
}

.nav__contact:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .nav__contact:hover,
  .nav__contact:active {
    transform: none;
  }

  .nav__contact:hover::before {
    transform: none;
    filter: none;
  }
}

/* --- Mobile disclosure -------------------------------------------------- */

.nav__disclosure {
  display: none;
  margin-inline-start: auto;
}

.nav__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  padding: 0 10px;
  border-radius: var(--r-control);
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  color: var(--c-depth);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-feedback) var(--ease-standard);
}

.nav__summary::-webkit-details-marker {
  display: none;
}

.nav__summary::marker {
  content: '';
}

/* 20 × 8px two-line glyph */
.nav__summary::after {
  content: '';
  inline-size: 20px;
  block-size: 2px;
  background: currentColor;
  box-shadow: 0 7px 0 currentColor;
  flex: none;
}

.nav__summary:hover {
  background: rgba(17, 99, 106, 0.06);
}

.nav__panel {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline: 0;
  z-index: 3;
  padding: 6px;
  background: var(--c-glass-fallback);
  border: 1px solid rgba(17, 99, 106, 0.16);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-nav);
  max-block-size: calc(100svh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav__panel-link {
  display: flex;
  align-items: center;
  min-block-size: 48px;
  padding: 0 14px;
  border-radius: var(--r-control);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--c-depth);
}

.nav__panel-link:hover {
  background: rgba(17, 99, 106, 0.06);
}

.nav__panel-link--sub {
  min-block-size: 46px;
  padding-inline-start: 24px;
  font-size: 15px;
  font-weight: 400;
  color: var(--c-ink);
}

.nav__group {
  border-block-start: 1px solid rgba(17, 99, 106, 0.14);
  border-block-end: 1px solid rgba(17, 99, 106, 0.14);
  margin-block: 4px;
}

.nav__group + .nav__group {
  margin-block-start: -1px;
}

.nav__group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-block-size: 48px;
  padding: 0 14px;
  border-radius: var(--r-control);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--c-depth);
  cursor: pointer;
  list-style: none;
}

.nav__group-summary::-webkit-details-marker {
  display: none;
}

.nav__group-summary::marker {
  content: '';
}

.nav__group-summary:hover {
  background: rgba(17, 99, 106, 0.06);
}

.nav__group-list {
  padding-block-end: 6px;
}

.nav__panel-contact {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  margin-block-start: 8px;
  padding: 0 18px;
  border: 1px solid var(--c-control-edge);
  border-radius: var(--r-pill);
  background-color: var(--c-control-base);
  background-image: var(--grad-control);
  color: var(--c-frost);
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  box-shadow: var(--shadow-control);
  transition: box-shadow var(--dur-material) var(--ease-standard);
}

.nav__panel-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--grad-control-bloom);
  background-repeat: no-repeat;
  transform-origin: 8% 0%;
  pointer-events: none;
}

/* --- Breakpoints -------------------------------------------------------- */

/* 1024–1199: tightest desktop band. Six entries keep 16px type; spacing
   tightens instead. Measured at 1024 and 1100. */
@media (max-width: 1199px) {
  .nav {
    block-size: 80px;
    gap: 10px;
    --nav-link-pad: 10px;
  }

  .nav__links {
    gap: 2px;
  }

  .brand__mark {
    block-size: 32px;
  }

  .brand__name {
    font-size: 14px;
  }

  .nav__contact {
    min-block-size: 44px;
    padding-inline: 18px;
  }
}

@media (max-width: 1023px) {
  .site-header {
    inset-block-start: 12px;
  }

  .nav {
    block-size: 64px;
    gap: 12px;
    padding-inline: 8px;
  }

  .nav__links,
  .nav__contact {
    display: none; /* fully reproduced inside the disclosure panel */
  }

  .nav__disclosure {
    display: block;
  }

  .brand {
    gap: 9px;
  }

  .brand__mark {
    block-size: 28px;
  }

  .brand__name {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .nav {
    width: calc(100% - 32px);
  }
}

@media (max-width: 359px) {
  .brand__mark {
    block-size: 26px;
  }

  .brand__name {
    font-size: 13px;
  }

  .nav__summary {
    padding-inline: 8px;
    font-size: 14px;
  }
}

/* --- Motion: bar arrival and submenu settle (enhancement only) ---------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes ddt-nav-arrive {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes ddt-menu-settle {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .nav {
    animation: ddt-nav-arrive var(--dur-nav) var(--ease-arrive) backwards;
  }

  .nav__item[data-open='true'] > .nav__menu-surface,
  html:not(.js) .nav__item--parent:hover > .nav__menu > .nav__menu-surface,
  html:not(.js)
    .nav__item--parent:focus-within
    > .nav__menu
    > .nav__menu-surface {
    animation: ddt-menu-settle 180ms var(--ease-standard) backwards;
  }

  .nav__disclosure[open] > .nav__panel {
    animation: ddt-menu-settle var(--dur-feedback) var(--ease-standard)
      backwards;
  }
}
?/* ==========================================================================
   Homepage sections — hero, intro band, service plates, selected work,
   approach, independent developments, closing invitation, footer.
   ========================================================================== */

/* --- Shared section H2 scale ------------------------------------------- */

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--c-depth);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .h2 {
    font-size: clamp(34px, 4.4vw, 46px);
  }
}

@media (min-width: 1024px) {
  .h2 {
    font-size: clamp(38px, 4.2vw, 60px);
  }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--c-frost);
  border-block-end: 1px solid rgba(17, 99, 106, 0.14);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 92px 0;
}

.hero__title {
  margin-block-start: 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 10.5vw, 66px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--c-depth);
}

.hero__title .line {
  display: inline;
}

.hero__lead {
  margin-block-start: 26px;
  max-inline-size: 38ch;
}

.hero__lead-main {
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-ink);
}

.hero__lead-note {
  margin-block-start: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--c-teal);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-block-start: 32px;
}

/* Art (stacked composition below 1024) */
.hero__art {
  position: relative;
  margin-block-start: 36px;
  block-size: clamp(300px, 46svh, 440px);
  border-block-start: 1px solid rgba(17, 99, 106, 0.14);
  overflow: hidden;
  z-index: 0;
}

.hero__art picture {
  display: block;
  block-size: 100%;
}

.hero__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

/* --- Signature motion: piecewise digital reconstruction ----------------
   A canvas overlay composites the real artwork back in through independent,
   pixel-sized cells (see Hero.astro). It is created only by that script, only
   on the homepage, only with motion allowed, and it is removed when the
   reveal completes. The <img> underneath is the base layer and is never
   hidden, so the artwork is complete with JS off, under reduced motion and on
   any script error. The canvas sits above the image and below the contrast
   wash on desktop; it never receives pointer events.
   ---------------------------------------------------------------------- */

.hero__reveal {
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  display: block;
  pointer-events: none;
}

/* While the reconstruction runs the art edge is a pale void, not a bright
   image edge; this only smooths the one frame before the canvas paints. */
.hero__art {
  background-color: #eaf1f0;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ddt-hero-rise {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  html.js .hero__title .line {
    animation: ddt-hero-rise var(--dur-headline) var(--ease-arrive) backwards;
  }

  html.js .hero__title .line:nth-child(1) {
    animation-delay: 40ms;
  }

  html.js .hero__title .line:nth-child(2) {
    animation-delay: 110ms;
  }

  html.js .hero__title .line:nth-child(3) {
    animation-delay: 180ms;
  }

  html.js .hero__lead,
  html.js .hero__actions {
    animation: ddt-hero-rise 460ms var(--ease-arrive) 260ms backwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Belt and braces: the script never creates the canvas under reduced
     motion, and any stray overlay is inert if it somehow exists. */
  .hero__reveal {
    display: none;
  }
}

.hero__wash {
  display: none;
}

@media (min-width: 768px) {
  .hero__inner {
    padding-block-start: 108px;
  }

  .hero__title {
    font-size: clamp(48px, 6.8vw, 78px);
    text-wrap: balance;
  }

  .hero__lead {
    max-inline-size: 44ch;
  }

  .hero__actions {
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }

  .hero__art {
    margin-block-start: 48px;
    block-size: clamp(340px, 40svh, 420px);
  }

  .hero__img {
    object-position: 66% 50%;
  }
}

@media (min-width: 1024px) {
  .hero {
    min-height: clamp(660px, 88svh, 820px);
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .hero__inner {
    padding-block: 152px 104px;
    z-index: 3;
  }

  .hero__content {
    max-inline-size: min(660px, 46vw);
  }

  .hero__title {
    font-size: clamp(56px, 6vw, 100px);
    line-height: 0.96;
    letter-spacing: -0.035em;
  }

  .hero__title .line {
    display: block;
  }

  .hero__lead {
    max-inline-size: 46ch;
  }

  /* Full-bleed art, locked focal point 76% 46% */
  .hero__art {
    position: absolute;
    inset: 0;
    margin-block-start: 0;
    block-size: auto;
    border-block-start: 0;
    z-index: 0;
  }

  .hero__img {
    object-position: 76% 46%;
  }

  /* One contrast-protection layer; its only job is legibility. */
  .hero__wash {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(230, 236, 236, 0.9) 0%,
      rgba(230, 236, 236, 0.68) 34%,
      rgba(230, 236, 236, 0.3) 52%,
      rgba(230, 236, 236, 0) 70%
    );
  }
}

/* ==========================================================================
   INTRO BAND — the rest of the approved hero body
   ========================================================================== */

.intro {
  background: var(--c-frost);
  padding-block: clamp(44px, 5.4vw, 78px);
  border-block-end: 1px solid rgba(17, 99, 106, 0.14);
}

.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.intro__lead {
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.45;
  color: var(--c-depth);
  max-inline-size: 46ch;
}

.intro__note {
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-ink-muted);
  max-inline-size: 44ch;
  padding-inline-start: 20px;
  border-inline-start: 1px solid rgba(22, 185, 183, 0.6);
}

@media (min-width: 900px) {
  .intro__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 72px;
    align-items: start;
  }
}

/* Two short paragraphs do not need a full section's air above and below.
   Desktop only: tablet and mobile keep their current rhythm. */
@media (min-width: 1024px) {
  .intro {
    padding-block: 38px;
  }
}

/* ==========================================================================
   SERVICES — staggered 5/4/3 plate grid
   ========================================================================== */

.services {
  background: var(--c-frost);
  padding-block: var(--section-pad);
}

.services__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap);
}

.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
  margin-block-start: 40px;
  align-items: start;
}

.plate {
  position: relative;
  display: block;
  border-block-start: 1px solid rgba(17, 99, 106, 0.18);
  padding-block-start: 20px;
  color: inherit;
  text-decoration: none;
  /* 220ms: inside the 180–260ms feedback window. */
  transition: border-color 220ms var(--ease-standard),
    transform 220ms var(--ease-standard);
}

/* Shared CTA material. Single-destination plates render it as a span (the
   whole card is the anchor); plate 03 renders the same class on its two real
   links. No anchor is nested. */
.plate__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--c-teal);
}

/* Two-destination plate: an invisible stretched target covers the card body.
   The explicit links are lifted above it and keep their own hit areas. */
.plate__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.plate--multi .plate__links {
  position: relative;
  z-index: 2;
}

.plate__media {
  aspect-ratio: 2.2 / 1;
  border-radius: var(--r-media);
  overflow: hidden;
  margin-block-end: 20px;
  background: rgba(17, 99, 106, 0.06);
}

.plate__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 8%;
  transition: transform 220ms var(--ease-standard);
}

.plate__index {
  margin-block-end: 10px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-muted);
}

.plate__title {
  margin-block-end: 8px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--c-depth);
}

.plate__headline {
  margin-block-end: 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(23px, 2.1vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--c-depth);
  text-wrap: balance;
}

.plate__desc {
  max-inline-size: min(100%, 46ch);
  font-size: 15px;
  line-height: 1.58;
  color: var(--c-ink-muted);
  text-wrap: pretty;
}

.plate__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-block-start: 18px;
}

.plate__link svg {
  inline-size: 12px;
  block-size: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-feedback) var(--ease-standard);
}

.plate__link:hover span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .plate:hover {
    border-block-start-color: rgba(17, 99, 106, 0.38);
    transform: translateY(-2px);
  }

  .plate:hover .plate__media img {
    transform: scale(1.02);
  }

  .plate:hover .plate__link span {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .plate:hover .plate__link svg,
  .plate__link:hover svg {
    transform: translateX(3px);
  }
}

/* Keyboard focus on the two explicit links also brightens the card rule, so
   the whole plate reads as the current object. */
.plate--multi:focus-within {
  border-block-start-color: rgba(17, 99, 106, 0.38);
}

.plate--multi:focus-within .plate__link svg {
  transform: translateX(3px);
}

@media (min-width: 768px) {
  .services__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .services__head-text {
    grid-column: 1 / span 6;
  }

  .services__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    row-gap: 0;
    margin-block-start: 56px;
  }

  .plate__title {
    font-size: 17px;
  }

  .plate:nth-child(1) {
    grid-column: 1 / span 6;
  }

  .plate:nth-child(2) {
    grid-column: 7 / span 6;
  }

  .plate:nth-child(3) {
    grid-column: 4 / span 6;
    margin-block-start: 48px;
  }
}

@media (min-width: 1024px) {
  .services {
    padding-block: var(--section-pad-desktop);
  }

  .services__grid {
    row-gap: 24px;
    margin-block-start: 56px;
  }

  .plate:nth-child(1) {
    grid-column: 1 / span 5;
    margin-block-start: 0;
  }

  .plate:nth-child(2) {
    grid-column: 6 / span 4;
    margin-block-start: 64px;
  }

  .plate:nth-child(3) {
    grid-column: 10 / span 3;
    margin-block-start: 128px;
  }

  .plate:nth-child(3) .plate__headline {
    font-size: clamp(21px, 1.7vw, 26px);
  }
}

@media (max-width: 640px) {
  .hero__actions {
    inline-size: 100%;
  }

  .hero__actions .btn {
    inline-size: 100%;
    max-inline-size: 340px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .plate:hover {
    transform: none;
  }

  .plate:hover .plate__media img {
    transform: none;
  }
}

/* ==========================================================================
   SELECTED WORK — dark gallery band
   ========================================================================== */

.work {
  background: var(--c-depth);
  color: var(--c-frost);
  padding-block: clamp(72px, 8vw, 112px);
  isolation: isolate;
  border-block-start: 1px solid rgba(22, 185, 183, 0.3);
  border-block-end: 1px solid rgba(230, 236, 236, 0.16);
}

.work__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: end;
}

.work__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 9vw, 46px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-frost);
  text-wrap: balance;
}

.work__intro {
  display: grid;
  gap: 14px;
  max-inline-size: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text-on-dark);
}

.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-block-start: 40px;
  align-items: center;
}

.project__figure {
  margin: 0;
}

.project__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 1896 / 781;
  border: 1px solid rgba(230, 236, 236, 0.22);
  border-radius: var(--r-panel);
  overflow: hidden;
  background-color: #0b2529;
  box-shadow: var(--edge-dark);
  isolation: isolate;
}

/* Authentic screenshot of the delivered site, shown whole: the frame ratio
   matches the file's own 1896 x 781, so nothing is cropped or enlarged. */
.project__shot {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center top;
}

/* The image is a second, independent link to the same project destination.
   It is not nested inside the title link or the CTA. */
.project__shot-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  border-radius: inherit;
}

.project__shot-link:focus-visible {
  outline: 2px solid var(--c-frost);
  outline-offset: -4px;
  box-shadow: inset 0 0 0 5px rgba(17, 99, 106, 0.55);
}

.project__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-block-start: 10px;
}

.project__caption-label {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-frost);
}

.project__caption-note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-text-on-dark-soft);
}

/* On phones a full-width 2.43:1 strip would be unreadable; show the left
   two-thirds (wordmark and headline) instead of shrinking the whole page. */
@media (max-width: 767px) {
  .project__frame {
    aspect-ratio: 16 / 10;
  }

  .project__shot {
    object-position: left top;
  }
}

.project__name {
  margin-block-start: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--c-frost);
}

.project__name a {
  color: inherit;
  text-decoration: none;
}

.project__name a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.project__name a:focus-visible {
  border-radius: 2px;
}

.project__headline {
  margin-block-start: 10px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--c-frost);
  max-inline-size: 34ch;
}

.project__desc {
  margin-block-start: 14px;
  max-inline-size: 42ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text-on-dark);
}

.project__text .link-quiet {
  margin-block-start: 12px;
}

@media (min-width: 768px) {
  .work__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 48px;
  }

  .work__title {
    font-size: clamp(40px, 5vw, 76px);
  }

  .project {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 40px;
    margin-block-start: 56px;
  }
}

@media (min-width: 1024px) {
  .work__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
  }

  .work__head-main {
    grid-column: 1 / span 7;
  }

  .work__intro {
    grid-column: 9 / span 4;
    align-self: end;
    padding-block-end: 6px;
  }

  .project {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
  }

  .project__figure {
    grid-column: 1 / span 7;
  }

  .project__text {
    grid-column: 9 / span 4;
  }
}

/* ==========================================================================
   OUR APPROACH
   ========================================================================== */

.approach {
  background: var(--c-frost);
  padding-block: clamp(80px, 8vw, 120px);
}

.approach__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.approach__intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-ink-muted);
  max-inline-size: 46ch;
}

.approach__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-block-start: 40px;
}

.step {
  border-block-start: 1px solid rgba(17, 99, 106, 0.24);
  padding-block-start: 18px;
}

.step__index {
  display: block;
  margin-block-end: 10px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--c-teal);
}

.step__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-depth);
}

.step__text {
  margin-block-start: 10px;
  max-inline-size: 34ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink-muted);
}

.approach__action {
  margin-block-start: 32px;
}

@media (min-width: 768px) {
  .approach__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    align-items: end;
  }

  .approach__head-text {
    grid-column: 1 / span 6;
  }

  .approach__intro {
    grid-column: 8 / span 5;
  }

  .approach__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
    margin-block-start: 48px;
  }
}

@media (min-width: 1024px) {
  /* Desktop rhythm only: the Approach → Independent Developments gap was
     210px (115px + 95px of doubled section padding). Measured after this
     change: 72px + 68px = 140px, a 33% reduction. Sub-1024 spacing is
     untouched. */
  .approach {
    padding-block: 84px 72px;
  }

  .approach__steps {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    margin-block-start: 44px;
  }

  .step {
    grid-column: span 3;
  }

  .step__name {
    font-size: clamp(26px, 2.6vw, 40px);
  }

  .approach__action {
    margin-block-start: 24px;
  }
}

/* ==========================================================================
   INDEPENDENT DEVELOPMENTS
   ========================================================================== */

.sovereign {
  background: var(--c-frost);
  padding-block: var(--section-pad);
}

.sovereign__panel {
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid rgba(17, 99, 106, 0.14);
  border-radius: var(--r-panel);
  background: linear-gradient(155deg, #f2f7f6 0%, #e9efee 55%, #dde7e6 100%);
  box-shadow: var(--shadow-panel), var(--edge-light);
}

.sovereign__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.sovereign__title {
  margin-block-start: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--c-depth);
}

.sovereign__headline {
  margin-block-start: 10px;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  color: var(--c-teal);
}

.sovereign__body {
  margin-block-start: 14px;
  max-inline-size: 54ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

.sovereign__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-block-start: 26px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-inline-size: 100%;
  padding: 8px 14px;
  border: 1px solid rgba(17, 99, 106, 0.25);
  border-radius: var(--r-pill);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-teal);
}

.chip__dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--c-signal);
  flex: none;
}

.sovereign__media {
  inline-size: min(100%, 242px);
  max-inline-size: 242px;
  block-size: auto;
  aspect-ratio: 242 / 138;
  object-fit: cover;
  object-position: 50% 50%;
  justify-self: start;
  border: 1px solid rgba(17, 99, 106, 0.22);
  border-radius: var(--r-media);
  box-shadow: 0 12px 24px -20px rgba(16, 46, 51, 0.55);
}

@media (min-width: 1024px) {
  /* Top padding cut from 95px to 68px: it stacks with the Approach section's
     own bottom padding, which is where the dead band came from. */
  .sovereign {
    padding-block: 68px var(--section-pad-desktop);
  }

  .sovereign__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
  }

  .sovereign__text {
    grid-column: 1 / span 8;
  }

  .sovereign__media {
    grid-column: 10 / span 3;
    justify-self: end;
    align-self: center;
    /* Owner request: the supporting artwork reads ~30% larger on desktop
       (236 x 135 ? ~272 x 155 at 1440px) while the left copy keeps its
       measure. Aspect ratio is preserved, so the image is never distorted;
       mobile and tablet keep the original 242 x 138 box. */
    inline-size: clamp(236px, 19vw, 276px);
    max-inline-size: none;
    block-size: auto;
    aspect-ratio: 272 / 155;
    object-position: 50% 50%;
  }
}

/* ==========================================================================
   CLOSING INVITATION
   ========================================================================== */

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(520px, 68svh, 680px);
  background: var(--c-depth);
  border-block-start: 1px solid rgba(22, 185, 183, 0.3);
}

.closing__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

.closing__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(16, 46, 51, 0.9),
    rgba(16, 46, 51, 0.93)
  );
}

.closing__inner {
  position: relative;
  z-index: 2;
  padding-block: 64px;
}

.closing__title {
  margin-block-start: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 9.5vw, 46px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-frost);
  text-wrap: balance;
}

.closing__body {
  margin-block-start: 16px;
  max-inline-size: 42ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-text-on-dark);
}

.closing__body:first-of-type {
  margin-block-start: 22px;
}

.closing__actions {
  margin-block-start: 32px;
}

@media (min-width: 768px) {
  .closing__inner {
    padding-block: 88px;
  }

  .closing__title {
    font-size: clamp(38px, 6vw, 56px);
  }
}

@media (min-width: 1024px) {
  .closing__inner {
    padding-block: clamp(96px, 12vw, 152px);
  }

  .closing__content {
    max-inline-size: min(620px, 48vw);
  }

  .closing__title {
    font-size: clamp(42px, 4.8vw, 76px);
  }

  .closing__scrim {
    background: linear-gradient(
      90deg,
      rgba(16, 46, 51, 0.92) 0%,
      rgba(16, 46, 51, 0.88) 36%,
      rgba(16, 46, 51, 0.55) 60%,
      rgba(16, 46, 51, 0.22) 100%
    );
  }

  .closing__content {
    max-inline-size: min(640px, 50vw);
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background: var(--c-depth);
  border-block-start: 1px solid rgba(230, 236, 236, 0.16);
  padding-block: 48px;
  color: var(--c-frost);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.footer__brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer__mark {
  display: block;
  inline-size: auto;
  block-size: 52px;
  aspect-ratio: 1 / 1;
  flex: none;
  object-fit: contain;
}

.footer__studio {
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text-on-dark);
}

.footer__company {
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-text-on-dark-soft);
}

.footer__email {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-frost);
  text-decoration: underline;
  text-decoration-color: rgba(230, 236, 236, 0.4);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

.footer__email:hover {
  text-decoration-color: rgba(230, 236, 236, 0.9);
}

.footer__links {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  justify-content: start;
  column-gap: 40px;
  row-gap: 4px;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-text-on-dark);
}

.footer__link:hover {
  color: var(--c-frost);
}

.footer__legal {
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-text-on-dark-soft);
}

@media (min-width: 1024px) {
  .footer {
    padding-block: 56px;
  }

  .footer__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  .footer__brand {
    grid-column: 1 / span 5;
  }

  .footer__links {
    grid-column: 6 / span 5;
    row-gap: 0;
  }

  .footer__legal {
    grid-column: 11 / span 2;
    justify-self: end;
    text-align: right;
  }
}
/* ==========================================================================
   Interior page compositions — services index and the four service pages.
   Shared primitives first, then one focal graphic per service.
   ========================================================================== */

/* --- Shared page hero --------------------------------------------------- */

.page-hero {
  padding-block: calc(var(--anchor-offset) + 36px) clamp(36px, 4.6vw, 60px);
  background: var(--c-frost);
}

.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: end;
}

.page-hero__title {
  margin-block-start: 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(42px, 7.6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--c-depth);
  text-wrap: balance;
}

.page-hero__body {
  display: grid;
  gap: 14px;
  max-inline-size: 52ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

@media (min-width: 900px) {
  .page-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
  }

  .page-hero__main {
    grid-column: 1 / span 8;
  }

  .page-hero__body {
    grid-column: 9 / span 4;
    padding-block-end: 8px;
  }
}

/* --- Services index hero (oversized typographic title) ------------------ */

.page-hero--index {
  padding-block-end: clamp(24px, 3vw, 40px);
}

.page-hero--index .page-hero__title {
  font-size: clamp(46px, 8.6vw, 126px);
  letter-spacing: -0.045em;
  line-height: 0.92;
  max-inline-size: 15ch;
}

.page-hero--index .page-hero__body {
  max-inline-size: 44ch;
  font-size: 16px;
}

@media (min-width: 900px) {
  .page-hero--index .page-hero__main {
    grid-column: 1 / span 9;
  }

  .page-hero--index .page-hero__body {
    grid-column: 10 / span 3;
  }
}

/* --- Service jump index -------------------------------------------------- */

.svc-jump {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block-start: 1px solid rgba(17, 99, 106, 0.24);
  margin-block-start: clamp(28px, 3.6vw, 48px);
}

.svc-jump__link {
  display: flex;
  align-items: baseline;
  align-self: stretch;
  gap: 12px;
  min-block-size: 52px;
  padding-block: 14px;
  border-block-end: 1px solid rgba(17, 99, 106, 0.14);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--c-depth);
  transition: color var(--dur-feedback) var(--ease-standard);
}

.svc-jump__num {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--c-teal);
}

.svc-jump__link:hover {
  color: var(--c-teal);
}

@media (min-width: 768px) {
  .svc-jump {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 24px;
  }
}

/* ==========================================================================
   SERVICES OVERVIEW — alternating editorial sections.
   Each numbered section is its own full-width surface (rhythm bands), with the
   12-column composition inside the page wrap.
   ========================================================================== */

.svc-list {
  padding-block: 0;
}

.svc-panel {
  position: relative;
  display: block;
  /* Own stacking context so the B2 texture sits under the panel content. */
  isolation: isolate;
  padding-block: clamp(36px, 4.4vw, 64px);
  border-block-start: 1px solid rgba(17, 99, 106, 0.18);
  color: inherit;
  text-decoration: none;
  scroll-margin-top: var(--anchor-offset);
  /* 220ms: inside the 180–260ms feedback window. */
  transition: border-color 220ms var(--ease-standard);
}

.svc-panel:first-child {
  border-block-start: 0;
  padding-block-start: clamp(44px, 5.4vw, 76px);
}

.svc-panel:last-child {
  padding-block-end: clamp(52px, 6vw, 88px);
}

.svc-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.svc-panel__index {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(17, 99, 106, 0.28);
  font-variant-numeric: lining-nums;
}

.svc-panel__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--c-depth);
  text-wrap: balance;
}

.svc-panel__num {
  color: var(--c-teal);
  font-size: 0.6em;
  letter-spacing: 0;
  vertical-align: 0.12em;
}

.svc-panel__lead {
  margin-block-start: 14px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--c-teal);
  max-inline-size: 40ch;
}

.svc-panel__p {
  margin-block-start: 14px;
  max-inline-size: 52ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

.svc-panel__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  margin-block-start: 18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-teal);
}

.svc-panel__link svg {
  inline-size: 12px;
  block-size: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-feedback) var(--ease-standard);
}

.svc-panel__link:hover span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.svc-panel__aside {
  padding: 20px 22px;
  border: 1px solid rgba(17, 99, 106, 0.16);
  border-radius: var(--r-panel);
  background: rgba(255, 255, 255, 0.34);
}

.svc-panel__list-label {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-teal);
}

.svc-panel__list {
  margin-block-start: 12px;
}

.svc-panel__list li {
  position: relative;
  padding: 8px 0 8px 18px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.12);
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-ink);
}

.svc-panel__list li::before {
  content: '';
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: 0;
  inline-size: 5px;
  block-size: 5px;
  background: var(--c-signal);
  transform: rotate(45deg);
}

.svc-panel__list li:first-child {
  border-block-start: 0;
}

@media (min-width: 900px) {
  .svc-panel__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
  }

  .svc-panel__index {
    grid-column: 1 / span 1;
  }

  .svc-panel__main {
    grid-column: 3 / span 6;
  }

  .svc-panel__aside {
    grid-column: 9 / span 4;
  }

  .svc-panel--flip .svc-panel__main {
    grid-column: 7 / span 6;
    grid-row: 1;
  }

  .svc-panel--flip .svc-panel__aside {
    grid-column: 2 / span 4;
    grid-row: 1;
  }
}

/* The whole panel is the destination. Feedback is limited to the rule and the
   teal accent so the approved alternating composition is unchanged. */
@media (hover: hover) and (pointer: fine) {
  .svc-jump__link {
    transition: color var(--dur-feedback) var(--ease-standard),
      box-shadow var(--dur-feedback) var(--ease-standard),
      background-color var(--dur-feedback) var(--ease-standard);
  }

  .svc-jump__link:hover,
  .svc-jump__link:focus-visible {
    color: var(--c-depth);
    background-color: rgba(22, 185, 183, 0.07);
    box-shadow: inset 0 -1px 0 rgba(22, 185, 183, 0.7);
  }

  .svc-panel:hover {
    border-block-start-color: rgba(17, 99, 106, 0.36);
  }

  .svc-panel:hover .svc-panel__index {
    color: rgba(17, 99, 106, 0.44);
  }

  .svc-panel:hover .svc-panel__link span {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .svc-panel:hover .svc-panel__link svg {
    transform: translateX(3px);
  }
}

/* Keyboard focus rings the whole band, inset so it cannot be clipped by the
   viewport edge. Teal on the pale bands is 5.8:1 or better. */
.svc-panel:focus-visible {
  outline: 2px solid var(--c-focus-b);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 1px var(--c-focus-a);
  border-radius: 0;
}

.svc-panel:focus-visible .svc-panel__index {
  color: rgba(17, 99, 106, 0.44);
}

.svc-panel:focus-visible .svc-panel__link span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Fine teal underlight beneath the one real destination in each section. */
.svc-panel__link {
  position: relative;
}

.svc-panel__link::after {
  content: '';
  position: absolute;
  inset-block-end: 4px;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background-image: linear-gradient(
    90deg,
    rgba(22, 185, 183, 0.75),
    rgba(22, 185, 183, 0)
  );
  opacity: 0;
  transition: opacity 220ms var(--ease-standard);
  pointer-events: none;
}

.svc-panel:hover .svc-panel__link::after,
.svc-panel:focus-visible .svc-panel__link::after {
  opacity: 1;
}

/* Staggered 01→04 reveal, tied to scroll where supported.
   Progressive enhancement only: gated on html.js so a visitor without
   scripting gets the full, visible default state. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes ddt-panel-rise {
      from {
        opacity: 0;
        transform: translateY(26px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    html.js .svc-panel {
      animation: ddt-panel-rise linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 5%)
        entry calc(46% + var(--i, 0) * 5%);
    }
  }
}

/* ==========================================================================
   PROCESS BAND + OWNERSHIP + INDEX CTA (services overview)
   ========================================================================== */

.process {
  padding-block: clamp(64px, 7vw, 104px);
  /* Rhythm map: the Approach band is surface A (Frost). The previous #eef4f3
     sat one step away from the B2 section above it, producing two adjacent
     near-identical pale bands. */
  background: var(--c-frost);
  border-block: 1px solid rgba(17, 99, 106, 0.16);
}

.process__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.process__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-block-start: 36px;
}

.process__step {
  border-block-start: 1px solid rgba(17, 99, 106, 0.26);
  padding-block-start: 16px;
}

.process__num {
  display: block;
  margin-block-end: 10px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--c-teal);
  font-variant-numeric: tabular-nums;
}

.process__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--c-depth);
}

.process__text {
  margin-block-start: 10px;
  max-inline-size: 34ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

@media (min-width: 768px) {
  .process__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    align-items: end;
  }

  .process__head > h2 {
    grid-column: 1 / span 5;
  }

  .process__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }
}

@media (min-width: 1024px) {
  .process__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block-start: 44px;
  }
}

/* --- Ownership band ----------------------------------------------------- */

.ownership {
  padding-block: clamp(64px, 7.4vw, 112px);
  background: var(--c-depth);
  color: var(--c-frost);
  border-block-start: 1px solid rgba(22, 185, 183, 0.3);
}

.ownership__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.ownership__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--c-frost);
  max-inline-size: 16ch;
  text-wrap: balance;
}

.ownership__body {
  display: grid;
  gap: 16px;
  max-inline-size: 54ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-text-on-dark);
}

@media (min-width: 900px) {
  .ownership__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
  }

  .ownership__title {
    grid-column: 1 / span 6;
  }

  .ownership__body {
    grid-column: 8 / span 5;
  }
}

/* --- Closing CTA (services overview) ------------------------------------ */

.index-cta {
  padding-block: clamp(64px, 7vw, 104px);
  background: var(--c-frost);
}

.index-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.index-cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-depth);
}

.index-cta__body {
  margin-block-start: 16px;
  max-inline-size: 52ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

.index-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-block-start: 26px;
}

@media (min-width: 900px) {
  .index-cta__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: end;
  }

  .index-cta__text {
    grid-column: 1 / span 8;
  }

  .index-cta__actions {
    grid-column: 9 / span 4;
    margin-block-start: 0;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   SERVICE DETAIL PAGES
   ========================================================================== */

.svc-hero {
  padding-block: calc(var(--anchor-offset) + 24px) clamp(40px, 5vw, 72px);
  overflow: hidden;
}

.svc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}

.svc-hero__title {
  margin-block-start: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 7vw, 64px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--c-depth);
  text-wrap: balance;
}

.svc-hero__lead {
  margin-block-start: 20px;
  max-inline-size: 48ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-ink);
}

.svc-hero__note {
  margin-block-start: 14px;
  max-inline-size: 48ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

.svc-hero__actions {
  margin-block-start: 26px;
}

@media (min-width: 1024px) {
  .svc-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px;
  }

  .svc-hero__text {
    grid-column: 1 / span 6;
  }

  .svc-hero__viz {
    grid-column: 7 / span 6;
  }

  .svc-hero__title {
    font-size: clamp(40px, 4.6vw, 68px);
  }
}

/* --- Long-form sections ------------------------------------------------- */

.continuation {
  padding-block: clamp(40px, 5vw, 68px);
  border-block-end: 1px solid rgba(17, 99, 106, 0.16);
}

.continuation__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.continuation .pull {
  margin-block: 0;
}

@media (min-width: 900px) {
  .continuation__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
  }

  .continuation .pull {
    grid-column: 1 / span 5;
  }

  .continuation__grid > .prose {
    grid-column: 7 / span 6;
  }

  .continuation__grid > .prose:first-child {
    grid-column: 1 / span 5;
  }
}

.svc-section {
  padding-block: clamp(48px, 5.6vw, 84px);
  border-block-start: 1px solid rgba(17, 99, 106, 0.16);
}

.svc-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.svc-section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--c-depth);
  max-inline-size: 20ch;
  text-wrap: balance;
}

.svc-section__lead {
  max-inline-size: 50ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

@media (min-width: 900px) {
  .svc-section__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: end;
  }

  .svc-section__head > .svc-section__title {
    grid-column: 1 / span 7;
  }

  .svc-section__head > .svc-section__lead {
    grid-column: 9 / span 4;
  }
}

.prose {
  max-inline-size: 68ch;
}

.prose p {
  margin-block-start: 16px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-ink);
}

.prose p:first-child {
  margin-block-start: 0;
}

.prose--muted p {
  color: var(--c-ink-muted);
}

.prose--two-col {
  display: grid;
  gap: 0 40px;
}

@media (min-width: 900px) {
  .prose--two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prose--two-col p {
    margin-block-start: 0;
    margin-block-end: 16px;
  }
}

/* --- Capability cards --------------------------------------------------- */

.caps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 32px;
  margin-block-start: 32px;
}

.cap {
  padding-block: 20px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.2);
}

.cap__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-depth);
}

.cap__text {
  margin-block-start: 8px;
  max-inline-size: 42ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

@media (min-width: 700px) {
  .caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .caps--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   FLOATING GLASS CAPABILITY CARDS
   One system, two proportions:
     .glassgrid--design — square cards, 3-up, last card wide (Website Design)
     .toolgrid          — wide spec cards, 2-up, staggered (Digital Tools)
   Decorative surfaces only: all copy inside is the approved text.
   ========================================================================== */

.glassgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-block-start: clamp(26px, 3vw, 38px);
}

.glasscard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 22px 22px 24px;
  border: 1px solid rgba(17, 99, 106, 0.18);
  border-radius: 14px;
  background-image: linear-gradient(
    158deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(240, 247, 246, 0.62) 54%,
    rgba(226, 237, 236, 0.58) 100%
  );
  box-shadow: 0 28px 52px -40px rgba(16, 46, 51, 0.55),
    0 4px 14px -12px rgba(16, 46, 51, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  transition: transform var(--dur-material) var(--ease-standard),
    box-shadow var(--dur-material) var(--ease-standard);
}

/* Teal underglow: light pooling beneath the card, not a painted stripe. */
.glasscard::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto -18% -58% -18%;
  block-size: 78%;
  background: radial-gradient(
    50% 100% at 50% 100%,
    rgba(22, 185, 183, 0.3) 0%,
    rgba(22, 185, 183, 0) 72%
  );
  pointer-events: none;
}

.glasscard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.glasscard__index {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: var(--c-teal);
}

.glasscard__icon {
  inline-size: 22px;
  block-size: 22px;
  color: var(--c-teal);
  opacity: 0.9;
}

.glasscard__name {
  margin-block-start: 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--c-depth);
  text-wrap: balance;
}

.glasscard__text {
  margin-block-start: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

@media (min-width: 700px) {
  .glassgrid--design {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .glassgrid--design {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .glassgrid--design .glasscard:last-child {
    grid-column: span 2;
  }
}

@media (hover: hover) and (pointer: fine) {
  .glasscard:hover {
    transform: translateY(-3px);
    box-shadow: 0 34px 58px -38px rgba(16, 46, 51, 0.6),
      0 6px 16px -12px rgba(16, 46, 51, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glasscard:hover {
    transform: none;
  }
}

/* ==========================================================================
   CUSTOM DIGITAL TOOLS — one editorial capability matrix.
   One outer 1px frame, square corners, no shadow: cells are separated by a
   teal rule showing through a 1px gap. Cells 01 and 06 carry a Signal top rule
   and a pale teal wash as a surface accent only — nothing here is clickable,
   so there is no hover affordance.
   ========================================================================== */

.capmatrix {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background-color: rgba(17, 99, 106, 0.22);
  border: 1px solid rgba(17, 99, 106, 0.22);
  border-radius: 0;
  margin-block-start: clamp(26px, 3vw, 38px);
}

.capmatrix__cell {
  position: relative;
  padding: 28px 20px;
  border-radius: 0;
  background-color: var(--c-frost);
  box-shadow: none;
}

.capmatrix__cell--accent {
  background-image: linear-gradient(
    145deg,
    rgba(22, 185, 183, 0.1) 0%,
    rgba(22, 185, 183, 0) 62%
  );
}

.capmatrix__cell--accent::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--c-signal);
}

.capmatrix__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.capmatrix__index {
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--c-teal);
}

.capmatrix__icon {
  inline-size: 20px;
  block-size: 20px;
  color: var(--c-teal);
  opacity: 0.85;
}

.capmatrix__name {
  margin-block-start: 18px;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--c-depth);
}

.capmatrix__text {
  margin-block-start: 8px;
  max-inline-size: 42ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

@media (min-width: 768px) {
  .capmatrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capmatrix__cell {
    padding: 26px 22px;
  }
}

@media (min-width: 1024px) {
  .capmatrix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .capmatrix__cell {
    padding: 24px;
  }

  .capmatrix__text {
    font-size: 15px;
  }
}

/* --- Audits: centred perspective block ---------------------------------- */

.svc-centered {
  max-inline-size: 880px;
  margin-inline: auto;
}

.svc-centered .svc-section__head {
  display: block;
}

.svc-centered .svc-section__title {
  max-inline-size: 24ch;
}

.svc-centered__prose {
  max-inline-size: 72ch;
  margin-block-start: 26px;
}

/* --- Audits: coverage matrix --------------------------------------------
   Delicate cells, not separator-only rows and not glass cards: a 1px rule
   between cells, a numeric marker, one selective Signal boundary and a
   restrained hover wash that never suggests the cell is a link. */

.covgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-block-start: clamp(26px, 3vw, 38px);
  background-color: rgba(17, 99, 106, 0.16);
  border: 1px solid rgba(17, 99, 106, 0.16);
}

.covcell {
  position: relative;
  padding: 22px 22px 26px;
  background-color: #eef4f3;
  transition: background-color 180ms var(--ease-standard);
}

.covcell--lead::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--c-signal);
}

.covcell__mark {
  display: block;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: rgba(17, 99, 106, 0.62);
}

.covcell__name {
  margin-block-start: 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-depth);
  text-wrap: balance;
}

.covcell__text {
  margin-block-start: 8px;
  max-inline-size: 42ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

@media (min-width: 768px) {
  .covgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .covgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A gentle highlight only: no pointer cursor, no lift, no border colour change
   that would read as a destination. */
@media (hover: hover) and (pointer: fine) {
  .covcell:hover {
    background-color: #f5faf9;
  }
}

/* --- Audits: receive + implementation in one band ----------------------- */

.svc-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.svc-pair__lead {
  margin-block-start: 20px;
  max-inline-size: 52ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-ink);
}

.svc-pair__note {
  margin-block-start: 20px;
  max-inline-size: 56ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink-muted);
}

.svc-pair__right {
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid rgba(17, 99, 106, 0.2);
  background-color: #e9f0ef;
  background-image: linear-gradient(160deg, #f2f7f6 0%, #e9f0ef 100%);
}

.svc-pair__title {
  font-size: clamp(26px, 2.8vw, 38px);
  max-inline-size: 20ch;
}

.svc-pair__right .prose {
  margin-block-start: 18px;
}

.svc-pair__right .prose p {
  font-size: 15.5px;
  color: var(--c-ink);
}

@media (min-width: 900px) {
  .svc-pair {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: clamp(40px, 4.4vw, 64px);
  }
}

@media (max-width: 768px) {
  .svc-pair {
    gap: 28px;
  }
}

/* --- Website Design: the one Depth → Teal band --------------------------
   "Designed for Real People, Across Devices" and "Your Website, Your
   Requirements" sit in one contiguous two-column band with light type. Copy is
   identical to the approved text; only its container changed.
   Frost (#E6ECEC) on Teal (#11636A) measures 5.83:1 and on Depth 12.05:1, so
   every paragraph clears AA even at the light end of the gradient. */

.svc-band {
  padding-block: clamp(56px, 6.4vw, 96px);
  background-image: linear-gradient(
    118deg,
    #102e33 0%,
    #0f3a40 44%,
    #11636a 100%
  );
  color: var(--c-frost);
  border-block: 1px solid rgba(22, 185, 183, 0.28);
}

.svc-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
}

.svc-band__col {
  padding-block-start: 22px;
  border-block-start: 1px solid rgba(230, 236, 236, 0.3);
}

.svc-band__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(29px, 3.4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--c-frost);
  max-inline-size: 22ch;
  text-wrap: balance;
}

.svc-band__prose {
  margin-block-start: 20px;
  max-inline-size: 52ch;
}

.svc-band__prose p {
  margin-block-start: 14px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-frost);
}

.svc-band__prose p:first-child {
  margin-block-start: 0;
}

@media (min-width: 900px) {
  .svc-band__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(48px, 5vw, 80px);
  }

  .svc-band__col {
    padding-block-start: 26px;
  }
}

/* --- Title-left / body-right section split ----------------------------- */

.svc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.svc-split__body {
  min-inline-size: 0;
}

@media (min-width: 900px) {
  .svc-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
  }

  .svc-split__head {
    grid-column: 1 / span 5;
    position: sticky;
    top: calc(var(--anchor-offset) + 16px);
  }

  .svc-split__body {
    grid-column: 7 / span 6;
  }
}

/* --- Deeper inset panel ------------------------------------------------- */

.panel--inset {
  position: relative;
  background-image: linear-gradient(
    158deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(238, 246, 245, 0.6) 56%,
    rgba(226, 237, 236, 0.66) 100%
  );
  box-shadow: 0 30px 56px -44px rgba(16, 46, 51, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -22px 34px -34px rgba(17, 99, 106, 0.45);
}

/* --- Services overview supporting panels ------------------------------- */

.svc-panel__aside {
  position: relative;
  padding: 24px 24px 22px;
  border: 1px solid rgba(17, 99, 106, 0.18);
  border-radius: 14px;
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.76) 0%,
    rgba(238, 246, 245, 0.55) 58%,
    rgba(224, 235, 234, 0.6) 100%
  );
  box-shadow: 0 32px 60px -48px rgba(16, 46, 51, 0.62),
    0 4px 14px -12px rgba(16, 46, 51, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -20px 30px -30px rgba(17, 99, 106, 0.4);
}

.svc-panel__aside::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 22px;
  block-size: 1px;
  background: linear-gradient(
    90deg,
    rgba(22, 185, 183, 0),
    rgba(22, 185, 183, 0.75),
    rgba(22, 185, 183, 0)
  );
}

@media (min-width: 900px) {
  .svc-panel__aside {
    margin-block-start: 6px;
  }
}

/* --- Consulting engagement panels -------------------------------------- */

.split__item {
  position: relative;
  padding: 24px 26px;
  border: 1px solid rgba(17, 99, 106, 0.18);
  border-radius: 14px;
  background-image: linear-gradient(
    158deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(236, 245, 244, 0.55) 100%
  );
  box-shadow: 0 26px 48px -42px rgba(16, 46, 51, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

/* ==========================================================================
   CONSULTING FLOW — inputs → processes → outputs
   Illustrative only. Real business information types, no invented metrics.
   ========================================================================== */

/* Hero panel: one balanced architectural plane on the right. The three stages
   are real DOM text, contained as a drawing rather than three identical form
   boxes: a nested inner frame, floor datums, a deep chamber for Processes, and
   one structural shaft that carries the flow. The shaft draws once on entry
   (2.4 s) with a single travelling spark; nothing loops, nothing animates
   under reduced motion, and the stages read in DOM order without any of it.
   The stage labels sit in the drawing's gutter, on the shaft, as markers. */

/* The flow panel hugs its three stages: a fixed 4:3 / 5:4 box would crop them
   on a narrow screen and leave dead air on a wide one. Specificity beats the
   shared .viz aspect-ratio at every breakpoint. */
.svc-hero__viz.viz--flow {
  aspect-ratio: auto;
}

.flowpanel {
  --rail: 44px; /* centre of the shaft, from the panel's left edge */
  --rail-w: 24px; /* width of the shaft channel */
  position: relative;
  display: grid;
  align-content: center;
  padding: 38px 30px 34px 24px;
  isolation: isolate;
}

/* At desktop the drawing takes the height of a section: three floors spread
   over the panel so the shaft reads as a vertical path, not a list. */
@media (min-width: 1024px) {
  .flowpanel {
    align-content: space-between;
    min-block-size: 400px;
  }
}

/* A second, inset frame: the illustration is a drawing inside a drawing. */
.flowpanel__frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(17, 99, 106, 0.1);
  border-radius: 8px;
  pointer-events: none;
}

/* The connective path: a shaft, not an arrow. Two hairlines hold a pale core;
   the lit core draws once and the spark travels its length once. */
.flowpanel__shaft {
  position: absolute;
  inset-block: 30px;
  inset-inline-start: calc(var(--rail) - var(--rail-w) / 2);
  inline-size: var(--rail-w);
  border-inline: 1px solid rgba(17, 99, 106, 0.24);
  background: linear-gradient(
    180deg,
    rgba(22, 185, 183, 0.1) 0%,
    rgba(17, 99, 106, 0.07) 55%,
    rgba(17, 99, 106, 0.04) 100%
  );
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 20px,
    #000 calc(100% - 20px),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 20px,
    #000 calc(100% - 20px),
    transparent 100%
  );
}

.flowpanel__shaft-draw {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: 2px;
  margin-inline-start: -1px;
  border-radius: 1px;
  background: linear-gradient(
    180deg,
    rgba(22, 185, 183, 0.35) 0%,
    rgba(22, 185, 183, 0.8) 46%,
    rgba(17, 99, 106, 0.55) 100%
  );
  transform-origin: top center;
}

.flowpanel__spark {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: 6px;
  block-size: 6px;
  margin-inline-start: -3px;
  border-radius: 50%;
  background: var(--c-signal);
  box-shadow: 0 0 10px 2px rgba(22, 185, 183, 0.5);
  opacity: 0;
}

/* Stages are floors of the drawing: a datum rule each, one deep chamber for
   the Processes stage. No stage is a form field; nothing has input chrome. */
.flowpanel__stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  padding-block: 22px 24px;
}

.flowpanel__stage:first-of-type {
  padding-block-start: 16px;
}

.flowpanel__stage + .flowpanel__stage {
  border-block-start: 1px solid rgba(17, 99, 106, 0.14);
}

/* The flow continues downwards through the datum between stages. */
.flowpanel__stage:not(:last-of-type)::after {
  content: '';
  position: absolute;
  inset-block-end: -5px;
  inset-inline-start: 15.5px;
  inline-size: 9px;
  block-size: 9px;
  border-inline-end: 1.5px solid rgba(17, 99, 106, 0.45);
  border-block-end: 1.5px solid rgba(17, 99, 106, 0.45);
  transform: rotate(45deg);
}

/* Stage labels belong to the drawing: they sit in the gutter, attached to the
   shaft by a node ring, never as a caption inside a box. */
.flowpanel__label {
  position: relative;
  padding-inline-start: 44px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-teal);
  overflow-wrap: anywhere;
}

.flowpanel__label::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 14.5px;
  inline-size: 11px;
  block-size: 11px;
  border: 1px solid rgba(17, 99, 106, 0.45);
  border-radius: 50%;
  background: #f1f7f6;
  box-shadow: 0 0 0 3px rgba(241, 247, 246, 0.9);
}

.flowpanel__stage--core .flowpanel__label::before {
  border-color: rgba(22, 185, 183, 0.85);
  background: #eaf7f6;
  box-shadow: 0 0 0 3px rgba(234, 247, 246, 0.9),
    0 0 12px 1px rgba(22, 185, 183, 0.25);
}

/* Items are annotations on the drawing: a hairline tick and a word, not a pill
   that could be mistaken for an input. */
.flowpanel__chips {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  row-gap: 8px;
  margin-block-start: 1px;
}

.flowpanel__chips li {
  position: relative;
  padding-inline-start: 13px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-ink);
}

.flowpanel__chips li::before {
  content: '';
  position: absolute;
  inset-block-start: 0.72em;
  inset-inline-start: 0;
  inline-size: 6px;
  block-size: 1px;
  background: rgba(17, 99, 106, 0.5);
}

/* Processes: a chamber nested inside the drawing, with its own inner frame. */
.flowpanel__chips--core {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 8px;
  margin-block-start: 0;
  padding: 15px 18px 16px;
  border: 1px solid rgba(22, 185, 183, 0.42);
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(22, 185, 183, 0.09) 0%,
    rgba(22, 185, 183, 0.03) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  outline: 1px solid rgba(17, 99, 106, 0.12);
  outline-offset: 4px;
}

.flowpanel__chips--core li {
  color: var(--c-depth);
}

.flowpanel__chips--core li::before {
  inline-size: 7px;
  background: var(--c-signal);
}

@media (max-width: 599px) {
  .flowpanel {
    --rail: 30px;
    --rail-w: 14px;
    padding: 24px 18px 22px 16px;
  }

  .flowpanel__stage {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    padding-block: 18px 20px;
    padding-inline-start: 28px;
  }

  .flowpanel__label {
    padding-inline-start: 0;
  }

  .flowpanel__label::before {
    inset-block-start: -0.5px;
    inset-inline-start: -19.5px;
  }

  .flowpanel__stage:not(:last-of-type)::after {
    inset-inline-start: 9.5px;
  }

  .flowpanel__chips {
    column-gap: 18px;
  }

  .flowpanel__chips--core {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 13px 14px 14px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ddt-flow-shaft {
    from {
      transform: scaleY(0);
    }
    to {
      transform: scaleY(1);
    }
  }

  @keyframes ddt-flow-spark {
    0% {
      inset-block-start: 0;
      opacity: 0;
    }
    12% {
      opacity: 1;
    }
    88% {
      opacity: 1;
    }
    100% {
      inset-block-start: 100%;
      opacity: 0;
    }
  }

  html.js .flowpanel__shaft-draw {
    animation: ddt-flow-shaft 2.4s var(--ease-arrive) 1 both;
  }

  html.js .flowpanel__spark {
    animation: ddt-flow-spark 2.4s var(--ease-standard) 240ms 1 both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flowpanel__spark {
    display: none;
  }

  .flowpanel__shaft-draw {
    transform: none;
  }
}

/* Full-width information flow */
.flowfig {
  margin: clamp(28px, 3.6vw, 44px) 0 0;
  padding: clamp(20px, 2.6vw, 32px);
  border: 1px solid rgba(17, 99, 106, 0.18);
  border-radius: 14px;
  background-image: radial-gradient(
      80% 120% at 50% -20%,
      rgba(22, 185, 183, 0.12),
      rgba(22, 185, 183, 0) 62%
    ),
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(238, 246, 245, 0.55) 100%
    );
  box-shadow: 0 30px 58px -48px rgba(16, 46, 51, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.flowfig__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.flowfig__col {
  padding: 16px 16px 18px;
  border: 1px solid rgba(17, 99, 106, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
}

.flowfig__col--core {
  border-color: rgba(22, 185, 183, 0.55);
  background: rgba(22, 185, 183, 0.09);
}

.flowfig__title {
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-teal);
}

.flowfig__list {
  margin-block-start: 12px;
  display: grid;
  gap: 7px;
}

.flowfig__list li {
  position: relative;
  padding-inline-start: 14px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-ink);
}

.flowfig__list li::before {
  content: '';
  position: absolute;
  inset-block-start: 7px;
  inset-inline-start: 0;
  inline-size: 5px;
  block-size: 1px;
  background: var(--c-signal);
}

.flowfig__arrow {
  display: flex;
  justify-content: center;
  color: rgba(17, 99, 106, 0.62);
}

.flowfig__arrow svg {
  inline-size: 32px;
  block-size: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg);
}

.flowfig__cap {
  margin-block-start: 16px;
  padding-block-start: 12px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.14);
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-ink-muted);
}

@media (min-width: 800px) {
  .flowfig__grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
  }

  .flowfig__arrow svg {
    transform: none;
  }
}

/* --- Centred editorial block (audits + consulting) ---------------------- */

.svc-centered {
  max-inline-size: 880px;
  margin-inline: auto;
}

.svc-centered .svc-section__head {
  display: block;
}

.svc-centered .svc-section__title {
  max-inline-size: 24ch;
}

.svc-centered__prose {
  max-inline-size: 72ch;
  margin-block-start: 26px;
}

/* --- "What Can We Help You Explore?": restrained lined matrix ----------- */

.exploregrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: clamp(24px, 3vw, 36px);
  border-block-start: 1px solid rgba(17, 99, 106, 0.26);
}

.explorecell {
  position: relative;
  padding: 22px 0 24px 26px;
  border-block-end: 1px solid rgba(17, 99, 106, 0.14);
}

.explorecell--tint {
  background-image: linear-gradient(
    90deg,
    rgba(22, 185, 183, 0.055),
    rgba(22, 185, 183, 0)
  );
}

.explorecell__mark {
  position: absolute;
  inset-block-start: 29px;
  inset-inline-start: 0;
  inline-size: 9px;
  block-size: 1px;
  background: var(--c-signal);
}

.explorecell__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-depth);
}

.explorecell__text {
  margin-block-start: 8px;
  max-inline-size: 42ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

@media (min-width: 700px) {
  .exploregrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
}

@media (min-width: 1100px) {
  .exploregrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Deliverables + process narrative in one section -------------------- */

.takeaway {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.takeaway__lead {
  margin-block-start: 20px;
  max-inline-size: 52ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-ink);
}

.takeaway__note {
  margin-block-start: 20px;
  max-inline-size: 56ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink-muted);
}

.takeaway__col--narrative {
  padding-block-start: 26px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.22);
}

.takeaway__col--narrative .prose {
  margin-block-start: 20px;
}

@media (min-width: 900px) {
  .takeaway {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(44px, 5vw, 80px);
  }

  .takeaway__col--narrative {
    padding-block-start: 26px;
    border-block-start: 1px solid rgba(17, 99, 106, 0.22);
  }

  .takeaway__col--list {
    padding-block-start: 26px;
    border-block-start: 1px solid rgba(17, 99, 106, 0.22);
  }
}

/* --- Inset note panel --------------------------------------------------- */

.panel {
  padding: clamp(20px, 2.6vw, 32px);
  border: 1px solid rgba(17, 99, 106, 0.16);
  border-radius: var(--r-panel);
  background: linear-gradient(160deg, #f4f9f8 0%, #eaf1f0 100%);
  box-shadow: var(--edge-light);
}

/* --- Bullet list with rules -------------------------------------------- */
.bullets {
  margin-block-start: 26px;
  max-inline-size: 64ch;
}

.bullets li {
  position: relative;
  padding: 12px 0 12px 20px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.16);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-ink);
}

.bullets li::before {
  content: '';
  position: absolute;
  inset-block-start: 20px;
  inset-inline-start: 0;
  inline-size: 6px;
  block-size: 6px;
  background: var(--c-signal);
  transform: rotate(45deg);
}

/* --- Numbered steps ----------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-block-start: 32px;
}

.steps__item {
  border-block-start: 1px solid rgba(17, 99, 106, 0.22);
  padding-block-start: 16px;
}

.steps__num {
  display: block;
  margin-block-end: 10px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  color: var(--c-teal);
  font-variant-numeric: tabular-nums;
}

.steps__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-depth);
}

.steps__text {
  margin-block-start: 8px;
  max-inline-size: 38ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
  }
}

@media (min-width: 1100px) {
  .steps--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Pull statement ----------------------------------------------------- */

.pull {
  margin-block: 32px 0;
  padding: 24px 0 24px 24px;
  border-inline-start: 2px solid var(--c-signal);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--c-depth);
  max-inline-size: 44ch;
}

/* --- Two-column split (consulting engagements) -------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-block-start: 28px;
}

.split__item {
  padding: 22px 24px;
  border: 1px solid rgba(17, 99, 106, 0.16);
  border-radius: var(--r-panel);
  background: rgba(255, 255, 255, 0.4);
}

.split__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-depth);
}

.split__text {
  margin-block-start: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

@media (min-width: 800px) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   SERVICE DETAIL — closing CTA + form
   ========================================================================== */

.svc-cta {
  padding-block: clamp(56px, 6.6vw, 96px);
  /* Surface A by default; pages that need B1 add .band-b1. */
  background: var(--c-frost);
  border-block-start: 1px solid rgba(17, 99, 106, 0.16);
}

.svc-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.svc-cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--c-depth);
  max-inline-size: 18ch;
  text-wrap: balance;
}

.svc-cta__body {
  margin-block-start: 16px;
  max-inline-size: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

.svc-cta__sign {
  margin-block-start: 24px;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.2;
  color: var(--c-depth);
}

.svc-cta__email {
  margin-block-start: 8px;
  font-size: 15px;
}

@media (min-width: 1024px) {
  .svc-cta__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px;
  }

  .svc-cta__text {
    grid-column: 1 / span 4;
  }

  .svc-cta__form {
    grid-column: 6 / span 7;
  }
}

/* --- Purchase-not-available treatment (Website Audits) ------------------ */

.purchase {
  margin-block-start: 28px;
  padding: 20px 22px;
  border: 1px dashed rgba(17, 99, 106, 0.38);
  border-radius: var(--r-panel);
  background: rgba(255, 255, 255, 0.4);
}

.purchase__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink-muted);
}

.purchase__label::before {
  content: '';
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
}

.purchase__status {
  display: block;
  margin-block-start: 6px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-teal);
}

.purchase__note {
  margin-block-start: 10px;
  max-inline-size: 40ch;
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  color: var(--c-ink-muted);
}

/* ==========================================================================
   FOCAL GRAPHICS
   ========================================================================== */

.viz {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-panel);
  border: 1px solid rgba(17, 99, 106, 0.18);
  background: linear-gradient(160deg, #f3f8f7 0%, #e2ebea 100%);
  box-shadow: var(--shadow-panel), var(--edge-light);
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 1024px) {
  .viz {
    aspect-ratio: 5 / 4;
  }
}

/* --- Website Design: layered windows ------------------------------------ */

.devices {
  position: absolute;
  inset: 8% 6% 6%;
  perspective: 1400px;
}

.device {
  position: absolute;
  border: 1px solid rgba(17, 99, 106, 0.3);
  border-radius: 10px;
  background: linear-gradient(165deg, #fbfdfd 0%, #eef5f4 100%);
  box-shadow: 0 24px 48px -30px rgba(16, 46, 51, 0.5);
  overflow: hidden;
  transform-style: preserve-3d;
}

.device__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  block-size: 22px;
  padding-inline: 10px;
  border-block-end: 1px solid rgba(17, 99, 106, 0.16);
  background: rgba(255, 255, 255, 0.7);
}

.device__dot {
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: rgba(17, 99, 106, 0.28);
}

.device__body {
  position: relative;
  block-size: calc(100% - 22px);
  padding: 12px;
}

/* Empty abstract bands — no text, no imitation of a live site. */
.device__band {
  block-size: 34%;
  border-radius: 5px;
  background: linear-gradient(
    120deg,
    rgba(17, 99, 106, 0.16) 0%,
    rgba(22, 185, 183, 0.22) 60%,
    rgba(230, 236, 236, 0.2) 100%
  );
}

.device__line {
  block-size: 6px;
  margin-block-start: 9px;
  border-radius: 3px;
  background: rgba(17, 99, 106, 0.14);
}

.device__line--short {
  inline-size: 62%;
}

.device__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-block-start: 12px;
}

.device__cols span {
  display: block;
  block-size: 34px;
  border-radius: 4px;
  border: 1px solid rgba(17, 99, 106, 0.16);
  background: rgba(255, 255, 255, 0.55);
}

.device--desktop {
  inset-block-start: 4%;
  inset-inline-start: 0;
  inline-size: 78%;
  block-size: 72%;
  transform: rotateY(-13deg) rotateX(4deg) translateZ(-20px);
  z-index: 1;
}

.device--tablet {
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 34%;
  block-size: 62%;
  transform: rotateY(-13deg) rotateX(4deg) translateZ(40px);
  z-index: 2;
}

.device--phone {
  inset-block-end: 0;
  inset-inline-start: 8%;
  inline-size: 21%;
  block-size: 56%;
  border-radius: 14px;
  transform: rotateY(-13deg) rotateX(4deg) translateZ(90px);
  z-index: 3;
}

.device--phone .device__bar {
  justify-content: center;
}

.device--phone .device__body {
  padding: 8px;
}

.device--phone .device__cols {
  grid-template-columns: 1fr;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ddt-device-in {
    from {
      opacity: 0;
      transform: rotateY(-13deg) rotateX(9deg) translate3d(0, 26px, var(--z, 0px))
        scale(0.97);
    }
    to {
      opacity: 1;
      transform: rotateY(-13deg) rotateX(4deg) translate3d(0, 0, var(--z, 0px))
        scale(1);
    }
  }

  html.js .device--desktop {
    --z: -20px;
    animation: ddt-device-in 820ms var(--ease-arrive) 120ms backwards;
  }

  html.js .device--tablet {
    --z: 40px;
    animation: ddt-device-in 820ms var(--ease-arrive) 220ms backwards;
  }

  html.js .device--phone {
    --z: 90px;
    animation: ddt-device-in 820ms var(--ease-arrive) 320ms backwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .device--desktop,
  .device--tablet,
  .device--phone {
    animation: none;
  }
}

/* --- Digital Tools: modular panels ------------------------------------- */

.modules {
  position: absolute;
  inset: 7%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.module {
  position: relative;
  border: 1px solid rgba(17, 99, 106, 0.24);
  border-radius: 8px;
  background: linear-gradient(160deg, #fbfdfd 0%, #ecf4f3 100%);
  box-shadow: 0 14px 26px -22px rgba(16, 46, 51, 0.45);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
}

.module__label {
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(17, 99, 106, 0.6);
}

.module__bar {
  block-size: 6px;
  border-radius: 3px;
  background: rgba(17, 99, 106, 0.2);
}

.module__bar--signal {
  background: rgba(22, 185, 183, 0.6);
}

.module__bar--short {
  inline-size: 58%;
}

.module__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.module__tick {
  inline-size: 8px;
  block-size: 8px;
  border: 1px solid rgba(17, 99, 106, 0.4);
  border-radius: 2px;
  flex: none;
}

.module__tick--on {
  background: var(--c-signal);
  border-color: var(--c-signal);
}

.module__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-block-start: auto;
}

.module__grid span {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(17, 99, 106, 0.14);
}

.module__grid span.is-marked {
  background: rgba(22, 185, 183, 0.62);
}

.module__ring {
  inline-size: 38px;
  block-size: 38px;
  margin-block: auto;
  border-radius: 50%;
  border: 2px solid rgba(17, 99, 106, 0.18);
  border-block-start-color: var(--c-signal);
  border-inline-end-color: var(--c-signal);
}

.module--wide {
  grid-column: span 2;
}

.module__link {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-end: 10px;
  inline-size: 18px;
  block-size: 1px;
  background: rgba(17, 99, 106, 0.35);
}

/* Progressive enhancement only: gated on html.js, so a visitor without
   scripting sees every panel in its final state. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ddt-module-in {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  html.js .module {
    animation: ddt-module-in 480ms var(--ease-arrive) backwards;
    animation-delay: calc(140ms + var(--m, 0) * 80ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .module {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* --- Website Audits: illustrative diagnostic --------------------------- */

.audit {
  position: absolute;
  inset: 7% 6% 14%;
  border: 1px solid rgba(17, 99, 106, 0.28);
  border-radius: 8px;
  background: #f9fcfb;
  overflow: hidden;
}

.audit__bar {
  block-size: 18px;
  border-block-end: 1px solid rgba(17, 99, 106, 0.16);
  background: rgba(255, 255, 255, 0.8);
}

.audit__grid {
  display: grid;
  grid-template-columns: 26% 1fr;
  block-size: calc(100% - 18px);
}

.audit__side {
  border-inline-end: 1px solid rgba(17, 99, 106, 0.14);
  padding: 10px;
  display: grid;
  align-content: start;
  gap: 6px;
}

.audit__side span {
  display: block;
  block-size: 5px;
  border-radius: 3px;
  background: rgba(17, 99, 106, 0.16);
}

.audit__main {
  padding: 10px 12px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.audit__hero {
  block-size: 30%;
  border-radius: 4px;
  background: linear-gradient(
    110deg,
    rgba(17, 99, 106, 0.2) 0%,
    rgba(22, 185, 183, 0.24) 100%
  );
}

.audit__line {
  block-size: 6px;
  border-radius: 3px;
  background: rgba(17, 99, 106, 0.14);
}

.audit__line--half {
  inline-size: 55%;
}

.audit__blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.audit__blocks span {
  display: block;
  block-size: 30px;
  border-radius: 4px;
  border: 1px solid rgba(17, 99, 106, 0.16);
}

.audit__scan {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 2px;
  background: linear-gradient(
    90deg,
    rgba(22, 185, 183, 0) 0%,
    rgba(22, 185, 183, 0.9) 20%,
    rgba(230, 246, 245, 0.95) 50%,
    rgba(22, 185, 183, 0.9) 80%,
    rgba(22, 185, 183, 0) 100%
  );
  box-shadow: 0 0 14px 1px rgba(22, 185, 183, 0.5);
  pointer-events: none;
}

.audit__callout {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(17, 99, 106, 0.36);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-teal);
  box-shadow: 0 6px 14px -10px rgba(16, 46, 51, 0.5);
  white-space: nowrap;
}

.audit__callout::before {
  content: '';
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--c-signal);
}

.audit__callout--nav {
  inset-block-start: 22%;
  inset-inline-start: 4%;
}

.audit__callout--mobile {
  inset-block-start: 56%;
  inset-inline-end: 3%;
}

.audit__callout--a11y {
  inset-block-end: 19%;
  inset-inline-start: 22%;
}

.audit__caption {
  position: absolute;
  inset-block-end: 4%;
  inset-inline-start: 6%;
  inset-inline-end: 6%;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--c-ink-muted);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ddt-scan {
    0% {
      inset-block-start: 0%;
      opacity: 0;
    }
    12% {
      opacity: 1;
    }
    88% {
      opacity: 1;
    }
    100% {
      inset-block-start: 99%;
      opacity: 0;
    }
  }

  html.js .audit__scan {
    animation: ddt-scan 2.4s var(--ease-standard) 300ms backwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .audit__scan {
    inset-block-start: 46%;
    opacity: 0.8;
  }
}

/* ==========================================================================
   Error page
   ========================================================================== */

.error {
  min-height: clamp(560px, 76svh, 760px);
  display: flex;
  align-items: center;
  padding-block: calc(var(--anchor-offset) + 40px) 80px;
  background: var(--c-depth);
  color: var(--c-frost);
  border-block-end: 1px solid rgba(230, 236, 236, 0.16);
}

.error__title {
  margin-block-start: 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--c-frost);
  max-inline-size: 18ch;
  text-wrap: balance;
}

.error__body {
  margin-block-start: 18px;
  max-inline-size: 56ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-text-on-dark);
}

.error__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin-block-start: 26px;
  padding-block-start: 18px;
  border-block-start: 1px solid rgba(230, 236, 236, 0.2);
}

/* ==========================================================================
   DESKTOP RHYTHM — ≥1024 only.
   Cuts doubled interior padding on services and detail pages. Type sizes and
   every sub-1024 value are untouched.
   ========================================================================== */

@media (min-width: 1024px) {
  .svc-jump {
    margin-block-start: 32px;
  }

  .svc-list {
    padding-block: 64px 76px;
  }

  .svc-panel {
    padding-block: 48px;
  }

  .svc-section {
    padding-block: 62px;
  }

  .continuation {
    padding-block: 52px;
  }

  .svc-hero {
    padding-block-end: 56px;
  }

  .svc-cta {
    padding-block: 72px;
  }

  .process {
    padding-block: 76px;
  }

  .ownership {
    padding-block: 84px;
  }

  .index-cta {
    padding-block: 76px;
  }
}

/* ==========================================================================
   Responsive guards
   ========================================================================== */
@media (max-width: 899px) {
  .svc-panel__index {
    color: rgba(17, 99, 106, 0.34);
  }
}

@media (max-width: 480px) {
  .audit__callout {
    font-size: 8px;
    padding: 4px 6px;
  }

  .audit__caption {
    font-size: 11px;
  }
}

@media (max-width: 479px) {
  .flow-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Content must never stay hidden when a scroll timeline is not running:
   print, and any engine that ignores the animation, show the final state. */
@media print {
  .svc-panel,
  .flow-map__node {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ==========================================================================
   Inquiry form — shared field material, states and layout.
   Fields inherit the site palette; the submit control is the sitewide .btn.
   ========================================================================== */

.form-shell {
  position: relative;
  padding: clamp(22px, 3.4vw, 40px);
  border: 1px solid rgba(17, 99, 106, 0.16);
  border-radius: var(--r-panel);
  background: linear-gradient(160deg, #f4f9f8 0%, #eaf1f0 100%);
  box-shadow: var(--shadow-panel), var(--edge-light);
}

.form__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-depth);
}

.form {
  margin-block-start: 24px;
}

.form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 700px) {
  .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
  }

  .field--wide {
    grid-column: 1 / -1;
  }
}

.field {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.field__label {
  display: block;
  margin-block-end: 8px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--c-depth);
}

.field__req,
.field__opt {
  font-weight: 400;
  color: var(--c-ink-muted);
}

.field__input {
  inline-size: 100%;
  min-block-size: 50px;
  padding: 12px 14px;
  border: 1px solid var(--c-field-edge);
  border-radius: var(--r-control);
  background-color: var(--c-field-bg);
  color: var(--c-depth);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--dur-feedback) var(--ease-standard),
    background-color var(--dur-feedback) var(--ease-standard);
}

.field__input:hover {
  border-color: rgba(17, 99, 106, 0.42);
}

.field__input:focus-visible {
  outline: none;
  border-color: var(--c-field-edge-focus);
  background-color: #ffffff;
  box-shadow: 0 0 0 2px var(--c-focus-a), 0 0 0 4px var(--c-focus-b);
}

.field__textarea {
  min-block-size: 156px;
  resize: vertical;
}

.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23102e33' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
}

.field__money {
  position: relative;
}

.field__currency {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 14px;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
  color: var(--c-ink-muted);
  pointer-events: none;
}

.field__input--money {
  padding-inline-start: 28px;
}

.field__hint {
  margin-block-start: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-ink-muted);
  max-inline-size: 52ch;
}

.field__error {
  margin-block-start: 8px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--c-error);
}

.field__error::before {
  content: '';
  display: inline-block;
  inline-size: 5px;
  block-size: 5px;
  margin-inline-end: 7px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 2px;
}

.field__input[aria-invalid='true'] {
  border-color: var(--c-error);
  background-color: #fdf5f3;
}

.form__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-block-start: 28px;
}

.form__note {
  max-inline-size: 54ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-ink-muted);
}

.form__status {
  margin-block-start: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-teal);
  min-block-size: 0;
}

.form__noscript {
  margin-block-start: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(17, 99, 106, 0.22);
  border-radius: var(--r-control);
  background: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-ink);
}

.form__noscript a,
.form__direct a {
  color: var(--c-teal);
  text-decoration: underline;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

.form__direct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-block-start: 22px;
  padding-block-start: 18px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.16);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-ink-muted);
}

/* --- Server / validation alert ------------------------------------------- */

.form__alert {
  margin-block-end: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(140, 47, 36, 0.35);
  border-radius: var(--r-control);
  background: #fdf5f3;
  color: var(--c-error);
  font-size: 14px;
  line-height: 1.55;
}

.form__alert:focus {
  outline: 2px solid var(--c-error);
  outline-offset: 2px;
}

.form__alert p {
  margin: 0;
}

.form__alert p + p {
  margin-block-start: 8px;
}

.form__alert a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.form__alert ul {
  margin: 10px 0 0;
  padding-inline-start: 18px;
  list-style: disc;
}

.form__alert li + li {
  margin-block-start: 4px;
}

/* --- Honeypot: off-screen, not tabbable, hidden from assistive tech ------ */

.form__hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.form__turnstile {
  margin-block-start: 22px;
}

.btn[disabled] {
  cursor: progress;
  opacity: 0.82;
}

/* --- Approved success panel ---------------------------------------------- */

.form-success {
  padding-block: 8px;
}

.form-success__title:focus {
  outline: 2px solid var(--c-focus-b);
  outline-offset: 4px;
  border-radius: 4px;
}

.form-success p {
  margin-block-start: 16px;
  max-inline-size: 56ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
}

.form-success__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-block-start: 28px;
}

@media (max-width: 639px) {
  .form__actions .btn {
    inline-size: 100%;
  }
}
/* ==========================================================================
   Interior pages — Pass B: Projects, About, FAQ, Journal, Article, Contact.
   Reuses the Pass A tokens, buttons, navigation, footer and form materials.
   One new stylesheet so the approved homepage layer stays intact.
   ========================================================================== */

/* --- Shared interior hero ------------------------------------------------ */

.pg-hero {
  padding-block: calc(var(--anchor-offset) + 40px) clamp(32px, 4.4vw, 56px);
}

.pg-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.pg-hero__title {
  margin-block-start: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 8vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.042em;
  color: var(--c-depth);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.pg-hero__lead {
  max-inline-size: 46ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-ink);
}

.pg-hero__note {
  margin-block-start: 14px;
  max-inline-size: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

@media (min-width: 900px) {
  .pg-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: end;
  }

  .pg-hero__main {
    grid-column: 1 / span 7;
  }

  .pg-hero__aside {
    grid-column: 9 / span 4;
    padding-block-end: 6px;
  }
}

/* --- Closing invitation band (shared by four interior routes) ------------ */

.pg-cta {
  padding-block: clamp(56px, 6.6vw, 96px);
  background: #eef4f3;
  border-block-start: 1px solid rgba(17, 99, 106, 0.16);
}

.pg-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.pg-cta__title {
  margin-block-start: 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--c-depth);
  max-inline-size: 20ch;
  text-wrap: balance;
}

.pg-cta__body {
  display: grid;
  gap: 14px;
  max-inline-size: 48ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

.pg-cta__sign {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.2;
  color: var(--c-depth);
}

.pg-cta__email {
  font-size: 15px;
}

.pg-cta__action {
  margin-block-start: 4px;
}

@media (min-width: 900px) {
  .pg-cta__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
  }

  .pg-cta__grid > div:first-child {
    grid-column: 1 / span 5;
  }

  .pg-cta__body {
    grid-column: 6 / span 4;
  }

  .pg-cta__action {
    grid-column: 10 / span 3;
    justify-self: end;
    margin-block-start: 0;
  }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

.about-hero {
  position: relative;
  overflow: clip;
  padding-block: calc(var(--anchor-offset) + 40px) clamp(44px, 5.4vw, 76px);
}

/* The owner's original full logo, used once as a signature. Transparent PNG/
   WebP, no plaque, no recolour, no crop, native 1:1 ratio. Its own tagline is
   part of the artwork and is never rewritten. */
.about-hero__mark {
  position: relative;
  inline-size: min(74vw, 320px);
  margin: 4px 0 0 auto;
  padding: clamp(8px, 2vw, 18px);
  isolation: isolate;
}

/* A soft teal halo behind the mark. Light, not a plate. */
.about-hero__mark::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 10% 0 4%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 46%,
    rgba(22, 185, 183, 0.12) 0%,
    rgba(22, 185, 183, 0.045) 44%,
    rgba(22, 185, 183, 0) 68%
  );
  pointer-events: none;
}

.about-hero__mark img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* The supplied file keeps generous transparent margins; the mark is simply
   given a generous box on a phone so the wordmark stays legible. The artwork
   is never cropped or scaled beyond its native 640px. */
@media (max-width: 899px) {
  .about-hero__mark {
    inline-size: min(92vw, 380px);
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ddt-mark-in {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  html.js .about-hero__mark {
    animation: ddt-mark-in 820ms var(--ease-arrive) 120ms backwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__mark {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.about-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.about-hero__title {
  margin-block-start: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.038em;
  color: var(--c-depth);
  text-wrap: balance;
  overflow-wrap: break-word;
  max-inline-size: 20ch;
}

.about-hero__echo {
  margin-block-start: 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  color: var(--c-teal);
}

.about-hero__body {
  display: grid;
  gap: 14px;
  max-inline-size: 52ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink);
}

@media (min-width: 900px) {
  /* Headline row 1 / col 1, logo row 1 / col 2 in flow, body row 2 / col 1.
     The logo is placed by the grid, never absolutely, so the optical distance
     between the headline and the mark is controlled by the column gap. */
  .about-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
    column-gap: clamp(32px, 3.2vw, 44px);
    align-items: start;
  }

  .about-hero__main {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    min-inline-size: 0;
  }

  .about-hero__body {
    grid-column: 1;
    grid-row: 2;
    padding-block-start: 0;
    margin-block-start: 40px;
  }

  .about-hero__mark {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    /* 378px box − 2 × 18px padding = a 342px mark: inside the 330–350px cap,
       never upscaled past its 640px source, and now close to the 321px
       headline block it is paired with. */
    inline-size: min(100%, 378px);
    margin: 0;
  }
}

.about-body {
  border-block-start: 1px solid rgba(17, 99, 106, 0.16);
}

.about-sec {
  padding-block: clamp(48px, 5.6vw, 84px);
}

.about-sec + .about-sec {
  border-block-start: 1px solid rgba(17, 99, 106, 0.16);
}

.about-sec__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.about-sec__title {
  margin-block-start: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(27px, 3.4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--c-depth);
  max-inline-size: 16ch;
  text-wrap: balance;
}

.about-sec__body {
  display: grid;
  gap: 14px;
  max-inline-size: 62ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink);
}

.about-sec__lead {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.45;
  color: var(--c-teal);
}

.about-cases {
  display: grid;
  gap: 0;
  margin-block: 6px;
  border-inline-start: 1px solid rgba(17, 99, 106, 0.28);
}

.about-cases li {
  padding: 8px 0 8px 18px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.35;
  color: var(--c-depth);
}

.about-cases--tight li {
  font-size: clamp(17px, 1.8vw, 20px);
}

.about-sign {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.25;
  color: var(--c-depth);
}

.about-pull {
  padding: 6px 0 6px 20px;
  border-inline-start: 2px solid var(--c-signal);
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--c-frost);
  max-inline-size: 30ch;
}

.about-sec--dark {
  background: var(--c-depth);
  color: var(--c-frost);
  border-block-start-color: rgba(22, 185, 183, 0.28);
}

.about-sec--dark .about-sec__title {
  color: var(--c-frost);
}

.about-sec--dark .about-sec__body {
  color: var(--c-text-on-dark);
}

@media (min-width: 900px) {
  .about-sec__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
  }

  .about-sec__label {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--anchor-offset) + 12px);
  }

  .about-sec__body {
    grid-column: 6 / span 7;
  }

  /* One alternating pairing: title right, body left (section 03). */
  .about-sec--flip .about-sec__label {
    grid-column: 9 / span 4;
    grid-row: 1;
  }

  .about-sec--flip .about-sec__body {
    grid-column: 1 / span 7;
    grid-row: 1;
  }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-hero {
  padding-block: calc(var(--anchor-offset) + 40px) clamp(28px, 3.6vw, 44px);
}

.faq-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: end;
}

.faq-hero__title {
  margin-block-start: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--c-depth);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.faq-hero__sub {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.3;
  color: var(--c-teal);
}

.faq-hero__intro {
  display: grid;
  gap: 12px;
  max-inline-size: 66ch;
  margin-block-start: 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink-muted);
}

@media (min-width: 900px) {
  .faq-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
  }

  .faq-hero__grid > div {
    grid-column: 1 / span 7;
  }

  .faq-hero__sub {
    grid-column: 9 / span 4;
    padding-block-end: 8px;
  }
}

.faq-body {
  padding-block: clamp(20px, 3vw, 36px) clamp(56px, 7vw, 96px);
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.faq-index {
  padding-block-end: 18px;
  border-block-end: 1px solid rgba(17, 99, 106, 0.16);
}

.faq-index__title {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.faq-index ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 16px;
  margin-block-start: 10px;
}

.faq-index__link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-block-size: 44px;
  padding-block: 10px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--c-depth);
}

.faq-index__link:hover {
  color: var(--c-teal);
}

.faq-index__num {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--c-teal);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
  .faq-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
  }

  .faq-index {
    grid-column: 1 / span 3;
    position: sticky;
    top: calc(var(--anchor-offset) + 8px);
    border-block-end: 0;
    padding-block-end: 0;
  }

  .faq-index ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-block-start: 12px;
  }

  .faq-groups {
    grid-column: 5 / span 8;
  }
}

.faq-group + .faq-group {
  margin-block-start: clamp(38px, 4.6vw, 60px);
}

.faq-group__head {
  padding-block-end: 14px;
}

.faq-group__title {
  margin-block-start: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(25px, 3.2vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--c-depth);
  scroll-margin-top: var(--anchor-offset);
}

.qa-list {
  border-block-start: 1px solid rgba(17, 99, 106, 0.26);
}

.qa {
  border-block-end: 1px solid rgba(17, 99, 106, 0.16);
  scroll-margin-top: var(--anchor-offset);
}

.qa[open] {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.qa__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  min-block-size: 56px;
  padding-block: 16px;
  /* Left interior padding: the question never starts on the rule. */
  padding-inline: 24px;
  cursor: pointer;
  list-style: none;
}

.qa__summary::-webkit-details-marker {
  display: none;
}

.qa__summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--c-focus-a), 0 0 0 4px var(--c-focus-b);
  border-radius: var(--r-xs);
}

.qa__question {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.4;
  font-weight: 600;
  color: var(--c-depth);
  max-inline-size: 46ch;
  transition: color var(--dur-feedback) var(--ease-standard);
}

.qa__summary:hover .qa__question {
  color: var(--c-teal);
}

.qa__icon {
  position: relative;
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 2px;
  border: 1px solid rgba(17, 99, 106, 0.34);
  border-radius: 50%;
}

.qa__bar {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 10px;
  block-size: 1px;
  background: var(--c-teal);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-material) var(--ease-standard),
    opacity var(--dur-material) var(--ease-standard);
}

.qa__bar--v {
  transform: translate(-50%, -50%) rotate(90deg);
}

.qa[open] .qa__bar--v {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.qa[open] .qa__icon {
  border-color: var(--c-teal);
  background: rgba(22, 185, 183, 0.1);
}

.qa__answer {
  padding: 0 24px 20px;
  max-inline-size: 72ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink);
}

@media (max-width: 700px) {
  .qa__summary {
    padding-inline: 18px;
  }

  .qa__answer {
    padding-inline: 18px;
  }
}

.qa__answer p + p {
  margin-block-start: 12px;
}

.qa__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  margin-block-start: 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.qa__link:hover {
  color: var(--c-teal);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes ddt-qa-in {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .qa[open] .qa__answer {
    animation: ddt-qa-in 200ms var(--ease-standard) both;
  }
}

/* ==========================================================================
   JOURNAL — index
   ========================================================================== */

.journal-hero {
  padding-block: calc(var(--anchor-offset) + 40px) clamp(32px, 4vw, 52px);
}

.journal-hero__title {
  margin-block-start: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.042em;
  color: var(--c-depth);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.journal-hero__sub {
  margin-block-start: 14px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.2;
  color: var(--c-teal);
}

.journal-hero__intro {
  display: grid;
  gap: 13px;
  max-inline-size: 68ch;
  margin-block-start: 24px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink-muted);
}

.journal-latest {
  padding-block: clamp(28px, 3.6vw, 44px) clamp(44px, 5.4vw, 72px);
  border-block-start: 1px solid rgba(17, 99, 106, 0.18);
}

.journal-latest__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  margin-block-end: 22px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--c-depth);
}

.journal-latest__count {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

/* --- Article card -------------------------------------------------------- */

.note-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid rgba(17, 99, 106, 0.2);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: var(--shadow-panel);
  transition: box-shadow var(--dur-material) var(--ease-standard),
    transform var(--dur-material) var(--ease-standard);
}

.note-card__cover {
  position: relative;
}

.note-card__text {
  padding: clamp(20px, 3vw, 36px);
  min-inline-size: 0;
}

.note-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-ink-muted);
}

.note-card__category {
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-teal);
}

.note-card__dot {
  color: rgba(17, 99, 106, 0.4);
}

.note-card__title {
  margin-block-start: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--c-depth);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.note-card__link {
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--dur-feedback) var(--ease-standard);
}

/* Whole card is one target: the title link covers it. */
.note-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.note-card {
  position: relative;
}

.note-card__desc {
  margin-block-start: 12px;
  max-inline-size: 58ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

.note-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-teal);
}

.note-card__more svg {
  inline-size: 12px;
  block-size: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-feedback) var(--ease-standard);
}

@media (hover: hover) {
  .note-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 54px -38px rgba(16, 46, 51, 0.45);
  }

  .note-card:hover .note-card__link {
    text-decoration-color: rgba(17, 99, 106, 0.6);
  }

  .note-card:hover .note-card__more svg {
    transform: translateX(3px);
  }
}

.note-card__link:focus-visible {
  outline: none;
  box-shadow: none;
}

.note-card:focus-within {
  box-shadow: 0 0 0 2px var(--c-focus-a), 0 0 0 4px var(--c-focus-b),
    var(--shadow-panel);
}

@media (min-width: 860px) {
  .note-card {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: stretch;
  }

  .note-card__cover {
    min-block-size: 100%;
  }
}

.journal-latest__note {
  margin-block-start: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-ink-muted);
  max-inline-size: 62ch;
}

/* --- Atmospheric cover (decorative) -------------------------------------- */

.jcover {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
  min-block-size: 220px;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(
      120% 90% at 82% 8%,
      rgba(22, 185, 183, 0.34) 0%,
      rgba(22, 185, 183, 0) 58%
    ),
    linear-gradient(158deg, #123b41 0%, #102e33 52%, #0b2529 100%);
}

.jcover--article {
  min-block-size: 200px;
  aspect-ratio: 28 / 7;
}

.jcover__glow {
  position: absolute;
  inset-block-start: -18%;
  inset-inline-start: 8%;
  inline-size: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(230, 246, 245, 0.5) 0%,
    rgba(22, 185, 183, 0.22) 38%,
    rgba(22, 185, 183, 0) 70%
  );
}

.jcover__arc {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: -46%;
  inline-size: 78%;
  aspect-ratio: 1;
  border: 1px solid rgba(230, 236, 236, 0.34);
  border-radius: 50%;
}

.jcover__arc::after {
  content: '';
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(22, 185, 183, 0.5);
  border-radius: 50%;
}

.jcover__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      rgba(230, 236, 236, 0.1) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(230, 236, 236, 0.1) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2));
}

/* Fine scan lines, drawn in CSS. Purely decorative: the layer carries no
   text and is hidden from assistive technology by the parent. */
.jcover__grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(230, 236, 236, 0.05) 0 1px,
    transparent 1px 4px
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.85) 38%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

.jcover--article .jcover__grid {
  background-size: 32px 32px;
}

.jcover__rule {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 22%;
  inline-size: 46%;
  block-size: 1px;
  background: linear-gradient(
    90deg,
    rgba(22, 185, 183, 0.9) 0%,
    rgba(22, 185, 183, 0) 100%
  );
}

/* --- Categories ---------------------------------------------------------- */

.journal-cats {
  padding-block: clamp(44px, 5.4vw, 76px) clamp(52px, 6.4vw, 88px);
  border-block-start: 1px solid rgba(17, 99, 106, 0.18);
}

/* Centred intro: the one place on the site where a section is deliberately
   symmetrical, so the category tiles read as a set. */
.journal-cats__head {
  max-inline-size: 62ch;
  margin-inline: auto;
  text-align: center;
  scroll-margin-top: calc(var(--anchor-offset) + 8px);
}

.journal-cats__hint {
  margin-block-start: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

/* No scripting: the instruction would be a promise the page cannot keep. */
html:not(.js) .journal-cats__hint,
html:not(.js) .cat__action {
  display: none;
}

.cat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-inline-size: 1040px;
  margin: clamp(28px, 3.6vw, 44px) auto 0;
}

.cat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 24px 24px 22px;
  border: 1px solid rgba(17, 99, 106, 0.15);
  border-radius: 10px;
  background-image: linear-gradient(
    168deg,
    rgba(255, 255, 255, 0.46) 0%,
    rgba(238, 246, 245, 0.3) 62%,
    rgba(225, 236, 235, 0.22) 100%
  );
  transition: border-color 200ms var(--ease-standard),
    background-color 200ms var(--ease-standard);
}

/* A fine rule that sweeps across the top edge on hover / selection. */
.cat::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 1px;
  inline-size: 0;
  background-image: linear-gradient(
    90deg,
    var(--c-signal),
    rgba(22, 185, 183, 0)
  );
  transition: inline-size 220ms var(--ease-standard);
  pointer-events: none;
}

.cat::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto -20% -62% -20%;
  block-size: 80%;
  background: radial-gradient(
    50% 100% at 50% 100%,
    rgba(22, 185, 183, 0.2) 0%,
    rgba(22, 185, 183, 0) 72%
  );
  opacity: 0;
  transition: opacity 200ms var(--ease-standard);
  pointer-events: none;
}

.cat__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(23px, 2.4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-depth);
  text-wrap: balance;
}

.cat__btn {
  display: inline;
  color: inherit;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: text-decoration-color var(--dur-feedback) var(--ease-standard);
}

.cat__btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.cat__btn:focus-visible {
  outline: none;
  box-shadow: none;
}

.cat:focus-within {
  box-shadow: 0 0 0 2px var(--c-focus-a), 0 0 0 4px var(--c-focus-b);
}

.cat__text {
  margin-block-start: 10px;
  max-inline-size: 44ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

.cat__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-block-start: 16px;
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-teal);
}

.cat__action svg {
  inline-size: 11px;
  block-size: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-feedback) var(--ease-standard);
}

/* Active filter: the category behaves like a pressed tab. */
.cat:has(.cat__btn[aria-current='true']) {
  border-color: rgba(22, 185, 183, 0.65);
  background-color: rgba(22, 185, 183, 0.06);
}

.cat:has(.cat__btn[aria-current='true'])::before {
  inline-size: 100%;
}

.cat:has(.cat__btn[aria-current='true'])::after {
  opacity: 1;
}

.cat:has(.cat__btn[aria-current='true']) .cat__action {
  color: var(--c-depth);
}

@media (hover: hover) and (pointer: fine) {
  .cat:hover {
    border-color: rgba(17, 99, 106, 0.3);
    background-color: rgba(255, 255, 255, 0.3);
  }

  .cat:hover::before {
    inline-size: 100%;
  }

  .cat:hover::after {
    opacity: 0.7;
  }

  .cat:hover .cat__btn {
    text-decoration-color: rgba(17, 99, 106, 0.55);
  }

  .cat:hover .cat__action svg {
    transform: translateX(3px);
  }
}

.cat:focus-within::before {
  inline-size: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .cat:hover {
    transform: none;
  }
}

@media (min-width: 760px) {
  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .cat {
    padding: 28px 28px 24px;
  }
}

/* --- Filter state + empty state ----------------------------------------- */

.journal-filter-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-block-end: 20px;
  padding: 12px 16px;
  border: 1px solid rgba(17, 99, 106, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-ink-muted);
}

.journal-filter-state [data-filter-name] {
  font-weight: 600;
  color: var(--c-depth);
}

.journal-filter-state__text {
  display: inline;
}

.journal-filter-reset {
  min-block-size: 44px;
  padding: 0 12px;
  border: 1px solid rgba(17, 99, 106, 0.28);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.7);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-teal);
  cursor: pointer;
}

.journal-filter-reset:hover {
  border-color: var(--c-teal);
}

.journal-empty {
  padding: 22px 24px;
  border: 1px dashed rgba(17, 99, 106, 0.32);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.4);
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink-muted);
  max-inline-size: 62ch;
}

/* ==========================================================================
   ARTICLE
   ========================================================================== */

.note-hero {
  padding-block: calc(var(--anchor-offset) + 28px) clamp(24px, 3vw, 36px);
}

.note-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--c-ink-muted);
}

.note-back svg {
  inline-size: 12px;
  block-size: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.note-back:hover {
  color: var(--c-teal);
}

.note-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  color: inherit;
}

.note-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-block-start: 20px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-ink-muted);
}

.note-tag {
  padding: 5px 10px;
  border: 1px solid rgba(17, 99, 106, 0.28);
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-teal);
}

.note-hero__dot {
  color: rgba(17, 99, 106, 0.4);
}

.note-hero__title {
  margin-block-start: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 66px);
  line-height: 1;
  letter-spacing: -0.036em;
  color: var(--c-depth);
  max-inline-size: 22ch;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.note-hero__standfirst {
  margin-block-start: 18px;
  max-inline-size: 60ch;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.4;
  color: var(--c-teal);
}

.note-hero__updated {
  margin-block-start: 10px;
  font-size: 13px;
  color: var(--c-ink-muted);
}

.note-cover {
  position: relative;
  margin: clamp(24px, 3.4vw, 40px) 0 0;
  overflow: hidden;
  border: 1px solid rgba(17, 99, 106, 0.2);
  border-radius: var(--r-panel);
  background: var(--c-depth);
}

.note-cover img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.note-cover .jcover {
  border-radius: 0;
}

.note-body {
  padding-block: clamp(28px, 3.6vw, 44px) clamp(56px, 7vw, 96px);
}

.note-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

/* The TL;DR leads, then the note index, then the body. The index is never
   placed after the closing CTA at any width. */
.note-layout > .tldr {
  margin-block-end: 0;
}

.note-toc {
  padding-block-start: 18px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.16);
}

.note-toc__title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.note-toc ol {
  margin-block-start: 10px;
}

.note-toc li {
  border-block-start: 1px solid rgba(17, 99, 106, 0.1);
}

.note-toc li:first-child {
  border-block-start: 0;
}

.note-toc a {
  display: block;
  padding-block: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-ink-muted);
}

.note-toc a:hover {
  color: var(--c-teal);
}

@media (min-width: 1024px) {
  .note-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
  }

  /* Lead sits above the body in the article measure. */
  .note-layout > .tldr {
    grid-column: 5 / span 8;
    grid-row: 1;
  }

  /* The index is a static left rail that begins after the lead and stops
     with the article. No sticky positioning, so it can never trail the
     closing CTA in a long page or a full-page capture. */
  .note-toc {
    grid-column: 1 / span 3;
    grid-row: 2;
    position: static;
    top: auto;
  }

  .note-article {
    grid-column: 5 / span 8;
    grid-row: 2;
  }

  .note-layout--no-lead .note-toc,
  .note-layout--no-lead .note-article {
    grid-row: 1;
  }
}

.note-article {
  min-inline-size: 0;
}

/* --- TL;DR --------------------------------------------------------------- */

.tldr {
  padding: clamp(20px, 2.6vw, 30px);
  margin-block-end: clamp(28px, 3.4vw, 40px);
  border: 1px solid rgba(17, 99, 106, 0.22);
  border-inline-start: 3px solid var(--c-signal);
  border-radius: var(--r-panel);
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(238, 246, 245, 0.5) 100%
  );
}

.tldr__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--c-depth);
}

.tldr__intro {
  margin-block-start: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
}

.tldr__list {
  margin-block-start: 14px;
  counter-reset: tldr;
}

.tldr__list li {
  position: relative;
  padding: 9px 0 9px 34px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.12);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink);
  counter-increment: tldr;
}

.tldr__list li::before {
  content: counter(tldr) '.';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 9px;
  font-size: 12px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  color: var(--c-teal);
}

/* --- Article prose ------------------------------------------------------- */

.article-prose {
  max-inline-size: 68ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-ink);
}

.article-prose h2 {
  margin-block: clamp(32px, 4vw, 46px) 0;
  padding-block-start: clamp(18px, 2vw, 24px);
  border-block-start: 1px solid rgba(17, 99, 106, 0.18);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--c-depth);
  scroll-margin-top: var(--anchor-offset);
}

.article-prose h2:first-child {
  margin-block-start: 0;
  border-block-start: 0;
  padding-block-start: 0;
}

.article-prose h3 {
  margin-block: 26px 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--c-depth);
}

.article-prose p {
  margin-block-start: 14px;
}

.article-prose ul,
.article-prose ol {
  margin-block-start: 16px;
  padding-inline-start: 4px;
}

.article-prose li {
  position: relative;
  padding: 7px 0 7px 22px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.12);
  font-size: 16px;
  line-height: 1.6;
}

.article-prose ul li::before {
  content: '';
  position: absolute;
  inset-block-start: 18px;
  inset-inline-start: 2px;
  inline-size: 5px;
  block-size: 5px;
  background: var(--c-signal);
  transform: rotate(45deg);
}

.article-prose ol {
  counter-reset: step;
}

.article-prose ol li {
  padding-inline-start: 30px;
  counter-increment: step;
}

.article-prose ol li::before {
  content: counter(step) '.';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 7px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--c-teal);
  font-variant-numeric: tabular-nums;
}

.article-prose a {
  color: var(--c-depth);
  text-decoration: underline;
  text-decoration-color: rgba(17, 99, 106, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.article-prose a:hover {
  text-decoration-color: var(--c-teal);
}

.article-prose strong {
  font-weight: 600;
  color: var(--c-depth);
}

.article-prose blockquote {
  margin-block: 20px;
  padding: 4px 0 4px 18px;
  border-inline-start: 2px solid var(--c-signal);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.4;
  color: var(--c-depth);
}

.article-prose code {
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(17, 99, 106, 0.08);
  font-size: 0.92em;
}

/* --- Article CTA --------------------------------------------------------- */

.article-cta {
  margin-block-start: clamp(36px, 4.4vw, 52px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(17, 99, 106, 0.22);
  border-radius: var(--r-panel);
  background: #eef4f3;
  box-shadow: var(--edge-light);
}

.article-cta__title {
  margin-block-start: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.026em;
  color: var(--c-depth);
  max-inline-size: 20ch;
  text-wrap: balance;
}

.article-cta__body {
  display: grid;
  gap: 12px;
  max-inline-size: 62ch;
  margin-block-start: 14px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-ink-muted);
}

.article-cta__actions {
  margin-block-start: 22px;
}

/* --- Further reading ----------------------------------------------------- */

.further {
  margin-block-start: clamp(30px, 3.6vw, 44px);
  padding-block-start: 20px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.2);
}

.further__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  color: var(--c-depth);
}

.further__list {
  margin-block-start: 12px;
}

.further__list li {
  border-block-start: 1px solid rgba(17, 99, 106, 0.12);
}

.further__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 44px;
  padding-block: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-ink);
}

.further__link:hover {
  color: var(--c-teal);
}

.further__link svg {
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.note-back--foot {
  margin-block-start: 32px;
  padding-block-start: 16px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.16);
}

/* Narrow screens: drop the interpuncts so a separator never orphans a line. */
@media (max-width: 560px) {
  .note-card__meta,
  .note-hero__meta {
    gap: 4px 8px;
  }

  .note-card__dot,
  .note-hero__dot {
    display: none;
  }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.ct-hero {
  position: relative;
  overflow: clip;
  padding-block: calc(var(--anchor-offset) + 44px) clamp(28px, 3.6vw, 44px);
}

.ct-hero::before {
  content: '';
  position: absolute;
  inset-block-start: -10%;
  inset-inline-end: -8%;
  inline-size: min(58%, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(22, 185, 183, 0.18) 0%,
    rgba(230, 236, 236, 0) 62%
  );
  pointer-events: none;
}

.ct-hero::after {
  content: '';
  position: absolute;
  inset-inline-end: 4%;
  inset-block-end: 12%;
  inline-size: min(34%, 420px);
  aspect-ratio: 1;
  border: 1px solid rgba(17, 99, 106, 0.16);
  border-radius: 50%;
  pointer-events: none;
}

.ct-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.ct-hero__title {
  margin-block-start: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 7.4vw, 96px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--c-depth);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.ct-hero__sub {
  margin-block-start: 18px;
  max-inline-size: 26ch;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.35;
  font-weight: 500;
  color: var(--c-teal);
}

.ct-hero__body {
  display: grid;
  gap: 13px;
  max-inline-size: 54ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink);
}

@media (min-width: 900px) {
  .ct-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: end;
  }

  .ct-hero__main {
    grid-column: 1 / span 6;
  }

  .ct-hero__body {
    grid-column: 7 / span 5;
    padding-block-end: 6px;
  }
}

.ct-main {
  padding-block: clamp(12px, 2vw, 24px) clamp(56px, 7vw, 96px);
}

.ct-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.ct-form {
  min-inline-size: 0;
}

.ct-aside {
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid rgba(17, 99, 106, 0.2);
  border-radius: var(--r-panel);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: var(--shadow-panel), var(--edge-light);
}

.ct-aside__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--c-depth);
}

.ct-aside__body {
  margin-block-start: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

.ct-aside__email {
  margin-block-start: 10px;
}

.ct-email {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--c-depth);
  text-decoration: underline;
  text-decoration-color: rgba(17, 99, 106, 0.4);
  text-underline-offset: 5px;
  overflow-wrap: anywhere;
}

.ct-email:hover {
  text-decoration-color: var(--c-teal);
}

.ct-aside__rule {
  block-size: 1px;
  margin-block: 18px;
  background: rgba(17, 99, 106, 0.16);
}

.ct-aside__small {
  max-inline-size: 44ch;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-ink-muted);
}

@media (min-width: 1024px) {
  .ct-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 48px;
  }

  .ct-form {
    grid-column: 1 / span 8;
  }

  .ct-aside {
    grid-column: 9 / span 4;
    position: sticky;
    top: calc(var(--anchor-offset) + 8px);
  }
}

/* ==========================================================================
   FOOTER — extended columns (Pass B)
   ========================================================================== */

.footer__nav {
  min-inline-size: 0;
}

.footer__col-title {
  margin-block-end: 6px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-on-dark-soft);
}

.footer__nav .footer__links {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, max-content));
  grid-template-rows: none;
  gap: 0 24px;
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: 1 / span 4;
  }

  .footer__nav:nth-of-type(1) {
    grid-column: 5 / span 3;
  }

  .footer__nav:nth-of-type(2) {
    grid-column: 8 / span 4;
  }

  .footer__legal {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: left;
    margin-block-start: 28px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--c-hairline-dark);
  }
}

/* ==========================================================================
   DESKTOP RHYTHM � interior pages (>=1024 only).
   The same measured correction as the services pages: adjacent sections were
   each paying a full clamp() pad, so the space between them doubled.
   ========================================================================== */

@media (min-width: 1024px) {
  .pg-cta {
    padding-block: 72px;
  }

  .about-hero {
    padding-block-end: 60px;
  }

  .about-sec {
    padding-block: 64px;
  }

  .faq-body {
    padding-block: 24px 72px;
  }

  .journal-latest {
    padding-block: 32px 56px;
  }

  .journal-cats {
    padding-block: 52px 76px;
  }

  .note-body {
    padding-block: 40px 76px;
  }

  .ct-main {
    padding-block: 16px 76px;
  }
}
/* ==========================================================================
   PROJECTS — reference-led composition.
   Opening band → La Famiglia 12-column stage → Il Faro application suite →
   Sovereign Tools dark environment. Devices are framed, not decorated; all
   chrome is neutral linework.
   ========================================================================== */

/* --- Shared device frame ------------------------------------------------- */

.frame {
  margin: 0;
  min-inline-size: 0;
}

.frame__screen {
  position: relative;
  overflow: hidden;
  background: #e9f0ef;
  border: 1px solid rgba(17, 99, 106, 0.22);
  border-radius: 12px;
  box-shadow: 0 34px 64px -44px rgba(16, 46, 51, 0.6),
    0 8px 22px -16px rgba(16, 46, 51, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.frame__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.frame__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  block-size: 30px;
  padding-inline: 12px;
  background: linear-gradient(180deg, #f8fbfa 0%, #edf3f2 100%);
  border-block-end: 1px solid rgba(17, 99, 106, 0.14);
}

.frame__chrome i {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: rgba(17, 99, 106, 0.22);
  flex: none;
}

/* Neutral address field: no invented URL, no invented content. */
.frame__addr {
  flex: 1;
  max-inline-size: 240px;
  block-size: 9px;
  margin-inline-start: 10px;
  border-radius: 99px;
  background: rgba(17, 99, 106, 0.09);
}

.frame--phone .frame__screen {
  padding: 5px;
  border-radius: 24px;
  background: #102e33;
  border-color: rgba(16, 46, 51, 0.5);
  box-shadow: 0 30px 50px -34px rgba(16, 46, 51, 0.7),
    0 4px 12px -8px rgba(16, 46, 51, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.frame--phone .frame__img {
  border-radius: 19px;
}

.frame__notch {
  position: absolute;
  z-index: 1;
  inset-block-start: 9px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 34%;
  block-size: 7px;
  border-radius: 99px;
  background: rgba(16, 46, 51, 0.9);
}

.frame__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-block-start: 9px;
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.frame__cap-tag {
  color: var(--c-teal);
  font-weight: 600;
}

.frame--dark .frame__cap {
  color: var(--c-text-on-dark-soft);
}

.frame--dark .frame__cap-tag {
  color: var(--c-signal);
}

/* Overlapped dominant windows carry their label above the frame so a floating
   panel can never cover it. */
.frame--cap-top {
  display: flex;
  flex-direction: column;
}

.frame--cap-top .frame__cap {
  order: -1;
  margin-block: 0 9px;
}

/* --- Opening hero: ONE composed region ----------------------------------
   ≥901px the headline, eyebrow and introduction sit in the LEFT region and the
   approved sweeping-architecture artwork is integrated as a right-hand layer,
   bleeding to the outer right edge under a horizontal scrim. Only the abstract
   artwork is reflected (it carries no logo, text, screenshot or UI). ≤900px
   returns to an accessible stacked layout with the art in flow beneath the
   copy. The headline and paragraphs remain DOM text at every width.
   ------------------------------------------------------------------------ */

.pj-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--c-frost);
  border-block-end: 1px solid rgba(17, 99, 106, 0.16);
}

.pj-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--anchor-offset) + 36px) clamp(22px, 3vw, 36px);
}

.pj-hero__title {
  margin-block-start: 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(54px, 7.6vw, 118px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--c-depth);
  max-inline-size: 11ch;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.pj-hero__body {
  display: grid;
  gap: 12px;
  margin-block-start: 26px;
  max-inline-size: 54ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
}

/* Art in flow beneath the copy (phones and tablets). */
.pj-hero__band {
  position: relative;
  z-index: 0;
  block-size: clamp(180px, 26vw, 260px);
  overflow: clip;
  background: #dbe7e6;
}

.pj-hero__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 64% 58%;
}

/* Pale scrim. The artwork stays readable as architecture while its value range
   is pulled toward Frost, so the band reads as a material rather than a bright
   full-bleed photograph. */
.pj-hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
      180deg,
      rgba(230, 236, 236, 0.96) 0%,
      rgba(230, 236, 236, 0.34) 16%,
      rgba(230, 236, 236, 0.12) 46%,
      rgba(230, 236, 236, 0.5) 82%,
      #e6ecec 100%
    ),
    linear-gradient(
      90deg,
      rgba(230, 236, 236, 0.36) 0%,
      rgba(230, 236, 236, 0.04) 46%,
      rgba(230, 236, 236, 0.22) 100%
    );
}

.pj-hero__cue-row {
  display: flex;
  justify-content: flex-end;
  padding-block: 14px 18px;
}

.pj-hero__cue {
  display: none;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-teal);
}

.pj-hero__cue-num {
  font-variant-numeric: tabular-nums;
}

.pj-hero__cue-rule {
  inline-size: 54px;
  block-size: 1px;
  background: rgba(17, 99, 106, 0.4);
}

@media (min-width: 768px) {
  .pj-hero__cue {
    display: flex;
  }
}

/* --- Composed desktop hero ---------------------------------------------- */

@media (min-width: 901px) {
  .pj-hero {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-block-size: clamp(520px, 64vh, 680px);
  }

  .pj-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    column-gap: 32px;
    align-items: center;
    align-self: center;
    padding-block: calc(var(--anchor-offset) + 44px) 40px;
  }

  /* Every text block occupies the left column; the right column is the art. */
  .pj-hero__inner > * {
    grid-column: 1;
  }

  .pj-hero__band {
    position: absolute;
    inset: 0 0 0 auto;
    inline-size: 52%;
    block-size: auto;
    z-index: 0;
  }

  .pj-hero__img {
    object-position: 72% 42%;
    /* Abstract artwork only: no logo, text, client screenshot or UI is mirrored. */
    transform: scaleX(-1);
    /* The image is mirrored, so its mask is mirrored with it: 270deg puts the
       soft fade on the VISUAL left edge, where the art meets the copy, and
       lets the artwork bleed to the outer right edge. */
    -webkit-mask-image: linear-gradient(270deg, transparent, #000 18%);
    mask-image: linear-gradient(270deg, transparent, #000 18%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  /* The band is now the hero background, so the vertical veil is retired and a
     horizontal scrim keeps the copy zone legible (Depth on Frost ≥ 12:1). */
  .pj-hero__veil {
    display: none;
  }

  .pj-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(
      90deg,
      #e6ecec 0 32%,
      rgba(230, 236, 236, 0.92) 46%,
      rgba(230, 236, 236, 0.25) 64%,
      transparent 80%
    );
  }

  .pj-hero__title {
    font-size: clamp(54px, 7vw, 84px);
    max-inline-size: 12ch;
  }

  .pj-hero__cue-row {
    /* Sits in the opaque frost zone of the scrim so its teal label keeps its
       contrast; it reads as a lead-in to 01 rather than sitting on the art. */
    position: relative;
    z-index: 2;
    justify-content: flex-start;
    padding-block: 18px 22px;
  }
}

@media (min-width: 1100px) {
  .pj-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .pj-hero__band {
    inline-size: 60%;
  }

  /* Headline stays inside the left 52% of the viewport: the 7fr column is
     50.6% of a 1440px viewport and 51.7% at 1100px. */
  .pj-hero__title {
    font-size: clamp(58px, 7.6vw, 118px);
    max-inline-size: 100%;
  }
}

/* On a phone the headline needs the clear Frost field more than a tall image,
   so the strip stays short and the type keeps the full width above it. */
@media (max-width: 767px) {
  .pj-hero__inner {
    padding-block: calc(var(--anchor-offset) + 20px) 22px;
  }

  .pj-hero__body {
    margin-block-start: 20px;
  }

  .pj-hero__band {
    block-size: clamp(180px, 46vw, 240px);
  }

  .pj-hero__img {
    object-position: 64% 58%;
  }
}

/* --- Linked screenshot (La Famiglia public site) -------------------------
   The framed screenshot is one anchor with an accessible name. The visible CTA
   is a span inside that anchor (never a second link) and sits on the surface,
   so touch users discover the destination without hover. It is placed at the
   top-right of the window, clear of the overlapping suite panel and phones. */

.frame__screen--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 200ms var(--ease-standard);
}

.frame__screen--link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--c-focus-a), 0 0 0 4px var(--c-focus-b),
    0 34px 64px -44px rgba(16, 46, 51, 0.6);
}

.frame__cta {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-start: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(230, 236, 236, 0.46);
  border-radius: var(--r-pill);
  background-color: rgba(16, 46, 51, 0.86);
  color: var(--c-frost);
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 22px -16px rgba(16, 46, 51, 0.8);
  transition: background-color 200ms var(--ease-standard),
    border-color 200ms var(--ease-standard);
}

.frame__cta svg {
  inline-size: 11px;
  block-size: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms var(--ease-standard);
}

/* The La Famiglia window: the CTA sits in the neutral chrome bar, so it never
   covers screenshot content and never collides with the overlapping panel or
   phone frames at any stage width. */
.lf__browser .frame__cta {
  inset-block-start: 3px;
  inset-block-end: auto;
  inset-inline-start: auto;
  inset-inline-end: 10px;
  padding: 5px 11px;
  font-size: 10px;
  letter-spacing: 0.1em;
}

@media (hover: hover) {
  .frame__screen--link:hover .frame__cta {
    background-color: var(--c-teal);
    border-color: rgba(230, 236, 236, 0.7);
  }

  .frame__screen--link:hover .frame__cta svg {
    transform: translateX(3px);
  }
}

.lf__live-link {
  margin-block-start: 18px;
  padding-block-start: 16px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.16);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-ink-muted);
}

.lf__live-link .link-quiet {
  margin-block-start: 2px;
}

/* --- 01 La Famiglia al Mare --------------------------------------------- */

.lf {
  padding-block: clamp(40px, 5vw, 72px) 0;
}

.lf__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

.lf__title {
  margin-block-start: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 6.6vw, 92px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--c-depth);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.lf__sub {
  margin-block-start: 14px;
  max-inline-size: 30ch;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.35;
  font-weight: 500;
  color: var(--c-teal);
}

.lf__intro {
  display: grid;
  gap: 14px;
  max-inline-size: 58ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink);
}

.lf__flag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-start: 16px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.lf__flag::before {
  content: '';
  inline-size: 6px;
  block-size: 6px;
  background: var(--c-signal);
  transform: rotate(45deg);
  flex: none;
}

.lf__disciplines {
  max-inline-size: 46ch;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

@media (min-width: 900px) {
  .lf__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
  }

  .lf__head-main {
    grid-column: 1 / span 6;
  }

  .lf__intro {
    grid-column: 8 / span 5;
    padding-block-start: 6px;
  }
}

/* --- The 12-column stage ------------------------------------------------ */

.lf__stage-wrap {
  margin-block-start: clamp(28px, 3.6vw, 48px);
}

.lf__stage {
  position: relative;
}

.lf__stage .frame {
  position: relative;
}

.lf__floor {
  display: none;
}

@media (min-width: 1200px) {
  .lf__stage {
    aspect-ratio: 1248 / 760;
  }

  .lf__stage .frame {
    position: absolute;
    z-index: 2;
  }

  .lf__browser {
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 74%;
  }

  .lf__panel {
    inset-block-start: 50%;
    inset-inline-start: 5%;
    inline-size: 40%;
    z-index: 3;
  }

  .lf__phone--a {
    inset-block-start: 33%;
    inset-inline-start: 70%;
    inline-size: 13%;
    z-index: 4;
  }

  .lf__phone--b {
    inset-block-start: 60%;
    inset-inline-start: 85%;
    inline-size: 12%;
    z-index: 4;
  }

  /* A soft floor shadow under the whole assembly, never a plate behind it. */
  .lf__floor {
    display: block;
    position: absolute;
    inset-inline: 2%;
    inset-block-end: 2%;
    block-size: 20%;
    z-index: 0;
    background: radial-gradient(
      50% 100% at 50% 50%,
      rgba(16, 46, 51, 0.16),
      rgba(16, 46, 51, 0) 72%
    );
    filter: blur(12px);
    pointer-events: none;
  }
}

/* Tablet: one dominant window, overlaps reduced, no stacking of tiny images. */
@media (min-width: 768px) and (max-width: 1199px) {
  .lf__stage {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 22px 20px;
    align-items: end;
  }

  .lf__browser {
    grid-column: 1 / -1;
  }

  .lf__panel {
    grid-column: 1 / span 6;
    margin-block-start: -36px;
    z-index: 3;
  }

  .lf__phone--a {
    grid-column: 7 / span 3;
  }

  .lf__phone--b {
    grid-column: 10 / span 3;
  }
}

@media (max-width: 767px) {
  .lf__stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
  }

  .lf__browser,
  .lf__panel {
    grid-column: 1 / -1;
  }

  .lf__sub {
    max-inline-size: 34ch;
  }
}

/* --- Copy + capabilities ------------------------------------------------ */

.lf__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  padding-block: clamp(36px, 4.6vw, 64px) 0;
}

.lf__h3 {
  margin-block-start: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--c-depth);
  text-wrap: balance;
}

.lf__lead {
  margin-block: 16px 14px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--c-teal);
  max-inline-size: 40ch;
}

.lf__copy p:not(.marker):not(.lf__lead):not(.lf__h3) {
  max-inline-size: 52ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--c-ink);
}

.lf__caps-label {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-teal);
}

.capgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 26px;
  margin-block-start: 14px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.18);
}

.capgrid__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding-block: 11px;
  border-block-end: 1px solid rgba(17, 99, 106, 0.12);
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-ink);
}

.capgrid__icon {
  flex: none;
  inline-size: 19px;
  block-size: 19px;
  margin-block-start: 1px;
  color: var(--c-teal);
  opacity: 0.9;
}

@media (min-width: 700px) {
  .capgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .lf__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
  }

  .lf__copy {
    grid-column: 1 / span 4;
  }

  .lf__caps {
    grid-column: 6 / span 7;
  }
}

@media (min-width: 1200px) {
  .capgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Il Faro: its own sea-glass atmosphere ------------------------------ */

.faro {
  margin-block-start: clamp(48px, 6vw, 84px);
  padding-block: clamp(48px, 6vw, 86px);
  /* The entrance transform on the stage frames starts 20px to the right before
     the view timeline runs; clip any sub-pixel bleed at the section edge. */
  overflow-x: clip;
  background-image: radial-gradient(
      88% 70% at 84% 2%,
      rgba(22, 185, 183, 0.2),
      rgba(22, 185, 183, 0) 62%
    ),
    linear-gradient(158deg, #eaf3f2 0%, #dfeae9 54%, #d3e2e1 100%);
  border-block: 1px solid rgba(17, 99, 106, 0.16);
}

/* Keep the hand-off from Il Faro to the physical-materials note at roughly
   one stanza of air (≈88px) on desktop and large tablet. */
@media (min-width: 1024px) {
  .faro {
    padding-block-end: 48px;
  }
}

.faro__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.faro__title {
  margin-block-start: 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.034em;
  color: var(--c-depth);
  text-wrap: balance;
  max-inline-size: 18ch;
}

.faro__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  color: var(--c-teal);
}

.faro__intro {
  display: grid;
  gap: 13px;
  max-inline-size: 56ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--c-ink);
}

@media (min-width: 900px) {
  .faro__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: end;
  }

  .faro__title-col {
    grid-column: 1 / span 6;
  }

  .faro__intro {
    grid-column: 7 / span 6;
    padding-block-end: 4px;
  }
}

.faro__stage {
  position: relative;
  margin-block-start: clamp(28px, 3.6vw, 46px);
}

.faro__stage .frame {
  position: relative;
}

.faro__glow {
  display: none;
}

@media (min-width: 1200px) {
  .faro__stage {
    aspect-ratio: 1248 / 700;
  }

  .faro__stage .frame {
    position: absolute;
    z-index: 2;
  }

  .faro__main {
    inset-block-start: 0;
    inset-inline-start: 4%;
    inline-size: 76%;
  }

  .faro__panel-a {
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: 50%;
    z-index: 4;
  }

  .faro__panel-b {
    inset-block-start: 54%;
    inset-inline-end: 4%;
    inline-size: 34%;
    z-index: 3;
  }

  .faro__phone {
    inset-block-start: 6%;
    inset-inline-end: 0;
    inline-size: 12%;
    z-index: 5;
  }

  .faro__glow {
    display: block;
    position: absolute;
    inset: -6% 4% 6% 8%;
    z-index: 0;
    background: radial-gradient(
      55% 55% at 50% 46%,
      rgba(230, 246, 245, 0.9),
      rgba(230, 246, 245, 0) 72%
    );
    pointer-events: none;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .faro__stage {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 22px 20px;
    align-items: start;
  }

  .faro__main {
    grid-column: 1 / -1;
  }

  .faro__panel-a {
    grid-column: 1 / span 5;
    margin-block-start: -32px;
    z-index: 3;
  }

  .faro__panel-b {
    grid-column: 6 / span 4;
  }

  .faro__phone {
    grid-column: 10 / span 3;
  }
}

@media (max-width: 767px) {
  .faro__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .faro__phone {
    inline-size: 58%;
    justify-self: center;
  }
}

.faro__features {
  display: grid;
  gap: 14px;
  margin-block-start: clamp(38px, 4.6vw, 60px);
  padding-block-start: 22px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.22);
}

.faro__features-label {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-teal);
}

/* Label above, list full width: ten features fill the row instead of leaving
   an empty column beside the label. */
.featgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 28px;
}

.featgrid li {
  position: relative;
  padding: 9px 0 9px 18px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.14);
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-ink);
}

.featgrid li::before {
  content: '';
  position: absolute;
  inset-block-start: 17px;
  inset-inline-start: 0;
  inline-size: 6px;
  block-size: 1px;
  background: var(--c-signal);
}

@media (min-width: 700px) {
  .featgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .featgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Beyond the screen + scope ------------------------------------------ */

.lf__physical {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-block-start: clamp(40px, 5vw, 64px);
  padding-block: clamp(28px, 3.4vw, 44px);
  border-block-start: 1px solid rgba(17, 99, 106, 0.16);
}

.lf__physical-body {
  max-inline-size: 62ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink);
}

@media (min-width: 1024px) {
  .lf__physical {
    margin-block-start: 40px;
  }
}

@media (min-width: 900px) {
  .lf__physical {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
  }

  .lf__physical-head {
    grid-column: 1 / span 4;
  }

  .lf__physical-body {
    grid-column: 6 / span 7;
  }
}

/* --- Project Scope: full-width sea-glass summary band -------------------
   Lifted out of the cramped three-column footer and given its own breathing
   room as a bridge between the hospitality gallery and the dark Sovereign
   transition. Three editorial columns on rules, never a card grid. */

.lf__scope {
  margin-block-start: clamp(40px, 5vw, 64px);
  padding-block: clamp(56px, 6vw, 92px);
  background-image: radial-gradient(
      120% 100% at 8% 0%,
      rgba(22, 185, 183, 0.16) 0%,
      rgba(22, 185, 183, 0) 58%
    ),
    linear-gradient(160deg, #f2f7f6 0%, #e9f0ef 48%, #dbe7e6 100%);
  border-block: 1px solid rgba(17, 99, 106, 0.2);
}

.lf__scope-head {
  display: grid;
  gap: 8px;
  max-inline-size: 48ch;
}

.lf__scope-head .lf__h3 {
  margin-block-start: 0;
}

.lf__scope-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 40px;
  margin: clamp(28px, 3.4vw, 44px) 0 0;
}

.lf__scope-row {
  padding-block: 18px 22px;
  border-block-start: 1px solid rgba(17, 99, 106, 0.3);
}

.lf__scope-row dt {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-teal);
}

.lf__scope-row dd {
  margin: 10px 0 0;
  max-inline-size: 34ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--c-ink);
}

@media (min-width: 900px) {
  .lf__scope {
    margin-block-start: clamp(56px, 6vw, 88px);
  }

  .lf__scope-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Sovereign Tools: dark Depth environment ---------------------------- */

.st {
  padding-block: clamp(64px, 7vw, 104px);
  background: var(--c-depth);
  color: var(--c-frost);
  border-block-start: 1px solid rgba(22, 185, 183, 0.3);
}

/* The Resonant Rest composition is absolutely placed inside a fixed-ratio
   stage; trim the trailing space so the dark band closes on the work rather
   than on empty Depth. */
@media (min-width: 1024px) {
  .st {
    padding-block-end: 64px;
  }
}

.st__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.st__title {
  margin-block-start: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.038em;
  color: var(--c-frost);
}

.st__headline {
  margin-block-start: 10px;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.3;
  font-weight: 500;
  color: var(--c-signal);
}

.st__intro {
  display: grid;
  gap: 12px;
  max-inline-size: 62ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text-on-dark);
}

@media (min-width: 900px) {
  .st__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
  }

  .st__head-main {
    grid-column: 1 / span 5;
  }

  .st__intro {
    grid-column: 7 / span 6;
  }
}

.rr {
  margin-block-start: clamp(36px, 4.6vw, 60px);
}

.rr__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

.rr__name {
  margin-block-start: 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--c-frost);
}

.rr__sub {
  margin-block-start: 6px;
  font-size: 13.5px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--c-text-on-dark-soft);
}

.rr__body {
  display: grid;
  gap: 12px;
  margin-block-start: 18px;
  max-inline-size: 54ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--c-text-on-dark);
}

.rr__disclaimer {
  margin-block-start: 18px;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--c-signal);
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-frost);
}

.rr__stage {
  position: relative;
  padding-block-start: 16px;
}

.rr__stage .frame {
  position: relative;
}

/* Status badge sits on the composition, not above it. */
.rr__status {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-block-end: 14px;
  padding: 8px 13px;
  border: 1px solid rgba(22, 185, 183, 0.5);
  border-radius: var(--r-pill);
  background: rgba(16, 46, 51, 0.82);
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-frost);
}

.rr__dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--c-signal);
  box-shadow: 0 0 8px 1px rgba(22, 185, 183, 0.8);
  flex: none;
}

@media (min-width: 1024px) {
  .rr__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
  }

  .rr__text {
    grid-column: 1 / span 4;
  }

  .rr__stage {
    grid-column: 5 / span 8;
    padding-block-start: 0;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  /* Re-cut: at this width the copy runs far taller than the prototype stack, so
     the two-column split left a 362px orphaned track under the images. The
     section stacks instead — copy, then the focal prototype and its panel —
     which removes the empty column without shrinking either element. */
  .rr__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .rr__text,
  .rr__stage {
    grid-column: 1;
  }

  .rr__stage {
    padding-block-start: 0;
  }

  /* Full width means no overlap is needed, and the focal caption stays clear. */
  .rr__panel {
    margin-block-start: 18px;
  }
}

@media (min-width: 1200px) {
  .rr__stage {
    aspect-ratio: 830 / 600;
  }

  .rr__stage .frame {
    position: absolute;
    z-index: 2;
  }

  .rr__status {
    position: absolute;
    inset-block-start: -13px;
    inset-inline-end: 16px;
    z-index: 4;
    margin-block-end: 0;
    background: rgba(16, 46, 51, 0.9);
    box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.9);
  }

  .rr__focal {
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
  }

  .rr__panel {
    inset-block-start: 62%;
    inset-inline-end: 2%;
    inline-size: 48%;
    z-index: 3;
  }

  .rr__glow {
    display: block;
    position: absolute;
    inset: -14% 0 4% 8%;
    z-index: 0;
    background: radial-gradient(
      58% 60% at 55% 42%,
      rgba(22, 185, 183, 0.32),
      rgba(22, 185, 183, 0) 70%
    );
    filter: blur(6px);
    pointer-events: none;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .rr__stage {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
  }

  .rr__status {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .rr__focal {
    grid-column: 1 / -1;
  }

  .rr__panel {
    grid-column: 1 / span 6;
    margin-block-start: -40px;
    z-index: 3;
  }
}

@media (max-width: 767px) {
  .rr__panel {
    margin-block-start: 18px;
  }
}

/* --- Motion: three distinct, CSS-only entrances -------------------------
   Base state is always visible; enhancement is gated on html.js and a view
   timeline, and is removed entirely under reduced motion.
   ----------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes pj-mask-in {
      from {
        opacity: 0;
        transform: translateY(26px);
        clip-path: inset(7% 0 11% 0 round 12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0 round 12px);
      }
    }

    html.js .lf__stage .frame {
      animation: pj-mask-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 46%;
    }

    html.js .lf__panel {
      animation-range: entry 5% entry 50%;
    }

    html.js .lf__phone--a {
      animation-range: entry 11% entry 56%;
    }

    html.js .lf__phone--b {
      animation-range: entry 17% entry 62%;
    }

    @keyframes faro-in-left {
      from {
        opacity: 0;
        transform: translate3d(-18px, 20px, 0) rotate(-0.5deg);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes faro-in-right {
      from {
        opacity: 0;
        transform: translate3d(20px, 14px, 0) rotate(0.45deg);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes faro-in-phone {
      from {
        opacity: 0;
        transform: translate3d(8px, 30px, 0);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    html.js .faro__main {
      animation: faro-in-right linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }

    html.js .faro__panel-a {
      animation: faro-in-left linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 48%;
    }

    html.js .faro__panel-b {
      animation: faro-in-right linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 52%;
    }

    html.js .faro__phone {
      animation: faro-in-phone linear both;
      animation-timeline: view();
      animation-range: entry 14% entry 56%;
    }

    @keyframes rr-rise {
      from {
        opacity: 0;
        transform: translateY(16px) scale(0.995);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes rr-lamp {
      from {
        opacity: 0.25;
      }
      to {
        opacity: 1;
      }
    }

    html.js .rr__focal {
      animation: rr-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }

    html.js .rr__panel {
      animation: rr-rise linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 44%;
    }

    html.js .rr__glow {
      animation: rr-lamp linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 46%;
    }

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

    html.js .pj-hero__title {
      animation: pj-hero-rise 620ms var(--ease-arrive) 40ms backwards;
    }

    html.js .pj-hero__body {
      animation: pj-hero-rise 560ms var(--ease-arrive) 150ms backwards;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .pj-hero__title,
  .pj-hero__body,
  .lf__stage .frame,
  .faro__stage .frame,
  .rr__stage .frame {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

@media print {
  .pj-hero__title,
  .pj-hero__body,
  .lf__stage .frame,
  .faro__stage .frame,
  .rr__stage .frame {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}
/* ==========================================================================
   PAGE RHYTHM — three deliberate section surfaces.
   A  Frost / light          (the default: no class)
   B1 pale graded           linear-gradient(160deg,#F2F7F6,#E9F0EF)
   B2 B1 + faint technical rule at 96px pitch, radially masked, CSS only
   C  Depth → Teal band      (existing dark bands, unchanged)

   Applied per the agreed rhythm map only. These classes exist so a section
   changes surface, not composition; no card is added and no copy moves.
   ========================================================================== */

.band-b1,
.band-b2 {
  background-color: #e9f0ef;
  background-image: linear-gradient(160deg, #f2f7f6 0%, #e9f0ef 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.band-b2 {
  position: relative;
  isolation: isolate;
}

/* One-pixel rules every 96px, radially masked so the texture belongs to the
   section without drawing attention. No image request, no DOM, no motion.
   The alpha is 0.085 (spec ceiling 0.09): at 0.055 the rule was measurably
   present but read as nothing at page scale, so the mask now holds more of
   its strength further out and the line resolves as deliberate texture. */
.band-b2::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(17, 99, 106, 0.085) 0 1px,
    transparent 1px 96px
  );
  -webkit-mask-image: radial-gradient(
    130% 100% at 50% 42%,
    #000 0%,
    rgba(0, 0, 0, 0.72) 58%,
    rgba(0, 0, 0, 0.28) 84%,
    transparent 100%
  );
  mask-image: radial-gradient(
    130% 100% at 50% 42%,
    #000 0%,
    rgba(0, 0, 0, 0.72) 58%,
    rgba(0, 0, 0, 0.28) 84%,
    transparent 100%
  );
  pointer-events: none;
}

.band-b2 > * {
  position: relative;
  z-index: 1;
}

/* C — the one meaningful dark band per long page. Used by the existing
   Selected Work / Ownership / Sovereign / Closing compositions. */
.band-c {
  background-image: linear-gradient(135deg, #102e33 0%, #0e3f45 58%, #11636a 100%);
  color: var(--c-frost);
}