/* =============================================================================
   Joy Data Solutions — Brand System
   =============================================================================

   A self-contained design layer: tokens, typography, layout, components and
   motion. No build step, no framework — just custom properties and modern CSS.

   DESIGN INTENT
   -------------
   Clean, minimal, tasteful. Structure comes from whitespace and hairline rules,
   never from big blocks of colour. The canvas stays light on every section; the
   amber accent is used in small doses only — an eyebrow, a short rule, a meter
   fill, a link underline. If a change makes the page louder, it is wrong.

   Restraint rules, in order:
     1. No full-bleed coloured section backgrounds. Separate sections with
        whitespace and a hairline.
     2. One accent colour, used at small scale. Never a large amber fill.
     3. Type carries the hierarchy. Weight and size before colour.
     4. Motion is a fade and a few pixels of travel. Nothing slides in from the
        side of the screen.

   SCOPING RULES (read before editing)
   -----------------------------------
   Legacy pages (nonprofit, knowledge-hub, dashboards) still use Tailwind
   utilities. To avoid breaking them this file:
     - never redefines a Tailwind utility class (no `.container`, no `.text-*`);
       our container is `.wrap`;
     - keeps element selectors at specificity 0,0,1 so Tailwind utility classes
       (0,1,0) always win on legacy markup;
     - scopes component styling under our own class names, which legacy pages
       do not use.

   Load order in base.html is: Tailwind → styles.css → navigation.css →
   brand.css. Ours is last, so ours wins where it applies.
   ============================================================================= */

/* =============================================================================
   1. Tokens
   ============================================================================= */

:root {
    /* --- Ink: type and structure, not background fills --------------------- */
    --ink-900: #14181F;
    --ink-800: #1F2530;
    --ink-700: #333B49;

    /* --- Neutrals ----------------------------------------------------------
       Every value here that carries text is checked against the DARKEST surface
       it appears on (--paper-2, #F6F5F1), not against white, and clears the
       WCAG AA 4.5:1 floor for small text there:

           --slate-600  6.16:1    --slate-500  4.92:1    --slate-400  4.64:1

       --slate-300 is a border colour only, never text. At 3.06:1 on white it
       clears the 3:1 required for UI component boundaries (WCAG 1.4.11).
       If you lighten any of these, re-check them first. */
    --slate-600: #545C6B;
    --slate-500: #646B77;
    --slate-400: #686F7B;
    --slate-300: #8D949E;
    --slate-200: #E4E7EB;

    /* --- Paper: the canvas -------------------------------------------------- */
    --paper: #FCFCFA;
    --paper-2: #F6F5F1;
    --paper-3: #EFEDE7;
    --white: #FFFFFF;

    /* --- Signal amber: small doses only ------------------------------------
       --amber is used as TEXT (eyebrows, prose links, footer hovers), so it has
       to clear 4.5:1. It measures 4.91:1 on --paper and 4.62:1 on --paper-2.
       The obvious brighter ochre (#A97213) only reaches 4.01:1 and fails —
       do not lighten this back toward it.

       --amber-bright is decorative only: meter fills and rules, never text. */
    --amber: #96650F;
    --amber-bright: #D89A2B;
    --amber-wash: rgba(150, 101, 15, 0.09);

    /* --- Semantic ---------------------------------------------------------- */
    --bg: var(--paper);
    --fg: var(--ink-900);
    --fg-muted: var(--slate-500);
    --rule: rgba(20, 24, 31, 0.09);
    --rule-strong: rgba(20, 24, 31, 0.16);

    /* --- Type -------------------------------------------------------------- */
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;

    /* Fluid type scale. clamp() means no breakpoint juggling. */
    --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
    --step-0:  clamp(1.00rem, 0.97rem + 0.17vw, 1.10rem);
    --step-1:  clamp(1.18rem, 1.12rem + 0.30vw, 1.38rem);
    --step-2:  clamp(1.40rem, 1.29rem + 0.52vw, 1.80rem);
    --step-3:  clamp(1.66rem, 1.48rem + 0.86vw, 2.35rem);
    --step-4:  clamp(1.97rem, 1.69rem + 1.36vw, 3.05rem);
    --step-5:  clamp(2.34rem, 1.90rem + 2.15vw, 3.95rem);

    /* --- Space ------------------------------------------------------------- */
    --space-2xs: 0.375rem;
    --space-xs: 0.625rem;
    --space-s: 1rem;
    --space-m: 1.75rem;
    --space-l: 3rem;
    --space-xl: 4.5rem;
    --space-2xl: clamp(4rem, 2.6rem + 6.5vw, 8rem);

    /* --- Form -------------------------------------------------------------- */
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 14px;
    --radius-pill: 999px;

    /* Shadows stay barely-there. Depth comes from hairlines. */
    --shadow-s: 0 1px 2px rgba(20, 24, 31, 0.04);
    --shadow-m: 0 1px 2px rgba(20, 24, 31, 0.04),
                0 8px 24px -12px rgba(20, 24, 31, 0.14);
    --shadow-l: 0 2px 4px rgba(20, 24, 31, 0.04),
                0 24px 48px -24px rgba(20, 24, 31, 0.18);

    /* --- Motion ------------------------------------------------------------ */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 160ms;
    --dur: 280ms;
    --dur-slow: 560ms;

    --wrap: 1120px;
    --wrap-narrow: 720px;
}

