/* Generated by Frontend Wireframe Engine - Phase 4
   Client: Fibre Converters
   DNA Hash: 837ea84a453e
   Typography  display-jost-modern-bauhaus
   Components  one-corner-accent
   Layout      data-storytelling-narrative
   Hero        before-after-comparison
   Button      icon-left-accent-bar
   Imagery     photography-texture-material
   Animation   progressive-disclosure
   Spacing     airy-header-dense-body
   Color       colored-background-teal
   Navigation  sub-nav-bar
   Texture     inner-shadow-recessed
   Do not edit - regenerate via the engine */

/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
  /* Typography - data/dna/typography-dna.yml -> display-jost-modern-bauhaus */
  --font-heading: 'Jost', sans-serif;
  --font-body: 'Jost', sans-serif;
  --font-mono: 'Azeret Mono', ui-monospace, monospace;
  --scale-ratio: 1.414;
  --heading-weight: 500;
  --heading-case: none;
  --heading-letterspacing: -0.025em;
  --heading-line-height: 1.02;
  --body-size: 17px;
  --body-weight: 400;
  --body-line-height: 1.7;
  --body-letterspacing: 0.002em;
  --max-line-length: 68ch;

  /* Color - brand_tokens (source: logo). Teal carries the surface as an
     environment, not an accent. Green is reserved for structure and origin
     markers so it never reads as an eco badge. */
  --color-brand-primary: #0da5b4;
  --color-brand-secondary: #0a5f68;
  --color-teal-abyss: #063b42;
  --color-teal-deep: #0a5f68;
  --color-teal-mid: #0d818e;
  --color-teal-bright: #0da5b4;
  --color-teal-wash: #d7e8e9;
  --color-green: #37af4a;
  --color-green-deep: #24803a;

  --color-bg-base: #eceeec;
  --color-bg-elevated: #f6f7f5;
  --color-bg-card: #ffffff;
  --color-bg-sunk: #e2e5e2;

  --color-text-primary: #14181a;
  --color-text-secondary: #4c5658;
  --color-text-on-dark: #eaf4f4;
  --color-text-on-dark-dim: #b8d4d6;

  /* Small text on a dark teal surface needs more lift than the raw brand
     hexes carry. #0da5b4 reaches 4.05:1 on the abyss, which clears large
     display type and fails body and label sizes. These two are the small-text
     variants; the true brand hexes stay on headline splits, fills and rules. */
  --color-teal-on-dark: #4fd3e0;
  --color-green-on-dark: #5cc96d;

  --color-accent: #37af4a;
  --color-border: rgba(20, 24, 26, 0.14);
  --color-border-dark: rgba(234, 244, 244, 0.18);
  --color-steel: #6e7377;

  /* Components - data/dna/component-personality.yml -> one-corner-accent
     Expressed as the radius a cutting die leaves on a converted part. */
  --radius: 0 0 22px 0;
  --radius-sm: 0 0 10px 0;
  --radius-lg: 0 0 34px 0;
  --shadow: 0 4px 16px rgba(6, 59, 66, 0.14);
  --border: 1.5px solid var(--color-border);

  /* Texture - data/dna/texture-depth.yml -> inner-shadow-recessed
     Read as score and crease, not as soft-touch plastic. */
  --crease-light: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --crease-dark: inset 0 -1px 0 rgba(20, 24, 26, 0.16);
  --well-inset: inset 0 2px 5px rgba(6, 59, 66, 0.13), inset 0 -1px 0 rgba(255, 255, 255, 0.75);
  --well-inset-dark: inset 0 2px 6px rgba(0, 0, 0, 0.34), inset 0 -1px 0 rgba(234, 244, 244, 0.09);

  /* Spacing - data/dna/spacing-philosophy.yml -> airy-header-dense-body */
  --spacing-base: 8px;
  --space-hero: clamp(56px, 6.6vw, 94px);
  --space-section: clamp(48px, 6vw, 76px);
  --space-paragraph: 14px;
  --space-component: 16px;
  --pad-hero: clamp(20px, 6vw, 120px);
  --pad-body: clamp(20px, 3.4vw, 48px);

  /* Layout - data/dna/layout-archetypes.yml -> data-storytelling-narrative */
  --layout-narrative: 720px;
  --layout-breakout: 1200px;
  --layout-max-width: 1200px;
  --layout-whitespace-ratio: 0.45;

  /* Animation - data/dna/animation-character.yml -> progressive-disclosure
     plus the craft floor from data/animation-craft.yml */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-staged: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-speed: 250ms;
  --entrance-duration: 400ms;
  --stagger-delay: 200ms;
  --hover-duration: 220ms;

  --nav-h: 66px;
  --subnav-h: 46px;
}

