/* ============================================================
   eltrus.net — design system
   Warm monochrome, humanist serif display, Inter body.
   Built for clarity, not animation.
   ============================================================ */

:root {
    /* Palette */
    --bg: #fafaf7;
    --bg-alt: #f1eee5;
    --bg-card: #ffffff;
    --ink: #1a1a1a;
    --ink-soft: #3d3d3a;
    --ink-mute: #6a6a64;
    --rule: #e3dfd5;
    --rule-strong: #c9c4b6;
    --accent: #4a6c47;
    --accent-soft: #6e8a6a;
    --accent-tint: rgba(74, 108, 71, 0.08);
    --shadow-sm: 0 1px 2px rgba(20, 18, 12, 0.04);
    --shadow-md: 0 2px 10px rgba(20, 18, 12, 0.06);

    /* Type */
    --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    /* Rhythm */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;
    --space-9: 128px;

    --container: 1100px;
    --container-narrow: 760px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --tx: 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ============================================================
   Reset
   ============================================================ */

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

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

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* (Grain overlay removed — wasn't working in browser, looked muddy.) */

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

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

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection {
    background: var(--accent);
    color: var(--bg);
}

/* ============================================================
   Layout primitives
   ============================================================ */

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

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

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

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

.section--wide {
    padding-block: var(--space-9);
}

.section--alt {
    background: var(--bg-alt);
}

.rule {
    height: 1px;
    background: var(--rule);
    border: 0;
    margin: 0;
}

/* ============================================================
   Type scale
   ============================================================ */

.display-xl {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(40px, 5.6vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 144, "SOFT" 50;
}

.display-lg {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    font-variation-settings: "opsz" 96, "SOFT" 50;
}

.display-md {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 48, "SOFT" 50;
}

.eyebrow {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.lede {
    font-size: clamp(18px, 1.6vw, 21px);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 60ch;
}

.text-mute {
    color: var(--ink-mute);
}

.text-small {
    font-size: 14px;
    line-height: 1.5;
}

/* ============================================================
   Nav
   ============================================================ */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 250, 247, 0.85);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--rule);
}

.nav__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.nav__brand {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink);
}

.nav__brand-dot {
    color: var(--accent);
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    list-style: none;
}

.nav__menu a {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: color var(--tx);
    padding: 4px 0;
}

.nav__menu a:hover,
.nav__menu a[aria-current="page"] {
    color: var(--accent);
}

.nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    transition: background var(--tx);
}

.nav__cta:hover {
    background: var(--accent);
}

.nav__toggle {
    display: none;
    background: none;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    cursor: pointer;
    color: var(--ink);
}

.nav__toggle svg { width: 18px; height: 18px; }

.nav__menu--mobile-cta { display: none; }

@media (max-width: 720px) {
    .nav__menu { display: none; }
    .nav__cta { display: none; }
    .nav__toggle { display: inline-flex; align-items: center; }
    .nav--open .nav__menu {
        display: flex;
        position: absolute;
        left: 0; right: 0; top: 100%;
        background: var(--bg);
        border-bottom: 1px solid var(--rule);
        flex-direction: column;
        padding: var(--space-4);
        gap: var(--space-3);
        align-items: stretch;
    }
    .nav--open .nav__menu--mobile-cta { display: list-item; }
    .nav--open .nav__menu--mobile-cta a {
        color: var(--accent);
        font-weight: 600;
    }
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background var(--tx), border-color var(--tx), color var(--tx), transform var(--tx);
    text-decoration: none;
}

.btn--primary {
    background: var(--ink);
    color: var(--bg);
}

.btn--primary:hover {
    background: var(--accent);
}

.btn--secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule-strong);
}

.btn--secondary:hover {
    border-color: var(--ink);
    background: var(--bg-alt);
}

.btn__arrow {
    font-size: 16px;
    transition: transform var(--tx);
}

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

/* ============================================================
   Hero
   ============================================================ */

.hero {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-7);
    align-items: center;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-4);
}

.hero__eyebrow::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
}

.hero__title {
    margin-bottom: var(--space-4);
}

.hero__title em {
    font-style: italic;
    color: var(--accent);
}

.hero__sub {
    margin-bottom: var(--space-5);
}

.hero__cta {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.hero__meta {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    color: var(--ink-mute);
    font-size: 14px;
}

.hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hero__portrait {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    background: var(--bg-alt);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    position: relative;
}

.hero__portrait svg { width: 100%; height: 100%; }

.hero__portrait--photo {
    margin: 0;
    padding: 0;
    position: relative;
    box-shadow: 0 8px 32px rgba(20, 18, 12, 0.10), 0 2px 6px rgba(20, 18, 12, 0.06);
}

.hero__portrait--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* (Portrait caption removed — photos carry themselves.) */

/* Homepage hero: real photo of founder working, replaces placeholder visual. */
.hero__photo {
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-alt);
    border: 1px solid var(--rule);
    box-shadow: 0 12px 40px rgba(20, 18, 12, 0.12), 0 2px 6px rgba(20, 18, 12, 0.06);
    position: relative;
    isolation: isolate;
}

.hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

/* (Hero photo caption removed.) */

/* ============================================================
   Hero visual (homepage): editorial bleed treatment for a
   work screenshot. Pulled from the frontend specialist's pass,
   tightened. CSS scroll-timeline does the parallax natively;
   falls back to static where unsupported (Safari, Firefox).
   ============================================================ */

.hero__visual {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--rule);
    box-shadow: 0 4px 24px rgba(20, 18, 12, 0.06), 0 1px 2px rgba(20, 18, 12, 0.04);
    isolation: isolate;
}

.hero__visual-chrome {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    height: 38px;
    background: rgba(241, 238, 229, 0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid #e3dfd5;
    box-sizing: border-box;
}

.hero__visual-chrome-url {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    background: #fafaf7;
    border: 1px solid #e3dfd5;
    border-radius: 4px;
    padding: 3px 10px;
    line-height: 1.2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Cascadia Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    color: #6a6a64;
    text-align: center;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
}

.hero__visual-shot {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    overflow: hidden;
}

.hero__visual-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Editorial bleed: soft fade on the left edge so the image dissolves
   into the page rather than sitting in a hard rectangle. */
.hero__visual-shot {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 100%);
}

/* Forest-green + ink wash, multiply blend, low opacity.
   Brightens on hover like a print reveal. */
.hero__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, var(--accent), var(--ink));
    mix-blend-mode: multiply;
    opacity: 0.12;
    pointer-events: none;
    transition: opacity var(--tx);
    z-index: 2;
}

.hero__visual:hover::after { opacity: 0.04; }

/* Placeholder content when no real screenshot is available */
.hero__visual-placeholder {
    position: absolute;
    inset: 0;
    padding: 60px 32px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--ink-mute);
    background: var(--bg);
    z-index: 1;
}

.hero__visual-placeholder h4 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: 8px;
    font-variation-settings: "opsz" 48, "SOFT" 80;
}

.hero__visual-placeholder p {
    font-size: 14px;
    max-width: 32ch;
    line-height: 1.5;
}

/* Scroll-timeline parallax. Native CSS; runs on the compositor.
   Falls back silently where unsupported. */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .hero__visual-shot img,
        .hero__visual-placeholder {
            transform: scale(1.04) translateY(0);
            animation: hero-parallax linear forwards;
            animation-timeline: scroll(root block);
            animation-range: 0 70vh;
        }
    }
}

@keyframes hero-parallax {
    to {
        transform: scale(1) translateY(6%);
        opacity: 0.45;
        filter: saturate(0.85) contrast(1.05);
    }
}

/* Marginalia: rotated italic dateline visible only on very wide screens.
   Wide-screen-only magazine move. */
.hero__marginalia {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 13px;
    color: var(--ink-mute);
    letter-spacing: 0.05em;
    white-space: nowrap;
    font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1;
    display: none;
}

@media (min-width: 1440px) {
    .hero { position: relative; }
    .hero__marginalia { display: block; }
}

@media (max-width: 800px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    .hero__portrait { order: -1; max-width: 280px; margin: 0 auto; aspect-ratio: 1 / 1; border-radius: 50%; }
    .hero__visual { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Audience strip
   ============================================================ */

.audience {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
    padding-block: var(--space-5);
}

.audience__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: center;
    justify-content: center;
    color: var(--ink-mute);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.audience__list li::marker { content: none; }
.audience__list li { list-style: none; }
.audience__list li + li::before {
    content: "·";
    color: var(--rule-strong);
    margin-right: var(--space-5);
    margin-left: calc(var(--space-5) * -1);
}

@media (max-width: 600px) {
    .audience__list li + li::before { display: none; }
    .audience__list { justify-content: flex-start; }
}

/* Audience picker */
.picker {
    padding: var(--space-7) 0 var(--space-3);
}
.picker__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 800px) { .picker__grid { grid-template-columns: 1.15fr 1fr; } }

.picker__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--space-5);
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: transform var(--tx), border-color var(--tx), box-shadow var(--tx);
}
a.picker__card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 16px 40px rgba(20,18,12,0.08);
}
.picker__card--featured {
    background: var(--accent-tint);
    border-color: rgba(74,108,71,0.25);
}
.picker__eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 600;
}
.picker__card--featured .picker__eyebrow { color: var(--accent); }
.picker__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 4px 0 6px;
}
.picker__desc {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 var(--space-2);
}
.picker__cta {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.02em;
    margin-top: auto;
}
.picker__cta--muted { color: var(--ink-mute); }