/* =============================================================================
   2. Base
   ============================================================================= */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchor links land below the sticky nav rather than under it. */
    scroll-padding-top: 6rem;
}

body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1;
    overflow-x: hidden;
}

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

:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
    border-radius: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--ink-900);
    color: var(--paper);
    font-weight: 600;
    border-radius: 0 0 var(--radius-s) 0;
}

.skip-link:focus {
    left: 0;
}

/* =============================================================================
   3. Layout primitives
   ============================================================================= */

/* Named `.wrap`, not `.container` — Tailwind owns `.container`. */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: clamp(1.15rem, 4vw, 2.25rem);
}

.wrap--narrow {
    max-width: var(--wrap-narrow);
}

.section {
    padding-block: var(--space-2xl);
    position: relative;
}

.section--tight {
    padding-block: var(--space-xl);
}

/* The only two surfaces. Both light — the difference is barely perceptible and
   that is the point: it separates without shouting. */
.section--paper { background: var(--paper); }
.section--paper-2 { background: var(--paper-2); }

/* Hairline between sections, faded at both ends. This does the work that a
   coloured background block used to do. */
.section--ruled::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--rule) 15%, var(--rule) 85%, transparent);
}

.section__head {
    max-width: 44rem;
    margin-bottom: var(--space-l);
}

.section__head--center {
    margin-inline: auto;
    text-align: center;
}

.section__lede {
    font-size: var(--step-1);
    line-height: 1.6;
    color: var(--fg-muted);
    margin: 0;
    text-wrap: pretty;
}

/* =============================================================================
   4. Typography
   ============================================================================= */

.display,
.section__title,
.hero__title {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    /* Fraunces is variable: high optical size, quirk axes at zero, so it reads
       as a restrained editorial serif rather than a display face. */
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
    text-wrap: balance;
    margin: 0 0 var(--space-s);
    color: var(--fg);
}

.hero__title { font-size: var(--step-5); }
.section__title { font-size: var(--step-4); }

.card__title,
.subhead {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 24;
    letter-spacing: -0.012em;
    line-height: 1.25;
    font-size: var(--step-2);
    margin: 0 0 var(--space-xs);
    color: var(--fg);
}

/* One word in a headline, set in italic. Colour is optional and used rarely —
   the italic alone usually carries enough emphasis. */
