/* =====================================================================
           Sprout Works — concept landing
           Self-contained styles. Does not import styles.css and does not share
           any classes with the main site so this concept can drift freely.
           ===================================================================== */

        :root {
            --bg:        #07090a;
            --bg-soft:   #0d1011;
            --ink:       #ece9df;
            --ink-soft:  rgba(236, 233, 223, 0.62);
            --ink-faint: rgba(236, 233, 223, 0.32);
            --rule:      rgba(236, 233, 223, 0.10);
            --accent:    #9eb892;       /* muted sage glow */
            --accent-soft: rgba(158, 184, 146, 0.18);
            --serif: 'Fraunces', 'Times New Roman', serif;
            --sans:  'Inter', system-ui, -apple-system, sans-serif;
        }

        html[data-theme="light"] {
            --bg:        #f4f1ea;
            --bg-soft:   #ebe7dc;
            --ink:       #15191a;
            --ink-soft:  rgba(21, 25, 26, 0.66);
            --ink-faint: rgba(21, 25, 26, 0.36);
            --rule:      rgba(21, 25, 26, 0.10);
            --accent:    #4f6646;
            --accent-soft: rgba(79, 102, 70, 0.16);
        }

        * {
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        html, body {
            margin: 0;
            padding: 0;
            background: var(--bg);
            color: var(--ink);
            font-family: var(--sans);
            font-weight: 300;
            font-size: 17px;
            line-height: 1.55;
            overflow-x: hidden;
            transition: background-color 600ms ease, color 600ms ease;
        }

        body.is-loading { overflow: hidden; }

        /* Subtle grain overlay (SVG noise as a data URI) */
        .grain {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            opacity: 0.06;
            mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
            animation: grainShift 7s steps(6) infinite;
        }
        html[data-theme="light"] .grain { opacity: 0.08; mix-blend-mode: multiply; }

        @keyframes grainShift {
            0%   { transform: translate(0, 0); }
            16%  { transform: translate(-3%, 2%); }
            33%  { transform: translate(2%, -3%); }
            50%  { transform: translate(-2%, -2%); }
            66%  { transform: translate(3%, 1%); }
            83%  { transform: translate(-1%, 3%); }
            100% { transform: translate(0, 0); }
        }

        /* Cursor-reactive ambient blob */
        .ambient-blob {
            position: fixed;
            top: 0; left: 0;
            width: 60vmin;
            height: 60vmin;
            pointer-events: none;
            z-index: 0;
            transform: translate(-50%, -50%) translate3d(50vw, 50vh, 0);
            background: radial-gradient(circle at center,
                var(--accent-soft) 0%,
                rgba(158, 184, 146, 0.05) 35%,
                transparent 70%);
            filter: blur(40px);
            transition: transform 1500ms cubic-bezier(.16,.6,.18,1);
            will-change: transform;
        }

        /* =========================
           Top bar
           ========================= */
        .topbar {
            position: fixed;
            top: 0; left: 0; right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 28px 36px;
            z-index: 50;
            mix-blend-mode: difference;
        }

        .wordmark {
            font-family: var(--serif);
            font-weight: 400;
            font-size: 17px;
            letter-spacing: 0.01em;
            color: #fff;
            text-decoration: none;
            opacity: 0;
            animation: barIn 1.2s ease 1.6s forwards;
        }
        .wordmark em {
            font-style: italic;
            font-weight: 300;
            opacity: 0.7;
        }

        .topbar-right {
            display: flex;
            align-items: center;
            gap: 22px;
            opacity: 0;
            animation: barIn 1.2s ease 1.8s forwards;
        }

        .theme-toggle {
            background: none;
            border: 1px solid rgba(255,255,255,0.25);
            color: #fff;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: border-color 200ms ease, background-color 200ms ease;
        }
        .theme-toggle:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.05); }
        .theme-toggle svg { width: 13px; height: 13px; }
        html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
        html[data-theme="dark"]  .theme-toggle .icon-moon { display: none; }

        .contact-pill {
            font-family: var(--sans);
            font-size: 13px;
            letter-spacing: 0.04em;
            text-transform: lowercase;
            background: none;
            color: #fff;
            border: 1px solid rgba(255,255,255,0.35);
            border-radius: 999px;
            padding: 8px 16px;
            cursor: pointer;
            transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
        }
        .contact-pill:hover {
            background: #fff;
            color: #000;
            border-color: #fff;
        }

        @keyframes barIn { to { opacity: 1; } }

        /* =========================
           Loader (signature opening moment)
           ========================= */
        .loader {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 900ms ease 200ms;
        }
        .loader.gone {
            opacity: 0;
            pointer-events: none;
        }
        .loader-word {
            font-family: var(--serif);
            font-weight: 300;
            font-size: clamp(64px, 14vw, 200px);
            letter-spacing: -0.04em;
            line-height: 1;
            color: var(--ink);
            opacity: 0;
            filter: blur(28px);
            transform: scale(1.05);
            animation: loaderResolve 1900ms cubic-bezier(.2,.6,.2,1) 250ms forwards;
        }
        .loader-word em {
            font-style: normal;
            color: var(--accent);
        }
        @keyframes loaderResolve {
            0%   { opacity: 0; filter: blur(28px); transform: scale(1.05); letter-spacing: 0.05em; }
            55%  { opacity: 1; filter: blur(0);    transform: scale(1);    letter-spacing: -0.04em; }
            100% { opacity: 1; filter: blur(0);    transform: scale(1);    letter-spacing: -0.04em; }
        }

        /* =========================
           Layout primitives
           ========================= */
        main {
            position: relative;
            z-index: 2;
        }

        section {
            position: relative;
            padding: 18vh 8vw;
        }
        @media (max-width: 720px) {
            section { padding: 8vh 24px; }
        }

        .reveal {
            opacity: 0;
            transform: translateY(36px);
            transition: opacity 1100ms cubic-bezier(.2,.6,.2,1), transform 1100ms cubic-bezier(.2,.6,.2,1);
        }
        .reveal.in {
            opacity: 1;
            transform: none;
        }
        .reveal.delay-1 { transition-delay: 120ms; }
        .reveal.delay-2 { transition-delay: 240ms; }
        .reveal.delay-3 { transition-delay: 360ms; }

        .display {
            font-family: var(--serif);
            font-weight: 300;
            letter-spacing: -0.035em;
            line-height: 0.98;
            margin: 0;
        }
        .display em { color: var(--accent); font-style: normal; }

        .eyebrow {
            font-family: var(--sans);
            font-size: 12px;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--ink-faint);
            margin: 0 0 28px;
        }

        .body-line {
            font-family: var(--sans);
            font-weight: 300;
            font-size: clamp(15px, 1.2vw, 18px);
            color: var(--ink-soft);
            max-width: 36ch;
            line-height: 1.55;
            margin: 0;
        }

        /* =========================
           Hero
           ========================= */
        .hero {
            min-height: 100vh;
            display: grid;
            grid-template-rows: 1fr auto;
            padding-top: 24vh;
            padding-bottom: 8vh;
        }
        @media (max-width: 720px) {
            .hero { padding-top: 16vh; padding-bottom: 5vh; min-height: 90vh; }
        }

        .hero-headline {
            font-size: clamp(72px, 16vw, 240px);
        }
        .hero-headline .line {
            display: block;
            overflow: hidden;
            padding-bottom: 0.35em;
            margin-bottom: -0.35em;
        }
        .hero-headline .word {
            display: inline-block;
            transform: translateY(110%);
            opacity: 0;
            animation: wordRise 1100ms cubic-bezier(.2,.7,.2,1) forwards;
        }
        .hero-headline .word.w1 { animation-delay: 1900ms; }
        .hero-headline .word.w2 { animation-delay: 2050ms; }
        .hero-headline .word.w3 { animation-delay: 2300ms; }

        @keyframes wordRise {
            to { transform: none; opacity: 1; }
        }
        @keyframes wordRiseOut {
            to { transform: translateY(-110%); opacity: 0; }
        }

        /* Cycling accent word in the hero ("fits / grows / adapts / works") */
        .cycle-slot {
            position: relative;
            display: inline-block;
            vertical-align: bottom;
            line-height: 1.1;
            padding-bottom: 0.35em;
            margin-bottom: -0.35em;
            overflow: hidden;
        }
        .cycle-slot .cycle-word {
            color: var(--accent);
            font-style: normal;
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transform: translateY(110%);
            white-space: nowrap;
            pointer-events: none;
            will-change: transform, opacity;
        }
        .cycle-slot .cycle-word.is-active {
            position: static;
            opacity: 1;
            transform: none;
            pointer-events: auto;
        }
        .cycle-slot .cycle-word.is-entering {
            animation: wordRise 1100ms cubic-bezier(.2,.7,.2,1);
        }
        .cycle-slot .cycle-word.is-leaving {
            position: absolute;
            opacity: 1;
            transform: none;
            animation: wordRiseOut 1100ms cubic-bezier(.2,.7,.2,1) forwards;
        }

        .hero-foot {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 40px;
            opacity: 0;
            transform: translateY(20px);
            animation: footIn 1.4s ease 3300ms forwards;
        }
        @media (max-width: 720px) {
            .hero-foot { flex-direction: column; align-items: flex-start; }
        }
        @keyframes footIn { to { opacity: 1; transform: none; } }

        .scroll-cue {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .scroll-arrow {
            width: 20px;
            height: 20px;
            color: var(--ink-faint);
            animation: scrollBounce 2.4s ease-in-out infinite;
            transition: opacity 700ms ease;
        }
        .scroll-cue.faded .scroll-arrow {
            opacity: 0;
            animation-play-state: paused;
            pointer-events: none;
        }
        @keyframes scrollBounce {
            0%, 100% { transform: translateY(0);   opacity: 0.4; }
            50%      { transform: translateY(6px);  opacity: 1; }
        }

        /* =========================
           Statement
           ========================= */
        .statement {
            min-height: 80vh;
            display: flex;
            align-items: center;
        }
        .statement .display {
            font-size: clamp(40px, 6vw, 88px);
            max-width: 18ch;
        }
        @media (max-width: 720px) {
            .statement { min-height: 45vh; }
        }

        /* =========================
           Beats
           ========================= */
        .beats {
            display: grid;
            gap: 32vh;
            padding-top: 24vh;
            padding-bottom: 24vh;
        }
        @media (max-width: 720px) {
            .beats { gap: 12vh; padding-top: 8vh; padding-bottom: 8vh; }
        }
        .beat {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6vw;
            align-items: end;
        }
        @media (max-width: 720px) {
            .beat { grid-template-columns: 1fr; gap: 20px; align-items: start; }
        }
        .beat .display {
            font-size: clamp(48px, 9vw, 140px);
        }
        /* Parallax mid-scroll surprise */
        .parallax-band {
            position: relative;
            padding: 16vh 0;
            overflow: hidden;
        }
        @media (max-width: 720px) {
            .parallax-band { padding: 8vh 0; }
        }
        /* Hairline draw-in rules */
        .parallax-hairline {
            position: absolute;
            left: 0; right: 0;
            height: 1px;
            background: var(--rule);
            transform-origin: left center;
            transform: scaleX(0);
            transition: transform 1100ms cubic-bezier(.2,.7,.2,1);
        }
        .parallax-hairline.top { top: 0; }
        .parallax-hairline.bottom { bottom: 0; }
        .parallax-hairline.in { transform: scaleX(1); }
        .parallax-track {
            display: flex;
            white-space: nowrap;
            font-family: var(--serif);
            font-weight: 300;
            font-style: italic;
            font-size: clamp(80px, 16vw, 220px);
            letter-spacing: -0.04em;
            color: var(--ink-faint);
            line-height: 1;
            will-change: transform;
        }
        .parallax-track span {
            padding: 0 0.4em;
            display: inline-block;
        }
        .parallax-track span:nth-child(even) { color: var(--accent); opacity: 0.55; }

        /* =========================
           Partners
           ========================= */
        .partners {
            display: grid;
            gap: 60px;
        }
        @media (max-width: 720px) {
            .partners { gap: 36px; }
            .partners-section { padding-bottom: 4vh; }
        }
        .partners-row {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: clamp(36px, 5vw, 72px);
            padding-top: 48px;
            border-top: 1px solid var(--rule);
        }
        .partner {
            display: flex;
            flex-direction: column;
            gap: 18px;
            flex: 1 1 260px;
            max-width: 360px;
            color: var(--ink-soft);
            font-family: var(--sans);
            text-decoration: none;
            transition: color 200ms ease, transform 400ms cubic-bezier(.2,.7,.2,1), box-shadow 400ms ease;
        }
        .partner-head {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            font-size: 14px;
            letter-spacing: 0.04em;
        }
        .partner-head-row {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .partner-name-line {
            display: block;
            height: 1px;
            background: var(--accent);
            width: 0;
            transition: width 500ms cubic-bezier(.2,.7,.2,1);
            margin-top: 1px;
        }
        .partner:hover .partner-name-line { width: 100%; }
        .partner-blurb {
            margin: 0;
            font-size: 15px;
            line-height: 1.6;
            letter-spacing: 0.01em;
            color: var(--ink-soft);
            opacity: 0.85;
            max-width: 32ch;
        }
        html[data-theme="light"] .partner-blurb { opacity: 0.78; }
        .partner:hover { color: var(--ink); transform: translateY(-4px); }
        .partner:hover .partner-blurb { opacity: 0.92; }
        .partner img {
            height: 34px;
            width: auto;
            opacity: 1;
        }
        @media (max-width: 720px) {
            .partners-row { gap: 36px; padding-top: 36px; }
            .partner { flex: 1 1 100%; max-width: none; gap: 14px; }
            .partner-head { font-size: 17px; gap: 14px; }
            .partner-blurb { font-size: 14.5px; max-width: 38ch; }
            .partner img { height: 30px; }
        }

        /* =========================
           Services
           ========================= */
        .services-section {
            padding-bottom: 12vh;
        }
        @media (max-width: 720px) {
            .services-section { padding-bottom: 6vh; }
        }
        .services {
            display: grid;
            gap: 60px;
        }
        @media (max-width: 720px) {
            .services { gap: 36px; }
        }
        .services-row {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: clamp(36px, 5vw, 72px);
            padding-top: 48px;
            border-top: 1px solid var(--rule);
        }
        @media (max-width: 720px) {
            .services-row { gap: 36px; padding-top: 36px; }
        }
        .service {
            display: flex;
            flex-direction: column;
            gap: 20px;
            flex: 1 1 260px;
            max-width: 380px;
            font-family: var(--sans);
        }
        @media (max-width: 720px) {
            .service { flex: 1 1 100%; max-width: none; gap: 16px; }
        }
        .service-icon {
            width: 72px;
            height: 72px;
            object-fit: contain;
            opacity: 0.9;
            transform-origin: center center;
            transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
        }
        html[data-theme="light"] .service-icon { opacity: 1; }
        .service:hover .service-icon {
            transform: scale(1.12) rotate(6deg);
        }
        @media (prefers-reduced-motion: reduce) {
            .service-icon { transition: none; }
            .service:hover .service-icon { transform: none; }
        }
        @media (max-width: 1024px) {
            .service-icon { width: 60px; height: 60px; }
        }
        @media (max-width: 720px) {
            .service-icon { width: 52px; height: 52px; }
        }
        .service-name {
            font-family: var(--serif);
            font-weight: 300;
            font-size: clamp(22px, 2.8vw, 30px);
            letter-spacing: -0.02em;
            line-height: 1;
            margin: 0;
            color: var(--ink);
        }
        .service-name em { color: var(--accent); font-style: normal; }
        .service-subtitle {
            margin: 0;
            font-size: 15px;
            line-height: 1.62;
            letter-spacing: 0.01em;
            color: var(--ink);
            opacity: 0.82;
            max-width: 34ch;
        }
        html[data-theme="light"] .service-subtitle { opacity: 0.78; }
        @media (max-width: 720px) {
            .service-subtitle { font-size: 14.5px; max-width: none; }
        }
        .service-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .service-list li {
            display: flex;
            align-items: baseline;
            gap: 10px;
            font-size: 13.5px;
            letter-spacing: 0.01em;
            color: var(--ink);
            opacity: 0.76;
            line-height: 1.5;
        }
        html[data-theme="light"] .service-list li { opacity: 0.74; }
        .service-list li::before {
            content: '';
            display: inline-block;
            width: 12px;
            height: 1px;
            background: var(--accent);
            flex-shrink: 0;
            margin-top: 0.7em;
            opacity: 0.9;
        }

        /* =========================
           Closing
           ========================= */
        .closing {
            min-height: 90vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            gap: 48px;
        }
        @media (max-width: 720px) {
            .closing { min-height: 60vh; gap: 32px; }
        }
        .closing .display {
            font-size: clamp(34px, 5vw, 64px);
        }
        /* The single-word "begin." closing keeps the dramatic scale. */
        .closing .display[data-closing] {
            font-size: clamp(80px, 16vw, 240px);
        }
        .closing-cta {
            font-family: var(--sans);
            font-size: 14px;
            letter-spacing: 0.16em;
            text-transform: lowercase;
            background: none;
            color: var(--ink);
            border: 1px solid var(--ink);
            border-radius: 999px;
            padding: 16px 36px;
            cursor: pointer;
            transition: background-color 300ms ease, color 300ms ease, transform 400ms ease;
        }
        .closing-cta:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }

        /* =========================
           Word-rise for scroll sections
           ========================= */
        .wr-overflow {
            display: inline-block;
            overflow: hidden;
            vertical-align: bottom;
            line-height: 1.1;
            padding-bottom: 0.25em;
            margin-bottom: -0.25em;
        }
        .wr-word {
            display: inline-block;
            opacity: 0;
            transform: translateY(105%);
            animation: wordRise 1000ms cubic-bezier(.2,.7,.2,1) forwards;
        }
        /* Accent word: color settles in as it rises */
        @keyframes accentSettle {
            0%   { color: var(--ink); }
            100% { color: var(--accent); }
        }
        .wr-word.is-em {
            font-style: normal;
        }
        .wr-word.is-em.settled {
            animation: wordRise 1000ms cubic-bezier(.2,.7,.2,1) forwards,
                       accentSettle 700ms ease forwards;
        }

        /* Eyebrow slide-in (replaces generic reveal for eyebrows) */
        @keyframes eyebrowIn {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: none; }
        }
        .eyebrow-rise {
            opacity: 0;
        }
        .eyebrow-rise.in {
            animation: eyebrowIn 700ms cubic-bezier(.2,.7,.2,1) forwards;
        }

        /* Closing period punch */
        .closing-period {
            display: inline-block;
            vertical-align: bottom;
            opacity: 0;
            transform: translateY(105%);
        }
        .closing-period.in {
            animation: periodPunch 800ms cubic-bezier(.2,.7,.2,1) forwards;
        }
        @keyframes periodPunch {
            0%   { opacity: 0; transform: translateY(105%) scale(0.8); }
            55%  { opacity: 1; transform: translateY(-8%) scale(1.08); }
            100% { opacity: 1; transform: none; }
        }

        /* Ambient blob active state */
        .ambient-blob {
            transition: transform 1500ms cubic-bezier(.16,.6,.18,1),
                        width 600ms cubic-bezier(.2,.7,.2,1),
                        height 600ms cubic-bezier(.2,.7,.2,1),
                        filter 600ms cubic-bezier(.2,.7,.2,1);
        }
        .ambient-blob.blob-active {
            width: 80vmin;
            height: 80vmin;
            filter: blur(28px);
        }

        /* =========================
           Footer
           ========================= */
        footer {
            border-top: 1px solid var(--rule);
            padding: 36px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: var(--sans);
            font-size: 12px;
            letter-spacing: 0.08em;
            color: var(--ink-faint);
            text-transform: lowercase;
        }
        footer a { color: var(--ink-faint); text-decoration: none; transition: color 200ms ease; }
        footer a:hover { color: var(--ink); }
        .footer-links {
            display: flex;
            align-items: center;
            gap: 22px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        /* =========================
           Contact modal
           ========================= */
        .modal-veil {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            z-index: 200;
            opacity: 0;
            pointer-events: none;
            transition: opacity 350ms ease;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 28px;
        }
        html[data-theme="light"] .modal-veil { background: rgba(244, 241, 234, 0.78); }
        .modal-veil.open { opacity: 1; pointer-events: auto; }

        .modal {
            width: 100%;
            max-width: 552px;
            background: var(--bg-soft);
            border: 1px solid var(--rule);
            border-radius: 18px;
            padding: 44px 36px 36px;
            position: relative;
            transform: translateY(18px) scale(0.98);
            transition: transform 450ms cubic-bezier(.2,.7,.2,1);
        }
        .modal-veil.open .modal { transform: none; }

        .modal-close {
            position: absolute;
            top: 12px; right: 12px;
            background: none;
            border: 1px solid transparent;
            color: var(--ink);
            width: 36px; height: 36px;
            cursor: pointer;
            font-size: 22px;
            line-height: 1;
            border-radius: 50%;
            opacity: 0.75;
            transition: color 200ms ease, background-color 200ms ease, opacity 200ms ease, border-color 200ms ease;
        }
        .modal-close:hover { opacity: 1; background: rgba(255,255,255,0.06); }
        html[data-theme="light"] .modal-close:hover { background: rgba(21,25,26,0.06); }
        .modal-close:focus-visible {
            outline: none;
            opacity: 1;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-soft);
        }

        .modal h2 {
            font-family: var(--serif);
            font-weight: 300;
            font-size: 36px;
            letter-spacing: -0.02em;
            margin: 0 0 6px;
            color: var(--ink);
        }
        .modal h2 em { color: var(--accent); font-style: normal; }
        .modal-sub {
            font-size: 14px;
            color: var(--ink);
            opacity: 0.78;
            margin: 0 0 28px;
        }

        .modal form {
            display: grid;
            gap: 18px;
        }

        .field {
            display: grid;
            gap: 6px;
        }
        .field label {
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--ink);
            opacity: 0.78;
        }
        .field input,
        .field textarea {
            background: transparent;
            border: none;
            border-bottom: 1.5px solid var(--ink-soft);
            color: var(--ink);
            font-family: var(--sans);
            font-size: 16px;
            font-weight: 300;
            padding: 8px 0;
            resize: none;
            outline: none;
            transition: border-color 200ms ease, box-shadow 200ms ease;
        }
        .field input::placeholder,
        .field textarea::placeholder {
            color: var(--ink);
            opacity: 0.65;
        }
        .field input:hover,
        .field textarea:hover { border-bottom-color: var(--ink); }
        .field input:focus,
        .field textarea:focus {
            border-bottom-color: var(--accent);
            border-bottom-width: 2px;
            box-shadow: 0 1px 0 0 var(--accent);
        }
        .field textarea { min-height: 80px; }

        .submit-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
            gap: 16px;
        }
        .submit-status {
            font-size: 12px;
            color: var(--ink);
            opacity: 0.78;
            flex: 1;
            min-width: 0;
        }
        .submit-status.error { color: #e89089; opacity: 1; }
        .submit-status.success { color: var(--accent); opacity: 1; }
        html[data-theme="light"] .submit-status.error { color: #b34a40; }

        .submit-btn {
            font-family: var(--sans);
            font-size: 13px;
            letter-spacing: 0.16em;
            text-transform: lowercase;
            background: var(--ink);
            color: var(--bg);
            border: none;
            border-radius: 999px;
            padding: 12px 28px;
            cursor: pointer;
            transition: opacity 200ms ease, transform 400ms ease;
            white-space: nowrap;
        }
        .submit-btn:hover { transform: translateY(-1px); }
        .submit-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px var(--bg-soft), 0 0 0 4px var(--accent);
        }
        .submit-btn[disabled] { opacity: 0.5; cursor: default; transform: none; }

        /* =========================
           Service interest picker
           ========================= */
        .service-picker-field { gap: 10px; }
        .service-picker-label {
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--ink);
            opacity: 0.78;
            display: block;
        }
        .service-picker {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .svc-btn {
            flex: 1 1 110px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            padding: 11px 13px;
            background: transparent;
            border: 1px solid var(--rule);
            border-radius: 10px;
            color: var(--ink);
            cursor: pointer;
            text-align: left;
            font-family: var(--sans);
            transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
        }
        .svc-btn:hover {
            border-color: var(--accent);
            background: var(--accent-soft);
        }
        .svc-btn:focus-visible {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-soft);
        }
        .svc-btn.selected {
            border-color: var(--accent);
            background: var(--accent-soft);
        }
        .svc-btn-name {
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.07em;
            text-transform: lowercase;
            color: var(--ink);
            transition: color 200ms ease;
        }
        .svc-btn.selected .svc-btn-name { color: var(--accent); }
        .svc-btn-desc {
            font-size: 10.5px;
            color: var(--ink);
            opacity: 0.55;
            line-height: 1.35;
        }
        .svc-btn.selected .svc-btn-desc { opacity: 0.80; }
        @media (max-width: 400px) {
            .svc-btn { flex: 1 1 100%; }
        }

        /* =========================
           Little Sprouts section
           ========================= */
        .little-sprouts-section {
            padding-bottom: 12vh;
            scroll-margin-top: 96px;
        }
        @media (max-width: 720px) {
            .little-sprouts-section { padding-bottom: 6vh; scroll-margin-top: 72px; }
        }
        .ls-block {
            display: grid;
            gap: 48px;
        }
        @media (max-width: 720px) {
            .ls-block { gap: 32px; }
        }
        .ls-prose {
            display: flex;
            flex-direction: column;
            gap: 18px;
            max-width: 62ch;
            font-family: var(--sans);
            font-size: 16px;
            line-height: 1.7;
            letter-spacing: 0.01em;
            color: var(--ink);
            opacity: 0.82;
        }
        html[data-theme="light"] .ls-prose { opacity: 0.78; }
        @media (max-width: 720px) {
            .ls-prose { font-size: 15px; }
        }
        .ls-chips {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(20px, 2.4vw, 32px);
            padding-top: 36px;
            border-top: 1px solid var(--rule);
        }
        @media (max-width: 720px) {
            .ls-chips { gap: 14px; padding-top: 28px; }
        }
        .ls-chip {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: var(--sans);
            font-size: 13.5px;
            letter-spacing: 0.02em;
            color: var(--ink);
            opacity: 0.78;
            line-height: 1.4;
        }
        html[data-theme="light"] .ls-chip { opacity: 0.74; }
        .ls-chip::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent);
            flex-shrink: 0;
        }
        .ls-cta-row {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            padding-top: 8px;
        }
        .ls-cta {
            appearance: none;
            background: transparent;
            border: 1px solid var(--rule);
            color: var(--ink);
            font-family: var(--sans);
            font-size: 14px;
            letter-spacing: 0.04em;
            padding: 14px 24px;
            border-radius: 999px;
            cursor: pointer;
            transition: border-color 220ms ease, color 220ms ease, background 220ms ease;
        }
        .ls-cta:hover, .ls-cta:focus-visible {
            border-color: var(--accent);
            color: var(--accent);
            outline: none;
        }

        /* =========================
           Reduced motion
           ========================= */
        @media (prefers-reduced-motion: reduce) {
            .grain { animation: none; }
            .ambient-blob { transition: none; }
            .ambient-blob.blob-active { width: 60vmin; height: 60vmin; filter: blur(40px); }
            .loader-word { animation: none; opacity: 1; filter: none; transform: none; }
            .hero-headline .word { animation: none; opacity: 1; transform: none; }
            .hero-foot { animation: none; opacity: 1; transform: none; }
            .wordmark, .topbar-right { animation: none; opacity: 1; }
            .reveal { transition: opacity 200ms ease; transform: none; }
            .reveal.in { opacity: 1; }
            .scroll-arrow { animation: none; transform: none; opacity: 0.6; transition: opacity 200ms ease; }
            .scroll-cue.faded .scroll-arrow { opacity: 0; }
            .parallax-track { transform: none !important; }
            /* Word-rise: skip animation, just fade in */
            .wr-word { animation: none; opacity: 0; transform: none; transition: opacity 200ms ease; }
            .wr-word.in { opacity: 1; }
            .wr-word.is-em.settled { animation: none; color: var(--accent); }
            .eyebrow-rise.in { animation: none; opacity: 1; }
            .closing-period.in { animation: none; opacity: 1; transform: none; }
            .parallax-hairline { transition: none; transform: scaleX(1); }
            .partner-name-line { transition: none; }
            .partner { transition: none; }
            .partner:hover { transform: none; }
            /* Cycling accent word: cross-fade in place instead of sliding */
            .cycle-slot .cycle-word { transform: none; transition: opacity 250ms ease; }
            .cycle-slot .cycle-word.is-entering { animation: none; opacity: 1; }
            .cycle-slot .cycle-word.is-leaving { animation: none; opacity: 0; transform: none; }
        }

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