/* ============================================================
   Section header
   ============================================================ */

.section-head {
    margin-bottom: var(--space-6);
    max-width: 60ch;
}

.section-head__eyebrow {
    display: block;
    margin-bottom: var(--space-2);
}

/* ============================================================
   Packages
   ============================================================ */

.packages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.package {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color var(--tx), transform var(--tx);
}

.package--featured {
    border-color: var(--accent);
    background: var(--bg-card);
    position: relative;
}

.package--featured::before {
    content: "Most chosen";
    position: absolute;
    top: -10px;
    left: var(--space-5);
    background: var(--accent);
    color: var(--bg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.package__name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.package__price {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
}

.package__price-small {
    font-size: 14px;
    color: var(--ink-mute);
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0;
    margin-left: 4px;
}

.package__shape {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.4;
    font-variation-settings: "opsz" 24, "SOFT" 90, "WONK" 1;
    margin: -4px 0 4px;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--rule);
}

.packages-footer {
    margin-top: var(--space-6);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}
.packages-footer__band {
    max-width: 560px;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.6;
}
.packages-footer__band strong {
    color: var(--ink);
    font-weight: 600;
}

.package__desc {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.55;
    flex-grow: 1;
}

.package__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--ink-soft);
}

.package__list li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.package__list li::before {
    content: "→";
    color: var(--accent);
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .packages { grid-template-columns: 1fr; }
}

/* ============================================================
   Work grid
   ============================================================ */

.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.work-card {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color var(--tx), transform var(--tx);
}

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

/* Work-card screenshot frame.
   Each screenshot sits inside a faked browser chrome — traffic lights
   + a project-named URL bar. Anchors any aspect ratio so the image
   underneath reads as "this is a real product I shipped" rather than
   "an asset cropped to a card". */

.work-card__media {
    background: var(--bg-alt);
    overflow: hidden;
    border-bottom: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
}

/* Browser-chrome bar: appears at top of work cards, case shots, hero visual.
   Explicit values + higher specificity to survive Safari inheritance quirks. */
.work-card__chrome,
.case__shot > .work-card__chrome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    height: 38px;
    background: #f1eee5;
    border-bottom: 1px solid #e3dfd5;
    flex-shrink: 0;
    box-sizing: border-box;
}

.work-card__chrome-dots {
    display: inline-flex;
    gap: 5px;
    flex-shrink: 0;
    align-items: center;
}

.work-card__chrome-dots > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c9c4b6;
    display: inline-block;
    flex-shrink: 0;
}

.work-card__chrome-url {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    background: #fafaf7;
    border: 1px solid #e3dfd5;
    border-radius: 4px;
    padding: 3px 10px;
    line-height: 1.2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Cascadia Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    color: #6a6a64;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
}

.work-card__shot {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg);
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
}

.work-card__shot picture { display: contents; }

.work-card__shot img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center top;
}

/* For images wider than the card aspect (e.g. ultrawide screenshots),
   let them sit at the top of the frame with the bottom cut off cleanly.
   For images narrower than the card, they centre vertically. */
.work-card__shot--cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.work-card__shot--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-mute);
    font-family: var(--font-display);
    font-size: 18px;
    text-align: center;
    padding: var(--space-4);
}

.work-card__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.work-card__eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.work-card__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.work-card__desc {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.work-card__meta {
    display: flex;
    gap: var(--space-3);
    font-size: 13px;
    color: var(--ink-mute);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--rule);
}

@media (max-width: 720px) {
    .work-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Why-me / value props
   ============================================================ */

.why {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.why__item h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-2);
}

.why__item p {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.55;
}

.why__item--first-letter::first-letter {
    color: var(--accent);
}

@media (max-width: 720px) {
    .why { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ============================================================
   Mockup gallery — live iframe-embedded mockup sites
   ============================================================ */

.mockups {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 1100px) {
    .mockups { grid-template-columns: repeat(2, 1fr); }
}

.mockup-frame {
    margin: 0;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(20,18,12,0.06), 0 2px 8px rgba(20,18,12,0.04);
}
.mockup-frame__chrome {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 14px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--rule);
    font-size: 13px;
}
.mockup-frame__dots { display: inline-flex; gap: 6px; }
.mockup-frame__dots i {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--rule);
    display: inline-block;
}
.mockup-frame__dots i:nth-child(1) { background: #f08376; }
.mockup-frame__dots i:nth-child(2) { background: #f0c060; }
.mockup-frame__dots i:nth-child(3) { background: #6fc878; }
.mockup-frame__url {
    flex: 1;
    text-align: center;
    color: var(--ink-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    background: var(--bg);
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mockup-frame__open {
    color: var(--accent);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background var(--tx);
}
.mockup-frame__open:hover { background: var(--accent-tint); }
.mockup-frame iframe {
    display: block;
    width: 100%;
    height: 680px;
    border: 0;
    background: white;
}
.mockup-frame__caption {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--bg);
}
.mockup-frame__caption strong {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.mockup-frame__caption span {
    color: var(--ink-soft);
    font-size: 14px;
}
@media (max-width: 720px) {
    .mockup-frame iframe { height: 560px; }
    .mockup-frame__url { font-size: 11px; padding: 3px 8px; }
}

/* ============================================================
   Process — vertical, outcome-led
   ============================================================ */

.process {
    display: flex;
    flex-direction: column;
    max-width: 760px;
    margin: 0 auto;
    position: relative;
}
.process::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 36px;
    bottom: 36px;
    width: 1px;
    background: linear-gradient(to bottom, var(--accent) 0%, var(--rule) 30%, var(--rule) 70%, transparent 100%);
}
.process__step {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    position: relative;
}
.process__num {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 6px var(--bg);
}
.process__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ink);
    margin: 4px 0 8px;
}
.process__desc {
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 720px) {
    .process__title { font-size: 20px; }
    .process__desc { font-size: 15px; }
    .process__step { grid-template-columns: 40px 1fr; gap: var(--space-3); }
    .process__num { width: 40px; height: 40px; font-size: 12px; }
    .process::before { left: 20px; }
}

/* ============================================================
   Gaps section — icon cards with bullet leaks
   ============================================================ */

.gaps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.gap {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: transform var(--tx), box-shadow var(--tx), border-color var(--tx);
}
.gap:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(20,18,12,0.08);
    border-color: rgba(74,108,71,0.25);
}

.gap__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--accent-tint);
    color: var(--accent);
    flex-shrink: 0;
}
.gap__icon svg { width: 22px; height: 22px; }

.gap__title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

.gap__lead {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

.gap__list {
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0 0;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.45;
}
.gap__list li {
    position: relative;
    padding-left: 18px;
}
.gap__list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--ink-mute);
}

@media (max-width: 900px) {
    .gaps { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ============================================================
   FAQ
   ============================================================ */

.faq {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.faq__item {
    border-bottom: 1px solid var(--rule);
    padding-bottom: var(--space-4);
}

.faq__item:last-child { border-bottom: 0; }

.faq__q {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-2);
}

.faq__a {
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.6;
    max-width: 68ch;
}

/* ============================================================
   Contact form
   ============================================================ */

.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: start;
}

.contact__intro p { color: var(--ink-soft); margin-bottom: var(--space-4); }

.contact__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 15px;
}

.contact__details a:hover { color: var(--accent); }

.contact__details dt {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-top: var(--space-3);
}

.contact__details dd { color: var(--ink); }

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

.form__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
}

.form input,
.form textarea {
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    transition: border-color var(--tx), background var(--tx);
}

.form input:focus,
.form textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-card);
}

.form textarea {
    min-height: 110px;
    resize: vertical;
}

.form__note {
    font-size: 13px;
    color: var(--ink-mute);
    margin-top: 4px;
}

@media (max-width: 800px) {
    .contact { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
    background: var(--bg-alt);
    border-top: 1px solid var(--rule);
    padding-block: var(--space-7) var(--space-5);
    margin-top: var(--space-8);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.footer__brand {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--space-2);
}

.footer__tag {
    color: var(--ink-soft);
    font-size: 15px;
    max-width: 38ch;
}

.footer__col h4 {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: var(--space-3);
}

.footer__col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer__col a {
    color: var(--ink-soft);
    font-size: 15px;
    transition: color var(--tx);
}

.footer__col a:hover { color: var(--accent); }

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--rule);
    font-size: 13px;
    color: var(--ink-mute);
}