.mark {
    font-style: italic;
    font-variation-settings: 'SOFT' 16, 'WONK' 1, 'opsz' 40;
    color: var(--amber);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber);
    margin: 0 0 var(--space-s);
}

.eyebrow::before {
    content: '';
    width: 1.5rem;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.section__head--center .eyebrow::before { display: none; }

.lede-lg {
    font-size: var(--step-1);
    color: var(--fg-muted);
    line-height: 1.6;
    text-wrap: pretty;
}

/* =============================================================================
   5. Buttons
   ============================================================================= */

.btn {
    --btn-bg: var(--ink-900);
    --btn-fg: var(--paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.5rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    font-weight: 500;
    letter-spacing: -0.003em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid var(--btn-bg);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
    /* Touch target floor per CLAUDE.md. */
    min-height: 44px;
}

.btn:hover {
    --btn-bg: var(--ink-700);
    transform: translateY(-1px);
}

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

/* Primary is simply the solid ink button — the default. Named for clarity at
   call sites. */
.btn--primary {
    --btn-bg: var(--ink-900);
    --btn-fg: var(--paper);
}

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink-900);
    border-color: var(--rule-strong);
}

.btn--ghost:hover {
    --btn-bg: transparent;
    --btn-fg: var(--ink-900);
    border-color: var(--ink-900);
}

/* A quiet text link with an arrow. Used where a filled button would be too much. */
.btn--text {
    --btn-bg: transparent;
    --btn-fg: var(--ink-900);
    border-color: transparent;
    padding-inline: 0;
    min-height: 0;
}

.btn--text:hover {
    --btn-bg: transparent;
    transform: none;
    color: var(--amber);
}

.btn--lg {
    padding: 1rem 1.85rem;
    font-size: var(--step-1);
}

.btn__icon {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    transition: transform var(--dur) var(--ease-out);
}

.btn:hover .btn__icon { transform: translateX(3px); }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
}

.btn-row--center { justify-content: center; }

/* =============================================================================
   6. Cards
   ============================================================================= */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    transition: border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
}

.card:hover {
    transform: translateY(-2px);
    border-color: var(--rule-strong);
    box-shadow: var(--shadow-m);
}

.card__body {
    color: var(--fg-muted);
    margin: 0 0 var(--space-s);
}

.card__body:last-child { margin-bottom: 0; }

/* A card that is itself a link (insights). Inherits colour so the title does
   not turn into a default blue anchor. */
.card--link {
    text-decoration: none;
    color: inherit;
}

.card--link .card__title { transition: color var(--dur-fast) var(--ease-out); }
.card--link:hover .card__title { color: var(--amber); }

.card__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: var(--space-s);
    font-size: var(--step--1);
    color: var(--slate-400);
}

.card--link:hover .card__meta { color: var(--amber); }

/* Numbered card — a small, quiet index. Not a giant ghosted numeral. */
.card__index {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--amber);
    margin-bottom: var(--space-xs);
}

/* =============================================================================
   7. Lists
   ============================================================================= */

.ticks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.ticks li {
    position: relative;
    padding-left: 1.35rem;
    font-size: var(--step--1);
    color: var(--fg-muted);
    line-height: 1.55;
}

.ticks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: var(--amber);
}

/* =============================================================================
   8. Grids
   ============================================================================= */

.grid {
    display: grid;
    gap: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .grid--3,
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .grid--2,
    .grid--3,
    .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   9. Pills / tags
   ============================================================================= */

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: var(--space-s);
}

.pill {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--slate-600);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--radius-s);
    transition: border-color var(--dur-fast) var(--ease-out);
}

.card:hover .pill { border-color: var(--rule-strong); }

/* =============================================================================
   10. Stats
   ============================================================================= */

.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

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

.stat {
    padding-top: var(--space-s);
    border-top: 1px solid var(--rule);
}

.stat__value {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
    font-weight: 500;
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
    line-height: 1;
    letter-spacing: -0.028em;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}