/* ============================================================
   2. BASE
   ============================================================ */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--subnav-h) + 12px); }

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letterspacing);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--color-green); color: #fff; }

:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-teal-abyss);
  color: var(--color-text-on-dark);
  padding: 12px 20px;
  z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ============================================================
   3. TYPOGRAPHY
   One geometric family. Hierarchy is carried by weight and size,
   never by a second display face. Mono is data only.
   ============================================================ */

.t-display,
.t-h1,
.t-h2,
.t-h3 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-letterspacing);
  line-height: var(--heading-line-height);
  text-wrap: balance;
}

.t-display { font-size: clamp(2.5rem, 6.5vw, 4.7rem); }
.t-h1      { font-size: clamp(2.3rem, 5.6vw, 4rem); }
.t-h2      { font-size: clamp(1.85rem, 3.6vw, 2.9rem); }
.t-h3      { font-size: clamp(1.2rem, 1.7vw, 1.5rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }

.t-lead {
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: -0.005em;
}

.t-body p { margin-bottom: var(--space-paragraph); }
.t-body p:last-child { margin-bottom: 0; }
.t-body a:not(.btn) {
  color: var(--color-teal-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(13, 165, 180, 0.55);
  transition: text-decoration-color var(--transition-speed) var(--ease-out), color var(--transition-speed) var(--ease-out);
}
.t-body a:not(.btn):hover { color: var(--color-green-deep); text-decoration-color: var(--color-green); }

/* Mono label. Uppercase and tracking live HERE, in one class, and never as
   Tailwind utilities repeated across sections. */
.mono-label {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-teal-deep);
}
.mono-label--dim { color: var(--color-text-secondary); }
.mono-label--on-dark { color: var(--color-text-on-dark-dim); }
.mono-label--green { color: var(--color-green-deep); }
.mono-label--green-on-dark { color: var(--color-green-on-dark); }

.mono-data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

/* Mutation: split-color-heading. The two logo colours, structural. */
.hi-teal  { color: var(--color-teal-bright); }
.hi-green { color: var(--color-green); }
.hi-teal-ink  { color: var(--color-teal-deep); }
.hi-green-ink { color: var(--color-green-deep); }
.hi-dim { color: var(--color-text-on-dark-dim); }

/* ============================================================
   4. LAYOUT ARCHETYPE - data-storytelling-narrative
   The width rhythm is the archetype. Narrative prose runs narrow,
   evidence breaks wider, plates go edge to edge.
   ============================================================ */

.narrative {
  max-width: var(--layout-narrative);
  margin-inline: auto;
  padding-inline: var(--pad-body);
}

.breakout {
  max-width: var(--layout-breakout);
  margin-inline: auto;
  padding-inline: var(--pad-body);
}

.plate { width: 100%; }

.zone { padding-block: var(--space-section); }
.zone--hero-space { padding-block: var(--space-hero); }

/* Section alternation - the archetype's light breather between deep zones */
.zone--paper { background: var(--color-bg-base); }
.zone--raised { background: var(--color-bg-elevated); }
.zone--deep {
  background: var(--color-teal-deep);
  color: var(--color-text-on-dark);
}
.zone--abyss {
  background: var(--color-teal-abyss);
  color: var(--color-text-on-dark);
}
.zone--deep .t-lead,
.zone--abyss .t-lead { color: var(--color-text-on-dark-dim); }
.zone--deep .t-body,
.zone--abyss .t-body { color: var(--color-text-on-dark); }

/* Distinguishing feature: data visualisation sections are wider than text
   sections, creating width rhythm. This pair is that rule. */
.rhythm-narrow + .rhythm-wide { margin-top: clamp(28px, 3.5vw, 48px); }
.rhythm-wide + .rhythm-narrow { margin-top: clamp(28px, 3.5vw, 48px); }

/* Mutation: asymmetric-offset. Evidence column outweighs the prose beside it. */
.offset-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 48px);
}
@media (min-width: 900px) {
  .offset-grid { grid-template-columns: 1fr 2.35fr; align-items: start; }
  .offset-grid > :first-child { position: sticky; top: calc(var(--nav-h) + var(--subnav-h) + 28px); }
  .offset-grid--flip { grid-template-columns: 2.35fr 1fr; }
  .offset-grid--flip > :first-child { position: static; }
  .offset-grid--flip > :last-child { padding-top: clamp(20px, 4vw, 64px); }

  /* Same asymmetry, mirrored, without touching the DOM. The label column stays
     first in the document so the section heading still precedes its
     subheadings; only the painted order changes. */
  .offset-grid--label-right { grid-template-columns: 2.35fr 1fr; }
  .offset-grid--label-right > :first-child { order: 2; }
  .offset-grid--label-right > :last-child { order: 1; }
}