@media (max-width: 720px) {
    .footer__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ============================================================
   Page-specific: salons campaign hero
   ============================================================ */

.salons-hero__title em {
    font-style: italic;
    font-family: var(--font-display);
    color: var(--accent);
}

.salons-hero__quote {
    border-left: 2px solid var(--accent);
    padding-left: var(--space-3);
    margin-block: var(--space-4);
    font-style: italic;
    color: var(--ink-soft);
    font-size: 17px;
    max-width: 50ch;
}

/* ============================================================
   Scene (salons): visual before/after with CSS-drawn phone
   mockups. Shows the difference, doesn't just describe it.
   ============================================================ */

.scene {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: stretch;
    position: relative;
}

.scene__col {
    display: grid;
    gap: var(--space-4);
    grid-template-rows: auto auto auto;
}
.scene__col--before {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head head"
        "marks phone"
        "caption caption";
}
.scene__col--after {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "head head"
        "phone marks"
        "caption caption";
}
.scene__head { grid-area: head; }
.phone-wrap { grid-area: phone; justify-self: center; }
.scene__col .marks { grid-area: marks; align-self: center; }
.scene__caption { grid-area: caption; }

.scene__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.scene__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    align-self: flex-start;
    flex-shrink: 0;
}

.scene__pill--bad { background: var(--bg-alt); color: var(--ink-soft); border: 1px solid var(--rule); }
.scene__pill--good { background: var(--accent); color: var(--bg); }

.scene__pill-dot { width: 6px; height: 6px; border-radius: 50%; }
.scene__pill--bad .scene__pill-dot { background: var(--ink-mute); }
.scene__pill--good .scene__pill-dot { background: var(--bg); }

.scene__head-label {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    color: var(--ink-soft);
    font-variation-settings: "opsz" 48, "SOFT" 100;
}

/* Phone device frame */
.phone {
    background: #1a1a1a;
    border-radius: 36px;
    padding: 10px;
    box-shadow:
        0 24px 60px rgba(20, 18, 12, 0.18),
        0 4px 12px rgba(20, 18, 12, 0.08);
    position: relative;
    max-width: 280px;
    margin: 0 auto;
    transition: transform var(--tx);
}

.scene__col:hover .phone { transform: translateY(-4px); }

.phone__screen {
    background: white;
    border-radius: 26px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 560px;
}
.phone--before .phone__screen,
.phone--after .phone__screen {
    aspect-ratio: auto;
}

.phone__notch {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 90px; height: 22px;
    background: #1a1a1a;
    border-radius: 0 0 14px 14px;
    z-index: 3;
}

.phone__status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 18px 4px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #1a1a1a;
    background: white;
    flex-shrink: 0;
}
.phone__status-right { display: inline-flex; align-items: center; gap: 5px; color: #1a1a1a; }

.phone__bar {
    padding: 32px 16px 10px;
    background: #f4f3ef;
    border-bottom: 1px solid #e8e6df;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
}

.phone__bar-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    color: #6a6a64;
    background: white;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid #e8e6df;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone__body {
    flex-grow: 1;
    padding: 12px;
    overflow: hidden;
    color: #1a1a1a;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-body);
}