.stat__label {
    display: block;
    margin-top: 0.5rem;
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--fg-muted);
}

/* =============================================================================
   11. Hero
   =============================================================================
   Deliberately not a coloured band. Same paper canvas as the rest of the page,
   separated from the nav by whitespace alone. All the weight is in the type.
   ============================================================================= */

.hero {
    position: relative;
    background: var(--paper);
    padding-block: clamp(3.5rem, 2.2rem + 7vw, 7rem) clamp(3rem, 2rem + 5vw, 5.5rem);
    overflow: hidden;
}

/* A single, very faint technical grid. At 2.5% opacity it registers as paper
   texture rather than as a graphic. Driven by --parallax from motion.js. */
.hero__grid {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(20, 24, 31, 0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(20, 24, 31, 0.025) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 72%);
    mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 72%);
    transform: translate3d(0, calc(var(--parallax, 0) * -14px), 0);
    pointer-events: none;
}

.hero .wrap { position: relative; z-index: 1; }

.hero__inner { max-width: 52rem; }

.hero__lede {
    font-size: var(--step-1);
    line-height: 1.6;
    color: var(--fg-muted);
    max-width: 38rem;
    margin: 0 0 var(--space-m);
    text-wrap: pretty;
}

.hero__actions { margin-bottom: var(--space-xl); }

.hero__note {
    font-size: var(--step--1);
    color: var(--slate-400);
    margin: var(--space-s) 0 0;
}

.hero__stats { padding-top: var(--space-m); }

/* =============================================================================
   12. Maturity ladder (the four-stage journey)
   ============================================================================= */

.ladder {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--white);
}

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

@media (max-width: 560px) {
    .ladder { grid-template-columns: minmax(0, 1fr); }
}

.rung {
    position: relative;
    padding: clamp(1.2rem, 1rem + 0.9vw, 1.75rem);
    border-right: 1px solid var(--rule);
}

.rung:last-child { border-right: 0; }

@media (max-width: 880px) {
    .rung:nth-child(2) { border-right: 0; }
    .rung:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}

@media (max-width: 560px) {
    .rung { border-right: 0; border-bottom: 1px solid var(--rule); }
    .rung:last-child { border-bottom: 0; }
}

/* Progress meter — fills further along the journey. The one place amber does
   any real visual work. */
.rung__meter {
    height: 2px;
    border-radius: 2px;
    background: var(--paper-3);
    overflow: hidden;
    margin-bottom: var(--space-s);
}

.rung__meter span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--amber);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 900ms var(--ease-out);
}

.is-revealed .rung__meter span { transform: scaleX(var(--fill, 0.25)); }

.rung__step {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate-400);
}

.rung__name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 500;
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 24;
    margin: 0.25rem 0 0.5rem;
}

.rung__desc {
    font-size: var(--step--1);
    color: var(--fg-muted);
    margin: 0 0 0.7rem;
}

.rung__analogy {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--slate-400);
    padding-top: 0.7rem;
    border-top: 1px solid var(--rule);
    margin: 0;
}

/* =============================================================================
   13. Quote / testimonial
   ============================================================================= */

.quote {
    position: relative;
    padding-left: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
    border-left: 2px solid var(--amber);
}

.quote__text {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 400;
    font-variation-settings: 'SOFT' 6, 'WONK' 0, 'opsz' 32;
    line-height: 1.45;
    letter-spacing: -0.008em;
    color: var(--fg);
    margin: 0 0 var(--space-m);
    text-wrap: pretty;
}

.quote__body p {
    color: var(--fg-muted);
    margin: 0 0 var(--space-s);
}

.quote__attrib {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    margin-top: var(--space-m);
    padding-top: var(--space-m);
    border-top: 1px solid var(--rule);
}

.avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--fg);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.attrib__name { font-weight: 600; line-height: 1.3; }

.attrib__role {
    font-size: var(--step--1);
    color: var(--fg-muted);
    line-height: 1.3;
}