/* ============================================================
   5. TEXTURE - score and crease
   ============================================================ */

.crease {
  height: 2px;
  border: 0;
  margin: 0;
  background: transparent;
  box-shadow: var(--crease-dark), var(--crease-light);
}
.crease--dark { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(234, 244, 244, 0.12); }

.well {
  background: var(--color-bg-sunk);
  box-shadow: var(--well-inset);
  border-radius: var(--radius-sm);
}
.well--dark {
  background: rgba(0, 0, 0, 0.22);
  box-shadow: var(--well-inset-dark);
}

/* ============================================================
   6. COMPONENTS - one-corner-accent (the die-cut radius)
   ============================================================ */

.card {
  background: var(--color-bg-card);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(6, 59, 66, 0.09);
  padding: clamp(20px, 2.2vw, 28px);
  transition: box-shadow var(--hover-duration) var(--ease-out), transform var(--hover-duration) var(--ease-out);
}
.card--dark {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--color-border-dark);
  box-shadow: none;
  color: var(--color-text-on-dark);
}
.card--flat { box-shadow: none; }

@media (hover: hover) and (pointer: fine) {
  .card--lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(6, 59, 66, 0.17);
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: 0 0 8px 0;
  color: var(--color-text-secondary);
  background: var(--color-bg-elevated);
}
.tag--on-dark {
  border-color: var(--color-border-dark);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-on-dark-dim);
}
.tag__dot { width: 6px; height: 6px; background: var(--color-green); flex: none; }
.tag__dot--teal { background: var(--color-teal-bright); }

/* ============================================================
   7. BUTTON ARCHETYPE - icon-left-accent-bar
   A labelled machine control: accent bar, icon in the bar zone, text right.
   The bar grows on hover via scaleX, never via width (GPU only).
   ============================================================ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px 13px 46px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  border-radius: 0 0 14px 0;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(6, 59, 66, 0.1);
  transition: transform 160ms var(--ease-out), box-shadow var(--hover-duration) var(--ease-out),
              background-color var(--hover-duration) var(--ease-out), color var(--hover-duration) var(--ease-out),
              border-color var(--hover-duration) var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1.5px;
  bottom: -1.5px;
  width: 5px;
  background: var(--color-teal-bright);
  transform-origin: left center;
  transition: transform var(--hover-duration) var(--ease-out);
}
.btn__icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-teal-deep);
  pointer-events: none;
}

/* The primary action is the one colour that appears nowhere else as a fill.
   It was teal-deep, which is also the colour of the deep zones, so on the
   conversion band the button filled with the band and read as a ghost. Green
   is the accent, it is the client's own second logo colour, and it separates
   from both the bone and the teal grounds. */