/* ----- BEFORE phone: desktop site forced into a mobile viewport ----- */
.phone__body--desktopish {
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    position: relative;
}
.phone__body--desktopish::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 36px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
}
.bm2-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 6px;
    border-bottom: 1px solid #e8e6df;
    background: #fafaf7;
    font-size: 5.5px;
    overflow: hidden;
    white-space: nowrap;
}
.bm2-nav__brand { font-family: var(--font-display); font-weight: 600; font-size: 7px; color: #1a1a1a; flex-shrink: 0; }
.bm2-nav__links { color: #6a6a64; letter-spacing: 0.04em; overflow: hidden; text-overflow: clip; }
.bm2-nav__menu { font-size: 10px; color: #1a1a1a; flex-shrink: 0; }
.bm2-hero {
    padding: 6px 8px 8px;
    background: linear-gradient(135deg, #e9d9c8, #c9b89a);
    text-align: center;
}
.bm2-hero__tag { font-size: 5.5px; letter-spacing: 0.18em; color: #5a4a38; }
.bm2-hero__title { font-family: var(--font-display); font-size: 11px; font-weight: 600; color: #1a1a1a; margin-top: 3px; }
.bm2-hero__sub { font-size: 6px; color: #5a4a38; margin-top: 2px; letter-spacing: 0.04em; }
.bm2-hero__btn { display: inline-block; margin-top: 5px; background: #1a1a1a; color: white; font-size: 6px; padding: 3px 8px; border-radius: 1px; letter-spacing: 0.04em; }
.bm2-section-title { font-family: var(--font-display); font-size: 9px; font-weight: 600; padding: 5px 8px 2px; color: #1a1a1a; }
.bm2-pricewall {
    list-style: none; margin: 0; padding: 0 8px;
    font-size: 6.5px; line-height: 1.45; color: #3d3d3a;
}
.bm2-pricewall li {
    display: flex; justify-content: space-between;
    padding: 1.5px 0; border-bottom: 1px dotted #e8e6df;
}
.bm2-pricewall li:last-child { border-bottom: none; }
.bm2-cms {
    margin: 5px 8px;
    padding: 3px 5px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 6px;
    color: #b04a3a;
    background: #fbeae6;
    border: 1px dashed #e5b8af;
    border-radius: 1px;
    word-break: break-all;
}
.bm2-qr {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px 16px;
}
.bm2-qr__svg { flex-shrink: 0; line-height: 0; }
.bm2-qr__txt { font-size: 6px; color: #6a6a64; line-height: 1.3; }

/* ----- AFTER phone: real treatment page, mobile-first ----- */
.phone__body--after {
    padding: 0 !important;
    gap: 0 !important;
    background: white;
    overflow: hidden;
}
.mk-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px;
    border-bottom: 1px solid #ececec;
    background: white;
    flex-shrink: 0;
}
.mk-nav__brand {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1a1a1a;
}
.mk-nav__menu { color: #1a1a1a; line-height: 0; }
.mk-crumbs {
    padding: 4px 12px;
    font-size: 7px;
    color: #8a8a82;
    background: #fafaf7;
    border-bottom: 1px solid #ececec;
    letter-spacing: 0.02em;
}
.mk-crumbs span { margin: 0 3px; color: #c4c4bc; }
.mk-crumbs strong { color: #1a1a1a; font-weight: 600; }
.mk-hero-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background:
        linear-gradient(135deg, rgba(245,210,200,0.5), rgba(210,170,160,0)),
        radial-gradient(ellipse at 50% 65%, #efc2b3 0%, #d8907a 50%, #a05848 100%);
    flex-shrink: 0;
    overflow: hidden;
}
.mk-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.phone__body--after > .mk-eyebrow,
.phone__body--after > .mk-h1,
.phone__body--after > .mk-meta,
.phone__body--after > .mk-thumbs,
.phone__body--after > .mk-rating,
.phone__body--after > .mk-review,
.phone__body--after > .mk-faq,
.phone__body--after > .mk-cta,
.phone__body--after > .mk-foot {
    margin-left: 12px;
    margin-right: 12px;
}

.mk-eyebrow {
    font-size: 7px;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-weight: 600;
    margin-top: 9px;
    margin-bottom: 2px;
}
.mk-h1 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #1a1a1a;
    margin-bottom: 4px;
}
.mk-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 8px; color: #6a6a64;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.mk-meta__price {
    background: var(--accent-tint);
    color: var(--accent);
    padding: 2px 6px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 8px;
}
.mk-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}
.mk-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
}
.mk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-thumb--a {
    background:
        radial-gradient(ellipse at 50% 55%, #f0c2b1 0%, #d8907a 50%, #a86655 100%);
}
.mk-thumb--b {
    background:
        radial-gradient(ellipse at 50% 55%, #f5d2c1 0%, #e5a48a 50%, #c47a62 100%);
}
.mk-thumb--c {
    background: linear-gradient(135deg, #2a2a28, #1a1a1a);
}
.mk-thumb--c img { opacity: 0.55; }
.mk-thumb__tag {
    position: absolute;
    bottom: 3px; left: 3px;
    background: rgba(0,0,0,0.55);
    color: white;
    font-size: 6px;
    letter-spacing: 0.06em;
    padding: 1px 4px;
    border-radius: 2px;
    text-transform: uppercase;
    font-weight: 600;
}
.mk-thumb__tag--overlay {
    position: absolute;
    inset: 0;
    bottom: auto; left: auto;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    font-size: 9px;
    text-transform: none;
    letter-spacing: 0;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    padding: 0;
}

.mk-rating {
    display: flex; align-items: center; gap: 5px;
    font-size: 8px;
    margin-bottom: 4px;
}
.mk-rating__stars { color: var(--accent); letter-spacing: 1.5px; font-size: 9px; }
.mk-rating__count { color: #6a6a64; }
.mk-review {
    background: #f4f3ef;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 7.5px;
    line-height: 1.4;
    color: #3d3d3a;
    border-left: 2px solid var(--accent);
    display: flex; flex-direction: column; gap: 2px;
    margin-bottom: 6px;
}
.mk-review strong { color: #1a1a1a; font-size: 7.5px; }
.mk-faq {
    display: flex; flex-direction: column;
    gap: 4px;
    font-size: 7.5px;
    color: #1a1a1a;
    margin-bottom: 6px;
}
.mk-faq__q {
    padding: 5px 7px;
    background: #fafaf7;
    border: 1px solid #e8e6df;
    border-radius: 3px;
}
.mk-cta {
    background: var(--accent);
    color: white;
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 600;
    text-align: center;
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.mk-foot {
    font-size: 6.5px;
    color: #8a8a82;
    border-top: 1px solid #ececec;
    padding-top: 6px;
    padding-bottom: 8px;
    display: flex; gap: 4px;
    letter-spacing: 0.02em;
}
.bm-logo {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 8px;
    border-bottom: 1px solid #e8e6df;
    color: #3d3d3a;
}
.bm-hero {
    padding: 8px;
    background: linear-gradient(135deg, #e9d9c8, #c9b89a);
    text-align: center;
}
.bm-hero__tag {
    font-size: 7px;
    letter-spacing: 0.18em;
    color: #5a4a38;
    margin-bottom: 4px;
}
.bm-hero__bar {
    height: 28px;
    background: rgba(255,255,255,0.35);
    border-radius: 2px;
}
.bm-section-title {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    padding: 6px 8px 4px;
    color: #1a1a1a;
}
.bm-pricewall {
    list-style: none;
    margin: 0;
    padding: 0 8px;
    font-size: 7.5px;
    line-height: 1.5;
    color: #3d3d3a;
}
.bm-pricewall li {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px dotted #e8e6df;
}
.bm-pricewall li:last-child { border-bottom: none; }
.bm-cms {
    margin: 6px 8px;
    padding: 4px 6px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 7px;
    color: #b04a3a;
    background: #fbeae6;
    border: 1px dashed #e5b8af;
    border-radius: 2px;
}
.bm-qr {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 12px;
}
.bm-qr__box {
    width: 32px;
    height: 32px;
    background:
        repeating-linear-gradient(0deg, #1a1a1a 0 2px, transparent 2px 4px),
        repeating-linear-gradient(90deg, #1a1a1a 0 2px, transparent 2px 4px);
    background-color: #fff;
    border: 1px solid #1a1a1a;
    flex-shrink: 0;
}
.bm-qr__txt {
    font-size: 7px;
    color: #6a6a64;
    line-height: 1.3;
}

/* After-state: rich treatment page */
.phone--after .phone__body { gap: 5px; padding: 10px; }
.phone--after .phone__body h6 {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 2px;
}
.phone--after .phone__body .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    margin-bottom: 4px;
}
.phone--after .phone__body .gallery > div {
    aspect-ratio: 1;
    border-radius: 3px;
    background: linear-gradient(135deg, #d68267, #b5573a);
    opacity: 0.55;
}
.phone--after .phone__body .gallery > div:nth-child(2) { background: linear-gradient(135deg, #6e8a6a, #4a6c47); opacity: 0.5; }
.phone--after .phone__body .gallery > div:nth-child(3) { background: linear-gradient(135deg, #c9c4b6, #6a6a64); opacity: 0.5; }
.phone--after .phone__body .price-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 8px;
    color: var(--ink-soft);
}
.phone--after .phone__body .price-pill {
    background: var(--accent-tint);
    color: var(--accent);
    padding: 2px 6px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 8px;
}
.phone--after .phone__body .stars { color: var(--accent); font-size: 9px; letter-spacing: 1px; }
.phone--after .phone__body .review {
    background: #f4f3ef;
    padding: 5px 7px;
    border-radius: 4px;
    font-size: 7.5px;
    line-height: 1.4;
    color: #3d3d3a;
    border-left: 2px solid var(--accent);
}
.phone--after .phone__body .review strong { color: var(--ink); }
.phone--after .phone__body .book-btn {
    background: var(--accent);
    color: white;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 9px;
    text-align: center;
    margin-top: 4px;
    font-weight: 500;
}

/* Narrative steps under each phone */
.scene__steps {
    list-style: none;
    counter-reset: scene-steps;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: var(--space-2);
}
.scene__steps li {
    counter-increment: scene-steps;
    position: relative;
    padding-left: 28px;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.5;
}
.scene__steps li::before {
    content: counter(scene-steps);
    position: absolute;
    left: 0; top: 1px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--bg-alt);
    color: var(--ink-mute);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
}
.scene__col--after .scene__steps li::before {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
.scene__steps li em {
    font-style: italic;
}
.scene__col--after .scene__steps li em {
    color: var(--accent);
}

.scene__caption {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 32px;
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
    padding-top: var(--space-3);
    margin-top: auto;
    text-align: center;
    font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
    line-height: 1.1;
}
.scene__caption--bad { color: #8a4a3a; }
.scene__caption--good { color: var(--accent); }

/* Section-head centered modifier */
.section-head--center { text-align: center; }
.section-head--center .section-head__eyebrow { justify-content: center; }

/* Google-style search bar leading the story */
.story-search {
    max-width: 460px;
    margin: 0 auto var(--space-5);
    text-align: center;
}
.story-search__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 14px 22px;
    box-shadow: 0 1px 6px rgba(20,18,12,0.04), 0 6px 24px rgba(20,18,12,0.06);
    color: var(--ink-soft);
}
.story-search__bar svg { color: var(--ink-mute); flex-shrink: 0; }
.story-search__query {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    text-align: left;
    flex-grow: 1;
}
.story-search__caret {
    display: inline-block;
    color: var(--accent);
    animation: story-caret 1.1s steps(1) infinite;
    margin-left: 1px;
}
@keyframes story-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.story-search__hint {
    margin-top: 14px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    color: var(--ink-soft);
    font-variation-settings: "opsz" 24, "SOFT" 90;
}

/* Branching arrows */
.story-branch {
    max-width: 720px;
    margin: 0 auto var(--space-4);
    color: var(--ink-mute);
}
.story-branch svg { width: 100%; height: 90px; display: block; }

/* Phone wrap holds floating ✗/✓ marks */
.phone-wrap { position: relative; }

.story-mark {
    position: absolute;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
    font-variation-settings: "opsz" 14, "SOFT" 80, "WONK" 1;
    box-shadow: 0 4px 14px rgba(20,18,12,0.10), 0 1px 3px rgba(20,18,12,0.06);
    z-index: 2;
}
.story-mark--bad {
    background: #fff3f0;
    color: #8a3a2a;
    border: 1px solid #f0c8be;
}
.story-mark--good {
    background: var(--accent-tint);
    color: var(--accent);
    border: 1px solid rgba(74,108,71,0.25);
}

/* Marks live in their own grid column inside the scene__col — no overflow possible */
.marks {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    pointer-events: none;
    min-width: 0;
}
.marks--left { align-items: flex-end; text-align: right; }
.marks--right { align-items: flex-start; text-align: left; }
.marks .story-mark { position: static; }

.story-footnote {
    max-width: 600px;
    margin: var(--space-7) auto 0;
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink-soft);
    font-variation-settings: "opsz" 36, "SOFT" 100;
}

/* Entry animations — orchestrated by data attribute toggled in main.js */
.story-search__query::after { content: ""; }
[data-story-search] .story-search__query { display: inline-block; min-width: 1ch; }
[data-story-search] .story-search__caret { opacity: 0; }
[data-story] .story-branch__line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
[data-story] .story-branch__head { opacity: 0; }
[data-story] .story-mark { opacity: 0; transform: translateY(8px); }

[data-story].is-visible .story-search__caret { opacity: 1; }
[data-story].is-branched .story-branch__line {
    animation: story-draw 700ms ease-out forwards;
}
[data-story].is-branched .story-branch__head {
    animation: story-fade 300ms ease-out 700ms forwards;
}
[data-story].is-marked .marks--left .story-mark,
[data-story].is-marked .marks--right .story-mark {
    animation: story-mark-in 420ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
[data-story].is-marked .marks .story-mark:nth-child(1) { animation-delay: 0ms; }
[data-story].is-marked .marks .story-mark:nth-child(2) { animation-delay: 140ms; }
[data-story].is-marked .marks .story-mark:nth-child(3) { animation-delay: 280ms; }

@keyframes story-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes story-fade { to { opacity: 1; } }
@keyframes story-rise {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes story-mark-in {
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    [data-story] .story-mark,
    [data-story] .story-branch__head { opacity: 1; transform: none; }
    [data-story] .story-branch__line { stroke-dashoffset: 0; }
}

@media (max-width: 1100px) {
    .story-mark { font-size: 11px; padding: 4px 9px; }
}
@media (max-width: 900px) {
    .scene { grid-template-columns: 1fr; gap: var(--space-7); }
    .scene__col--before,
    .scene__col--after {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "phone"
            "marks"
            "caption";
    }
    .phone { max-width: 260px; }
    .story-branch { display: none; }
    .marks {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 var(--space-2);
        gap: 8px;
    }
    .marks--left, .marks--right { text-align: center; align-items: center; }
    .scene__caption { font-size: 26px; }
}

/* ============================================================
   Mini-mock: tiny CSS-drawn site preview that lives inside a
   .work-card__shot. Used for mockup gallery cards before real
   screenshots exist. Looks like a real treatment page in
   miniature, not a placeholder.
   ============================================================ */

.mini-mock {
    width: 100%;
    height: 100%;
    background: white;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    overflow: hidden;
}

.mini-mock__hero {
    padding: 14px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid var(--rule);
    background: var(--bg-alt);
}

.mini-mock__logo {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.mini-mock__hero-text {
    font-size: 10px;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mini-mock__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
    flex-grow: 1;
    align-content: start;
}

.mini-mock__cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mini-mock__tile {
    aspect-ratio: 4 / 3;
    border-radius: 3px;
    background: linear-gradient(135deg, #6e8a6a, #4a6c47);
    opacity: 0.55;
    margin-bottom: 2px;
}

.mini-mock__cell:nth-child(2) .mini-mock__tile {
    background: linear-gradient(135deg, #d6cfb8, #a39a83); opacity: 0.55;
}
.mini-mock__cell:nth-child(3) .mini-mock__tile {
    background: linear-gradient(135deg, #c9c4b6, #6a6a64); opacity: 0.5;
}

.mini-mock__name {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}

.mini-mock__price {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9.5px;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.mini-mock__footer {
    background: white;
    padding: 9px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--rule);
    flex-shrink: 0;
}

.mini-mock__stars {
    color: var(--accent);
    font-size: 11px;
    letter-spacing: 2px;
}

.mini-mock__stars-text {
    color: var(--ink-mute);
    font-size: 10px;
    letter-spacing: 0;
    margin-left: 4px;
}

.mini-mock__cta {
    background: var(--accent);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Variant: "before" mockup showing a thin/dated site for contrast */
.mini-mock--thin {
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    gap: 12px;
}

.mini-mock--thin .mini-mock__thin-logo {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-soft);
}

.mini-mock--thin .mini-mock__thin-band {
    width: 80%;
    height: 36px;
    background: linear-gradient(135deg, #d8d4ca, #c9c4b6);
    border-radius: 4px;
}

.mini-mock--thin .mini-mock__thin-line {
    width: 60%;
    height: 6px;
    background: var(--bg-alt);
    border-radius: 3px;
}

.mini-mock--thin .mini-mock__thin-cta {
    background: #1a1a1a;
    color: white;
    padding: 5px 16px;
    border-radius: 3px;
    font-size: 10px;
    margin-top: 4px;
}

/* ============================================================
   Timeline: horizontal connected process steps
   ============================================================ */

.timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    position: relative;
}

/* Horizontal connecting line behind the markers */
.timeline::before {
    content: "";
    position: absolute;
    top: 22px;
    left: calc(12.5% + 22px);
    right: calc(12.5% + 22px);
    height: 2px;
    background: var(--rule);
    z-index: 0;
}

.timeline__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
}

.timeline__marker {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 0 0 6px var(--bg);
    margin-bottom: var(--space-2);
}

.timeline__step h3 {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.timeline__step p {
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .timeline { grid-template-columns: 1fr; gap: var(--space-4); }
    .timeline::before {
        left: 22px;
        top: 60px;
        bottom: 24px;
        width: 2px;
        right: auto;
        height: auto;
    }
    .timeline__step { padding-left: 60px; position: relative; }
    .timeline__marker { position: absolute; left: 0; top: 0; }
}

/* ============================================================
   Case factbox (work.html): proper dl with grid layout
   ============================================================ */

.case__factbox {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4) var(--space-5);
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    margin: var(--space-5) 0;
}

.case__factbox > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.case__factbox dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.case__factbox dd {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    font-variation-settings: "opsz" 48, "SOFT" 80;
}

.case__factbox dd a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ============================================================
   Other work strip (work.html bottom)
   ============================================================ */

.otherwork {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.otherwork__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--tx), transform var(--tx), box-shadow var(--tx);
}

a.otherwork__item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.otherwork__eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 2px;
}

.otherwork__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-variation-settings: "opsz" 48, "SOFT" 60;
}

.otherwork__desc {
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.55;
    flex-grow: 1;
}

.otherwork__link {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--accent);
    padding-top: var(--space-2);
    border-top: 1px solid var(--rule);
    margin-top: var(--space-2);
}

.otherwork__link--mute {
    color: var(--ink-mute);
}

@media (max-width: 900px) {
    .otherwork { grid-template-columns: 1fr; }
}

/* ============================================================
   Credibility strip (about page)
   ============================================================ */

.creds {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.creds__eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.creds__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: baseline;
}

.creds__list li {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
    position: relative;
    padding-right: var(--space-4);
    font-variation-settings: "opsz" 36, "SOFT" 70;
}

.creds__list li:not(:last-child)::after {
    content: "·";
    position: absolute;
    right: 0;
    color: var(--accent);
    font-weight: 700;
}

/* Institutional logos credibility strip — silhouettes via brightness(0) */
.creds__logos {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-5) var(--space-6);
    align-items: end;
    margin-top: var(--space-3);
    padding-top: var(--space-2);
}

.creds__logos li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.creds__logos img {
    height: 28px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    object-position: left center;
    opacity: 0.72;
    filter: brightness(0);
    transition: opacity var(--tx);
}

.creds__logos li:hover img {
    opacity: 1;
}

.creds__role {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-mute);
    line-height: 1.3;
}

@media (max-width: 720px) {
    .creds__logos { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
    .creds__logos img { height: 24px; }
}

/* ============================================================
   (legacy) Story / Steps — kept for any pages still using them
   ============================================================ */

.story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
}

.story__col {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
}

.story__col--after {
    border-color: var(--accent);
    background: var(--bg-card);
}

.story__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--ink-mute);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.story__pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.story__pill--bad {
    background: var(--bg-alt);
    color: var(--ink-soft);
    border: 1px solid var(--rule);
}

.story__pill--good {
    background: var(--accent);
    color: var(--bg);
}

.story__list {
    list-style: none;
    counter-reset: story;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-2) 0;
}

.story__list li {
    counter-increment: story;
    position: relative;
    padding-left: 38px;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.55;
}

.story__list li::before {
    content: counter(story, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-mute);
    background: var(--bg-alt);
    border-radius: 4px;
    padding: 3px 6px;
    font-weight: 500;
}

.story__col--after .story__list li::before {
    background: var(--accent-tint);
    color: var(--accent);
}

.story__list li em {
    font-style: italic;
    color: var(--accent);
}

.story__col--before .story__list li em {
    color: var(--ink);
}

.story__caption {
    font-family: var(--font-display);
    font-size: 18px;
    font-style: italic;
    color: var(--ink-soft);
    font-variation-settings: "opsz" 48, "SOFT" 80;
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule);
    margin-top: auto;
}

@media (max-width: 900px) {
    .story { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ============================================================
   Case study (work.html)
   ============================================================ */

.case + .case { border-top: 1px solid var(--rule); }

.case__head {
    max-width: 70ch;
    margin-bottom: var(--space-5);
}

.case__head .lede { margin-top: var(--space-2); }

.case__shot {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-5);
}

.case__shot-img {
    background: var(--bg-alt);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.case__shot-img picture { display: contents; }

.case__shot-img img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center top;
}

.case__meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-5);
    padding-block: var(--space-4);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--space-5);
}

.case__meta-row dt {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 2px;
}

.case__meta-row dd {
    font-size: 15px;
    color: var(--ink);
}

.case__meta-row dd a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.case__body {
    max-width: 65ch;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1.6;
}

.case__quote {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: "opsz" 96, "SOFT" 80;
    font-size: 22px;
    line-height: 1.4;
    color: var(--ink);
    border-left: 2px solid var(--accent);
    padding: 4px 0 4px var(--space-3);
    margin-top: var(--space-3);
}

@media (max-width: 720px) {
    .case__meta { grid-template-columns: 1fr; }
}

/* ============================================================
   Steps (salons process)
   ============================================================ */

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.step {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.step__num {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
}

.step h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 48, "SOFT" 60;
}

.step p {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.55;
}

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

@media (max-width: 600px) {
    .steps { grid-template-columns: 1fr; }
}

/* ============================================================
   Utility / accessibility
   ============================================================ */

.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    padding: 12px 16px;
    background: var(--ink);
    color: var(--bg);
    z-index: 200;
}

.skip-link:focus {
    left: var(--space-4);
    top: var(--space-3);
}

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

/* ============================================================
   Personality — Fraunces variable axes
   The display face has SOFT and WONK axes that almost no other
   serif exposes. These are the moves: subtle, characterful,
   not Framer-template motion.
   ============================================================ */

/* Brand wordmark: serifs go slightly wonky on hover.
   Almost nobody else can do this, so it reads as "this is real". */
.nav__brand,
.footer__brand {
    font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0;
    transition: font-variation-settings 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nav__brand:hover,
.footer__brand:hover {
    font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 1;
}

/* The accent dot in "Eltrus." breathes slowly.
   Single sign of life in the nav. */
@keyframes brand-dot-breath {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(0.78); opacity: 0.7; }
}

.nav__brand-dot {
    display: inline-block;
    transform-origin: center 70%;
    animation: brand-dot-breath 3.6s ease-in-out infinite;
}

/* Hero italic words: arrive sharp, soften over the first second.
   One-shot on page load. Reads as a hand-drawn letterform settling
   into place, not a generic fade-in. */
@keyframes em-soft-land {
    0%   { font-variation-settings: "opsz" 144, "SOFT" 0,   "WONK" 0; }
    60%  { font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
    100% { font-variation-settings: "opsz" 144, "SOFT" 70,  "WONK" 0; }
}

.hero__title em,
.salons-hero__title em {
    font-style: italic;
    color: var(--accent);
    display: inline-block;
    font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 0;
    animation: em-soft-land 1400ms cubic-bezier(0.2, 0.7, 0.2, 1) 220ms both;
}

/* Section title accent word: subtle WONK on hover within section-head */
.section-head h2 {
    font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 0;
    transition: font-variation-settings 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.section-head h2:hover {
    font-variation-settings: "opsz" 96, "SOFT" 80, "WONK" 1;
}

/* Package cards: subtle hand-placed feel.
   Each card has a tiny offset rotation that resets on hover.
   Reads as "set down by hand, not stamped out by a grid". */
.package {
    transform: rotate(-0.25deg);
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
                border-color var(--tx),
                box-shadow var(--tx);
}

.package:nth-child(2) { transform: rotate(0.15deg); }
.package:nth-child(3) { transform: rotate(-0.1deg); }

.package:hover {
    transform: rotate(0) translateY(-3px);
    box-shadow: var(--shadow-md);
}

.package--featured::before {
    transform: rotate(-2deg);
    transform-origin: left center;
}

/* Work cards: a touch of lift on hover.
   No fade-in-on-scroll. */
.work-card {
    transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1),
                border-color var(--tx),
                box-shadow var(--tx);
}

.work-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Hero portrait: very slow drift so the page isn't dead still.
   Below the threshold of "is this moving?" - intended to be
   noticed only on second glance. */
@keyframes portrait-drift {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-6px) rotate(0.3deg); }
}

.hero__portrait {
    animation: portrait-drift 9s ease-in-out infinite;
}

/* Buttons: the arrow drifts on hover (already in .btn__arrow),
   but also a subtle scale on the whole button. */
.btn--primary {
    transition: background var(--tx), transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.btn--primary:hover {
    transform: translateY(-1px);
}

/* ---------- CSS-drawn surgical queue demo ---------- */
.qdemo {
    --q-red: #c64340;
    --q-orange: #d77a2c;
    --q-yellow: #b88a1f;
    --q-green: #3f7a3a;
    --q-neutral: #6a6a64;
    background: var(--bg-card);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
    padding: clamp(14px, 2vw, 22px);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.qdemo__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 14px;
}
.qdemo__title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.qdemo__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--accent-tint);
    color: var(--accent);
    flex-shrink: 0;
}
.qdemo__title h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.qdemo__title small {
    color: var(--ink-mute);
    font-size: 12px;
}
.qdemo__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.qdemo__btn {
    appearance: none;
    border: 1px solid var(--rule);
    background: var(--bg-card);
    color: var(--ink-soft);
    font: 500 12px/1 var(--font-body);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: default;
}
.qdemo__btn--primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.qdemo__stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.qdemo__stat {
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.qdemo__stat label {
    font-size: 11px;
    color: var(--ink-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qdemo__stat span {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 500;
    line-height: 1;
}
.qdemo__stat--red span { color: var(--q-red); }
.qdemo__stat--orange span { color: var(--q-orange); }
.qdemo__stat--yellow span { color: var(--q-yellow); }
.qdemo__stat--green span { color: var(--q-green); }
.qdemo__stat--neutral span { color: var(--q-neutral); }
.qdemo__toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.qdemo__sort-label {
    font-size: 11px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 4px;
}
.qdemo__pill {
    appearance: none;
    border: 1px solid var(--rule);
    background: var(--bg-card);
    color: var(--ink-soft);
    font: 500 11px/1 var(--font-body);
    padding: 6px 12px;
    border-radius: 999px;
    cursor: default;
}
.qdemo__pill--active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.qdemo__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.qdemo__table th,
.qdemo__table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--rule);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qdemo__table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-mute);
    font-weight: 500;
}
.qdemo__table tr:last-child td { border-bottom: 0; }
.qdemo__pid {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-soft);
    background: var(--bg);
    border: 1px solid var(--rule);
    padding: 2px 8px;
    border-radius: 4px;
}
.qdemo__chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: transparent;
}
.qdemo__chip--red { color: var(--q-red); }
.qdemo__chip--orange { color: var(--q-orange); }
.qdemo__chip--yellow { color: var(--q-yellow); }
.qdemo__chip--green { color: var(--q-green); }
.qdemo__foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-size: 11px;
    color: var(--ink-mute);
    display: flex;
    align-items: center;
    gap: 6px;
}
.qdemo__lock { display: inline-flex; }

/* Compact variant for homepage work-card */
.work-card__shot .qdemo {
    font-size: 11px;
    padding: 12px;
}
.work-card__shot .qdemo__bar { padding-bottom: 10px; margin-bottom: 10px; }
.work-card__shot .qdemo__title h4 { font-size: 14px; }
.work-card__shot .qdemo__title small { font-size: 10px; }
.work-card__shot .qdemo__icon { width: 28px; height: 28px; }
.work-card__shot .qdemo__icon svg { width: 16px; height: 16px; }
.work-card__shot .qdemo__btn { padding: 6px 9px; font-size: 10px; }
.work-card__shot .qdemo__stats { gap: 5px; margin-bottom: 10px; }
.work-card__shot .qdemo__stat { padding: 6px 8px; border-radius: 6px; }
.work-card__shot .qdemo__stat label { font-size: 9px; }
.work-card__shot .qdemo__stat span { font-size: 18px; }
.work-card__shot .qdemo__pill { padding: 4px 9px; font-size: 10px; }
.work-card__shot .qdemo__sort-label { font-size: 9px; }
.work-card__shot .qdemo__toolbar { margin-bottom: 8px; }
.work-card__shot .qdemo__table th,
.work-card__shot .qdemo__table td { padding: 6px 6px; font-size: 10.5px; }
.work-card__shot .qdemo__table th { font-size: 9px; }
.work-card__shot .qdemo__pid { font-size: 10px; padding: 1px 5px; }
.work-card__shot .qdemo__chip { font-size: 9px; padding: 2px 6px; }
.work-card__shot .qdemo__foot { font-size: 9px; margin-top: 8px; padding-top: 8px; }

/* Homepage mockup iframe — non-interactive preview that links via the card */
.work-card__shot--iframe {
    padding: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-card);
}
.work-card__shot--iframe iframe {
    width: 175%;
    height: 175%;
    border: 0;
    transform: scale(0.5715);
    transform-origin: top left;
    pointer-events: none;
}

@media (max-width: 720px) {
    .qdemo__stats { grid-template-columns: repeat(2, 1fr); }
    .qdemo__table th:nth-child(2),
    .qdemo__table td:nth-child(2),
    .qdemo__table th:nth-child(3),
    .qdemo__table td:nth-child(3) { display: none; }
    .qdemo__actions .qdemo__btn--ghost { display: none; }
}

/* Reduced-motion respect: kills everything above */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .package, .package:nth-child(2), .package:nth-child(3) {
        transform: none;
    }
}

/* ============================================================
   ============================================================
   NEW: AI customer ops positioning (2026-05-26)
   Appended below existing system. Reuses tokens from :root.
   ============================================================
   ============================================================ */

/* ---------- Hero: asymmetric split with editorial figure ---------- */
.hero--ops {
    padding-block: var(--space-8) var(--space-7);
}

.hero-ops {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-7);
    align-items: center;
}

.hero-ops__copy {
    min-width: 0;
}

.hero-ops__eyebrow {
    display: inline-block;
    margin-bottom: var(--space-3);
    color: var(--accent);
}

.hero-ops__title {
    margin-block-end: var(--space-3);
}

.hero-ops__title em {
    font-style: italic;
    color: var(--ink-soft);
    line-height: 1.1;
    display: inline-block;
    padding-bottom: 4px;
}

.hero-ops__sub {
    margin-block-end: var(--space-5);
}

.hero-ops__cta {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.hero-ops__fineprint {
    margin-top: var(--space-4);
    font-size: 14px;
    color: var(--ink-mute);
    max-width: 56ch;
    line-height: 1.5;
}

.hero-ops__figure {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-5) var(--space-4);
    box-shadow: var(--shadow-md);
    position: relative;
}

.hero-ops__figure::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--accent-tint) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

.hero-ops__figure > * {
    position: relative;
    z-index: 1;
}

.hero-ops__figure-eyebrow {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-mute);
    display: block;
    margin-bottom: var(--space-2);
}

.hero-ops__figure-context {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-mute);
    line-height: 1.5;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--space-3);
}