.stars {
    color: var(--amber);
    letter-spacing: 0.16em;
    font-size: 0.85rem;
    margin-bottom: var(--space-s);
}

/* =============================================================================
   14. Split layout (about / founder)
   ============================================================================= */

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    align-items: start;
}

@media (max-width: 900px) {
    .split { grid-template-columns: minmax(0, 1fr); }
}

.split--aside {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

@media (max-width: 900px) {
    .split--aside { grid-template-columns: minmax(0, 1fr); }
}

.credential {
    display: grid;
    gap: 0.3rem;
    padding: var(--space-s) 0;
    border-top: 1px solid var(--rule);
}

.credential__label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate-400);
}

.credential__value {
    color: var(--fg-muted);
    font-size: var(--step--1);
    line-height: 1.6;
}

/* =============================================================================
   15. Forms
   ============================================================================= */

.form { display: grid; gap: var(--space-s); }

.field { display: grid; gap: 0.35rem; }

.field__label {
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--fg);
}

.field__input,
.field__select,
.field__textarea {
    width: 100%;
    padding: 0.8rem 0.95rem;
    font-family: var(--font-sans);
    font-size: var(--step-0);
    color: var(--fg);
    background: var(--white);
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-s);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
    min-height: 44px;
}

.field__textarea {
    resize: vertical;
    min-height: 6.5rem;
    line-height: 1.55;
}

.field__input::placeholder,
.field__textarea::placeholder { color: var(--slate-400); }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
    outline: none;
    border-color: var(--ink-900);
    box-shadow: 0 0 0 3px var(--amber-wash);
}

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-s);
}

@media (max-width: 620px) {
    .field-row { grid-template-columns: minmax(0, 1fr); }
}

.form-panel {
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-s);
}

/* =============================================================================
   16. Booking
   ============================================================================= */

.booking-embed {
    position: relative;
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--white);
    /* Shorter on phones so the rest of the page stays reachable, but never
       hidden — a hidden scheduler is a scheduler nobody books through. */
    height: 620px;
}

@media (min-width: 768px) {
    .booking-embed { height: 720px; }
}

.booking-embed iframe {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
    /* Google's embed has transparent regions, so without an opaque background
       whatever sits behind the iframe shows through its gaps. */
    background: var(--white);
}

/* Shown only when the embed genuinely fails to load — see the script in
   pages/home/_booking.html, which reveals this if the iframe has not fired
   `load` in time (strict third-party cookie settings, privacy extensions).

   It is hidden by default rather than stacked behind the iframe: the
   behind-the-iframe approach bled the failure message through the calendar on
   real devices. `visibility` rather than `display` so the box keeps its size. */
.booking-embed__fallback {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-s);
    padding: var(--space-m);
    text-align: center;
    color: var(--fg-muted);
    background: var(--paper-2);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
}

.booking-embed__fallback.is-shown {
    visibility: visible;
    opacity: 1;
}

/* =============================================================================
   17. Prose (privacy policy, long-form)
   ============================================================================= */

.prose-doc { max-width: 44rem; }

.prose-doc h2 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 500;
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 28;
    letter-spacing: -0.014em;
    line-height: 1.25;
    color: var(--fg);
    margin: var(--space-l) 0 var(--space-s);
    padding-top: var(--space-s);
    border-top: 1px solid var(--rule);
}

.prose-doc h3 {
    font-family: var(--font-sans);
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--fg);
    margin: var(--space-m) 0 var(--space-2xs);
}

.prose-doc p,
.prose-doc li {
    color: var(--slate-600);
    line-height: 1.72;
}

.prose-doc p { margin: 0 0 var(--space-s); }

.prose-doc ul {
    margin: 0 0 var(--space-s);
    padding-left: 1.1rem;
}

.prose-doc li { margin-bottom: 0.35rem; }