/* =========================
   Top navigation
   ========================= */
.topnav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 32px;
    opacity: 0;
    animation: barIn 1.2s ease 1.8s forwards;
}

.topnav-link {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: #fff;
    text-decoration: none;
    opacity: 0.72;
    transition: opacity 200ms ease;
    position: relative;
    white-space: nowrap;
}
.topnav-link::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1px;
    background: #fff;
    transition: width 220ms ease;
}
.topnav-link:hover { opacity: 1; }
.topnav-link:hover::after { width: 100%; }
.topnav-link[aria-current="page"] { opacity: 1; }
.topnav-link[aria-current="page"]::after { width: 100%; }

/* Hamburger toggle — mobile only */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
}
.burger-bar {
    display: block;
    width: 18px;
    height: 1.5px;
    background: #fff;
    transition: transform 260ms ease, opacity 200ms ease;
    transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .burger-bar:nth-child(1) {
    transform: translateY(3.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .burger-bar:nth-child(2) {
    transform: translateY(-3.25px) rotate(-45deg);
}

/* Mobile nav drawer */
.nav-drawer {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 45;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 8vw;
    pointer-events: none;
    opacity: 0;
    transition: opacity 280ms ease;
}
.nav-drawer.open {
    opacity: 1;
    pointer-events: auto;
}

.drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.drawer-link {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(38px, 10vw, 58px);
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--ink);
    text-decoration: none;
    opacity: 0.45;
    transition: opacity 180ms ease, color 180ms ease;
    display: block;
}
.drawer-link:hover,
.drawer-link:focus-visible { opacity: 1; color: var(--accent); outline: none; }
.drawer-link[aria-current="page"] { opacity: 1; color: var(--accent); }

.drawer-footer {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--rule);
}

@media (max-width: 720px) {
    .topbar { padding: 20px 20px; }
    .topbar-right { gap: 14px; }
    .topnav { display: none; }
    .nav-toggle { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-drawer { transition: none; }
    .burger-bar { transition: none; }
    .topnav-link::after { transition: none; }
    .topnav { animation: none; opacity: 1; }
}

/* Homepage: link out to the full Services page */
.svc-more {
    display: inline-block;
    margin-top: 4px;
    font-family: var(--sans);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--accent);
    text-decoration: none;
    transition: opacity 200ms ease, transform 200ms ease;
}
.svc-more:hover { opacity: 0.72; transform: translateX(3px); }