.hero-ops__figure-rows {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.hero-ops__figure-rows > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: baseline;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--rule);
}

.hero-ops__figure-rows > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.hero-ops__figure-rows dt {
    font-size: 13px;
    color: var(--ink-mute);
    line-height: 1.4;
}

.hero-ops__figure-rows dd {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.hero-ops__figure-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--accent);
    font-weight: 500;
    border-top: 1px solid var(--rule);
    padding-top: var(--space-3);
    margin-top: var(--space-2);
    text-decoration: none;
    transition: color var(--tx);
}

.hero-ops__figure-link:hover {
    color: var(--accent-soft);
}

@media (max-width: 900px) {
    .hero-ops {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* ---------- Helpdesk integrations strip ---------- */
.hd-strip {
    padding-block: var(--space-6);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
}

.hd-strip__label {
    text-align: center;
    font-size: 13px;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: var(--space-4);
}

.hd-strip__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5) var(--space-6);
}

.hd-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    color: var(--ink-soft);
    opacity: 0.78;
    transition: opacity var(--tx);
}

.hd-strip__item:hover {
    opacity: 1;
}

.hd-strip__item img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.85;
}

.hd-strip__mark {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-soft);
    background: var(--bg-card);
}

@media (max-width: 700px) {
    .hd-strip__list { gap: var(--space-4); }
    .hd-strip__item { font-size: 13px; }
}