.prose-doc a {
    color: var(--amber);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.prose-doc a:hover { color: var(--ink-900); }

.prose-doc strong { color: var(--fg); font-weight: 600; }

.doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem var(--space-m);
    padding-bottom: var(--space-m);
    margin-bottom: var(--space-m);
    border-bottom: 1px solid var(--rule);
    font-size: var(--step--1);
    color: var(--fg-muted);
}

.doc-meta dt { font-weight: 600; color: var(--fg); display: inline; }
.doc-meta dd { display: inline; margin: 0 0 0 0.4rem; }

.callout {
    display: grid;
    gap: 0.5rem;
    padding: var(--space-s) var(--space-m);
    margin: var(--space-m) 0;
    background: var(--paper-2);
    border-left: 2px solid var(--amber);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

.callout p { margin: 0; color: var(--slate-600); }
.callout strong { color: var(--ink-900); }

/* =============================================================================
   18. Page header (interior pages)
   ============================================================================= */

.page-head {
    background: var(--paper);
    padding-block: clamp(2.75rem, 2rem + 4vw, 4.5rem) var(--space-m);
    border-bottom: 1px solid var(--rule);
}

.page-head__title {
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: 500;
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--fg);
    margin: 0;
}

/* =============================================================================
   19. Footer
   ============================================================================= */

.site-footer {
    background: var(--paper-2);
    border-top: 1px solid var(--rule);
    padding-block: var(--space-xl) var(--space-m);
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-l);
    padding-bottom: var(--space-l);
}

@media (max-width: 820px) {
    .site-footer__top { grid-template-columns: minmax(0, 1fr); }
}

.site-footer__brand {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 500;
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 24;
    letter-spacing: -0.015em;
    color: var(--fg);
    margin: 0 0 0.4rem;
}

.site-footer__tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'SOFT' 12, 'WONK' 1, 'opsz' 24;
    color: var(--fg-muted);
    max-width: 22rem;
    margin: 0;
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-m);
}

@media (max-width: 560px) {
    .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.site-footer__heading {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--slate-400);
    margin: 0 0 0.7rem;
}

.site-footer__nav a {
    display: block;
    padding: 0.28rem 0;
    font-size: var(--step--1);
    color: var(--slate-600);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__nav a:hover { color: var(--amber); }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-m);
    padding-top: var(--space-m);
    border-top: 1px solid var(--rule);
    font-size: var(--step--1);
    color: var(--slate-400);
}

.site-footer__bottom p { margin: 0; }

.site-footer__bottom a { color: var(--slate-600); text-decoration: none; }

.site-footer__bottom a:hover {
    color: var(--amber);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =============================================================================
   20. Motion
   =============================================================================
   Elements marked [data-reveal] start hidden and are revealed by motion.js as
   they scroll into view. The `.js-motion` class is set on <html> by an inline
   script in <head>, so the hidden state only applies when JavaScript is running
   — no-JS visitors see everything immediately.
   ============================================================================= */

.js-motion [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.js-motion [data-reveal='fade'] { transform: none; }

.js-motion [data-reveal].is-revealed {
    opacity: 1;
    /* Cleared, not just reset — a lingering transform creates a containing
       block and breaks position:sticky descendants. */
    transform: none;
    will-change: auto;
}

/* -----------------------------------------------------------------------------
   Reduced motion. Everything decorative switches off and every revealed
   element is shown immediately.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

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

    .js-motion [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .hero__grid { transform: none !important; }

    .btn:hover,
    .card:hover { transform: none; }

    .is-revealed .rung__meter span { transform: scaleX(var(--fill, 0.25)); }
}

/* =============================================================================
   21. Utilities
   ============================================================================= */

.u-center { text-align: center; }
.u-mt-l { margin-top: var(--space-l); }
.u-mt-m { margin-top: var(--space-m); }
.u-mb-0 { margin-bottom: 0; }
.u-muted { color: var(--fg-muted); }

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