.btn--primary {
  background: var(--color-green);
  border-color: var(--color-green);
  color: #06280e;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(6, 40, 14, 0.28);
}
.btn--primary::before { background: var(--color-teal-abyss); }
.btn--primary .btn__icon { color: #06280e; }

/* Bigger tap and visual weight: this is the page's one conversion action. */
.btn--lg { padding: 17px 30px 17px 54px; font-size: 1.02rem; }
.btn--lg .btn__icon { left: 18px; width: 20px; height: 20px; }
.btn--lg::before { width: 6px; }

.btn--ghost {
  background: transparent;
  border-color: var(--color-border-dark);
  color: var(--color-text-on-dark);
}
.btn--ghost::before { background: var(--color-green); }
.btn--ghost .btn__icon { color: var(--color-green-on-dark); }

.btn--sm { padding: 9px 16px 9px 38px; font-size: 0.85rem; }
.btn--sm .btn__icon { left: 12px; width: 15px; height: 15px; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: 0 6px 16px rgba(6, 59, 66, 0.18); }
  .btn:hover::before { transform: scaleX(1.9); }
  .btn--primary:hover {
    background: #1f7233;
    border-color: #1f7233;
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(6, 40, 14, 0.36);
  }
  .btn--primary:hover .btn__icon { color: #ffffff; }
  .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
}
.btn:active { transform: scale(0.97); }
.btn:active::before { transform: scaleX(0.6); }

/* ============================================================
   8. NAVIGATION - sub-nav-bar
   Slim primary bar plus a sticky context rail. Both stick.
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color-teal-abyss);
  color: var(--color-text-on-dark);
}

.nav-primary {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-logo img { height: 34px; width: auto; display: block; }

.nav-links { display: none; gap: 26px; margin-left: auto; align-items: center; }
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-link {
  position: relative;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--color-text-on-dark);
  text-decoration: none;
  padding-block: 6px;
  transition: color var(--transition-speed) var(--ease-out);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-speed) var(--ease-out);
}
.nav-link:hover { color: #ffffff; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: #ffffff; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); background: var(--color-teal-bright); }

.nav-phone {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--color-text-on-dark-dim);
  text-decoration: none;
  transition: color var(--transition-speed) var(--ease-out);
}
.nav-phone:hover { color: var(--color-teal-bright); }
@media (min-width: 640px) { .nav-phone { display: inline-flex; align-items: center; gap: 8px; } }

.nav-toggle {
  margin-left: auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border-dark);
  color: var(--color-text-on-dark);
  border-radius: 0 0 8px 0;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color var(--transition-speed) var(--ease-out);
}
.nav-toggle:active { transform: scale(0.97); }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* Sub-nav: the context rail. Section anchors on the page you are on. */
.subnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 55;
  background: var(--color-teal-deep);
  box-shadow: inset 0 1px 0 rgba(234, 244, 244, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.subnav__inner {
  height: var(--subnav-h);
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.subnav__inner::-webkit-scrollbar { display: none; }

.subnav__crumb {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-dim);
  white-space: nowrap;
  padding-right: 14px;
  margin-right: 6px;
  border-right: 1px solid var(--color-border-dark);
  flex: none;
}
.subnav__crumb a { color: inherit; text-decoration: none; }
.subnav__crumb a:hover { color: var(--color-teal-bright); }

.subnav__link {
  flex: none;
  scroll-snap-align: start;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-on-dark-dim);
  text-decoration: none;
  padding: 6px 12px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-speed) var(--ease-out), border-color var(--transition-speed) var(--ease-out);
}
.subnav__link:hover { color: #ffffff; }
.subnav__link.is-active { color: #ffffff; border-bottom-color: var(--color-green); }

/* Mobile menu - full viewport overlay */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  background: var(--color-teal-abyss);
  color: var(--color-text-on-dark);
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border-dark);
  border-radius: 0 0 8px 0;
  color: var(--color-text-on-dark);
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.mobile-menu__close:active { transform: scale(0.97); }
.mobile-menu__link {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text-on-dark);
  text-decoration: none;
  padding: 14px 0;
  box-shadow: inset 0 -1px 0 rgba(234, 244, 244, 0.12);
}
.mobile-menu__link:hover { color: var(--color-teal-bright); }