/* ---------- Section-head asymmetric variant ---------- */
.section-head--asymmetric {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-6);
    align-items: end;
    text-align: left;
    max-width: 100%;
    margin-bottom: var(--space-6);
}

@media (max-width: 900px) {
    .section-head--asymmetric {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

/* ---------- Flow tiles ---------- */
.flows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.flow {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    position: relative;
    transition: border-color var(--tx), box-shadow var(--tx);
}

.flow:hover {
    border-color: var(--rule-strong);
    box-shadow: var(--shadow-md);
}

.flow__index {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
    margin-bottom: var(--space-3);
    letter-spacing: 0.05em;
}

.flow__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-3);
    color: var(--ink);
}

.flow__desc {
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: var(--space-4);
    font-size: 15px;
}

.flow__numbers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule);
}

.flow__numbers > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.flow__numbers dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
    font-weight: 500;
}

.flow__numbers dd {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.flow__caveat {
    margin-top: var(--space-5);
    text-align: center;
}

@media (max-width: 900px) {
    .flows { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---------- How it works (3-step engagement) ---------- */
.how {
    list-style: none;
    counter-reset: none;
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.how__step {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--space-6);
    align-items: start;
}

.how__step:nth-child(2n) {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.how__step:nth-child(2n) .how__step-head { order: 2; }
.how__step:nth-child(2n) .how__step-desc,
.how__step:nth-child(2n) .how__step-items { order: 1; }

.how__step-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.how__step-num {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--accent);
    letter-spacing: 0.05em;
}

.how__step-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.how__step-price {
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--ink);
    font-weight: 500;
    background: var(--accent-tint);
    padding: 4px 10px;
    border-radius: 4px;
    align-self: flex-start;
    margin-top: 8px;
}

.how__step-desc {
    color: var(--ink-soft);
    line-height: 1.6;
    grid-row: span 1;
}

.how__step-items {
    list-style: none;
    display: grid;
    gap: 8px;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule);
}

.how__step-items li {
    padding-left: 22px;
    position: relative;
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.how__step-items li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 12px;
    height: 1px;
    background: var(--accent);
}

@media (max-width: 900px) {
    .how__step,
    .how__step:nth-child(2n) {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .how__step:nth-child(2n) .how__step-head { order: 0; }
    .how__step-title { font-size: 22px; }
}

/* ---------- Why us: horizontal strip with vertical rules ---------- */
.why {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: var(--space-6);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.why__col {
    padding: var(--space-5) var(--space-5);
    border-right: 1px solid var(--rule);
}

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

.why__col:first-child {
    padding-left: 0;
}

.why__col:last-child {
    padding-right: 0;
}

.why__col-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
    display: block;
}

.why__col-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: var(--space-3);
}

.why__col p {
    color: var(--ink-soft);
    line-height: 1.55;
    font-size: 14px;
}

@media (max-width: 900px) {
    .why {
        grid-template-columns: 1fr;
        border-top: 1px solid var(--rule);
        border-bottom: 1px solid var(--rule);
    }
    .why__col {
        padding: var(--space-4) 0;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
    }
    .why__col:last-child {
        border-bottom: 0;
    }
    .why__col:first-child { padding-top: var(--space-4); }
}

/* ---------- Commitments (5 always-do items) ---------- */
.commitments {
    margin-top: var(--space-6);
}

.commitments__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-4);
    color: var(--ink);
}

