/* Pali Realty — shared stylesheet.
   Extracted from index.html's inline <style> on 2026-09-01, when the site was
   split into three pages. It stays ONE file on purpose: this is a static site
   with no build step, so anything duplicated across pages drifts, and that is
   exactly how mana-wahi.html silently became a clone of the previous homepage.

   IMPORTANT, learned the hard way: the responsive font-size block at the very
   bottom must stay last. Media queries add no specificity, so any later
   .text-sm / .text-base rule beats .md:text-base and shrinks desktop copy.

   Verify with tools/classaudit.js after adding markup — css/tailwind.css is
   hand-built, not a Tailwind build, so unknown utilities silently do nothing. */



        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #FAFAFA;
            color: #1A1A1A;
            scroll-behavior: smooth;
        }
        h1, h2, h3, h4, .heading { font-family: 'Playfair Display', Georgia, serif; }
        html { scroll-behavior: smooth; }

        /* ── Hero ── */
        .hero-overlay {
            background: linear-gradient(135deg, rgba(30,60,70,0.88) 0%, rgba(29,138,153,0.72) 50%, rgba(20,50,60,0.92) 100%);
        }

        .decor-divider { width: 40px; height: 2px; background: linear-gradient(90deg, #C29B45, rgba(194,155,69,0.3)); margin: 1rem auto; }

        /* ── Gold Strip (shimmer on load) ── */
        @keyframes gold-shimmer {
            0% { background-position: -200% center; }
            100% { background-position: 200% center; }
        }
        .gold-strip {
            height: 4px;
            background: linear-gradient(90deg, transparent, #C29B45 20%, #C29B45 50%, #C29B45 80%, transparent);
            background-size: 200% 100%;
            animation: gold-shimmer 3s ease-in-out 1;
        }

        /* ── Section Transitions ── */
        .section-transition-ocean {
            height: 80px;
            background: linear-gradient(180deg,
                rgba(29,138,153,0.0) 0%,
                rgba(29,138,153,0.08) 50%,
                rgba(29,138,153,0.0) 100%);
        }
        .section-transition-gold {
            height: 60px;
            background: linear-gradient(180deg,
                rgba(194,155,69,0.0) 0%,
                rgba(194,155,69,0.06) 50%,
                rgba(194,155,69,0.0) 100%);
        }
        .section-transition-ocean-dark {
            height: 80px;
            background: linear-gradient(180deg,
                rgba(22,55,65,0.0) 0%,
                rgba(22,55,65,0.6) 50%,
                rgba(22,55,65,0.0) 100%);
        }

        /* ── MISSING UTILITIES ────────────────────────────────────────────
           2026-09-01. css/tailwind.css is a hand-built file, not a real Tailwind
           build: only classes someone explicitly added exist. Every class below
           was in use somewhere in this page with NO rule behind it, so it did
           nothing at all — which is why sections read as "everything is there,
           poorly laid out". Padding utilities were the worst of it: a section
           with py-16 or pt-16 had literally zero vertical space.

           Audited with a script that diffs every class="" token against the
           stylesheet. Re-run it after adding markup rather than assuming a
           standard Tailwind class exists here. */
        .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
        .py-24 { padding-top: 6rem; padding-bottom: 6rem; }
        .pt-16 { padding-top: 4rem; }
        .h-14  { height: 3.5rem; }
        @media (min-width: 768px) {
            .md\:pt-20 { padding-top: 5rem; }
            .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
            .md\:h-36 { height: 9rem; }
            .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
        }
        .text-white\/45 { color: hsla(0,0%,100%,.45); }
        .text-white\/65 { color: hsla(0,0%,100%,.65); }
        .text-white\/85 { color: hsla(0,0%,100%,.85); }
        .text-charcoal\/25 { color: rgba(44,62,80,.25); }
        .text-charcoal\/45 { color: rgba(44,62,80,.45); }
        .border-charcoal\/10 { border-color: rgba(44,62,80,.10); }
        .border-white\/15 { border-color: hsla(0,0%,100%,.15); }
        .bg-ocean\/98 { background-color: rgba(29,138,153,.98); }
        .bg-transparent { background-color: transparent; }
        .bg-current { background-color: currentColor; }
        .opacity-30 { opacity: .3; }
        .shadow-lg {
            box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
        }

        /* ── Type scale corrected 2026-09-01 ──────────────────────────────
           Measured on the rendered page: 3,600+ characters of body copy sat below
           the 16px readability floor, including the single largest block (15px).
           Prose is now 16-17px, interactive labels 15-16px, and uppercase eyebrow
           labels stay small — but nothing is below 11px. Line-heights were already
           fine at 1.5-1.7 and are unchanged. Re-measure with type.js after adding
           copy rather than eyeballing it. */
        /* tailwind.css sets .text-sm to 14px/1.43. That is the last thing on the
           page still under the readability floor, and it carries ~1,000 characters
           of real copy. Lifted to 15px with a looser line-height; the handful of
           paragraphs that are true body copy get text-base alongside it. */
        .text-sm { font-size: 17px; line-height: 1.62; }
        /* This rule sits after tailwind.css and has the same specificity as
           .md\:text-base, so on its own it silently beat the responsive variant and
           pulled desktop body copy DOWN to 15px. The md: sizes are re-declared here
           so the cascade order is restored. */
        @media (min-width: 768px) {
            .md\:text-base { font-size: 20px; line-height: 1.6; }
            .md\:text-lg   { font-size: 22px; line-height: 1.55; }
        }


        /* ── Body-copy contrast ───────────────────────────────────────────
           2026-09-01 (Stephen: "text still looks small" after the size pass).
           Size was only half of it. Running copy was set at .5-.7 charcoal on
           cream, which is faint enough that the eye reads it as small type. These
           three utilities carry nearly all the body text on the page, so they are
           darkened here rather than edited across ~80 elements of markup. The
           uppercase label utilities are left alone. */
        p.text-charcoal\/50, p.text-charcoal\/60 { color: rgba(44,62,80,.78); }
        p.text-charcoal\/70, p.text-charcoal\/80 { color: rgba(44,62,80,.86); }
        p.text-white\/60, p.text-white\/65, p.text-white\/70 { color: hsla(0,0%,100%,.86); }

        /* ── Section Background Washes (subtle depth, no flat colors) ── */
        .bg-cream-wash {
            background: radial-gradient(ellipse at 50% 0%, #FFF8F0 0%, #FFFBF6 40%, #FFFFFF 100%);
        }
        .bg-white-wash {
            background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 50%, #FFFFFF 100%);
        }

        /* ── Two Doors cards ──────────────────────────────────────────────
           2026-09-01: these were built with text-charcoal/65, border-charcoal/12,
           hover:shadow-lg and group-hover:text-gold — NONE of which exist in this
           hand-built tailwind.css. The body copy therefore had no colour rule at
           all and the border fell back to #e5e7eb, which is why the boxes were
           hard to read. Styled here instead of relying on absent utilities. */
        .door-card {
            display: block;
            background: radial-gradient(ellipse at 50% 0%, #FFF8F0 0%, #FFFBF6 40%, #FFFFFF 100%);
            border: 1px solid rgba(29,138,153,0.28);
            border-top: 3px solid #c29b45;
            border-radius: 2px;
            padding: 32px 30px;
            transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
        }
        .door-card:hover {
            border-color: rgba(29,138,153,0.55);
            box-shadow: 0 10px 30px -12px rgba(22,55,65,0.35);
            transform: translateY(-2px);
        }
        .door-card .door-eyebrow {
            display: block;
            font-size: 11px;
            letter-spacing: .28em;
            text-transform: uppercase;
            font-weight: 700;
            color: #a8813a;          /* darkened gold — 194,155,69 on cream fails contrast */
            margin-bottom: 14px;
        }
        .door-card .door-title {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.5rem;
            line-height: 1.25;
            color: #163741;          /* deep ocean, not the mid-tone #1d8a99 */
            margin-bottom: 6px;
        }
        @media (min-width: 768px) { .door-card .door-title { font-size: 1.75rem; } }
        .door-card .door-hawaiian {
            display: block;
            font-size: 16px;
            letter-spacing: .06em;
            font-style: italic;
            color: #1d8a99;
            margin-bottom: 16px;
        }
        .door-card .door-body {
            font-size: 19px;
            line-height: 1.7;
            color: #2c3e50;          /* full charcoal, no opacity */
            margin-bottom: 20px;
        }
        .door-card .door-cta {
            font-size: 17px;
            font-weight: 600;
            color: #1d8a99;
            transition: color .2s ease;
        }
        .door-card:hover .door-cta { color: #a8813a; }

        /* ── Method contrast table ────────────────────────────────────────
           2026-09-01: built with `grid grid-cols-2`, but .grid-cols-2 is NOT in
           this hand-built tailwind.css (only .md\:grid-cols-2 is). Every row was
           therefore a one-column stack, and bg-charcoal/5, bg-gold/[0.04],
           border-charcoal/10, text-charcoal/55 and tracking-[0.15em] are all
           absent too — so the table had no columns, no rules and no shading.
           That is the "everything is there, poorly laid out". Real table now. */
        .contrast-table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid rgba(44,62,80,0.14);
            background: #fff;
        }
        .contrast-table th {
            font-size: 11px;
            letter-spacing: .16em;
            text-transform: uppercase;
            font-weight: 700;
            text-align: left;
            padding: 14px 18px;
            vertical-align: bottom;
        }
        .contrast-table th.ct-them { color: #7a8794; background: #f4f5f6; width: 38%; }
        .contrast-table th.ct-us   { color: #163741; background: rgba(194,155,69,0.14); }
        .contrast-table td {
            padding: 18px;
            font-size: 20px;
            line-height: 1.6;
            vertical-align: top;
            border-top: 1px solid rgba(44,62,80,0.10);
        }
        .contrast-table td.ct-them {
            color: #6b7784;
            background: #fafbfb;
            width: 38%;
        }
        .contrast-table td.ct-us {
            color: #2c3e50;
            background: rgba(194,155,69,0.05);
        }
        .contrast-table td.ct-us strong { color: #163741; font-weight: 600; }
        /* Step-name rows: turn the contrast table into the method itself. */
        .contrast-table tr.ct-step td {
            background: #163741;
            color: #fff;
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.0625rem;
            padding: 11px 18px;
            border-top: 0;
        }
        /* Supporting sentence merged in from the four prose step-cards that used
           to sit below the table and taught the same four steps a second time. */
        /* Forward link from method step 2 into the Mana Wahi specimen, so the two
           sections read as one thread rather than two separate pitches. */
        .contrast-table .ct-link {
            display: inline-block;
            margin-top: 10px;
            font-size: 17px;
            font-weight: 600;
            color: #1d8a99;
            text-decoration: none;
            border-bottom: 1px solid rgba(29,138,153,0.35);
        }
        .contrast-table .ct-link:hover { color: #a8813a; border-bottom-color: #a8813a; }
        /* Return link: tells the reader where in the method they are. */
        .step-backlink {
            display: inline-block;
            margin-bottom: 14px;
            /* 11px was unreadable for a label whose whole job is orientation. */
            font-size: 13px;
            letter-spacing: .12em;
            text-transform: uppercase;
            font-weight: 700;
            color: #a8813a;
            text-decoration: none;
            border-bottom: 1px solid rgba(168,129,58,0.35);
            padding-bottom: 3px;
        }
        .step-backlink:hover { color: #163741; border-bottom-color: #163741; }
        .contrast-table .ct-more {
            display: block;
            margin-top: 9px;
            /* 2026-09-01 (Stephen: "your step 2 text is very small"). Was 13.5px
               at #5b6b7a — small AND low-contrast, so the best writing on the page
               was the hardest bit to read. 15px, darker. */
            font-size: 18px;
            line-height: 1.65;
            color: #4a5866;
        }
        .contrast-table tr.ct-step .ct-n {
            display: inline-block;
            font-family: Inter, system-ui, sans-serif;
            font-size: 11px;
            letter-spacing: .18em;
            text-transform: uppercase;
            font-weight: 700;
            color: #c29b45;
            margin-right: 12px;
        }
        /* Phone: a two-column comparison cannot survive 375px, so each pair
           becomes a stacked block with the ordinary thing labelled above ours. */
        @media (max-width: 640px) {
            .contrast-table, .contrast-table tbody, .contrast-table tr, .contrast-table td { display: block; width: 100%; }
            .contrast-table thead { display: none; }
            .contrast-table tr { border-top: 1px solid rgba(44,62,80,0.10); }
            .contrast-table tr:first-child, .contrast-table tr.ct-step + tr { border-top: 0; }
            .contrast-table td { border-top: 0; padding: 14px 18px; }
            .contrast-table td.ct-them { width: 100%; padding-bottom: 4px; }
            .contrast-table td.ct-them:before {
                content: 'Any agent'; display: block; font-size: 11px;
                letter-spacing: .16em; text-transform: uppercase;
                font-weight: 700; color: #9aa5b1; margin-bottom: 4px;
            }
            .contrast-table td.ct-us:before {
                content: 'We also'; display: block; font-size: 11px;
                letter-spacing: .16em; text-transform: uppercase;
                font-weight: 700; color: #a8813a; margin-bottom: 4px;
            }
        }

        /* ── Testimonials (break band ①) ──────────────────────────────────
           2026-09-01: PLACEHOLDER COPY. Awaiting Jennifer's real client
           testimonials. Deliberately styled as unmistakable placeholders —
           dashed border, bracketed text — so this cannot reach production
           unnoticed. Delete .is-placeholder from each card as real quotes land. */
        .tm-quote {
            padding: 26px 24px;
            border-left: 2px solid rgba(194,155,69,0.55);
            text-align: left;
        }
        .tm-quote p {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.25rem;
            line-height: 1.65;
            color: #fff;
            margin-bottom: 16px;
        }
        .tm-quote cite {
            display: block;
            font-style: normal;
            font-size: 11px;
            letter-spacing: .16em;
            text-transform: uppercase;
            font-weight: 700;
            color: rgba(194,155,69,0.9);
        }
        .tm-quote.is-placeholder {
            border-left: 2px dashed rgba(255,255,255,0.35);
            background: rgba(255,255,255,0.04);
        }
        .tm-quote.is-placeholder p { color: rgba(255,255,255,0.55); font-style: italic; }
        .tm-quote.is-placeholder cite { color: rgba(255,255,255,0.4); }

        /* ── Background Textures ── */
        .bg-grid-subtle {
            background-image:
                linear-gradient(rgba(29,138,153,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(29,138,153,0.03) 1px, transparent 1px);
            background-size: 40px 40px;
        }
        .bg-wave-cream {
            background-color: #FFF8F0;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-7.022 2.275h6.633z' fill='%23c29b45' fill-opacity='0.04'/%3E%3C/svg%3E");
        }

        /* ── Typography Scale ── */
        .lead {
            font-size: 1.125rem;
            line-height: 1.75;
            font-weight: 300;
            letter-spacing: 0.01em;
        }
        @media (min-width: 768px) {
            .lead { font-size: 1.25rem; }
        }
        .pull-quote {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.5rem;
            font-style: italic;
            line-height: 1.4;
        }
        @media (min-width: 768px) {
            .pull-quote { font-size: 1.875rem; }
        }

        /* ── Air Cards (spatial separation, no hard borders) ── */
        .air-card {
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 2rem;
            position: relative;
            transition: all 0.4s ease;
        }
        .air-card::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 2px;
            background: rgba(194,155,69,0.3);
            transition: width 0.5s ease, background 0.5s ease;
        }
        .air-card:hover::after {
            width: 100%;
            background: rgba(194,155,69,0.6);
        }

        /* ── Differentiator Cards (accent-bar hover, no borders) ── */
        .diff-card {
            background: transparent;
            border: none;
            border-left: 3px solid transparent;
            padding: 1.5rem 1.5rem 1.5rem 1.75rem;
            transition: transform 0.35s ease, border-left-color 0.35s ease, background 0.35s ease;
            position: relative;
        }
        .diff-card:hover {
            transform: translateY(-3px);
            border-left-color: rgba(194,155,69,0.5);
            background: rgba(255,255,255,0.6);
        }
        .diff-card .diff-label {
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #1D8A99;
            margin-bottom: 0.5rem;
        }
        @media (min-width: 768px) {
            .diff-card .diff-label { font-size: 1.125rem; }
        }

        /* ── Staggered Differentiator Rows ── */
        @media (min-width: 768px) {
            .diff-row-staggered {
                padding-left: 4rem;
            }
        }

        /* ── 3 Offering Cards (glass-morphism, staggered, personality-differentiated) ── */
        .offering-card {
            background: rgba(255,255,255,0.10);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.18);
            transition: all 0.5s ease;
        }
        @media (min-width: 768px) {
            .offering-card-hee { margin-top: 0; }
            .offering-card-mana { margin-top: 2.5rem; }
            .offering-card-pono-hale { margin-top: 1.25rem; }
        }

        /* Heʻe — ocean radial glow */
        .offering-card-hee {
            border-top: 3px solid rgba(29,138,153,0.6);
        }
        .offering-card-hee:hover {
            border-top-color: #1D8A99;
            background: radial-gradient(circle at center,
                rgba(29,138,153,0.18) 0%,
                rgba(29,138,153,0.05) 100%);
            border-color: rgba(29,138,153,0.4);
            transform: translateY(-6px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.25);
        }
        .offering-card-hee:hover .offering-link { color: #5BC0BE; }

        /* Mana Wahi — gold radial glow */
        .offering-card-mana {
            border-top: 3px solid rgba(194,155,69,0.5);
        }
        .offering-card-mana:hover {
            border-top-color: #C29B45;
            background: radial-gradient(circle at center,
                rgba(194,155,69,0.15) 0%,
                rgba(194,155,69,0.03) 100%);
            border-color: rgba(194,155,69,0.4);
            transform: translateY(-6px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.25);
        }
        .offering-card-mana:hover .offering-link { color: #C29B45; }
        .offering-card-mana .offering-desc { font-style: italic; line-height: 1.8; }

        /* Pono Hale — charcoal radial glow */
        .offering-card-pono-hale {
            border-top: 3px solid rgba(44,62,80,0.5);
        }
        .offering-card-pono-hale:hover {
            border-top-color: #2C3E50;
            background: radial-gradient(circle at center,
                rgba(44,62,80,0.15) 0%,
                rgba(44,62,80,0.03) 100%);
            border-color: rgba(44,62,80,0.4);
            transform: translateY(-6px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.25);
        }
        .offering-card-pono-hale:hover .offering-link { color: #8B7765; }

        .offering-link { transition: color 0.4s ease; }

        /* ── Scroll-triggered Fade-In ── */
        .fade-in {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ── Reduced motion ──
           Visitors who ask the OS for less motion get the content, not the
           choreography. Critically, .fade-in must be forced visible here: its
           default state is opacity:0, so disabling the animation without this
           would leave the whole page blank for those users. */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
            .fade-in, .fade-in.visible {
                opacity: 1 !important;
                transform: none !important;
            }
            .gold-strip { animation: none !important; }
        }

        /* Staggered delays for differentiator cards */
        .diff-card:nth-child(1) { transition-delay: 0ms; }
        .diff-card:nth-child(2) { transition-delay: 80ms; }
        .diff-card:nth-child(3) { transition-delay: 160ms; }
        .diff-card:nth-child(4) { transition-delay: 240ms; }
        .diff-card:nth-child(5) { transition-delay: 320ms; }
        .diff-card:nth-child(6) { transition-delay: 400ms; }

        /* ── Nav ── */
        nav { transition: background-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease; }
        nav.scrolled { background-color: rgba(29,138,153,0.95); color: white; box-shadow: 0 2px 20px rgba(0,0,0,0.1); }
        /* Unscrolled the nav is transparent over a dark hero, so every element in
           it must be light. These rules previously used #2C3E50 (dark) because the
           bar was white — on a transparent bar that made the CTA and the burger
           icon invisible against the hero image. */
        nav:not(.scrolled) .nav-cta { border-color: rgba(255,255,255,0.7); color: #fff; }
        nav:not(.scrolled) .nav-cta:hover { background: #fff; color: #2C3E50; border-color: #fff; }
        nav.scrolled .nav-cta { border-color: rgba(255,255,255,0.8); color: white; }
        nav.scrolled .nav-cta:hover { background: white; color: #1D8A99; border-color: white; }
        nav:not(.scrolled) .mobile-bar { background: #fff; }
        nav.scrolled .mobile-bar { background: white; }

        /* pali-hee-logo.svg is dark navy (#0D2D45). Both nav states are dark —
           transparent-over-hero and teal-when-scrolled — so force it white in the
           nav rather than tinting per state. */
        nav .nav-brand-img { filter: brightness(0) invert(1); }
        nav .nav-brand-text { color: #fff; }
        /* Legibility insurance: the hero photo is not uniformly dark, so give nav
           text a faint shadow instead of trusting the image. */
        nav:not(.scrolled) .nav-link,
        nav:not(.scrolled) .nav-brand-text { text-shadow: 0 1px 3px rgba(0,0,0,0.45); }

        /* Nav logo hover — subtle rotation + gold */
        a:hover .nav-brand-img {
            transform: rotate(-5deg) scale(1.05);
            transition: transform 0.4s ease;
        }
        .nav-brand-img { transition: transform 0.4s ease; }
        .nav-brand-text {
            font-family: 'Playfair Display', Georgia, serif;
            letter-spacing: 0.05em;
            transition: color 0.3s ease;
        }
        a:hover .nav-brand-text { color: #C29B45; }

        /* Active nav link */
        nav a.active { color: #C29B45; }
        nav.scrolled a.active { color: #C29B45; }

        /* ── Profile Photos ── */
        @media (max-width: 640px) {
            .profile-photo-j, .profile-photo-s { width: 110px; height: 110px; font-size: 2rem; }
        }
        .profile-photo-j {
            width: 150px; height: 150px; border-radius: 50%;
            overflow: hidden; flex-shrink: 0;
            box-shadow: 0 8px 32px rgba(29,138,153,0.12);
        }
        .profile-photo-j img {
            width: 100%; height: 100%; object-fit: cover;
        }
        .profile-photo-s {
            width: 150px; height: 150px; border-radius: 50%;
            overflow: hidden; flex-shrink: 0;
            box-shadow: 0 8px 32px rgba(29,138,153,0.12);
        }
        .profile-photo-s img {
            width: 100%; height: 100%; object-fit: cover;
        }

        /* ── Form — underline inputs (no four-sided borders) ── */
        input[type="text"], input[type="email"], textarea {
            border: none;
            border-bottom: 1px solid rgba(194,155,69,0.2);
            background: rgba(255,255,255,0.6);
            transition: border-color 0.3s ease, background 0.3s ease;
            border-radius: 0;
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }
        input:focus, textarea:focus {
            border-bottom-color: #C29B45;
            background: rgba(255,255,255,0.95);
            box-shadow: none;
            outline: none;
        }
        input[type="file"] {
            border: none;
            border-bottom: 1px solid rgba(194,155,69,0.2);
            background: rgba(255,255,255,0.6);
            transition: border-color 0.3s ease, background 0.3s ease;
            border-radius: 0;
        }
        input[type="file"]:hover {
            border-bottom-color: #C29B45;
            background: rgba(255,255,255,0.95);
        }

        /* ── Form Success State ── */
        .form-success {
            display: none;
            text-align: center;
            padding: 3rem 1rem;
        }
        .form-success.visible {
            display: block;
            animation: fadeIn 0.6s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ── Conditional Form Fields ── */
        .conditional-field {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
            margin-top: 0;
            margin-bottom: 0;
        }
        .conditional-field.visible {
            max-height: 500px;
            opacity: 1;
            margin-top: 1.5rem;
            margin-bottom: 0.25rem;
        }

        /* ── Heʻe tentacle animation ── */
        /* ── Decorative Dividers ── */
        .decor-divider {
            width: 40px;
            height: 2px;
            background: linear-gradient(90deg, #C29B45, rgba(194,155,69,0.3));
            margin: 1rem auto;
        }

        /* ── Visual Break Sections ── */
        .visual-break {
            width: 100%;
            height: auto;
            min-height: 300px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .visual-break-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .visual-break-gradient {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #1D8A99 0%, #5BC0BE 50%, #C29B45 100%);
            position: relative;
            overflow: hidden;
        }
        .visual-break-gradient::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 40px 40px;
            animation: drift 20s linear infinite;
        }
        @keyframes drift {
            0% { transform: translate(0, 0); }
            100% { transform: translate(40px, 40px); }
        }
        .visual-break-gradient .gradient-overlay {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tentacle-line {
            height: 2px;
            background: linear-gradient(90deg, rgba(194,155,69,0.6), rgba(194,155,69,0.1));
            position: relative;
        }
        .tentacle-line::after {
            content: '';
            position: absolute;
            right: 0;
            top: -3px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #C29B45;
        }
        .he-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            display: inline-block;
        }
        .he-dot-gold { background: #C29B45; }
        .he-dot-ocean { background: #1D8A99; }

        /* ── Contact form controls (rebuilt 2026-09-01) ────────────────────
           The old inputs were `w-full px-4 py-3 bg-white` with no border rule at
           all, so the field edges came from the browser default — that faint,
           barely-there box in the screenshot. Real borders and a real focus
           state here. */
        .form-label {
            display: block;
            font-size: 11px;
            letter-spacing: .12em;
            text-transform: uppercase;
            font-weight: 600;
            color: #5b6b7a;
            margin-bottom: 7px;
        }
        .form-optional {
            text-transform: none;
            letter-spacing: 0;
            font-weight: 400;
            font-size: 12px;
            color: #9aa5b1;
            font-style: italic;
        }
        .form-input {
            width: 100%;
            padding: 12px 14px;
            font-size: 18px;
            font-family: inherit;
            color: #2c3e50;
            background: #fff;
            border: 1px solid rgba(44,62,80,0.22);
            border-radius: 2px;
            transition: border-color .18s ease, box-shadow .18s ease;
        }
        .form-input::placeholder { color: #a6b0ba; }
        .form-input:focus {
            outline: none;
            border-color: #1d8a99;
            box-shadow: 0 0 0 3px rgba(29,138,153,0.13);
        }
        select.form-input { appearance: none; -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b6b7a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
        .form-hint { font-size: 13px; color: #8b96a1; margin-top: 6px; }

        /* Intent-pill styles removed 2026-09-01 with the form revert. */

        /* ── Your Home's Story ────────────────────────────────────────────
           The soul line and the three-step "how it works", both restored
           2026-09-01. The steps are a compact three-column row rather than the
           original full-width stack, which is what made the section too long. */
        .soul-line {
            display: flex; align-items: center; justify-content: center;
            gap: 12px; margin-bottom: 10px;
            font-size: 18px; color: rgba(29,138,153,.65);
            letter-spacing: .02em;
        }
        .mw-step {
            padding: 22px 20px;
            background: rgba(255,255,255,0.72);
            border: 1px solid rgba(44,62,80,0.10);
            border-top: 3px solid rgba(194,155,69,0.45);
            border-radius: 2px;
        }
        .mw-step.is-premium {
            background: rgba(194,155,69,0.07);
            border-color: rgba(194,155,69,0.45);
            border-top-color: #c29b45;
        }
        .mw-step-num {
            display: flex; align-items: center; gap: 10px;
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.5rem; color: #c29b45; line-height: 1; margin-bottom: 10px;
        }
        .mw-free, .mw-premium {
            font-family: Inter, system-ui, sans-serif;
            font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
            font-weight: 700; padding: 3px 8px; border-radius: 2px;
        }
        .mw-free { color: #6b7784; border: 1px solid rgba(44,62,80,0.22); }
        .mw-premium { color: #fff; background: #c29b45; }
        .mw-step-title {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.35rem; color: #163741; margin-bottom: 8px;
        }
        .mw-step-body { font-size: 18px; line-height: 1.65; color: #4a5866; }
        .mw-external {
            color: #1d8a99; font-weight: 600; text-decoration: none;
            border-bottom: 1px solid rgba(29,138,153,0.35);
        }
        .mw-external:hover { color: #a8813a; border-bottom-color: #a8813a; }

        /* ── Break bands ──────────────────────────────────────────────────
           The page's chapter edges. Full-bleed and dark so the eye reads them as
           "section over" the way a page turn does in print. */
        .break-band {
            position: relative;
            overflow: hidden;
            padding: 84px 24px;
        }
        @media (min-width: 768px) { .break-band { padding: 104px 48px; } }
        .break-band-lead {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.75rem;
            line-height: 1.25;
            color: #fff;
            margin-bottom: 10px;
        }
        @media (min-width: 768px) { .break-band-lead { font-size: 2.25rem; } }
        .break-band-sub {
            font-size: 1.25rem;
            line-height: 1.6;
            color: rgba(255,255,255,0.72);
        }
        .break-band-arrow {
            display: inline-block;
            margin-top: 26px;
            width: 42px; height: 42px; line-height: 40px;
            border: 1px solid rgba(255,255,255,0.45);
            border-radius: 999px;
            color: #fff; font-size: 18px; text-decoration: none;
            transition: background .2s ease, border-color .2s ease, color .2s ease;
        }
        .break-band-arrow:hover { background: #fff; color: #163741; border-color: #fff; }

        /* ── Footer ───────────────────────────────────────────────────────
           Contrast, not taste: white at 30% opacity over #1A7A88 is roughly
           1.6:1 — well under the 4.5:1 needed for small text. Every value here
           clears it while keeping the same teal and the same gold. */
        .site-footer { padding: 36px 24px 30px; }
        .footer-tagline {
            font-family: 'Playfair Display', Georgia, serif;
            font-style: italic;
            font-size: 18px;
            line-height: 1.5;
            color: #F0D9A4;              /* gold, lightened to carry on teal */
            max-width: 34rem;
        }
        .footer-legal {
            font-size: 14px;
            line-height: 1.75;
            color: rgba(255,255,255,0.78);
        }
        .footer-meta {
            display: flex; align-items: center; gap: 10px;
            font-size: 14px; color: rgba(255,255,255,0.7);
        }
        .footer-meta a { color: rgba(255,255,255,0.85); text-decoration: none; }
        .footer-meta a:hover { color: #F0D9A4; }
        .footer-sep { color: rgba(255,255,255,0.35); }
        .mx-1 { margin-left:.25rem; margin-right:.25rem; }
        .bg-white\/30 { background-color: hsla(0,0%,100%,.3); }


        /* ── Contact form labels ──────────────────────────────────────────
           2026-09-01 (Stephen: "I can barely read 'I'm interested in'"). The six
           labels in this form are text-xs (12px) uppercase at 50% charcoal — small,
           tracked out, AND faint, which is three strikes at once. Uppercase tracked
           type needs more weight and contrast than sentence case at the same size,
           not less. Scoped to the form so it can't affect eyebrow labels elsewhere. */
        /* Only the uppercase field labels get tracking. Applying it to `label`
           wholesale also tracked out the sentence-case description nested inside
           the Strategy Session label, which looked broken. */
        #contact-form label.block, #contact-form legend {
            font-size: 15px !important;
            color: #4a5866 !important;
            font-weight: 600;
            letter-spacing: .10em;
        }
        #contact-form fieldset label { letter-spacing: 0; }
        #contact-form .text-charcoal\/40, #contact-form .text-charcoal\/30 {
            color: rgba(44,62,80,.72);
        }
        /* The two hint lines were 12px (text-xs). Floor for this form is 15px. */
        #contact-form .text-xs { font-size: 15px; line-height: 1.55; }
        #contact-form label span.text-sm,
        #contact-form label > div > span { letter-spacing: 0; }


        /* ── Contact section, 2026-09-01 ──────────────────────────────────
           "Font too small and washed out" — the whole block ran 12-14px at 30-60%
           charcoal. Sizes up, opacity up, and the box tightened (mb-12 -> mb-8,
           section padding down) now that the details block above it has gone. */
        .contact-lead {
            margin-top: 22px;
            font-size: 21px;
            line-height: 1.5;
            color: #3a4855;
        }
        .contact-phone {
            color: #1d8a99; font-weight: 700; white-space: nowrap;
            border-bottom: 1px solid rgba(29,138,153,.35);
            text-decoration: none;
        }
        .contact-phone:hover { color: #a8813a; border-bottom-color: #a8813a; }
        /* 2026-09-01: was reading tiny because it sits between 18px checkbox
           labels and the 21px lead — 16px grey in that company looks minute even
           though it clears the floor on its own. Matched to the labels. */
        .form-direct {
            margin-top: 18px; padding-top: 14px;
            border-top: 1px solid rgba(44,62,80,.12);
            font-size: 18px; color: #2c3e50;
        }
        .form-direct a {
            color: #1d8a99; font-weight: 600; text-decoration: none;
            border-bottom: 1px solid rgba(29,138,153,.35);
        }
        .form-direct a:hover { color: #a8813a; border-bottom-color: #a8813a; }
        .kilo-note {
            margin-top: 26px; text-align: center;
            font-size: 17px; line-height: 1.6; color: #55636f;
        }
        .kilo-note a {
            color: #1d8a99; font-weight: 600; text-decoration: none;
            border-bottom: 1px solid rgba(29,138,153,.35);
        }
        .kilo-note a:hover { color: #a8813a; border-bottom-color: #a8813a; }
        /* Inputs had no border rule of their own — the edge came from the browser
           default, which is the faint box in your screenshot. */
        #contact-form input[type=text], #contact-form input[type=email],
        #contact-form input[type=tel], #contact-form textarea, #contact-form input[type=file] {
            font-size: 18px;
            border: 1px solid rgba(44,62,80,.24);
            border-radius: 2px;
            color: #2c3e50;
        }
        #contact-form input:focus, #contact-form textarea:focus {
            outline: none; border-color: #1d8a99;
            box-shadow: 0 0 0 3px rgba(29,138,153,.13);
        }
        #contact-form fieldset span { font-size: 18px; color: #2c3e50; }
        #contact-form fieldset p { font-size: 16px; color: #4a5866; letter-spacing: 0; }
        #contact-form fieldset p.form-direct { font-size: 18px; color: #2c3e50; }
        /* space-y-5 puts a margin on every child, including the collapsed
           conditional fields, which left a dead gap above Send. */
        #contact-form .conditional-field:not(.visible) { margin: 0 !important; }


        .video-caption {
            font-size: 17px; color: #55636f; margin-top: 12px; text-align: center;
        }
        .video-caption-dark { color: rgba(255,255,255,.80); }


        /* ── GLOBAL TYPE FLOOR ────────────────────────────────────────────
           2026-09-01. Stephen has flagged "too small" five times, each on a
           different element, because I kept fixing them one at a time. This sets
           the floor once: no running text anywhere on the page below 17px, and
           the small-utility classes are pinned rather than left to Tailwind's
           defaults. Uppercase tracked eyebrow labels are exempt by name — they
           are labels, not reading text, and blowing those up looks wrong.
           If it still reads small, raise these three numbers, not 40 rules. */
        p, li, td, blockquote, label, .form-input, input, textarea, select, button, a {
            font-size: max(17px, 1em);
        }
        .text-xs  { font-size: 15px; line-height: 1.55; }
        .text-sm  { font-size: 17px; line-height: 1.62; }
        .text-base{ font-size: 18px; line-height: 1.62; }

        /* Exemptions: labels and numerals, where small IS correct. */
        .door-eyebrow, .credo-label, .chapter-num, .chapter-rail a, .tm-quote cite,
        .contrast-table th, .contrast-table tr.ct-step .ct-n, .mw-free, .mw-premium,
        .specimen-tag, .specimen-meta, .specimen-buyer-label, .beat-num,
        .footer-legal, .footer-meta, .form-optional, .nav-brand-text,
        .uppercase.tracking-\[0\.3em\], .tracking-widest, .tracking-\[0\.25em\] {
            font-size: revert-layer;
        }
        .door-eyebrow { font-size: 12px; }
        .credo-label  { font-size: 12px; }
        .chapter-num  { font-size: 12px; }
        .chapter-rail a { font-size: 13px; }
        .tm-quote cite { font-size: 12px; }
        .contrast-table th { font-size: 12px; }
        .contrast-table tr.ct-step .ct-n { font-size: 12px; }
        .footer-legal { font-size: 14px; }
        .footer-meta  { font-size: 14px; }
        .form-optional { font-size: 13px; }

        /* Kilo line and the direct-email line — both flagged as small. */
        .kilo-note   { font-size: 19px !important; color: #3a4855; }
        .form-direct { font-size: 19px !important; color: #2c3e50; }
        #contact-form fieldset p.form-direct { font-size: 19px; }
        
        @media (max-width: 640px) { video::cue { font-size: 15px; } }


        /* ── Contact form checkboxes, 2026-09-01 ──────────────────────────
           Measured before: 16x16 controls in 29px rows, with only the tick and
           the words clickable and no hover feedback. 24px is the practical floor
           for a control and 44px for a touch row, so both were under. The whole
           row is now the target, with a visible hover and checked state. */
        .cbx-row {
            display: flex; align-items: flex-start; gap: 14px;
            padding: 14px 14px; margin: 0 -14px;
            border-radius: 3px; cursor: pointer;
            transition: background .15s ease;
        }
        .cbx-row:hover { background: rgba(29,138,153,.06); }
        .cbx-row:has(input:checked) { background: rgba(194,155,69,.10); }
        .cbx-row input.inquiry-checkbox {
            width: 24px; height: 24px; min-height: 24px;
            margin-top: 2px; flex-shrink: 0;
            accent-color: #1d8a99; cursor: pointer;
        }
        .cbx-row input:focus-visible { outline: 3px solid rgba(29,138,153,.45); outline-offset: 2px; }
        .cbx-body { display: block; }
        .cbx-title {
            display: block; font-size: 18px; font-weight: 600;
            color: #163741; line-height: 1.35;
        }
        .cbx-name {
            display: block; font-size: 15px; font-style: italic;
            color: #1d8a99; margin-top: 2px;
        }
        .cbx-desc {
            display: block; font-size: 16px; line-height: 1.6;
            color: #55636f; margin-top: 7px; max-width: 34rem;
        }
        @media (max-width: 640px) {
            .cbx-row { padding: 16px 14px; }
            .cbx-row input.inquiry-checkbox { width: 26px; height: 26px; min-height: 26px; }
        }

        /* ── Mobile Refinements ── */
        @media (max-width: 640px) {
            input, textarea, select, button {
                min-height: 48px;
                font-size: 16px;
            }
            .inquiry-checkbox { width: 22px; height: 22px; }
            fieldset label {
                padding: 0.75rem 0;
                display: flex;
                align-items: flex-start;
                gap: 0.75rem;
                width: 100%;
            }
            .air-card {
                padding: 1.25rem 0.75rem;
            }
            .diff-card {
                border-left: 3px solid rgba(194,155,69,0.2);
                padding: 1rem 0.75rem 1rem 1rem;
            }
            .diff-row-staggered {
                padding-left: 0;
            }
            .offering-card {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                background: rgba(255,255,255,0.12);
                margin-top: 0 !important;
            }
            .hero-overlay {
                background: linear-gradient(135deg, rgba(30,60,70,0.92) 0%, rgba(29,138,153,0.78) 50%, rgba(20,50,60,0.95) 100%);
            }
        }

        /* ══ Direction 4 "The Field Report" — structural pass 2026-08-30 ══
           Chapter rail, reading measure, credo strip. No new colour tokens:
           every value below is an existing palette colour. */

        /* ── Chapter rail ──────────────────────────────────────────────────
           2026-09-01: rebuilt to be legible. It was 10px type at 40% opacity with
           no background, floating over whatever section happened to be behind it —
           present but unreadable, which is the worst of both. Now it sits on its
           own frosted panel so it never depends on the section behind it, at 12px
           and full-strength colour, with the active chapter marked in gold. */
        .chapter-rail { position: fixed; top: 50%; transform: translateY(-50%);
            left: 20px; z-index: 40; display: none;
            padding: 14px 16px 14px 13px;
            background: rgba(255,255,255,0.82);
            backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
            border: 1px solid rgba(44,62,80,0.10);
            border-radius: 3px;
            box-shadow: 0 6px 24px -10px rgba(22,55,65,0.35);
            transition: background .3s ease, border-color .3s ease; }
        /* 2026-09-01 (Stephen: "the floating menu covers the check boxes").
           Measured: at 1180px the rail's right edge is 258px and the contact form
           starts at 220px, so the rail sat directly over the checkbox column. At
           1280px the clearance was 12px, which browser zoom erases. Raised to
           1400px, where the gap is ~92px. */
        @media (min-width: 1400px) { .chapter-rail { display: block; } }
        /* And it fades out once you reach the form — a chapter index is wayfinding,
           and you have arrived. Also removes the overlap risk entirely. */
        .chapter-rail.at-destination {
            opacity: 0; visibility: hidden;
            transition: opacity .35s ease, visibility .35s ease;
        }
        .chapter-rail ol { list-style: none; margin: 0; padding: 0; }
        .chapter-rail li { margin: 0 0 4px; }
        .chapter-rail li:last-child { margin-bottom: 0; }
        .chapter-rail a { display: block; text-decoration: none; font-size: 13px;
            letter-spacing: .10em; text-transform: uppercase; line-height: 1.4;
            font-weight: 600;
            color: #5b6b7a;
            border-left: 2px solid transparent;
            padding: 6px 6px 6px 12px;
            transition: color .2s ease, border-color .2s ease, background .2s ease; }
        .chapter-rail a .num { font-variant-numeric: tabular-nums;
            color: #a8813a; margin-right: 8px; font-weight: 700; }
        .chapter-rail a:hover { color: #163741; background: rgba(29,138,153,0.07);
            border-left-color: rgba(194,155,69,.55); }
        .chapter-rail a.active { color: #163741; border-left-color: #C29B45;
            background: rgba(194,155,69,0.10); }

        /* Over the dark full-bleed bands the panel inverts rather than the text
           fighting the photograph behind it. */
        .chapter-rail.on-dark { background: rgba(16,42,50,0.72);
            border-color: rgba(255,255,255,0.14); }
        .chapter-rail.on-dark a { color: rgba(255,255,255,.80); }
        .chapter-rail.on-dark a .num { color: #E3C177; }
        .chapter-rail.on-dark a:hover { color: #fff; background: rgba(255,255,255,0.08); }
        .chapter-rail.on-dark a.active { color: #fff; border-left-color: #C29B45;
            background: rgba(255,255,255,0.10); }

        .chapter-pills-wrap { position: sticky; top: 54px; z-index: 39;
            background: rgba(255,253,250,.95); backdrop-filter: blur(6px);
            border-bottom: 1px solid rgba(194,155,69,.18); }
        @media (min-width: 1180px) { .chapter-pills-wrap { display: none; } }
        .chapter-pills { display: flex; gap: 7px; overflow-x: auto;
            padding: 9px 16px; -webkit-overflow-scrolling: touch;
            scrollbar-width: none; }
        .chapter-pills::-webkit-scrollbar { display: none; }
        .chapter-pills a { flex: 0 0 auto; text-decoration: none; font-size: 10px;
            letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
            color: rgba(44,62,80,.58); border: 1px solid rgba(194,155,69,.28);
            border-radius: 2px; padding: 5px 10px; }
        .chapter-pills a.active { color: #fff; background: #0F5B65;
            border-color: #0F5B65; }

        /* P2: replaces eleven identical centred 672px ribbons. Text sits at a real
           reading measure and OFF-centre, balanced by the rail in the left gutter. */
        .measure { max-width: 74ch; margin-left: 0; margin-right: auto; }
        .measure-c { max-width: 74ch; margin-left: auto; margin-right: auto; }
        @media (min-width: 1180px) { .measure { margin-left: 4%; } }

        .chapter-head { margin-bottom: 2.25rem; }
        .chapter-num { display: block; font-size: 12px; letter-spacing: .30em;
            text-transform: uppercase; color: #C29B45; font-weight: 600;
            margin-bottom: .5rem; }

        /* P6: the 2x2 diff-card grid became a one-line credo strip, so Mana Wahi is
           pitched once (its own section) instead of three times. */
        .credo { background: linear-gradient(135deg,#163741 0%,#0F5B65 60%,#1D8A99 100%); }
        .credo-grid { display: grid; grid-template-columns: 1fr; }
        @media (min-width: 768px) { .credo-grid { grid-template-columns: repeat(4,1fr); } }
        .credo-item { padding: 24px 24px; border-top: 1px solid rgba(255,255,255,.10);
            /* 2026-09-01: no text-align was set, so the four boxes inherited
               inconsistently — Truth read as centred, the rest left. All centred now. */
            text-align: center; }
        @media (min-width: 768px) { .credo-item { border-top: none;
            border-left: 1px solid rgba(255,255,255,.13); }
            .credo-item:first-child { border-left: none; } }
        .credo-label { font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
            color: #C29B45; font-weight: 600; margin-bottom: 5px; }
        /* 2026-09-01 (Stephen: "font in boxes (benefits) under picture seems small").
           16px white at 80% over a photograph reads smaller than 16px does on cream —
           the background texture eats it. Up to 17px at full white. */
        .credo-claim { color: #fff; font-size: 18px; line-height: 1.6; }

        /* chapter 04 — Pono Hale, built to parity with Mana Wahi */
        .beat-num { font-size: 11px; letter-spacing: .22em; color: #C29B45;
            font-weight: 600; }

        /* Worked example — the Mana Wahi specimen. Set as a document, not a card:
           it should read like the deliverable, because that is what it is. */
        .specimen { max-width: 62rem; margin: 0 auto; background: #FFFDFA;
            border: 1px solid rgba(194,155,69,.30); border-left: 3px solid #C29B45;
            padding: 28px 26px 22px; }
        @media (min-width: 768px) { .specimen { padding: 36px 44px 30px; } }
        .specimen-tag { font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
            color: #C29B45; font-weight: 600; margin-bottom: 14px; }
        .specimen-meta { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
            color: rgba(44,62,80,.50); margin-bottom: 10px; }
        .specimen-withheld { font-style: italic; text-transform: none;
            letter-spacing: 0; color: rgba(44,62,80,.35); }
        .specimen-headline { font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 26px; line-height: 1.2; color: #0F5B65; margin: 0 0 16px; }
        @media (min-width: 768px) { .specimen-headline { font-size: 32px; } }
        .specimen-body { color: rgba(44,62,80,.78); font-size: 14.5px; line-height: 1.72;
            margin: 0 0 14px; max-width: 68ch; }
        .specimen-buyer { border-top: 1px solid rgba(194,155,69,.22);
            margin-top: 18px; padding-top: 16px; }
        .specimen-buyer-label { font-size: 10px; letter-spacing: .24em;
            text-transform: uppercase; color: #1D8A99; font-weight: 600; margin-bottom: 8px; }
        .specimen-foot { font-size: 12px; font-style: italic; line-height: 1.6;
            color: rgba(44,62,80,.42); margin: 18px 0 0; }

    
        /* ── RESPONSIVE SIZES, LAST WORD ──────────────────────────────────
           These must be the final font-size declarations in the sheet. Media
           queries add no specificity, so any later .text-sm / .text-base rule
           beats .md\:text-sm / .md\:text-base and silently shrinks desktop copy.
           That has now bitten twice. Keep this block at the bottom. */
        @media (min-width: 768px) {
            .md\:text-base { font-size: 20px !important; line-height: 1.6; }
            .md\:text-lg   { font-size: 22px !important; line-height: 1.55; }
            .md\:text-xl   { font-size: 24px !important; line-height: 1.5; }
        }
    
        /* ── Page head (added 2026-09-01 with the three-page split) ────────
           /selling and /buying open with an H1, which the one-pager did not
           need — the homepage H1 was doing that job for everything. Each page
           now owns a heading that names what the page is, for the visitor and
           for search. Sits above the first section, on cream so it reads as a
           continuation of the nav rather than a hero. */
        .page-head {
            /* 2026-09-02 (Stephen: "Finding Your Home is too close to colored box").
               There was NO bottom padding, so the H1 sat directly against the dark
               band that follows it on /buying. Also raised the top, since the nav is
               now solid on these pages and was crowding the heading. */
            padding: 150px 24px 56px;
            background: radial-gradient(ellipse at 50% 0%, #FFF8F0 0%, #FFFBF6 45%, #FFFFFF 100%);
        }
        @media (min-width: 768px) { .page-head { padding: 180px 48px 72px; } }
        .page-head-h1 {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 2.25rem;
            line-height: 1.15;
            color: #163741;
        }
        @media (min-width: 768px) { .page-head-h1 { font-size: 3rem; } }

        /* Method tagline — added 2026-09-01 with the AI-naming framework. */
        .method-tagline {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.25rem;
            font-style: italic;
            color: #a8813a;
            margin-bottom: 14px;
        }
        @media (min-width: 768px) { .method-tagline { font-size: 1.4rem; } }

        /* ── Worked-example disclosure ─────────────────────────────────────
           2026-09-02. With the free Mana Wahi tier removed, the example IS the
           demonstration of value, so it has to be inviting to open — but it is
           long, and the page is already the length it should be. <details> keeps
           it out of the flow until asked for. No JavaScript. */
        .mw-example {
            border: 1px solid rgba(29,138,153,.28);
            border-top: 3px solid #c29b45;
            border-radius: 2px;
            background: #fff;
        }
        .mw-example > summary {
            cursor: pointer;
            padding: 22px 26px;
            list-style: none;
            display: block;
            transition: background .18s ease;
        }
        .mw-example > summary::-webkit-details-marker { display: none; }
        .mw-example > summary:hover { background: rgba(29,138,153,.05); }
        .mw-example-eyebrow {
            display: block;
            font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
            font-weight: 700; color: #a8813a; margin-bottom: 7px;
        }
        .mw-example-title {
            font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.3rem; color: #163741;
        }
        .mw-example-title::after {
            content: ' ↓'; color: #1d8a99; font-family: Inter, sans-serif;
        }
        .mw-example[open] .mw-example-title::after { content: ' ↑'; }
        .mw-example-body { padding: 0 26px 26px; }
        @media (max-width: 640px) {
            .mw-example > summary { padding: 18px 18px; }
            .mw-example-body { padding: 0 18px 20px; }
        }

        /* ── Nav on pages with no dark hero ────────────────────────────────
           2026-09-02 (Stephen: "when i click on selling title bar is white on
           white"). The navbar starts transparent with white text, which only
           works over index.html's dark hero photograph. /selling and /buying
           open on cream, so every nav element was invisible until scroll.
           <body class="light-top"> pins the nav to its solid state from 0px. */
        body.light-top nav#navbar {
            background-color: rgba(29,138,153,0.97);
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
        }
        body.light-top nav#navbar .nav-link,
        body.light-top nav#navbar .nav-brand-text { text-shadow: none; }

        /* Caught by tools/classaudit.js 2026-09-02 — used on the hero for nav
           clearance and absent from the hand-built tailwind.css, so it would have
           silently done nothing and left the logo under the navbar. */
        @media (min-width: 768px) {
            .md\:pt-20 { padding-top: 5rem; }
            .md\:h-28  { height: 7rem; }
        }

        /* Nav-clearance spacing for the subpages, 2026-09-02. All five flagged by
           tools/classaudit.js as absent from the hand-built tailwind.css — without
           these the first section would sit under the fixed navbar. */
        .pt-28 { padding-top: 7rem; }
        .pb-16 { padding-bottom: 4rem; }
        @media (min-width: 768px) {
            .md\:pt-32 { padding-top: 8rem; }
            .md\:pt-36 { padding-top: 9rem; }
            .md\:pb-24 { padding-bottom: 6rem; }
        }