/* ============================================================
   9. HERO ARCHETYPE - before-after-comparison
   Left: the assembly you see. Right: the material we make.
   ============================================================ */

.cutaway {
  position: relative;
  width: 100%;
  height: clamp(230px, 40vh, 420px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  background: var(--color-teal-abyss);
  touch-action: pan-y;
  --slider-pos: 50%;
}


.cutaway__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.cutaway__layer--after {
  clip-path: inset(0 0 0 var(--slider-pos));
  object-position: 42% 76%;
}

.cutaway__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--slider-pos);
  width: 3px;
  background: var(--color-green);
  transform: translateX(-1.5px);
  cursor: ew-resize;
  z-index: 3;
}
.cutaway__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 0 0 18px 0;
  background: var(--color-green);
  color: #06280e;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.cutaway__caption {
  position: absolute;
  bottom: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 11px;
  background: rgba(6, 59, 66, 0.82);
  color: var(--color-text-on-dark);
  border-radius: 0 0 8px 0;
}
.cutaway__caption--left { left: 14px; }
.cutaway__caption--right { right: 14px; color: var(--color-green-on-dark); }

.cutaway__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.cutaway__range::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 100%; }
.cutaway__range::-moz-range-thumb { width: 60px; height: 100%; border: 0; background: transparent; }
.cutaway__range:focus-visible + .cutaway__handle .cutaway__grip { outline: 3px solid #fff; outline-offset: 3px; }

/* ============================================================
   9b. HERO COMPOSITION - display column plus readout plate
   The archetype says the data is the hook, so the space beside the
   headline carries the proof rather than sitting empty.
   ============================================================ */

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 4vw, 60px);
  align-items: start;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(290px, 1fr); }
}

.readout {
  background: rgba(0, 0, 0, 0.24);
  box-shadow: var(--well-inset-dark);
  border-radius: var(--radius);
  padding: clamp(20px, 2.1vw, 28px);
}

.readout__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 15px;
}
.readout__dot {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--color-green);
  border-radius: 0 0 3px 0;
}

.readout__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
  box-shadow: inset 0 1px 0 rgba(234, 244, 244, 0.12);
}
.readout__value {
  font-family: var(--font-heading);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 2.7vw, 2.7rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.readout__foot {
  margin-top: 20px;
  padding-top: 17px;
  box-shadow: inset 0 1px 0 rgba(234, 244, 244, 0.12);
}
.readout__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  margin-top: 14px;
}
.readout__item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.95rem;
  color: var(--color-text-on-dark);
}
.readout__tick {
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--color-green);
  border-radius: 0 0 3px 0;
}

/* ============================================================
   10. FIGURES - the data is the hook
   ============================================================ */

.figure-xl {
  font-family: var(--font-heading);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.1rem, 7vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.figure-lg {
  font-family: var(--font-heading);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.figure-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--color-border-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 700px) { .figure-row { grid-template-columns: repeat(3, 1fr); } }

.figure-cell {
  position: relative;
  background: var(--color-teal-deep);
  padding: clamp(26px, 3.2vw, 38px) clamp(18px, 2.4vw, 30px) clamp(24px, 3vw, 34px);
  transition: background-color var(--hover-duration) var(--ease-out);
}
/* A datum bar at the head of every cell, the same green as the process rail. */
.figure-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(18px, 2.4vw, 30px);
  width: 38px;
  height: 3px;
  background: var(--color-green);
  transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .figure-cell:hover { background: var(--color-teal-mid); }
  .figure-cell:hover::before { transform: scaleX(2.2); }
}

.figure-cell .mono-label,
.figure-cell__kicker {
  color: var(--color-text-on-dark-dim);
}
.figure-cell__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.figure-cell__tick {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--color-green);
  border-radius: 0 0 3px 0;
}