.commitments__list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-6);
}

.commitments__list li {
    padding-left: var(--space-3);
    border-left: 2px solid var(--accent);
    line-height: 1.55;
    color: var(--ink-soft);
    font-size: 15px;
}

.commitments__list li strong {
    color: var(--ink);
    display: block;
    margin-bottom: 4px;
}

@media (max-width: 900px) {
    .commitments__list { grid-template-columns: 1fr; }
}

/* ---------- Pricing tiers ---------- */
.tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.tier {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    transition: border-color var(--tx), box-shadow var(--tx);
}

.tier:hover {
    border-color: var(--rule-strong);
    box-shadow: var(--shadow-md);
}

.tier--featured {
    border-color: var(--ink);
    border-width: 2px;
    background: var(--bg-card);
    position: relative;
}

.tier--featured::before {
    content: "Most chosen";
    position: absolute;
    top: -10px;
    left: 24px;
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 4px;
}

.tier__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--space-4);
}

.tier__name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.tier__shape {
    font-size: 13px;
    color: var(--ink-mute);
    letter-spacing: 0.02em;
}

.tier__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: var(--space-2);
}

.tier__price--secondary {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--rule);
}

.tier__price-amt {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: lining-nums tabular-nums;
}

.tier__price-amt-small {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.tier__price-unit {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-mute);
}

.tier__pitch {
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: var(--space-4);
    font-size: 15px;
}

.tier__list {
    list-style: none;
    display: grid;
    gap: 8px;
    margin-bottom: var(--space-5);
    flex-grow: 1;
}

.tier__list li {
    padding-left: 18px;
    position: relative;
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.tier__list li::before {
    content: "+";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent);
    font-family: var(--font-mono);
    font-weight: 500;
}

.tier__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--accent);
    font-size: 15px;
    border-top: 1px solid var(--rule);
    padding-top: var(--space-3);
    transition: color var(--tx), gap var(--tx);
    text-decoration: none;
}

.tier__cta:hover {
    color: var(--accent-soft);
    gap: 12px;
}

@media (max-width: 900px) {
    .tiers { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---------- Trust block (6 items grid) ---------- */
.trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.trust__item {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--rule);
}

.trust__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-2);
    color: var(--ink);
}

.trust__item p {
    color: var(--ink-soft);
    line-height: 1.55;
    font-size: 15px;
}

