/* === RESET === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* === BRAND TOKENS ===
   Canonical brand shell for the three service-line pages
   (workshop, missionfield-studio, start-retainer). Per-page CSS
   remaps any legacy local token through an alias layer instead of
   redefining colors — modify these tokens (or one of the helpers
   further down) rather than introducing page-specific hues. */
:root {
    /* Color (canonical — per-page legacy aliases layer on top) */
    --bg: #F8F7F3;
    --surface: #FFFFFF;
    --ink: #1C1A17;
    --ink-mid: #4A4A4A;
    --ink-soft: rgba(28,26,23,0.55);
    --line: rgba(28,26,23,0.08);
    --line-strong: rgba(28,26,23,0.14);
    --brand: #123629;
    --brand-deep: #0B1D18;
    --accent: #C97A32;
    --accent-hover: #B36B2B;

    /* Type scale (modular) */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: clamp(2.4rem, 4.5vw, 3.25rem);
    --fs-display: clamp(2.75rem, 5.5vw, 4.5rem);

    /* Line heights */
    --lh-tight: 1.08;
    --lh-snug: 1.2;
    --lh-normal: 1.55;
    --lh-relaxed: 1.7;

    /* Tracking */
    --tracking-tight: -0.025em;
    --tracking-tighter: -0.035em;
    --tracking-normal: 0;
    --tracking-wide: 0.08em;
    --tracking-wider: 0.13em;

    /* Spacing scale */
    --s-1: 0.5rem;
    --s-2: 1rem;
    --s-3: 1.5rem;
    --s-4: 2rem;
    --s-5: 3rem;
    --s-6: 4rem;
    --s-7: 6rem;
    --s-8: 8rem;
    --s-hero-y: clamp(7rem, 12vh, 10rem);
    --s-section-y: clamp(5rem, 9vh, 7rem);

    /* Containers */
    --w-prose: 38rem;
    --w-narrow: 56rem;
    --w-base: 72rem;
    --w-wide: 82rem;

    /* Radius / shadow / motion */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-1: 0 1px 2px rgba(11,29,24,0.04), 0 4px 16px rgba(11,29,24,0.06);
    --shadow-2: 0 8px 32px rgba(11,29,24,0.10);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 220ms;

    /* Stack */
    --font-display: 'Bricolage Grotesque', Georgia, serif;
    --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* === CONTAINER / SECTION PRIMITIVES === */
.container {
    max-width: var(--w-base);
    margin-inline: auto;
    padding-inline: var(--s-4);
}
.section {
    padding-block: var(--s-section-y);
}

/* === SECTION LABEL === */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--accent);
    margin-bottom: 1.2rem;
}
.section-label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 1px;
    background: var(--accent);
    opacity: 0.7;
}
.section-label.muted { color: var(--ink-mid); }
.section-label.muted::before { background: var(--ink-mid); }
.section-label.field { color: var(--brand); }
.section-label.field::before { background: var(--brand); }

/* === BUTTONS === */
.btn-primary,
.btn--primary {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    background: var(--accent);
    color: #FFFFFF;
    padding: 1rem 2.2rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: all var(--dur) var(--ease-out);
    border: none;
    cursor: pointer;
}
.btn-primary:hover,
.btn--primary:hover {
    background: var(--accent-hover);
}

.btn-outline,
.btn--outline {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    background: transparent;
    color: var(--brand);
    padding: 1rem 2rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: all var(--dur) var(--ease-out);
    border: 1px solid var(--brand);
    cursor: pointer;
}
.btn-outline:hover,
.btn--outline:hover {
    background: rgba(18,54,41,0.05);
}

/* Canonical CTA. The hero block of every service-line page must
   use .btn-primary for its lone CTA — never introduce bespoke hero
   CTA classes (.btn-hero, .reveal-btn, ...) that override the
   accent. In-page buttons that are NOT the hero CTA (e.g. tier CTAs
   inside a dark depth panel) may use their own selector, provided
   they reference var(--accent) / var(--harvest-amber) — never a
   one-off color. */

/* === SERVICE-LINE HERO SHELL === */
.sl-hero {
    display: flex;
    align-items: center;
    padding-block: var(--s-hero-y);
    padding-inline: var(--s-4);
    position: relative;
    overflow: hidden;
    min-height: 92vh;
}
.sl-hero__inner {
    max-width: var(--w-narrow);
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
}
.sl-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: var(--s-3);
}
.sl-hero__eyebrow::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}
.sl-hero__title {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tighter);
    margin-bottom: var(--s-3);
    max-width: 18ch;
}
.sl-hero__title em {
    font-style: normal;
    color: var(--accent);
}
.sl-hero__sub {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    max-width: var(--w-prose);
    margin-bottom: var(--s-4);
    opacity: 0.85;
}
/* Restrained light-hero surface — opt-in via .sl-hero--restrained.
   Drops the dark/photo washes in favor of the Apple/Patagonia/Stripe
   single-accent treatment: off-white background, no entrance animation. */
.sl-hero--restrained { background: var(--bg); }
.sl-hero--restrained .sl-hero__inner { animation: none; }

/* === ANIMATIONS === */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* === MOBILE === */
@media (max-width: 640px) {
    .sl-hero {
        padding-block: var(--s-7);
    }
    .section,
    .deliverables,
    .how-it-works,
    .different-section,
    .pricing-section,
    .faq-section,
    .closing-section,
    .contact-section {
        padding: 5rem 1.25rem;
    }
}