/* Spec ledger - the dense body the spacing axis calls for.
   Not a grey box with a table in it: a ruled engineering ledger that sits
   directly on the page, with a datum rule at the head and a green tick
   marking every label. */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--color-text-primary);
}

.spec-table th,
.spec-table td {
  text-align: left;
  vertical-align: top;
  padding: 17px 0;
  border-bottom: 1px solid rgba(20, 24, 26, 0.13);
}

.spec-table th {
  position: relative;
  width: 31%;
  padding-right: clamp(18px, 2.4vw, 34px);
  padding-left: 20px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--color-teal-deep);
}
.spec-table th::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 9px;
  height: 9px;
  background: var(--color-green);
  border-radius: 0 0 3px 0;
  transform-origin: left center;
  transition: transform var(--transition-speed) var(--ease-out);
}

.spec-table td {
  font-size: 0.98rem;
  line-height: 1.6;
}

.spec-table thead th,
.spec-table thead td {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom-color: rgba(20, 24, 26, 0.25);
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
}
.spec-table thead th::before { display: none; }

@media (hover: hover) and (pointer: fine) {
  .spec-table tbody tr:hover th::before { transform: scaleX(2.4); }
}

/* On a teal ground the datum rule and hairlines invert. */
.spec-table--dark { border-top-color: var(--color-green); }
.spec-table--dark th { color: var(--color-green-on-dark); }
.spec-table--dark th,
.spec-table--dark td { border-bottom-color: var(--color-border-dark); }

/* The block a ledger sits in: a mono heading over a hairline, no filled box. */
.ledger-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
}

/* Dated record - the history spine.
   A ledger row states a fact; a record states a year. The year is the hook,
   so it is set at figure scale against a spine that carries a node at every
   entry. The spine gets its own grid column so the node can never drift off
   the line: both are children of the same track.
   ============================================================ */
.record { list-style: none; margin: 0; padding: 0; }

.record__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 0;
  padding-bottom: clamp(26px, 3vw, 38px);
}
@media (min-width: 760px) {
  .record__row {
    grid-template-columns: minmax(140px, 0.24fr) 26px 1fr;
    gap: 0 clamp(18px, 2.4vw, 30px);
    padding-bottom: clamp(30px, 3.4vw, 46px);
  }
}

.record__year {
  font-family: var(--font-heading);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 3.2vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-teal-deep);
  display: block;
}
.record__phase {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--color-text-secondary);
  padding-top: 8px;
}

/* The spine column. Hidden below 760px, where the record stacks. */
.record__rail { display: none; position: relative; }
@media (min-width: 760px) {
  .record__rail { display: block; }
  .record__rail::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    bottom: calc(-1 * clamp(30px, 3.4vw, 46px));
    width: 1px;
    background: rgba(20, 24, 26, 0.18);
  }
  .record__row:last-child .record__rail::before { bottom: auto; height: 0; }
  .record__rail::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 9px;
    width: 11px;
    height: 11px;
    transform: translateX(-50%);
    background: var(--color-green);
    border-radius: 0 0 4px 0;
  }
}

.record__body {
  font-size: 1rem;
  line-height: 1.65;
  max-width: 62ch;
}
@media (min-width: 760px) { .record__body { padding-top: 4px; } }

/* ============================================================
   11. PROCESS RAIL - one continuous line, not three tiles
   ============================================================ */

.rail { position: relative; }
.rail__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(13, 165, 180, 0.15) 0%,
    var(--color-teal-bright) 12%,
    var(--color-teal-bright) 50%,
    var(--color-green) 88%,
    rgba(55, 175, 74, 0.15) 100%);
  display: none;
}
@media (min-width: 900px) { .rail__line { display: block; } }

.rail__stages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  position: relative;
}
@media (min-width: 900px) { .rail__stages { grid-template-columns: repeat(5, 1fr); gap: 18px; } }

.stage__marker {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-teal-abyss);
  border: 2px solid var(--color-teal-bright);
  border-radius: 0 0 20px 0;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}