@media (max-width: 900px) {
    .trust { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
@media (max-width: 600px) {
    .trust { grid-template-columns: 1fr; }
}

/* ---------- Founder strip ---------- */
.founder {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-7);
    align-items: center;
}

.founder__photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--bg-card);
}

.founder__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.founder__copy {
    min-width: 0;
}

.founder__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-4);
    color: var(--accent);
    font-weight: 500;
    font-size: 15px;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
    transition: gap var(--tx);
}

.founder__link:hover {
    gap: 10px;
}

@media (max-width: 900px) {
    .founder { grid-template-columns: 1fr; gap: var(--space-5); }
    .founder__photo { max-width: 360px; }
}

/* ---------- Closing CTA ---------- */
.closing {
    padding-block: var(--space-8);
}

.closing__cta {
    display: inline-flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-5);
}

/* ---------- Generic hero--page variant for non-home pages ---------- */
.hero--page {
    padding-block: var(--space-8) var(--space-6);
}

/* ---------- Prose article (about page) ---------- */
.prose h2 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.prose h2:first-child {
    margin-top: 0;
}

.prose p {
    margin-bottom: var(--space-3);
    line-height: 1.65;
    color: var(--ink-soft);
    font-size: 17px;
}

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

.prose__photo {
    margin: var(--space-5) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
}

.prose__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.prose__photo figcaption {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-mute);
    padding: var(--space-2) 0;
    text-align: right;
}

.prose__list {
    list-style: none;
    display: grid;
    gap: 10px;
    margin-bottom: var(--space-4);
    padding-left: 0;
}

.prose__list li {
    padding-left: 22px;
    position: relative;
    color: var(--ink-soft);
    line-height: 1.5;
}

.prose__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 12px;
    height: 1px;
    background: var(--accent);
}

.prose__dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px var(--space-4);
    margin-top: var(--space-4);
}

.prose__dl dt {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-mute);
    letter-spacing: 0.02em;
    padding-top: 3px;
}

.prose__dl dd {
    color: var(--ink-soft);
}

@media (max-width: 600px) {
    .prose__dl {
        grid-template-columns: 1fr;
        gap: 0 0;
    }
    .prose__dl dt { margin-top: var(--space-2); }
}

/* ---------- Work page: case (sample audit) ---------- */
.case {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-5);
}

.case__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-4);
    margin-top: var(--space-4);
    color: var(--ink);
}

.case__title:first-child { margin-top: 0; }

.case__numbers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.case__number {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-3);
    border-left: 2px solid var(--accent);
}

.case__number-value {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: lining-nums tabular-nums;
}

.case__number-label {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.45;
}

.case__cta {
    margin-top: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
}

.case__cta-note {
    font-size: 13px;
    color: var(--ink-mute);
}

@media (max-width: 700px) {
    .case__numbers { grid-template-columns: 1fr; gap: var(--space-3); }
    .case__number-value { font-size: 30px; }
}

/* ---------- Work page: portfolio items ---------- */
.portfolio {
    display: grid;
    gap: var(--space-7);
    margin-top: var(--space-6);
}

.portfolio__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: center;
}

.portfolio__item--reverse {
    direction: rtl;
}

.portfolio__item--reverse > * {
    direction: ltr;
}

.portfolio__media {
    aspect-ratio: 4 / 3;
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.portfolio__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.portfolio__media--iframe {
    position: relative;
}

.portfolio__chrome {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 8px 12px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--rule);
}

.portfolio__chrome-dots {
    display: flex;
    gap: 6px;
}

.portfolio__chrome-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rule-strong);
}

.portfolio__chrome-url {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-mute);
}

.portfolio__media--iframe iframe {
    width: 175%;
    height: 175%;
    border: 0;
    transform: scale(0.5715);
    transform-origin: top left;
    pointer-events: none;
}

/* Browser-chrome + screenshot variant (for surgical CRM, StudySmith) */
.portfolio__media--shot {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
}

.portfolio__media--shot .portfolio__shot {
    flex: 1;
    overflow: hidden;
    background: var(--bg-alt);
    aspect-ratio: 4 / 3;
}

.portfolio__media--shot.portfolio__media--wide .portfolio__shot {
    aspect-ratio: 16 / 9;
}

.portfolio__media--shot .portfolio__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

.portfolio__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: -0.01em;
    margin-block: 8px var(--space-3);
    color: var(--ink);
}

.portfolio__body p {
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

.portfolio__chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-bottom: var(--space-4);
    padding-left: 0;
}

.portfolio__chips li {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-soft);
    padding: 4px 10px;
    background: var(--bg-alt);
    border-radius: 4px;
}

.portfolio__chips li a {
    color: var(--accent);
}

.portfolio__lesson {
    border-top: 1px solid var(--rule);
    padding-top: var(--space-3);
    font-size: 14px;
    color: var(--ink-soft);
}

.portfolio__lesson .eyebrow {
    display: block;
    margin-bottom: 4px;
}

@media (max-width: 900px) {
    .portfolio__item,
    .portfolio__item--reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: var(--space-4);
    }
    .portfolio__item--reverse > * { direction: ltr; }
    .portfolio__title { font-size: 24px; }
}

/* ---------- Contact page: paths + form ---------- */
.contact-ops {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-6);
    align-items: start;
}

.contact-ops__sidebar {
    min-width: 0;
}

.contact-ops__paths {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.contact-ops__path {
    border-left: 2px solid var(--accent);
    padding-left: var(--space-3);
}

.contact-ops__path-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.01em;
    margin-block: 6px 6px;
    color: var(--ink);
}

.contact-ops__path p {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.contact-ops__details {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px var(--space-3);
    border-top: 1px solid var(--rule);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
}

.contact-ops__details dt {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-mute);
    letter-spacing: 0.02em;
    padding-top: 4px;
}

.contact-ops__details dd {
    font-size: 14px;
    color: var(--ink-soft);
}

.contact-ops__form {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

@media (max-width: 900px) {
    .contact-ops { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---------- FAQ ---------- */
.faq {
    margin-top: var(--space-6);
    display: grid;
    gap: var(--space-3);
}

.faq__item {
    border-top: 1px solid var(--rule);
    padding-top: var(--space-3);
    padding-bottom: var(--space-2);
}

.faq__item dt {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 8px;
}

.faq__item dd {
    color: var(--ink-soft);
    line-height: 1.6;
    padding-left: 0;
}

/* ============================================================
   NEW: trust.html (procurement / security page) - 2026-05-26
   ============================================================ */

.trust-block {
    display: grid;
    gap: var(--space-4);
}

.trust-block__head {
    display: grid;
    gap: var(--space-1);
}

.trust-block__head .eyebrow {
    font-family: var(--font-mono);
    color: var(--accent);
}

.trust-block__body p {
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

.trust-block__body p strong {
    color: var(--ink);
}

.trust-block__h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.trust-block__dl {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 12px var(--space-4);
    border-top: 1px solid var(--rule);
    padding-top: var(--space-4);
}

.trust-block__dl dt {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-mute);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding-top: 4px;
}

.trust-block__dl dd {
    color: var(--ink-soft);
    font-size: 15px;
}

.trust-block__dl dd a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--rule);
    text-underline-offset: 3px;
}

@media (max-width: 700px) {
    .trust-block__dl {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .trust-block__dl dt {
        margin-top: var(--space-3);
    }
}

/* Sub-processor table */
.subproc {
    margin-top: var(--space-5);
    border-top: 1px solid var(--rule);
}

.subproc__row {
    display: grid;
    grid-template-columns: 1.2fr 2fr 1fr 1.6fr;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
}

.subproc__row strong {
    color: var(--ink);
    font-weight: 500;
}

.subproc__row--head {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
    border-bottom: 1px solid var(--ink);
    padding-bottom: var(--space-2);
}

.subproc__more {
    margin-top: var(--space-5);
    border-top: 1px solid var(--rule);
    padding-top: var(--space-4);
}

.subproc__more summary {
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    color: var(--ink);
    padding: 4px 0;
    list-style: none;
}

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

.subproc__more summary::after {
    content: "  +";
    font-family: var(--font-mono);
    color: var(--accent);
}

.subproc__more[open] summary::after {
    content: "  -";
}

.subproc__more-body {
    margin-top: var(--space-3);
}

.subproc__more-body p {
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

@media (max-width: 900px) {
    .subproc__row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: var(--space-4) 0;
    }
    .subproc__row > div::before {
        font-family: var(--font-mono);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ink-mute);
        display: block;
        margin-bottom: 4px;
    }
    .subproc__row > div:nth-child(1)::before { content: "Vendor"; }
    .subproc__row > div:nth-child(2)::before { content: "Service"; }
    .subproc__row > div:nth-child(3)::before { content: "Location"; }
    .subproc__row > div:nth-child(4)::before { content: "Transfer"; }
    .subproc__row--head { display: none; }
}