.stage__marker--green { border-color: var(--color-green); }
.stage__num {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-teal-on-dark);
}
.stage__marker--green .stage__num { color: var(--color-green-on-dark); }

.stage__owner {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-green-on-dark);
}

/* ============================================================
   12. MUTATION - hover-reveal-content, built as a die line
   The photograph is the surface a buyer recognises. A cut line
   travels up through it and the component underneath is exposed
   in the kerf. No toggle button, and the photograph is never
   covered over: it is the best thing in the section.
   ============================================================ */

.cut-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}
@media (min-width: 640px)  { .cut-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cut-grid { grid-template-columns: repeat(3, 1fr); } }

.cut-card {
  --cut: 0px;
  --kerf: 58px;
  --open: 206px;
  position: relative;
  display: block;
  overflow: hidden;
  height: clamp(310px, 27vw, 356px);
  border-radius: var(--radius);
  background: var(--color-teal-abyss);
  text-decoration: none;
  color: var(--color-text-on-dark);
  isolation: isolate;
}

/* The stock: the photograph, clipped from the bottom as the cut travels. */
.cut-card__stock {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  clip-path: inset(0 0 var(--cut) 0);
  transform: scale(1.04);
  transition: clip-path 640ms var(--ease-out), transform 900ms var(--ease-out);
}

/* A scrim only where the title sits, so the photograph stays legible. */
.cut-card__scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  z-index: 3;
  background: linear-gradient(0deg, rgba(6, 59, 66, 0.94) 0%, rgba(6, 59, 66, 0.94) 12%, rgba(6, 59, 66, 0.55) 46%, rgba(6, 59, 66, 0) 100%);
  /* Rides the cut rather than being clipped by it, so the title always sits on
     the dark end of the gradient no matter how far the blade has travelled. */
  transform: translateY(calc(var(--cut) * -1));
  transition: transform 640ms var(--ease-out);
  pointer-events: none;
}

/* The blade. A hairline with registration ticks at each end, riding the cut. */
.cut-card__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  z-index: 5;
  background: var(--color-green);
  transform: translateY(calc(var(--cut) * -1));
  transition: transform 640ms var(--ease-out);
  pointer-events: none;
}
.cut-card__rule::before,
.cut-card__rule::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 2px;
  height: 12px;
  background: var(--color-green);
}
.cut-card__rule::before { left: 0; }
.cut-card__rule::after  { right: 0; }

.cut-card__title {
  position: absolute;
  left: clamp(16px, 1.8vw, 22px);
  right: clamp(16px, 1.8vw, 22px);
  bottom: 16px;
  z-index: 4;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #ffffff;
  transform: translateY(calc(var(--cut) * -1));
  transition: transform 640ms var(--ease-out);
}

/* The kerf: what the cut exposes. */
.cut-card__kerf {
  position: absolute;
  left: clamp(16px, 1.8vw, 22px);
  right: clamp(16px, 1.8vw, 22px);
  bottom: clamp(16px, 1.8vw, 20px);
  z-index: 1;
  /* Anchored at the bottom: the kicker always sits in the kerf, and the spec
     grows upward into the space the cut opens rather than pushing it down. */
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}
.cut-card__spec {
  margin-bottom: 9px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text-on-dark);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms var(--ease-out) 140ms, transform 500ms var(--ease-out) 140ms;
}

/* Armed by the observer as the grid arrives: the blade takes its first bite,
   card by card, so the cut reads as a pass across the whole sheet. */
.cut-card.is-armed { --cut: var(--kerf); }

@media (hover: hover) and (pointer: fine) {
  .cut-card:hover,
  .cut-card:focus-visible { --cut: var(--open); }
  .cut-card:hover .cut-card__stock,
  .cut-card:focus-visible .cut-card__stock { transform: scale(1.09); }
  .cut-card:hover .cut-card__spec,
  .cut-card:focus-visible .cut-card__spec { opacity: 1; transform: translateY(0); }
}

/* No hover to give: the cut rests open so the component is always readable. */
/* No hover to give: the cut rests open, and the kerf hangs from the blade
   rather than from the bottom of the card, so the label still introduces the
   text it belongs to and no gap opens under a short paragraph. */
@media (hover: none) {
  .cut-card { height: clamp(300px, 80vw, 360px); --open: 168px; }
  .cut-card.is-armed { --cut: var(--open); }
  .cut-card__spec { opacity: 1; transform: none; margin-bottom: 0; margin-top: 9px; }
  .cut-card__kerf {
    flex-direction: column;
    top: calc(100% - var(--open) + 16px);
    bottom: auto;
  }
}

.cut-card:focus-visible { outline: 3px solid var(--color-green); outline-offset: 3px; }

/* The closing card is not a photograph, so it states the offer instead. */
.cut-card--offer {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1.5px solid var(--color-border);
}

/* ============================================================
   13. LOGO WALL
   ============================================================ */

.logo-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
}
@media (min-width: 640px) { .logo-wall { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .logo-wall { grid-template-columns: repeat(6, 1fr); } }
.logo-wall__cell {
  background: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
  min-height: 84px;
}
.logo-wall__cell img {
  max-height: 30px;
  max-width: 100%;
  width: auto;
  opacity: 0.62;
  filter: grayscale(100%);
  transition: opacity var(--transition-speed) var(--ease-out), filter var(--transition-speed) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .logo-wall__cell:hover img { opacity: 1; filter: grayscale(0%); }
}

/* ============================================================
   14. FORMS
   ============================================================ */

.field { display: block; margin-bottom: 18px; }
.field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-teal-deep);
  margin-bottom: 7px;
}
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-primary);
  background: var(--color-bg-sunk);
  border: 0;
  box-shadow: var(--well-inset);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  transition: box-shadow var(--transition-speed) var(--ease-out);
}
.field__textarea { min-height: 128px; resize: vertical; }
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  box-shadow: var(--well-inset), 0 0 0 2px var(--color-teal-bright);
}
.field__hint { font-size: 0.8rem; color: var(--color-text-secondary); margin-top: 6px; }

/* ============================================================
   15. FAQ
   ============================================================ */

.faq__item { border-bottom: 1px solid var(--color-border); padding-block: 6px; }
.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 16px 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.faq__sign { flex: none; width: 22px; height: 22px; margin-top: 3px; color: var(--color-teal-deep); transition: transform var(--transition-speed) var(--ease-out); }
.faq__item.is-open .faq__sign { transform: rotate(45deg); }
.faq__a { display: none; padding-bottom: 18px; max-width: 62ch; color: var(--color-text-secondary); }
.faq__item.is-open .faq__a { display: block; }

/* ============================================================
   16. FOOTER
   ============================================================ */

.site-footer { background: var(--color-teal-abyss); color: var(--color-text-on-dark); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-link {
  display: block;
  color: var(--color-text-on-dark-dim);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 5px 0;
  transition: color var(--transition-speed) var(--ease-out);
}
.footer-link:hover { color: var(--color-teal-bright); }

/* ============================================================
   17. ANIMATION - progressive-disclosure
   Staged reveal in strict content hierarchy. Anything already in
   the first viewport is shown on load and never waits on an
   observer: a hero that depends on scroll is a blank hero.
   ============================================================ */

.stage-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--entrance-duration) var(--ease-staged),
              transform var(--entrance-duration) var(--ease-staged);
}
.stage-in.is-in { opacity: 1; transform: translateY(0); }

.stage-1 { transition-delay: 0ms; }
.stage-2 { transition-delay: 200ms; }
.stage-3 { transition-delay: 400ms; }
.stage-4 { transition-delay: 600ms; }
.stage-5 { transition-delay: 800ms; }

/* No JS: never hide content. */
.no-js .stage-in { opacity: 1; transform: none; }

/* ============================================================
   18. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-parallax], [class*="parallax"], .zoom-element, .scroll-rotate {
    animation: none !important;
    animation-timeline: none !important;
    transform: none !important;
  }
  .stage-in { opacity: 1 !important; transform: none !important; transition-delay: 0ms !important; }
  .reveal__media { transform: none !important; }
}