/* ============================================
   AETERNA COLLECTION — Design Tokens (v1.6)
   Massimo's Tom Ford editorial system, with the black swapped
   for Heritage Green #2E3D30 and warm bone neutrals.
   ============================================ */
:root {
    /* Heritage Green palette */
    --heritage-green:       #2E3D30;
    --heritage-green-dark:  #1F2A20;
    --heritage-green-soft:  #4A5C4D;

    /* Warm neutrals (legacy — still used by photo overlays / other-scope pages) */
    --bone:                 #FAF8F4;
    --pure-white:           #FFFFFF;
    --warm-black:           #1A1B1A;
    --ink:                  #3A3D38;
    --stone:                #8B7F65;  /* Sprint 7 — darkened from #B8AE9E for WCAG AA contrast on muted labels (~5.2:1 on bone). */
    --linen:                #E8E5DD;
    --sage:                 #B7BEA8;  /* muted green-grey accent (welcome arrival-card border) */
    --ivory-mute:           #F2EFE8;
    --terracotta:           #A0584D;

    /* v3 design language — white-canvas surfaces (admin/email reference) */
    --canvas:               #FFFFFF;  /* page background */
    --raise:                #F6F6F4;  /* alternate/raised section background */
    --sunken:               #FAF8F8;  /* sunken / inset areas */
    --hairline-v3:          #EAEAE6;  /* standard hairline border */
    --hairline-v3-soft:     #F1F1EE;  /* soft hairline border */

    /* Text */
    --text-primary:     var(--warm-black);
    --text-secondary:   #656565;
    --text-subtle:      #888888;
    --text-disabled:    #aaaaaa;
    --text-placeholder: #cccccc;

    /* Surfaces */
    --surface:          var(--pure-white);
    --surface-warm:     var(--bone);
    --surface-light:    #fafafa;

    /* Borders */
    --hairline:         var(--hairline-v3);
    --border-soft:      #f0f0f0;

    /* ============================================
       REDESIGN V4 tokens (docs/planning/REDESIGN_SPEC.md §1)
       "Wolf Bordin" dark/gold editorial palette. ADDED alongside the
       v1.6/v3 tokens above, never replacing them — property.css,
       design.css, welcome.css, tours.css, account.css, cart.css etc.
       still read --heritage-green/--bone/--canvas/--ink/--text-secondary
       and are out of scope until their own lote (grepped before writing
       this block: 29 call sites for --ink alone). New v4 surfaces (this
       file's header/footer/.cta/.card/.rv/.grain + whatever lotes 2-8
       build) use ONLY the tokens below. ============================ */
    --espresso:      #1A130E;  /* canvas principal (v4 body background) */
    --espresso-2:    #211913;  /* seção alternada */
    --espresso-3:    #140F0B;  /* rodapé */
    --light:         #F3EDE2;  /* seção clara (About story, lote 6) */

    --cream:         #F1E9D8;
    --cream-72:      rgba(241, 233, 216, .72);
    --cream-45:      rgba(241, 233, 216, .45);

    /* NOTE: the spec names this pair "--ink"/"--ink-64" — but --ink
       already exists above (#3A3D38, legacy v1.6) with 29 live call
       sites in property.css/design.css/tours.css/welcome.css (welcome
       page is explicitly off-limits). Redeclaring --ink here would
       silently shift text colour on every one of those out-of-scope
       surfaces. Namespaced as --ink-v4 instead; lotes 6+ (the --light
       "About" section that actually needs "texto sobre --light") should
       reach for --ink-v4 / --ink-v4-64, not the legacy --ink. */
    --ink-v4:        #2C2118;
    --ink-v4-64:     rgba(44, 33, 24, .64);

    --gold:          #C9A46A;
    --gold-70:       rgba(201, 164, 106, .7);
    --gold-40:       rgba(201, 164, 106, .4);
    --gold-22:       rgba(201, 164, 106, .22);

    --ease:          cubic-bezier(.22, .61, .21, 1);
    --ease-soft:     cubic-bezier(.32, .72, 0, 1);

    /* ============================================
       LIGHT MODE — theme-reactive semantic layer (2026-08).
       Optional canvas flip for the public site: dark (--espresso/--cream/
       --gold) stays the default and every value below equals today's
       exact literal, so a page with no data-theme attribute (or
       data-theme="dark") renders byte-identical to pre-light-mode. Only
       html[data-theme="light"] (further down this file) overrides these.

       NAMING — deliberately prefixed `--theme-*`, NOT the bare `--canvas`/
       `--ink` the design brief sketched: both bare names are ALREADY taken
       by unrelated legacy tokens with live call sites on public pages —
       --canvas is the v3 white admin/preloader token (#FFFFFF, read by
       effects.css .preloader + cart.css:679 + tours.css:11), and --ink is
       the v1.6 warm-black token (#3A3D38, 29 call sites in property.css/
       design.css/tours.css/welcome.css — see the --ink-v4 note above,
       which hit this exact collision once already). Reusing either bare
       name here would silently recolor those out-of-scope/legacy surfaces
       every time the theme flips. --theme-* sidesteps that for good. */
    --theme-canvas:       var(--espresso);              /* page canvas */
    --theme-canvas-alt:   var(--espresso-2);             /* alternate section */
    --theme-canvas-deep:  var(--espresso-3);             /* footer */
    --theme-header-bg:    rgba(26, 19, 14, .88);          /* fixed header bar (translucent, blurred) */
    --theme-ink:          var(--cream);                   /* primary text */
    --theme-ink-72:       var(--cream-72);                 /* secondary text */
    --theme-ink-45:       var(--cream-45);                 /* muted/tertiary text */
    --theme-hair:         var(--gold-22);                  /* structural hairline / card / section border */
    --theme-hair-soft:    rgba(241, 233, 216, .025);        /* faint card/section wash */
    --theme-rule:         var(--gold-40);                   /* bolder short <hr>-style .rule divider */
    --theme-accent:       var(--gold);                     /* eyebrows, micro-labels, link-hover/active state */
    --theme-accent-muted: var(--gold-70);                  /* passive secondary accent text (sub-labels, captions) */
    --theme-field-bg:     rgba(241, 233, 216, .04);         /* form input background */
    --theme-field-border: rgba(241, 233, 216, .18);         /* form input border */
}

/* html[data-theme="light"] is set by an inline pre-paint snippet (server-
   injected, see server.cjs injectThemePrePaint) BEFORE first paint, from
   localStorage.ae_theme — so there is no flash of the wrong theme. Absence
   of the attribute (or data-theme="dark") keeps every token above.
   Overlays-on-photo (hero scrims, .ba-tag, card image gradients), CTA
   pills (gold bg + espresso text) and interactive gold hover-washes are
   INTENTIONALLY untouched here — those read the raw --espresso/--cream/
   --gold tokens directly and stay dark/gold in both themes by design. */
html[data-theme="light"] {
    --theme-canvas:       #F4F0E6;
    --theme-canvas-alt:   #EAE2D2;
    --theme-canvas-deep:  #E7DECC;
    --theme-header-bg:    rgba(244, 240, 230, .88);
    --theme-ink:          #241B12;
    --theme-ink-72:       rgba(36, 27, 18, .75);
    --theme-ink-45:       rgba(36, 27, 18, .5);
    --theme-hair:         rgba(36, 27, 18, .14);
    --theme-hair-soft:    rgba(36, 27, 18, .07);
    --theme-rule:         rgba(36, 27, 18, .28);
    /* 2026-08 — measured against WCAG: raw --gold on marfim is 2.05:1 (fails
       even AA-large). The brief's suggested #8F7440 only reached 3.89:1
       (AA-large-only). #7E5F28 clears real AA-normal (≥4.5:1) on both
       --theme-canvas (5.19:1) and --theme-canvas-alt (4.59:1) while still
       reading as a warm bronze-gold, not olive/brown. */
    --theme-accent:       #7E5F28;
    --theme-accent-muted: rgba(126, 95, 40, .85);
    --theme-field-bg:     rgba(36, 27, 18, .035);
    --theme-field-border: rgba(36, 27, 18, .16);
}

/* ─── Image protection (editorial photography) ─── */
.product-card img, .product-detail img, .maison-hero img,
.mto-swatch, .preview-card__image img,
.admin-product-image-thumb img, .admin-mto-fabric__zone img,
.admin-variant-group__swatch img {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

/* ============================================
   AETERNA — Design System (forked from Massimo)
   Aesthetic: Old European Romantic on Tom Ford bones
   Palette: Heritage Green #2E3D30 over Bone #FAF8F4
   Typography: Raleway UPPERCASE (signature kept)
                · Cormorant Garamond for editorial long-form
   ============================================ */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* A11y utility — used by the skip-to-content link in every page's markup
   but never actually defined in any stylesheet, so the link rendered
   visible at the top-left corner of every public page (the old bone
   background camouflaged it; the v3 white canvas exposed it). Standard
   clip pattern; the skip link becomes visible again on keyboard focus. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.skip-link:focus {
    position: fixed;
    top: 12px;
    left: 12px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 18px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    background: var(--gold);
    color: var(--espresso);
    border-radius: 10px;
    z-index: 2000;
    font-size: 14px;
    text-decoration: none;
}

/* REDESIGN V4 (docs/planning/REDESIGN_SPEC.md §1/§C) — this is the new
   default canvas for every public page that loads styles.css. Pages this
   lote is explicitly forbidden from touching stay visually intact anyway:
   /welcome/* re-declares `body.welcome-page{...}` at higher specificity
   (site/css/welcome.css), and /admin/* is covered edge-to-edge by
   `.admin-shell`/`.admin-main` (site/admin/admin-shell.css) so the body
   colour underneath is never actually visible. property.html (lote 4) and
   the other not-yet-reskinned public pages (cart/checkout/account/etc.)
   DO inherit this dark canvas + serif body copy until their own lote —
   expected, documented mid-pipeline state, not a regression to fix here. */
body {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--theme-ink);
    background-color: var(--theme-canvas);
    line-height: 1.8;
    letter-spacing: 0;
    overflow-x: hidden;
    /* Theme-toggle click flips the --theme-* custom properties live (see
       main.js); this only animates THAT recompute — the pre-paint snippet
       sets data-theme before first paint, so a fresh page load never has
       a value to transition from and this never fires on navigation. */
    transition: background-color .4s var(--ease), color .4s var(--ease);
}

/* ── Redesign V4 — typography + section foundation ─────────────
   (REDESIGN_SPEC.md §C). .display / .caps-display carry the new Bodoni
   Moda display face; .eyebrow is the Geist micro-label used above every
   section title; .section documents the final (already ×0.75'd — there
   is no `--ts` in production) section padding rhythm for lotes 2-8. */
.eyebrow {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-weight: 400;
    /* In-context layout editor — inherited multiplier from a data-tune
       ancestor (design.html "method-head" / "transform-head" / "leah-copy"
       / "assessment-copy" groups). Defaults to 1 (identity) everywhere
       else — this class is used on every page's section headers. */
    font-size: calc(10.5px * var(--tune-fs, 1));
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--theme-accent);
}
.display {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1.16;
}
.caps-display {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.section {
    padding: clamp(88px, 11vw, 150px) clamp(22px, 6vw, 84px);
    position: relative;
}

/* ── Redesign V4 — shared components (REDESIGN_SPEC.md §F) ──────
   .cta / .tlink / .card+.card-media+.card-body / .rv / .grain. New,
   non-colliding class names (grepped against every site/*.html and
   site/css/*.css before adding — zero existing usage) so lotes 2-8 can
   build pages against these without fighting the legacy .btn-heritage/
   .btn-ghost/.property-card family, which stays untouched for the
   pages not yet reskinned. */
.cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 15px 8px 15px 30px;
    border: 1px solid var(--gold-40);
    border-radius: 999px;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--theme-ink);
    background: transparent;
    cursor: pointer;
    transition: border-color .7s var(--ease), background .7s var(--ease), transform .5s var(--ease);
}
.cta .arr {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(201, 164, 106, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: var(--gold);
    transition: transform .7s var(--ease-soft), background .7s var(--ease);
}
.cta:hover {
    border-color: var(--gold-70);
    background: rgba(201, 164, 106, .06);
}
.cta:hover .arr {
    transform: translateX(3px);
    background: rgba(201, 164, 106, .22);
}
.cta:active { transform: scale(.98); }

.tlink {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--theme-accent);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--theme-hair);
    transition: border-color .6s var(--ease);
}
.tlink:hover { border-color: var(--gold-70); }

.card {
    display: flex;
    flex-direction: column;
    background: var(--theme-hair-soft);
    border: 1px solid var(--theme-hair);
    padding: 10px 10px 30px;
    transition: border-color .8s var(--ease), transform .8s var(--ease);
}
.card:hover {
    border-color: var(--gold-40);
    transform: translateY(-4px);
}
.card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}
.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 2s var(--ease-soft);
}
.card:hover .card-media img { transform: scale(1.055); }
.card-body {
    padding: 26px 18px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.card-body h3 {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--theme-ink);
}
.card-body p {
    font-size: 17px;
    color: var(--theme-ink-45);
    max-width: 30ch;
}
.card .tlink { margin-top: 10px; }

/* Reveal-on-scroll — the IntersectionObserver that toggles .in lives in
   site/js/main.js (see initScrollReveal). */
.rv {
    opacity: 0;
    transform: translateY(34px);
    filter: blur(6px);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.rv.in {
    opacity: 1;
    transform: none;
    filter: none;
}
.rv.d1 { transition-delay: .12s; }
.rv.d2 { transition-delay: .24s; }
.rv.d3 { transition-delay: .36s; }
.rv.d4 { transition-delay: .48s; }
@media (prefers-reduced-motion: reduce) {
    .rv { transition: none; opacity: 1; transform: none; filter: none; }
}

/* Film grain — fixed, decorative, identical across every page. */
.grain {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
/* Light mode — 'overlay' blend at the dark-mode opacity reads as visible
   dirt/grit on the marfim canvas (overlay darkens midtones aggressively
   against a light backdrop). Lower opacity keeps the same texture without
   muddying the canvas; mix-blend-mode stays 'overlay'. */
html[data-theme="light"] .grain {
    opacity: .025;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: #656565;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ============================================
   HEADER — Redesign V4 (docs/planning/REDESIGN_SPEC.md §D)
   Fixed dark bar (not the mockup's hero-only absolute nav — that pattern
   needs each page's hero markup rebuilt, which is lote 2-7's job; a
   persistent header keeps navigation reachable on every page meanwhile,
   including the not-yet-reskinned ones). Colour/type match the mockup;
   .header--scrolled (toggled by the pre-existing effects.js scroll
   listener) solidifies the bar past 80px so text stays legible over any
   background. ============================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--theme-header-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.header__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    height: 96px;
    max-width: 100%;
}

/* ── Header logo — "Wolf Bordin" lockup, now set in the redesign's
   Bodoni Moda display face instead of Cormorant Garamond. The SVG
   wordmark stays available in R2 for emails where a vector logo reads
   better than browser typography. */
.header__logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    gap: 2px;
    color: var(--theme-ink);
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.header__logo:hover { opacity: 0.7; }
/* Wordmark do header — mesma assinatura do título do hero (.caps-display):
   Bodoni em CAIXA ALTA com o mesmo letter-spacing .12em. Antes era caixa
   mista com spacing em px, o que destoava da home. */
.header__logo-text {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-size: 19px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .header__logo-text { font-size: 16px; }
}

.header__links {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.8vw, 26px);
}

.header__link {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .34em;
    color: var(--theme-ink-72);
    text-transform: uppercase;
    position: relative;
    padding-bottom: 5px;
    transition: color .5s var(--ease, ease);
}

.header__link::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 1px;
    background: var(--theme-accent);
    transition: left .5s var(--ease, ease), right .5s var(--ease, ease);
}

.header__link:hover {
    color: var(--theme-ink);
}
.header__link:hover::after {
    left: 0;
    right: 0;
}

.header__link--active {
    color: var(--theme-accent);
}
.header__link--active::after {
    left: 0;
    right: 0;
    background: var(--gold-70);
}

/* Unused by the v4 nav markup (no pipe separators between links — see
   the mockup) but left defined in case a not-yet-reskinned page still
   renders one; harmless if nothing matches. */
.header__divider {
    font-size: 11px;
    color: var(--theme-ink-45);
    font-weight: 200;
    user-select: none;
}

/* Header action icons */
.header__actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header__action {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--theme-ink-72);
    text-decoration: none;
    transition: opacity 0.2s, color .2s;
    width: 24px;
    height: 24px;
}

.header__action:hover {
    color: var(--theme-ink);
    opacity: 1;
}

.header__action svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Light-mode toggle (2026-08) — moon⇄sun cross-fade. Injected by main.js
   into .header__actions (before the lang-switcher) and appended to the
   mobile menu nav; both instances share this rule. Two overlaid icons,
   only one visible at a time — html[data-theme="light"] flips which. */
.theme-toggle { position: relative; }
.theme-toggle__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: opacity .3s var(--ease, ease), transform .3s var(--ease, ease);
}
.theme-toggle__icon--moon { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
.theme-toggle__icon--sun  { transform: translate(-50%, -50%) rotate(-90deg) scale(.5); opacity: 0; }
html[data-theme="light"] .theme-toggle__icon--moon { transform: translate(-50%, -50%) rotate(90deg) scale(.5); opacity: 0; }
html[data-theme="light"] .theme-toggle__icon--sun  { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .theme-toggle__icon { transition: none; }
}
/* Mobile-menu instance — .header__action's 24px box is right for the
   compact header bar; inside the full-screen mobile menu list it should
   read like the other nav items (bigger tap target, sits inline in the
   centered column instead of floating top-right). */
.theme-toggle--mobile {
    width: 44px;
    height: 44px;
    margin-top: 4px;
}
.theme-toggle--mobile svg { width: 22px; height: 22px; }

/* Account initials (shown when logged in) */
.header__action-initials {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.5px;
    width: 24px;
    height: 24px;
    border: 1px solid var(--gold-40);
    color: var(--theme-ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Cart count badge */
.header__cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--gold);
    color: var(--espresso);
    font-size: 8px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    letter-spacing: 0;
}

.header__menu {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}

.header__menu span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--theme-ink);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.header__menu--open span:first-child {
    transform: rotate(45deg) translate(2.5px, 2.5px);
}

.header__menu--open span:last-child {
    transform: rotate(-45deg) translate(2.5px, -2.5px);
}

/* ============================================
   MOBILE MENU — Redesign V4
   ============================================ */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--theme-canvas);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu--open {
    opacity: 1;
    pointer-events: all;
}

.mobile-menu__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.mobile-menu__link {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 3px;
    color: var(--theme-ink);
    text-transform: uppercase;
}

.mobile-menu__link:hover {
    color: var(--theme-accent);
}

/* ============================================
   NAV DROPDOWNS — injected at runtime by main.js
   (roles brief 2026-08-06, estágio 1)
   Panels are centred under the root link, so LTR and
   RTL render mirror-identically with no extra rules.
   All colours via --theme-* tokens → both themes work.
   ============================================ */
.header__drop {
    position: relative;
    display: inline-flex;
}

/* Transparent hover bridge: the panel starts at the root link's bottom
   edge and pads down to roughly the header's lower border, so the
   pointer never crosses a dead zone between link and list. */
.header__drop-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 34px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s var(--ease, ease), visibility 0s linear .22s;
    z-index: 1001;
}

.header__drop--open .header__drop-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .22s var(--ease, ease), visibility 0s;
}

.header__drop-list {
    display: flex;
    flex-direction: column;
    min-width: 230px;
    padding: 14px 0;
    /* Solid canvas on purpose: the fixed .header already applies a
       backdrop-filter, which makes it the backdrop root — a nested
       backdrop-filter here would NOT blur the page behind the panel
       (verified: hero text bled through), so translucency reads as a
       rendering glitch instead of glass. */
    background: var(--theme-canvas);
    border: 1px solid var(--theme-hair);
    transform: translateY(-8px);
    transition: transform .22s var(--ease, ease);
}

.header__drop--open .header__drop-list {
    transform: translateY(0);
}

.header__drop-link {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--theme-ink-72);
    text-align: center;
    white-space: nowrap;
    padding: 11px 28px;
    transition: color .3s var(--ease, ease), background-color .3s var(--ease, ease);
}

.header__drop-link:hover,
.header__drop-link:focus-visible {
    color: var(--theme-accent);
    background: var(--theme-hair-soft);
}

/* ── Mobile: sub-items grouped under their parent link ── */
.mobile-menu {
    overflow-y: auto;
}

/* margin:auto (not just flex centring) so the menu stays scrollable
   when the grouped list grows taller than the viewport. */
.mobile-menu__nav {
    margin: auto;
    padding: 110px 24px 90px;
}

.mobile-menu__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .95rem;
}

.mobile-menu__sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
}

.mobile-menu__sublink {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: 2.5px;
    color: var(--theme-ink-72);
    text-transform: uppercase;
}

.mobile-menu__sublink:hover {
    color: var(--theme-accent);
}

/* ============================================
   HERO — Split Screen (Tom Ford signature)
   ============================================ */
.hero {
    margin-top: 0;
    padding-top: 96px;
}

.hero__split {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 96px);
    position: relative;
    overflow: hidden;
    background: var(--heritage-green);
}

.hero__panel {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 50%;
}

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

.hero__panel-media {
    position: absolute;
    inset: 0;
}

.hero__panel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.8s ease;
}

.hero__panel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.0) 40%
    );
    pointer-events: none;
}

.hero__panel-text {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 32px;
    z-index: 2;
}

.hero__panel-text span {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: #ffffff;
}

/* Desktop split */
@media (min-width: 768px) {
    .hero__split {
        flex-direction: row;
        height: calc(100vh - 96px);
    }

    .hero__panel {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50vw;
        height: 100%;
        transition: width 0.32s ease-in-out;
    }

    .hero__panel--left {
        left: 0;
    }

    .hero__panel--right {
        right: 0;
        left: auto;
    }

    .hero__panel--left:hover {
        width: 55vw;
        z-index: 2;
    }

    .hero__panel--right:hover {
        width: 55vw;
        z-index: 2;
    }

    .hero__panel-text {
        padding: 32px;
    }

    .hero__panel-text span {
        font-size: 24px;
    }

    /* When left is hovered, shrink right */
    .hero__split:has(.hero__panel--left:hover) .hero__panel--right {
        width: 45vw;
    }

    /* When right is hovered, shrink left */
    .hero__split:has(.hero__panel--right:hover) .hero__panel--left {
        width: 45vw;
    }
}

/* ============================================
   FILM / VIDEO SECTION
   ============================================ */
.film {
    background: var(--heritage-green);
    padding: 0;
}

.film__wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.film__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.film__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.45) 0%,
        transparent 35%
    );
    pointer-events: none;
}

.film__content {
    position: absolute;
    bottom: 32px;
    left: 32px;
    z-index: 2;
}

.film__label {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-bottom: 8px;
}

.film__title {
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: #ffffff;
}

/* ============================================
   COLLEZIONE
   ============================================ */
.collezione {
    padding: 80px 32px;
    background: var(--bone);
}

.collezione__header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 64px;
}

.collezione__title {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--heritage-green);
    margin-bottom: 16px;
}

.collezione__subtitle {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0;
    color: #656565;
    text-transform: none;
    line-height: 1.6;
}

.collezione__grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
}

.collezione__item {
    overflow: hidden;
    background: var(--bone);
}

.collezione__item-link {
    display: block;
}

.collezione__item-img {
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.collezione__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.collezione__item:hover .collezione__item-img img {
    transform: scale(1.03);
}

.collezione__item-info {
    padding: 16px 12px;
}

.collezione__item-info h3 {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--heritage-green);
    margin-bottom: 4px;
}

.collezione__item-info p {
    font-size: 11px;
    font-weight: 300;
    color: #656565;
    letter-spacing: 0;
    text-transform: none;
}

/* ============================================
   ATELIER / BESPOKE FORM
   ============================================ */
.atelier {
    padding: 80px 32px;
    background: var(--bone);
    border-top: 1px solid #e8e8e8;
}

.atelier__split {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.atelier__image-col {
    overflow: hidden;
}

.atelier__image-col img {
    width: 100%;
    height: 75vh;
    max-height: 700px;
    object-fit: cover;
}

.atelier__form-col {
    padding: 32px 0;
}

.atelier__title {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--heritage-green);
    margin-bottom: 16px;
}

.atelier__desc {
    font-size: 14px;
    font-weight: 300;
    color: #656565;
    line-height: 1.8;
    margin-bottom: 32px;
    max-width: 420px;
    text-transform: none;
    letter-spacing: 0;
}

.atelier__form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.atelier__input,
.atelier__textarea {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--heritage-green);
    background: transparent;
    border: none;
    border-bottom: 1px solid #e8e8e8;
    padding: 20px 0;
    outline: none;
    transition: border-color 0.2s ease;
    resize: none;
    text-transform: uppercase;
}

.atelier__input::placeholder,
.atelier__textarea::placeholder {
    color: #999999;
    font-weight: 300;
    letter-spacing: 2px;
}

.atelier__input:focus,
.atelier__textarea:focus {
    border-bottom-color: var(--heritage-green);
}

.atelier__textarea {
    min-height: 80px;
    margin-top: 0;
}

.atelier__submit {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    color: #ffffff;
    background: var(--heritage-green);
    padding: 18px 56px;
    margin-top: 32px;
    transition: background 0.2s ease;
    border: none;
    cursor: pointer;
}

.atelier__submit:hover {
    background: #1a1a1a;
}

.atelier__submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.atelier__feedback {
    font-size: 12px;
    letter-spacing: 0;
    min-height: 20px;
    margin-top: 16px;
}

.atelier__feedback--success {
    color: var(--heritage-green);
}

.atelier__feedback--error {
    color: #8b0000;
}

/* ============================================
   LA MAISON
   ============================================ */
.maison {
    padding: 80px 32px;
    background: var(--bone);
    text-align: center;
    border-top: 1px solid #e8e8e8;
}

.maison__inner {
    max-width: 680px;
    margin: 0 auto;
}

.maison__title {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--heritage-green);
    margin-bottom: 32px;
}

.maison__text {
    font-size: 14px;
    font-weight: 300;
    color: #656565;
    line-height: 2;
    margin-bottom: 64px;
    text-transform: none;
    letter-spacing: 0;
}

.maison__stats {
    display: flex;
    justify-content: center;
    gap: 80px;
}

.maison__stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.maison__stat-number {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--heritage-green);
}

.maison__stat-label {
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #656565;
}

/* ============================================
   CONTATTO
   ============================================ */
.contatto {
    padding: 80px 32px;
    background: var(--bone);
    text-align: center;
    border-top: 1px solid #e8e8e8;
}

.contatto__inner {
    max-width: 600px;
    margin: 0 auto;
}

.contatto__title {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--heritage-green);
    margin-bottom: 16px;
}

.contatto__text {
    font-size: 14px;
    font-weight: 300;
    color: #656565;
    margin-bottom: 32px;
    text-transform: none;
    letter-spacing: 0;
}

.contatto__email {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--heritage-green);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.2s ease;
}

.contatto__email:hover {
    color: var(--heritage-green);
    border-bottom-color: var(--heritage-green);
}

/* ============================================
   FOOTER — Tom Ford style
   ============================================ */
.footer {
    background: var(--raise);
    padding: 0 32px;
    border-top: 1px solid var(--hairline-v3);
}

.footer__top {
    padding: 40px 0;
}

.footer__col-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--heritage-green);
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    text-transform: uppercase;
}

.footer__plus,
.footer__minus {
    font-size: 18px;
    font-weight: 300;
    color: var(--heritage-green);
}

.footer__col-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
}

.footer__col-links a {
    font-size: 11px;
    font-weight: 300;
    color: #656565;
    letter-spacing: 0;
    text-transform: uppercase;
}

.footer__col-links a:hover {
    color: var(--heritage-green);
}

.footer__divider {
    border: none;
    border-top: 1px solid var(--hairline-v3);
}

.footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 0;
}

.footer__brand {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--heritage-green);
    text-transform: uppercase;
}

.footer__copy {
    font-size: 11px;
    font-weight: 300;
    color: #656565;
    letter-spacing: 0;
}

/* ============================================
   CTA FINAL — Black section
   ============================================ */
.cta-final {
    padding: 120px 32px;
    background: var(--heritage-green);
    text-align: center;
}

.cta-final__inner {
    max-width: 600px;
    margin: 0 auto;
}

.cta-final__label {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    margin-bottom: 24px;
}

.cta-final__title {
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 6px;
    color: #ffffff;
    margin-bottom: 16px;
}

.cta-final__text {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 48px;
    text-transform: uppercase;
}

.cta-final__link {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 4px;
    transition: border-color 0.2s ease;
}

.cta-final__link:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* ============================================
   PAGE HEADER — Shared across inner pages
   ============================================ */
.page-main {
    padding-top: 96px;
}

.page-header {
    padding: 80px 32px 64px;
    text-align: center;
    border-bottom: 1px solid #e8e8e8;
}

.page-header__label {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 4px;
    color: #999999;
    display: block;
    margin-bottom: 16px;
}

.page-header__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 6px;
    color: var(--heritage-green);
    margin-bottom: 12px;
}

.page-header__subtitle {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #656565;
    text-transform: none;
}

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (min-width: 768px) {
    .footer__plus,
    .footer__minus {
        display: none;
    }

    .footer__col-links {
        display: flex !important;
    }

    .footer__col-title {
        cursor: default;
        padding: 0 0 20px;
    }

    .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

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

    .atelier__image-col img {
        height: 50vh;
    }
}

/* Massimo/V4 residue #5 — wordmark + 7 nav links no longer fit between
   768–1080px (they used to collide at 768–1080, e.g. "Wolf Bordin" into
   "About" at ~820px). Split out from the shared 768px breakpoint above
   (which still governs the footer accordion) so only the header nav
   moves to the hamburger threshold. */
@media (max-width: 1080px) {
    .header__links {
        display: none;
    }

    .header__menu {
        display: flex;
    }
}

@media (min-width: 1081px) {
    .header__menu {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .header__actions {
        gap: 16px;
    }

    .header__action {
        width: 20px;
        height: 20px;
    }

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

    .header__nav {
        height: 72px;
        padding: 0 20px;
        justify-content: center;
    }

    .header__menu {
        position: absolute;
        right: 20px;
    }

    .hero {
        padding-top: 72px;
    }

    .hero__split {
        height: calc(100vh - 72px);
    }

    .hero__panel-text {
        padding: 20px;
    }

    .hero__panel-text span {
        font-size: 16px;
    }

    .collezione {
        padding: 60px 20px;
    }

    .collezione__grid {
        grid-template-columns: 1fr;
    }

    .atelier {
        padding: 60px 20px;
    }

    .maison {
        padding: 60px 20px;
    }

    .maison__stats {
        flex-direction: column;
        gap: 24px;
    }

    .contatto {
        padding: 60px 20px;
    }

    .film__wrapper {
        aspect-ratio: 16 / 9;
    }

    .film__content {
        bottom: 20px;
        left: 20px;
    }

    .footer__col-links {
        display: none;
    }
}

/* Language Switcher — dropdown */
.lang-switcher {
    position: relative;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
/* Redesign V4 — dark header colours (docs/planning/REDESIGN_SPEC.md §D) */
.lang-switcher__btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--gold-40);
    padding: 4px 10px 4px 12px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--theme-ink-72);
    text-transform: uppercase;
    transition: border-color 0.2s, color 0.2s;
}
.lang-switcher__btn:hover {
    border-color: var(--gold);
    color: var(--theme-ink);
}
.lang-switcher__arrow {
    transition: transform 0.2s;
    flex-shrink: 0;
    stroke: var(--theme-ink-72);
}
.lang-switcher--open .lang-switcher__arrow {
    transform: rotate(180deg);
}
.lang-switcher__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--theme-canvas-alt);
    border: 1px solid var(--gold-40);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    min-width: 56px;
    z-index: 9999;
}
.lang-switcher--open .lang-switcher__dropdown {
    display: block;
}
.lang-switcher__opt {
    padding: 7px 14px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--theme-ink-45);
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.15s;
    user-select: none;
}
.lang-switcher__opt:hover,
.lang-switcher__opt:focus {
    color: var(--theme-ink);
    outline: none;
}
.lang-switcher__opt--active {
    color: var(--theme-accent);
    font-weight: 600;
}

/* ============================================
   RTL SUPPORT (Arabic)
   ============================================ */
.rtl .header__nav {
    flex-direction: row-reverse;
}

.rtl .header__links {
    flex-direction: row-reverse;
}

.rtl .header__actions {
    flex-direction: row-reverse;
}

.rtl .mobile-menu__nav {
    text-align: right;
}

.rtl .product-detail {
    flex-direction: row-reverse;
}

.rtl .product-detail__info-col {
    text-align: right;
}

.rtl .mto-gender-btns,
.rtl .mto-sizes,
.rtl .mto-swatches {
    flex-direction: row-reverse;
}

.rtl .cart-item {
    flex-direction: row-reverse;
}

.rtl .cart-totals {
    text-align: right;
}

.rtl .lang-switcher__dropdown {
    right: auto;
    left: 0;
}

.lang-switcher__opt:focus-visible {
    outline: 2px solid rgba(255,255,255,0.5);
    outline-offset: -2px;
}

@media (max-width: 768px) {
    .lang-switcher__btn {
        font-size: 9px;
        padding: 3px 8px 3px 10px;
    }
}

/* ============================================
   AETERNA — Sprint 1 components
   ============================================ */

/* (Sprint 3.1) Header wordmark image rule retired — header now uses a
   text-rendered .header__logo-text (rebrand S4: single-line "Wolf Bordin"
   lockup, replaced the two-line Aeterna/Collection split). SVG wordmark
   is still served from R2 for footer + emails; see styles.css line ~178. */

/* ── Cards ─────────────────────────────────── */
.property-card,
.experience-card {
    background: var(--pure-white);
    border: 1px solid var(--hairline-v3);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(28,36,28,.05), 0 12px 28px -16px rgba(28,36,28,.16);
    overflow: hidden;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    /* Lote 1b — was color:inherit. On the v4 dark canvas the inherited
       value is --cream, so any child text with no color of its own
       (e.g. experience.html's cross-sell <h3>) rendered cream-on-white
       = 1.21:1. property-card's own children already set explicit
       colors via inline styles (js/properties.js), so this is a strict
       fix with no visual change there. */
    color: var(--heritage-green);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.property-card__media,
.experience-card__media {
    overflow: hidden;
    background: var(--ivory-mute);
    /* Cards round via the parent's overflow:hidden — undo the card's own
       padding-driven inset so the media reaches the rounded corner. */
    margin: -32px -32px 0;
    width: calc(100% + 64px);
}
.experience-card__media {
    aspect-ratio: 4 / 5;
}
/* S9 fix 4 — property cards (home + listings grid) were inheriting the
   tall 4/5 portrait crop shared with experience cards, making each card
   photo taller than the viewport. Landscape 4/3 reads lighter and crops
   less; width/margin unchanged so there's no layout shift, only height. */
.property-card__media {
    aspect-ratio: 4 / 3;
}
.property-card__media img,
.experience-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}
.property-card:hover,
.experience-card:hover {
    transform: translateY(-2px);
}
.property-card:hover .property-card__media img,
.experience-card:hover .experience-card__media img {
    transform: scale(1.04);
}

.tour-card {
    background: var(--pure-white);
    border: 1px solid var(--hairline-v3);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(28,36,28,.05), 0 12px 28px -16px rgba(28,36,28,.16);
    overflow: hidden;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tour-card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ivory-mute);
    margin: -24px -24px 0;
    width: calc(100% + 48px);
}
.tour-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.design-project-card {
    background: var(--pure-white);
    border: 1px solid var(--hairline-v3);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(28,36,28,.05), 0 12px 28px -16px rgba(28,36,28,.16);
    overflow: hidden;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.design-project-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin: -24px -24px 0;
    width: calc(100% + 48px);
}
.design-project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Ornamental divider ─────────────────────── */
.ornamental-divider {
    display: block;
    margin: 32px auto;
    width: 240px;
    height: 24px;
}

/* ── Heritage button overrides ──────────────── */
.btn-heritage,
.btn-primary {
    background: #2E3D30;
    color: #FFFFFF;
    border: 0;
    border-radius: 10px;
    padding: 13px 28px;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.2px;
    text-transform: none;
    cursor: pointer;
    transition: filter 0.2s ease, background 0.2s ease;
}
.btn-heritage:hover,
.btn-primary:hover {
    background: var(--heritage-green-dark);
    filter: brightness(1.05);
}

.btn-ghost {
    /* Sprint 5.7 — block-level by default so the bordered box never overlaps
       the trailing line of an inline-flow paragraph. Sections still wrap it
       in flex/grid containers when they need horizontal placement. */
    display: inline-block;
    background: transparent;
    border: 1px solid #2E3D30;
    border-radius: 10px;
    color: #2E3D30;
    padding: 13px 28px;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.2px;
    text-transform: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
/* Sprint 5.7 (F1+F2) — guarantee vertical breathing room between an
   editorial paragraph and its CTA button when both live in the same column
   of an .aeterna-split grid. The buttons used to sit inline-flow against
   the wrapped last line of the paragraph, producing the "OUR STORY"
   border-overlap-on-text bug reported on / and the same on /design. */
.aeterna-split .aeterna-section__intro { margin-bottom: 24px; }
.aeterna-split .btn-ghost,
.aeterna-section .aeterna-section__intro + .btn-ghost {
    display: inline-block;
    margin-top: 8px;
}
.btn-ghost:hover {
    background: var(--heritage-green);
    color: var(--bone);
}

/* Lote 1b — .btn-ghost's default heritage-green-on-transparent is
   1.60:1 on the v4 dark canvas (by design the class "stays untouched
   for pages not yet reskinned" — see the v4 foundation comment above).
   Rather than recolor the shared class for every not-yet-reskinned
   page, this opt-in modifier gives the 1b pages (404/terms/tours,
   plain-canvas instances only) a readable variant. */
.btn-ghost--on-dark {
    border-color: var(--gold-40);
    color: var(--theme-ink);
}
.btn-ghost--on-dark:hover {
    background: var(--gold-22);
    border-color: var(--gold-70);
    color: var(--theme-ink);
}

/* ── Heritage hero ──────────────────────────── */
.aeterna-hero {
    position: relative;
    width: 100%;
    min-height: 88vh;
    overflow: hidden;
    isolation: isolate;
    background: var(--heritage-green);
    color: var(--bone);
}
.aeterna-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.aeterna-hero__bg img,
.aeterna-hero__bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Sprint property-hero-video — the <video> banner uses the same cover
   geometry as the image, but the <img> fallback child inside <video>
   needs to also be sized so older browsers (Safari pre-13) that ignore
   <source> still cover the hero with the poster frame. */
.aeterna-hero__video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.aeterna-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(46, 61, 48, 0.0) 40%, rgba(46, 61, 48, 0.6) 100%);
}
.aeterna-hero__watermark {
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 360px;
    opacity: 0.08;
    z-index: -1;
    pointer-events: none;
}
.aeterna-hero__copy {
    max-width: 760px;
    padding: 192px 32px 128px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.aeterna-hero__eyebrow {
    /* In-context layout editor (design.html "hero-eyebrow") — multiplier
       defaults to 1 (identity) on every page that never sets --tune-fs, so
       this is byte-identical to `font-size: 10px` everywhere else. */
    font-size: calc(10px * var(--tune-fs, 1));
    max-width: calc(100% * var(--tune-w, 1));
    text-align: var(--tune-align, inherit);
    letter-spacing: 4px;
    font-weight: 500;
    text-transform: uppercase;
}
.aeterna-hero__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(42px, 6.2vw, 76px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: none;
}
.aeterna-hero__subline {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-weight: 500;
    text-transform: none;
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.75;
    letter-spacing: 0.2px;
    color: var(--linen);
    max-width: 600px;
}
.aeterna-hero__ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.aeterna-hero .btn-ghost {
    border-color: var(--bone);
    color: var(--bone);
}
.aeterna-hero .btn-ghost:hover {
    background: var(--bone);
    color: var(--heritage-green);
}

/* S10 — mobile video-hero reflow. Landscape hero videos inside the tall
   88vh overlay box got their sides brutally cropped by object-fit:cover
   on narrow viewports (owner flagged this). Scoped with :has() so it ONLY
   touches heroes that actually contain a <video> child — photo heroes
   (property pages without hero_video_id, and every other page) are
   completely unaffected at every width, and desktop is untouched at every
   width. Browsers without :has() support simply keep today's overlay
   behavior (graceful degradation, no layout break).
   Below 720px: the hero stops being a fixed-height overlay box and
   becomes a flowing column — a 4:3 media band (crops a 16:9 source only
   modestly on the sides, the proportion the owner asked for) followed by
   the copy block sitting on plain white below it. */
@media (max-width: 720px) {
    .aeterna-hero:has(.aeterna-hero__video) {
        min-height: 0;
        background: var(--espresso);
        /* o hero base é display:flex row — sem isto o __bg (aspect-ratio
           4/3) vira item de linha encolhido ao lado da copy em vez da
           banda full-width empilhada que o S10 desenhou */
        flex-direction: column;
        align-items: stretch;
    }
    .aeterna-hero:has(.aeterna-hero__video) .aeterna-hero__bg {
        position: relative;
        inset: auto;
        z-index: auto;
        width: 100%;
        aspect-ratio: 4 / 3;
        height: auto;
    }
    .aeterna-hero:has(.aeterna-hero__video) .aeterna-hero__overlay {
        /* Confine the darkening gradient to the media band itself (it was
           inset:0 on the whole hero box for legibility of copy that used
           to sit on top of the video; the copy now flows below on white,
           so the overlay only needs to exist over the media). __overlay is
           a SIBLING of __bg (not a child), so inset:0 resolves against the
           nearest positioned ancestor — .aeterna-hero itself, which is now
           the full flowing column — and would darken the copy block below
           too. Give it the bg band's own top/width/aspect-ratio instead of
           inset:0 so it's sized to match the media band exactly. */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        aspect-ratio: 4 / 3;
        height: auto;
        z-index: 1;
    }
    .aeterna-hero:has(.aeterna-hero__video) .aeterna-hero__watermark {
        display: none;
    }
    .aeterna-hero:has(.aeterna-hero__video) .aeterna-hero__copy {
        position: relative;
        max-width: none;
        padding: 28px 24px 8px;
    }
}

/* ── Sections ───────────────────────────────── */
/* S9 fix 3 — was 112px top+bottom, which stacks to a 224px void between
   two adjacent sections' content (owner flagged this site-wide: About→
   Gallery, thumbs→What's-included→Live-availability, All-listings→
   kitchen split). 44px top+bottom stacks to ~88px between sections —
   inside the requested ~72-88px desktop rhythm — while a single section's
   own internal spacing (title margins, .aeterna-grid margin-top, etc.)
   is untouched. Hero height is untouched (.aeterna-hero is a separate
   rule). */
.aeterna-section {
    padding: 44px 32px;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    /* Sprint 5.2 — clip prevents tall split media + uppercase eyebrows from
       bleeding into the adjacent dark section on narrow viewports. */
    overflow: clip;
}
.aeterna-section--green {
    background: var(--heritage-green);
    color: var(--bone);
    max-width: none;
    width: 100%;
    margin: 0;
}
/* v3 — on a dark-green section, ghost buttons need the bone-on-transparent
   outline (same treatment as .aeterna-hero .btn-ghost below); the default
   .btn-ghost is heritage-green-on-transparent, which is nearly invisible
   against this background. */
.aeterna-section--green .btn-ghost {
    border-color: var(--bone);
    color: var(--bone);
}
.aeterna-section--green .btn-ghost:hover {
    background: var(--bone);
    color: var(--heritage-green);
}
.aeterna-section--green .btn-heritage {
    background: var(--bone);
    color: var(--heritage-green);
}
.aeterna-section--green .btn-heritage:hover {
    background: #FFFFFF;
    filter: none;
}
@media (max-width: 800px) {
    .aeterna-section { padding: 28px 24px; }
}
.aeterna-section__eyebrow {
    font-size: 10px;
    letter-spacing: 4px;
    font-weight: 500;
    text-transform: uppercase;
}
.aeterna-section__title {
    /* redesign v4: título de seção em Bodoni Moda, escala já ×0.75
       (era Cormorant 500 — o que deixava as seções legadas fora do padrão)
       In-context layout editor (design.html "philosophy-title" /
       "hospitality-title", + inherited by "leah-copy") — var defaults to 1
       (identity) on every OTHER page/section that never sets --tune-fs. */
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-size: calc(clamp(21px, 3vw, 34px) * var(--tune-fs, 1));
    max-width: calc(100% * var(--tune-w, 1));
    text-align: var(--tune-align, inherit);
    text-transform: none;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1.16;
    color: var(--theme-ink);
    margin: 16px 0 24px;
}
.aeterna-section__intro {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-weight: 500;
    text-transform: none;
    max-width: 680px;
    font-size: 15.5px;
    line-height: 1.85;
    letter-spacing: 0.1px;
    /* Lote 1b — was var(--ink) (#3A3D38), 1.67:1 on the v4 dark canvas
       (--espresso). Every current call site of this class sits directly
       on the plain dark canvas (no --light/--green wrapper exists yet),
       so cream-72 is a strict improvement everywhere it's used today;
       pages that intentionally sit inside .aeterna-section--green already
       carry their own inline color:var(--linen) override and are unaffected. */
    color: var(--theme-ink-72);
}

.aeterna-grid {
    display: grid;
    gap: 32px;
    margin-top: 64px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.aeterna-split {
    display: grid;
    gap: 64px;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.aeterna-split__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.aeterna-split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 800px) {
    .aeterna-split { grid-template-columns: 1fr; }
}

/* ── Listings — San Gregorio, all year (S12) ───────────────────
   Editorial 4-card seasonal calendar of local festivities, sits
   between the property grid and the winter/fractional block above.
   LOTE 3 reskin: dark espresso canvas (was white v3 canvas), cards
   match the shared `.card`/`.quotecard` treatment (hairline gold-22
   border, near-transparent cream wash, sharp corners — no more
   16px radius/pure-white/heritage-green, which read as a stray
   light box on the v4 dark body). Markup/i18n keys untouched. */
.sg-year__grid {
    display: grid;
    gap: 24px;
    margin-top: 40px;
    grid-template-columns: repeat(4, 1fr);
}
.sg-year__card {
    background: var(--theme-hair-soft);
    border: 1px solid var(--theme-hair);
    padding: 28px 24px;
    transition: border-color .8s var(--ease);
}
.sg-year__card:hover {
    border-color: var(--gold-40);
}
.sg-year__season {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-weight: 400;
    font-size: 21px;
    letter-spacing: .02em;
    color: var(--theme-ink);
    margin: 0 0 4px;
}
.sg-year__months {
    display: block;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--theme-accent-muted);
    margin-bottom: 18px;
}
.sg-year__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.sg-year__items li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sg-year__item-name {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--theme-ink-72);
}
.sg-year__item-tag {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: var(--theme-ink-45);
}
.sg-year__note {
    margin-top: 40px;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: var(--theme-ink-45);
}
.sg-year__cta {
    color: var(--theme-accent);
    text-decoration: underline;
    text-decoration-color: var(--gold-40);
    text-underline-offset: 3px;
    white-space: nowrap;
}
.sg-year__cta:hover {
    text-decoration-color: var(--gold);
}
@media (max-width: 1099px) and (min-width: 761px) {
    .sg-year__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .sg-year__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* `.aeterna-section__eyebrow` (base rule, elsewhere in this file) is still
   the un-reskinned v3 look — it's live on design/experience/project/
   property/tours today (lotes 4-7, not yet touched). Scoped overrides so
   only the eyebrows inside these two properties.html sections pick up the
   v4 gold-eyebrow metric (REDESIGN_SPEC.md §1: 10.5px/.42em/--gold). */
.sg-year .aeterna-section__eyebrow,
.listings-seasons .aeterna-section__eyebrow {
    color: var(--theme-accent);
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    letter-spacing: .42em;
}

/* ── Listings — winter stays + fractional ownership (S3) ──────
   LOTE 3 reskin: was a --raise (near-white) surface floating on the
   v4 dark canvas — now a proper full-bleed --espresso-2 alternate
   band (same full-bleed technique as `.aeterna-section--green`,
   see `.aeterna-section--alt` below). Two blocks, side-by-side on
   desktop, stacked on mobile — content/i18n keys untouched. */
.listings-seasons {
    border-top: 1px solid var(--theme-hair);
}
.listings-seasons__grid {
    display: grid;
    gap: 48px;
    grid-template-columns: 1fr 1fr;
    max-width: 1280px;
    margin: 32px auto 0;
}
.listings-seasons__block .aeterna-section__title { margin-top: 0; }
.listings-seasons__block .aeterna-section__intro { margin-bottom: 24px; }
@media (max-width: 760px) {
    .listings-seasons__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Design — "Work with us" (briefing vs investment) ──────────
   Sits between the process steps and the portfolio band on
   /design.html. White canvas (default aeterna-section bg), two
   bordered v3 cards (radius 16px, hairline, like .sg-year__card)
   side-by-side on desktop, stacked on mobile — each carrying its
   own CTA (scroll to #briefing, or out to /investment-vision). */
.design-engage__grid {
    display: grid;
    gap: 32px;
    margin-top: 40px;
    grid-template-columns: 1fr 1fr;
}
.design-engage__card {
    display: flex;
    flex-direction: column;
    background: var(--theme-hair-soft);
    border: 1px solid var(--theme-hair);
    border-radius: 0;
    padding: 36px 32px;
}
.design-engage__card-title {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-weight: 400;
    font-size: 21px;
    letter-spacing: .02em;
    color: var(--theme-ink);
    margin: 0 0 12px;
}
.design-engage__card-body {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.8;
    color: var(--theme-ink-72);
    margin: 0 0 24px;
    flex: 1;
    text-transform: none;
}
.design-engage__card .cta {
    align-self: flex-start;
}
@media (max-width: 760px) {
    .design-engage__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Guest reviews — curated Airbnb testimonials (Subsistema A3) ──
   Renders ONLY featured=true reviews (curated in /admin/reviews.html —
   nothing here is automatic). Cards mirror .sg-year__card / .design-
   engage__card (white, 16px radius, hairline, no shadow). Section ships
   `hidden` in markup and stays hidden whenever there are 0 featured
   reviews — see site/js/reviews.js. */
.ae-reviews__grid {
    display: grid;
    gap: 24px;
    margin-top: 40px;
    grid-template-columns: repeat(3, 1fr);
}
.ae-reviews__card {
    display: flex;
    flex-direction: column;
    background: var(--pure-white, #FFFFFF);
    border: 1px solid var(--hairline-v3);
    border-radius: 16px;
    padding: 30px 28px;
}
.ae-reviews__stars {
    color: var(--heritage-green);
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 16px;
}
.ae-reviews__quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 22px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ae-reviews__byline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 16px;
    border-top: 1px solid var(--hairline-v3);
}
.ae-reviews__name {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    color: var(--heritage-green);
}
.ae-reviews__house {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 12px;
    text-transform: none;
    color: var(--stone, #8A8D86);
}
@media (max-width: 1099px) and (min-width: 761px) {
    .ae-reviews__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .ae-reviews__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Welcome page sections (preview Sprint 2) ── */
.welcome-page-section {
    padding: 64px 24px;
    max-width: 720px;
    margin: 0 auto;
    border-bottom: 1px solid var(--linen);
}
.welcome-page-section:last-child {
    border-bottom: 0;
}
.welcome-page-section h2 {
    font-family: 'Canela Thin', 'Cormorant Garamond', serif;
    font-size: clamp(25px, 3.1vw, 34px);
    text-transform: none;
    font-weight: 400;
    margin-bottom: 16px;
}
.welcome-page-section p {
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    text-transform: none;
    font-size: 15px;
    line-height: 1.85;
    /* No `color` here on purpose (2026-08-08 fix) — this rule used to hard-
       code color: var(--ink), a legacy v1.6 literal (#3A3D38) left over
       from its "preview Sprint 2" origin, never updated for the theme-
       reactive system. Its specificity (0,1,1: one class + one element)
       silently beat every intentionally-styled single-class descendant
       inside a .welcome-page-section — .ac-eyebrow, .guide-lead,
       .pre-arrival-card__eyebrow, .guide-season-card__season/__months,
       .welcome-card__desc, any plain <p> in a cloned .card-body — each of
       which already declares its own correct var(--theme-*) color at
       (0,1,0). On the dark canvas that flattened all of them to a near-
       invisible dark-grey-on-near-black (owner device review 2026-08-08,
       /guide dark mode). Leaving color unset here lets those rules win
       as authored, and plain <p>s with no other styling still get a
       theme-reactive color for free via inheritance from
       body.welcome-page { color: var(--theme-ink) }. */
}

/* ── Footer (Aeterna) ───────────────────────── */
.aeterna-footer {
    background: var(--heritage-green);
    color: var(--bone);
    padding: 96px 32px 48px;
}
.aeterna-footer__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}
.aeterna-footer__brand {
    width: 96px;
    opacity: 0.85;
}
/* Typographic wordmark placeholder (rebrand S4) — replaces the SVG
   <img class="aeterna-footer__wordmark"> until the real Wolf Bordin
   logo arrives. */
.aeterna-footer__wordmark-text {
    display: block;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--bone);
    text-align: center;
    margin: 0;
}
.aeterna-footer__address {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--linen);
    text-transform: uppercase;
}
.aeterna-footer__links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.aeterna-footer__links a {
    color: var(--linen);
}
.aeterna-footer__links a:hover {
    color: var(--bone);
}
.aeterna-footer__hairline {
    height: 1px;
    width: 100%;
    background: rgba(250, 248, 244, 0.15);
    margin: 16px 0;
}
.aeterna-footer__copy {
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(250, 248, 244, 0.6);
}

/* ── Footer — Redesign V4 (docs/planning/REDESIGN_SPEC.md §E) ──
   Replaces .aeterna-footer (kept above, now unused/dead but harmless —
   nothing in the DOM references it anymore after this lote's header/
   footer rewrite). 4-column grid: brand tagline · About/Listings/
   Restoration · Experiences/Invest/Learn/Contact · email+Instagram,
   plus a small Privacy/Terms row the mockup's footer didn't carry
   (those legal pages still need to stay reachable) and the base line.
   RTL needs no extra rule: <html dir="rtl"> (set by i18n.js) is
   inherited, and CSS Grid already reverses column order along the
   inline axis under direction:rtl. */
.site-footer {
    background: var(--theme-canvas-deep);
    color: var(--theme-ink);
    padding: clamp(60px, 7vw, 96px) clamp(22px, 6vw, 84px) 38px;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: 44px;
    max-width: 1220px;
    margin: 0 auto;
    padding-bottom: 44px;
}
.site-footer__brand p {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    /* redesign v4 · lote 8 — was cream-45, 3.95:1 on --espresso-3 (footer bg). */
    color: var(--theme-ink-72);
    line-height: 2.1;
    text-transform: uppercase;
    max-width: 26ch;
}
.site-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.site-footer__col a {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    letter-spacing: .26em;
    text-transform: uppercase;
    /* redesign v4 · lote 8 — was cream-45, 3.95:1 on --espresso-3 (footer bg). */
    color: var(--theme-ink-72);
    transition: color .5s var(--ease, ease);
}
.site-footer__col a:hover { color: var(--theme-ink); }
.site-footer__legal {
    max-width: 1220px;
    margin: 0 auto;
    padding-bottom: 26px;
    display: flex;
    justify-content: center;
    gap: 24px;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.site-footer__legal a { color: var(--theme-ink-72); }
.site-footer__legal a:hover { color: var(--gold); }
.site-footer__base {
    max-width: 1220px;
    margin: 0 auto;
    border-top: 1px solid var(--theme-hair);
    padding-top: 26px;
    text-align: center;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 9.5px;
    letter-spacing: .34em;
    text-transform: uppercase;
    /* redesign v4 · lote 8 — was cream-45, 3.95:1 on --espresso-3 (footer bg). */
    color: var(--theme-ink-72);
}
@media (max-width: 960px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 700px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
    .site-footer__legal { flex-direction: column; align-items: center; gap: 10px; }
}

/* ── Newsletter "Discoveries" signup (Sprint 2026-08-10) ──────────
   .newsletter-signup is the reusable form component (footer band on
   26 public pages + the larger standalone block on property-
   assessment.html). Uses the same --theme-* tokens as the rest of the
   footer/site, so it needs no separate dark/light handling — it just
   inherits whichever surface it's dropped into. */
.site-footer__newsletter {
    max-width: 1220px;
    margin: 0 auto;
    padding-bottom: 44px;
    margin-bottom: 44px;
    border-bottom: 1px solid var(--theme-hair);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}
.newsletter-signup__title {
    font-family: 'Bodoni Moda', Georgia, serif;
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 500;
    color: var(--theme-ink);
    margin: 0 0 8px;
}
.newsletter-signup__sub {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--theme-ink-72);
    margin: 0;
    max-width: 46ch;
}
.newsletter-signup__form { width: 100%; }
.newsletter-signup__row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.newsletter-signup__input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 1px solid var(--theme-hair);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: var(--theme-ink);
}
.newsletter-signup__input::placeholder { color: var(--theme-ink-45); }
.newsletter-signup__input:focus { outline: none; border-color: var(--gold); }
.newsletter-signup__submit {
    flex-shrink: 0;
    background: var(--gold);
    color: var(--espresso);
    border: 0;
    border-radius: 8px;
    padding: 12px 22px;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .3s var(--ease, ease);
}
.newsletter-signup__submit:hover { opacity: .85; }
.newsletter-signup__submit:disabled { opacity: .5; cursor: default; }
.newsletter-signup__consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--theme-ink-72);
    cursor: pointer;
}
.newsletter-signup__consent input { margin-top: 2px; accent-color: var(--gold); flex-shrink: 0; }
.newsletter-signup__status {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 11px;
    margin: 10px 0 0;
}
.newsletter-signup__status--success { color: var(--gold); }
.newsletter-signup__status--error { color: var(--terracotta); }

/* Larger standalone block (property-assessment.html) — same component,
   dropped in a bordered card on the page canvas instead of the footer. */
.newsletter-signup--card {
    background: var(--theme-canvas-deep);
    border: 1px solid var(--theme-hair);
    border-radius: 20px;
    padding: clamp(32px, 4vw, 56px);
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.newsletter-signup--card .newsletter-signup__title { font-size: clamp(24px, 3vw, 32px); }
.newsletter-signup--card .newsletter-signup__sub { max-width: 52ch; margin: 0 auto 24px; }
.newsletter-signup--card .newsletter-signup__row { max-width: 480px; margin: 0 auto 10px; }
.newsletter-signup--card .newsletter-signup__consent { max-width: 480px; margin: 0 auto; text-align: left; }

@media (max-width: 700px) {
    .site-footer__newsletter { grid-template-columns: 1fr; gap: 20px; }
    .newsletter-signup__row { flex-direction: column; }
    .newsletter-signup__submit { width: 100%; }
}

/* ── RTL helpers (already present in body.rtl in main rule) ── */
body.rtl .aeterna-footer__links { flex-direction: row-reverse; }

/* ── Language-specific typography ──────────────
   These apply once i18n.js sets <body class="rtl"> or
   adds the corresponding font <link>. Cyrillic falls back to
   Raleway's bundled subset — nothing to load. */
body.rtl {
    font-family: 'Tajawal', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
body.rtl, body.rtl * { text-transform: none !important; }
body.rtl .header__nav,
body.rtl .footer-grid { flex-direction: row-reverse; }
body.rtl .property-card__cta-arrow svg { transform: scaleX(-1); }

html[lang="zh"] body {
    font-family: 'Noto Sans SC', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    text-transform: none !important;
}

/* ══════════════════════════════════════════════════════════════
   LOTE 2 — HOME (docs/planning/REDESIGN_SPEC.md §3.1)
   Hero · Statement · Pillars · Door quote. Replaces the old Properties
   grid / kitchen split / Experiences cards / Design split / Instagram
   grid sections removed from site/index.html (those live on their own
   pages — properties.html, experiences.html, design.html — already).
   Everything below is either a brand-new class (grepped against every
   site/*.html + site/css/*.css first — zero collisions) or a `--home`
   modifier, so property.html / design.html / experiences.html / story.
   html / tours.html / 404.html / contact.html / project.html / terms.
   html — which all still render a plain `.aeterna-hero` — are visually
   untouched by this block. ══════════════════════════════════════ */

/* ── Hero (home only) ──────────────────────────
   Reuses the shared `.aeterna-hero` / `.aeterna-hero__bg` wrapper — this
   is REQUIRED, not cosmetic: server/lib/site-slots.cjs injectSlotVideos()
   pattern-matches `<div class="aeterna-hero__bg">...</div>` verbatim to
   upgrade the photo to the admin-uploaded hero video (confirmed live for
   the home-hero slot per project memory). Renaming that wrapper, or the
   r2_key inside the <img>/<source> (photos-temp/new-hero), would silently
   kill the home hero video. Every visual change here is scoped under the
   `.aeterna-hero--home` modifier or brand-new class names instead. */
.aeterna-hero--home {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.aeterna-hero--home .aeterna-hero__overlay {
    /* Long fade INTO --espresso (the statement section's own background)
       instead of the base rule's heritage-green fade, so the hero blends
       seamlessly into §2 — no hard seam between hero photo and canvas. */
    background: linear-gradient(180deg, rgba(26, 19, 14, .28) 0%, rgba(26, 19, 14, 0) 22%, rgba(26, 19, 14, 0) 55%, var(--espresso) 96%);
}
.aeterna-hero--home .aeterna-hero__copy {
    /* largo o bastante para "WOLF BORDIN" caber em UMA linha no display
       (o 640px herdado do hero antigo, alinhado à esquerda, quebrava o título) */
    max-width: 1100px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
.aeterna-hero--home .aeterna-hero__title {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-weight: 400;
    /* REDESIGN_SPEC.md §1 "Métricas" — hero title, already ×0.75'd
       (mockup: clamp(46px,8.6vw,100px)). */
    font-size: clamp(34px, 6.45vw, 75px);
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
    color: #FDFBF6;
    text-shadow: 0 2px 60px rgba(20, 15, 11, .35);
}
.aeterna-hero__tagline {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    /* In-context layout editor (design.html "hero-sub") — var defaults to
       1 (identity) everywhere else this class is used. */
    font-size: calc(clamp(10px, 1.35vw, 13px) * var(--tune-fs, 1));
    max-width: calc(100% * var(--tune-w, 1));
    text-align: var(--tune-align, inherit);
    margin-inline: auto;
    letter-spacing: .52em;
    text-transform: uppercase;
    color: rgba(253, 251, 246, .92);
    text-shadow: 0 1px 24px rgba(20, 15, 11, .7);
}
.aeterna-hero__vline {
    display: block;
    width: 1px;
    height: 60px;
    margin-top: 6px;
    background: linear-gradient(180deg, rgba(253, 251, 246, .85), transparent);
}
.aeterna-hero__enter {
    display: inline-block;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    letter-spacing: .5em;
    text-transform: uppercase;
    color: #FDFBF6;
    padding: 10px 4px;
    text-shadow: 0 1px 18px rgba(20, 15, 11, .8);
    transition: letter-spacing .8s var(--ease);
}
.aeterna-hero__enter:hover { letter-spacing: .62em; }

/* ── Inner-page hero modifier (lote 3, docs/planning/REDESIGN_SPEC.md
   §3.2) — `.aeterna-hero--home` above is the full-bleed homepage
   treatment; every secondary/"inner" page hero (properties today;
   property/design/experiences/about/learn/invest/contact in lotes 4-7)
   wants this shorter mockup "phero" treatment instead. Reuses
   `.aeterna-hero__tagline`/`.aeterna-hero__vline` verbatim (defined
   just above, already unscoped). Kept here, right next to `--home`,
   rather than down with the rest of the lote 3 block at the end of
   this file: placed at that later position, this exact rule
   (byte-identical, verified) silently failed to register in the
   parsed stylesheet (reproduced in isolation — moving it earlier in
   the cascade was the fix; every other lote 3 rule parses fine at
   the end of the file, only this one standalone selector was
   affected). Filed as a one-off, not chased further. */
.aeterna-hero--inner {
    min-height: 78dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* redesign v4 · lote 8: the mobile video-hero band (max-width:720px,
   see the `:has()` block earlier in this file) is espresso again (not
   the old white/bone band), so __tagline/__enter's own base cream
   color (above) already reads correctly — no override needed. __vline
   keeps its gold accent here (already a v4 token, harmless either way). */
@media (max-width: 720px) {
    .aeterna-hero--home:has(.aeterna-hero__video) .aeterna-hero__vline {
        background: linear-gradient(180deg, var(--gold-70), transparent);
    }
}

/* ── Statement (§2) ─────────────────────────── */
.body-copy {
    color: var(--theme-ink-72);
    max-width: calc(56ch * var(--tune-w, 1));
    /* In-context layout editor — this class has no font-size of its own
       (it just inherits the ambient body font-size), so "1em" is not a
       hardcoded value to keep in sync: it always means "whatever this
       element would already render at", multiplied by the tune factor.
       Inherited from a data-tune ancestor (design.html "transform-body"
       direct tune, or the "method-steps" / "leah-copy" / "assessment-copy"
       groups); defaults to 1 (identity) everywhere else. */
    font-size: calc(1em * var(--tune-fs, 1));
    text-align: var(--tune-align, inherit);
}
.statement {
    background: var(--theme-canvas);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding-top: clamp(70px, 9vw, 120px);
    padding-bottom: clamp(60px, 7vw, 96px);
}
.statement h2 {
    /* Mockup: calc(clamp(30px,4.6vw,54px)*var(--ts,1)) → ×0.75. Bigger
       than the generic "Título de seção" metric (§1) on purpose — this
       is the page's opening statement, not a section label. */
    font-size: clamp(22px, 3.45vw, 40px);
    max-width: 30ch;
    line-height: 1.3;
}
.statement .it {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(20px, 2.4vw, 27px);
    color: var(--theme-ink);
    letter-spacing: .01em;
}
.statement p.body-copy {
    text-align: center;
    margin: 0 auto;
}

/* ── Pillars (§3) ───────────────────────────── */
.pillars {
    background: var(--theme-canvas);
    padding-top: clamp(30px, 4vw, 56px);
    padding-bottom: clamp(70px, 9vw, 120px);
    padding-left: clamp(22px, 6vw, 84px);
    padding-right: clamp(22px, 6vw, 84px);
}
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1220px;
    margin: 0 auto;
}
.pillar {
    padding: 30px clamp(18px, 2.6vw, 42px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    border-left: 1px solid var(--theme-hair);
}
.pillar:first-child { border-left: 0; }
.pillar svg {
    width: 42px;
    height: 42px;
    stroke: var(--theme-accent);
    fill: none;
    stroke-width: .9;
    opacity: .9;
}
.pillar h3 {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--theme-ink);
    line-height: 1.5;
    max-width: 18ch;
}
.pillar p {
    font-size: 16.5px;
    color: var(--theme-ink-45);
    max-width: 24ch;
}
@media (max-width: 960px) {
    .pillars-grid { grid-template-columns: 1fr 1fr; }
    .pillar { border-left: 0; border-top: 1px solid var(--theme-hair); }
    .pillar:nth-child(-n+2) { border-top: 0; }
    .pillar:nth-child(even) { border-left: 1px solid var(--theme-hair); }
}

/* ── Door quote (§4) — transitions pillars → footer ─────────────── */
.doorquote {
    position: relative;
    min-height: clamp(420px, 52vw, 700px);
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 24px;
}
.doorquote-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.doorquote-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
}
.doorquote-fade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--espresso) 0%, rgba(26, 19, 14, .25) 30%, rgba(26, 19, 14, .18) 60%, var(--espresso-3) 100%);
}
.doorquote-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    max-width: 640px;
    text-align: center;
    padding-bottom: clamp(70px, 9vw, 130px);
}
.doorquote blockquote {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 2.5vw, 28px);
    line-height: 1.5;
    color: var(--cream);
    text-shadow: 0 1px 30px rgba(20, 15, 11, .7);
    margin: 0;
}
.doorquote cite {
    font-style: normal;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    letter-spacing: .44em;
    text-transform: uppercase;
    color: var(--cream-72);
}

/* ─── WhatsApp FAB (Sprint 4) ───────────────────────────────────
   Global floating concierge button. Hidden on /welcome (sticky bar),
   on /admin/* (irrelevant), and on print. */
.whatsapp-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #26332A;
    border: 1px solid rgba(201, 164, 106, .22);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    z-index: 100;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-fab:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45), 0 4px 10px rgba(0, 0, 0, 0.15);
}
.whatsapp-fab:focus-visible {
    outline: 2px solid var(--heritage-green);
    outline-offset: 4px;
}
@media (max-width: 720px) {
    .whatsapp-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}
@media print {
    .whatsapp-fab { display: none !important; }
}

/* ─── Toast component (Sprint 5.2) ─────────────────────────────────
   Editorial replacement for window.alert(). Bottom-right, dark slab,
   uppercase Raleway, fades in/out. .ae-toast--error tints terracotta.
*/
.ae-toast {
    position: fixed;
    bottom: 32px;
    right: 32px;
    background: var(--warm-black, #1A1B1A);
    color: var(--bone, #FAF8F4);
    padding: 16px 24px;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.32s ease, transform 0.32s ease;
    z-index: 10000;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    max-width: 420px;
    pointer-events: auto;
    text-decoration: none;
}
.ae-toast.is-visible { opacity: 1; transform: translateY(0); }
.ae-toast--error { background: #8B2E2E; }
@media (max-width: 600px) {
    .ae-toast {
        right: 16px;
        left: 16px;
        bottom: 16px;
        max-width: none;
        text-align: center;
    }
}

/* ─── Sprint Map-privacy — public property page: region-only,
   no coords, no pin. The interactive village map moved to the
   token-gated welcome page (.welcome-map below). */
.property-region {
    max-width: 720px;
    margin: 64px auto;
    padding: 0 24px;
    text-align: center;
}
.property-region h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(29px, 4.2vw, 42px);
    /* redesign v4 · lote 8 — was heritage-green, 1.6:1 on the v4 dark canvas. */
    color: var(--theme-ink);
    margin: 0 0 8px;
    font-weight: 500;
}
.property-region .lead {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 19px;
    /* redesign v4 · lote 8 — was heritage-green, 1.6:1 on the v4 dark canvas. */
    color: var(--theme-ink-72);
    margin: 0 0 12px;
}
.property-region .hint {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 13px;
    /* redesign v4 · lote 8 — was #7A7A7A, 4.28:1 on the v4 dark canvas. */
    color: var(--theme-ink-72);
    margin: 0;
}

/* ─── Sprint Map-privacy — welcome page village map (token-gated).
   Mounts the same SVG as the admin picker; ae-map.js overlays the
   property + POI pins. */
.welcome-map-section {
    max-width: 1280px;
    margin: 3rem auto;
    padding: 0 1.5rem;
}
.welcome-map-section .lead {
    color: #7A7A7A;
    margin: 0 0 1.5rem;
}
#propertyMap.welcome-map,
.welcome-map {
    width: 100%;
    background: var(--bone, #FAF8F4);
    border: 1px solid var(--linen, #E8E5DD);
    border-radius: 4px;
    overflow: hidden;
}
.welcome-map > svg { width: 100%; height: auto; display: block; }
.map-legend {
    display: flex;
    gap: 2rem;
    font-size: 0.875rem;
    color: #7A7A7A;
    margin-top: 1rem;
    align-items: center;
    flex-wrap: wrap;
}
.map-legend > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend-property { color: #2E3D30; font-size: 1.2em; line-height: 1; }
.legend-poi      { color: #B8543E; font-size: 1.2em; line-height: 1; }
@media (max-width: 640px) {
    .map-legend { flex-direction: column; gap: 0.5rem; }
}

/* Sprint POI-final — drop-pin SVG (see /js/ae-pin.js for shape).
   Each pin is <g class="ae-pin ae-pin-{kind}"> with transform=
   "translate(x, y)" — the tip is at SVG local (0, 0), so the
   translate puts the tip pixel-precisely on the coord. Hover scales
   an INNER <g> (.ae-pin__inner) with transform-origin: 0 0 so the
   tip stays anchored on the lat/lng even at 1.2× scale — no
   precision drift. Subtle drop-shadow for legibility over the map. */
.ae-pin__inner {
    transform-origin: 0 0;
    transition: transform 0.18s ease-out;
}
.ae-pin circle,
.ae-pin path {
    /* Bumped from drop-shadow(0 1px 2px rgba(0,0,0,0.22)) — the new
       pin geometry is ~3× larger so the shadow needs more weight to
       stay legible against the illustrated map. */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}
.ae-pin-poi { cursor: pointer; }
.ae-pin-poi:hover .ae-pin__inner,
.ae-pin-poi:focus .ae-pin__inner {
    transform: scale(1.2);
}
.ae-pin-poi:focus { outline: none; }
.ae-pin-poi:focus circle {
    stroke: var(--heritage-green, #2E3D30);
    stroke-width: 3px;
}
.ae-pin-property { pointer-events: none; }

/* Sprint welcome-cross-sell — secondary pins for the OTHER Aeterna
   houses. Cream body + Heritage Green outline, no accent colour, ~60%
   the visual weight of the property pin. Hover scales slightly to
   afford the click; cursor:pointer because it's a real <a>. */
.ae-pin-other-house {
    cursor: pointer;
    text-decoration: none;
}
.ae-pin-other-house:hover .ae-pin__inner,
.ae-pin-other-house:focus .ae-pin__inner {
    transform: scale(1.15);
}
.ae-pin-other-house:focus { outline: none; }
.ae-pin-other-house:focus circle {
    stroke-width: 5px;
}

/* Branded popup — fixed at bottom-center, doesn't depend on Leaflet.
   Compact list rows (~56 px each, NOT giant cards) + hover/tap
   popover. Map shows WHERE; row + popover show WHAT on demand. */

/* Section ──────────────────────────────────────────────────── */
.welcome-village {
    max-width: 1280px;
    margin: 4rem auto;
    padding: 0 1.5rem;
}

/* Legend glyphs — Sprint welcome-cross-sell-hotfix: replaced the
   single-circle .legend-dot with inline mini-SVGs that mirror the
   actual pin geometry (drop tip + disc + house silhouette / accent
   dot). The shape now reads as "the same pin, smaller", instead of a
   colored circle that doesn't match anything on the map. */
.map-legend .legend-icon {
    display: inline-block;
    width: 18px;
    height: 30px;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}
/* Legacy .legend-dot styles kept for any other surface that might
   still use them; map-legend now uses .legend-icon instead. */
.map-legend .legend-dot {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: -2px;
}
.map-legend .legend-property {
    background: #2E3D30;
    border: 2px solid #FAF8F4;
}
.map-legend .legend-other-house {
    background: #FAF8F4;
    border: 2px solid #2E3D30;
    position: relative;
}
.map-legend .legend-other-house::after {
    content: '';
    position: absolute; inset: 3px;
    border-radius: 50%;
    background: #2E3D30;
}
.map-legend .legend-poi {
    background: #FAF8F4;
    border: 2px solid #2E3D30;
    position: relative;
}
.map-legend .legend-poi::after {
    content: '';
    position: absolute; inset: 3px;
    border-radius: 50%;
    background: #B8543E;
}

/* Compact list ─────────────────────────────────────────────── */
.poi-compact-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    border-top: 1px solid var(--linen, #E8E5DD);
    background: transparent;
}
.poi-list-empty {
    text-align: center;
    color: #7A7A7A;
    font-style: italic;
    padding: 24px 0;
    margin: 0;
    list-style: none;
}
.poi-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--linen, #E8E5DD);
    cursor: pointer;
    transition: background 0.15s ease-out;
    min-height: 56px;
}
.poi-row:hover,
.poi-row:focus,
.poi-row--highlighted {
    background: var(--bone, #FAF8F4);
    outline: none;
}
.poi-row__thumb {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    overflow: hidden;
    background: linear-gradient(135deg, #C9B89A, #8B6F47);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.poi-row__thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.poi-row__initial {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: var(--bone, #FAF8F4);
    font-weight: 500;
}
.poi-row__info { flex: 1; min-width: 0; }
.poi-row__name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    color: var(--heritage-green, #2E3D30);
    margin: 0;
    font-weight: 500;
    line-height: 1.2;
}
.poi-row__meta {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #7A7A7A;
    margin: 3px 0 0;
}
.poi-row__arrow {
    color: #7A7A7A;
    font-size: 16px;
    transition: transform 0.15s ease-out;
}
.poi-row:hover .poi-row__arrow { transform: translateX(2px); }

/* Popover (hover desktop / bottom-sheet mobile) ──────────── */
.ae-popover {
    position: absolute;
    width: 280px;
    /* Cap the height so a long POI description never lets the card grow
       tall enough to cover the whole map; the body scrolls instead. */
    max-height: min(72vh, 440px);
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--heritage-green, #2E3D30);
    box-shadow: 0 8px 28px rgba(31, 42, 32, 0.20);
    border-radius: 4px;
    overflow: hidden;
    z-index: 1000;
    font-family: 'Raleway', sans-serif;
}
.ae-popover--anchored { /* JS sets left/top — card sits BESIDE the pin */ }
.ae-popover--bottom-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: 82vh;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 28px rgba(31, 42, 32, 0.22);
}
.popover-close {
    position: absolute;
    top: 8px; right: 8px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(250, 248, 244, 0.94);
    border: 0;
    font-size: 20px;
    color: var(--heritage-green, #2E3D30);
    cursor: pointer;
    z-index: 2;
    line-height: 1;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.popover-photo {
    position: relative;
    width: 100%;
    height: 170px;
    flex: 0 0 auto;
    background: var(--linen, #E8E5DD);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
/* The whole photo sits un-cropped on top (object-fit: contain). To avoid
   flat letterbox bars, a blurred copy of the same image fills the band
   behind it. */
.popover-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(16px) brightness(0.92);
    transform: scale(1.2);
}
.popover-photo--empty::before { display: none; }
.popover-photo__img {
    position: relative;
    z-index: 1;
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.popover-photo--empty {
    background: linear-gradient(135deg, #C9B89A, #8B6F47);
}
/* Sprint POI-photo-diag — collapse the giant empty photo block on
   mobile bottom-sheet when no photo. (Desktop popover doesn't have
   this problem because the card is small enough that an empty 4:3
   gradient still reads as a placeholder.) */
@media (max-width: 720px) {
    .ae-popover--bottom-sheet .popover-photo--empty { display: none; }
}

/* Sprint POI-photo-diag — village map wrapper + zoom controls. */
.village-map-wrap {
    position: relative;
    /* touch-action lets the user pinch-zoom the map without losing
       vertical page scroll. The Panzoom lib handles the pinch
       internally. */
    touch-action: pan-y pinch-zoom;
}
.map-zoom-controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(250, 248, 244, 0.94);
    border: 1px solid var(--heritage-green, #2E3D30);
    border-radius: 4px;
    padding: 4px;
    backdrop-filter: blur(4px);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.map-zoom-controls button {
    width: 36px; height: 36px;
    border: 0;
    background: transparent;
    color: var(--heritage-green, #2E3D30);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 2px;
    line-height: 1;
    padding: 0;
    transition: background 0.12s;
}
.map-zoom-controls button:hover { background: rgba(46, 61, 48, 0.10); }
.map-zoom-controls button:active { background: rgba(46, 61, 48, 0.18); }
@media (max-width: 720px) {
    /* Hide buttons on mobile — native pinch is the right affordance. */
    .map-zoom-controls { display: none; }
}
.popover-body { padding: 14px 18px 18px; overflow-y: auto; flex: 1 1 auto; }
.popover-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    color: var(--heritage-green, #2E3D30);
    margin: 0 0 4px;
    font-weight: 500;
    line-height: 1.15;
    padding-right: 28px;
}
.popover-meta {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #7A7A7A;
    margin: 0 0 10px;
}
.popover-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--warm-black, #1A1B1A);
    margin: 0;
    /* Sprint POI-linebreaks — ae-map.js escapes the description with
       escHtml() but never converts "\n" to <br>, so paragraph breaks
       typed in the admin textarea were rendering run-together. The
       text is plain (escaped), not HTML, so pre-line is safe: it only
       turns existing newlines/spaces into visual breaks/collapsed
       spaces, it doesn't interpret markup. */
    white-space: pre-line;
}
.popover-foot {
    flex: 0 0 auto;
    padding: 12px 18px;
    border-top: 1px solid rgba(46, 61, 48, 0.12);
    background: #FFFFFF;
}
.popover-cta {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--heritage-green, #2E3D30);
    text-decoration: none;
    border-bottom: 1px solid var(--heritage-green, #2E3D30);
    padding-bottom: 3px;
}

/* Pin pulse when its row is hovered (or vice versa). Tip
   anchored at (0,0) → growth happens up/out, no precision drift. */
.ae-pin.is-highlighted .ae-pin__inner {
    animation: ae-pin-pulse 1.2s ease-in-out 2;
}
@keyframes ae-pin-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.35); }
}

/* ─── Variants (experience page cards) ──────────────────────────── */
.variants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.variant-card {
    appearance: none;
    background: var(--pure-white);
    border: 3px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    text-align: left;
    transition: border-color 200ms, transform 200ms;
}
.variant-card:hover {
    transform: translateY(-2px);
}
.variant-card.is-selected {
    border-color: var(--heritage-green);
}
.variant-card__media {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--hairline-v3);
    overflow: hidden;
}
.variant-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.variant-card__label {
    padding: 0.75rem 0.75rem 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    font-weight: 600;
    color: var(--heritage-green);
}
.variant-card__price {
    padding: 0 0.75rem 0.75rem;
    font-size: 14px;
    color: var(--ink);
}
@media (max-width: 640px) {
    .variants-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Broken-image guard (F1 sprint) — hide the broken glyph, show a calm
   bone gradient instead of a void. Applied by main.js on img error. ─── */
img.img-broken { visibility: hidden; }
.media-fallback { background: linear-gradient(160deg, var(--ivory-mute) 0%, var(--linen) 100%); }

/* endereço no rodapé — mesma família dos links, sem o hover de link */
.site-footer__address {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    /* redesign v4 · lote 8 — was cream-45, 3.95:1 on --espresso-3 (footer bg). */
    color: var(--theme-ink-72);
}

/* ══════════════════════════════════════════════════════════════
   LOTE 3 — PROPERTIES / HOSPITALITY (docs/planning/REDESIGN_SPEC.md §3.2)
   Ref.: redesign/mockups/src/page-hospitality.html. Everything below is
   either a brand-new, non-colliding class (grepped against every
   site/*.html + site/css/*.css first) or an `--inner`/`--alt` modifier,
   deliberately written GENERIC (not scoped to properties.html) so lotes
   4-7 can reuse the same "inner page" hero/section-header/proof-quote
   primitives instead of re-inventing them — mirrors how lote 1 shipped
   .cta/.tlink/.card/.rv as shared v4 primitives. Nothing here is wired
   into any other page today. The sg-year__*/listings-seasons reskin
   (existing S12/S3 content, CSS-only) lives inline above, next to the
   rules it edits. ══════════════════════════════════════════════════ */

/* ── Inner-page hero modifier — box/title overrides only ────────
   `.aeterna-hero--inner`'s own min-height/display/align/justify/
   text-align declarations live up near `.aeterna-hero--home` (LOTE 2
   block, same file, earlier) — NOT here; see the comment there for
   why. These descendant-selector overrides (overlay/copy/title/
   tagline) parse fine at this position and stay here, next to the
   rest of lote 3's new content. */
.aeterna-hero--inner .aeterna-hero__overlay {
    background: linear-gradient(180deg, rgba(26, 19, 14, .62) 0%, rgba(26, 19, 14, .34) 45%, rgba(26, 19, 14, .96) 96%, var(--espresso) 100%);
}
.aeterna-hero--inner .aeterna-hero__copy {
    max-width: 720px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.aeterna-hero--inner .aeterna-hero__title {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-weight: 400;
    /* REDESIGN_SPEC.md §1 "Métricas" — hero interno, already ×0.75'd
       (mockup: clamp(38px,6.4vw,72px)).
       In-context layout editor (design.html "hero-title") — var defaults
       to 1 (identity) so every OTHER --inner hero (properties/experiences/
       about/…) renders unchanged; only design.html can set --tune-fs. */
    font-size: calc(clamp(28px, 4.8vw, 54px) * var(--tune-fs, 1));
    max-width: calc(100% * var(--tune-w, 1));
    text-align: var(--tune-align, inherit);
    margin-inline: auto;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.18;
    color: #FDFBF6;
    text-shadow: 0 2px 50px rgba(20, 15, 11, .5);
}
.aeterna-hero--inner .aeterna-hero__tagline {
    text-shadow: 0 1px 20px rgba(20, 15, 11, .8);
}

/* ── Alternate-background full-bleed section modifier ───────────
   Same full-bleed technique `.aeterna-section--green` already uses
   (max-width:none/width:100%/margin:0 so the background spans edge to
   edge), new v4 --espresso-2 surface instead of heritage-green. Content
   inside still needs its own max-width wrapper if it needs one —
   `.quotecards`/`.proof-head` self-center; `.listings-seasons__grid`
   got its own max-width alongside this in the reskin above. */
.aeterna-section--alt {
    background: var(--theme-canvas-alt);
    max-width: none;
    width: 100%;
    margin: 0;
}

/* ── Section header: caps-display title + gold diamond + optional
   centered intro line underneath. Reusable wherever an "inner" page
   needs a centered, eyebrow-less section header (mockup calls this
   `.sec-head`). `.diamond` also composes standalone. */
.sec-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-bottom: clamp(46px, 6vw, 80px);
}
.diamond {
    color: var(--theme-accent);
    font-size: 13px;
    letter-spacing: 0;
}

/* ── Intro band — centered lead paragraph + an all-caps closing line,
   sitting directly under an `--inner` hero. */
.intro-band {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}
.intro-band .lead {
    font-size: 21px; /* body 18px + the mockup's own "+3px" bump for the lead paragraph */
    line-height: 1.9;
    color: var(--theme-ink-72);
    max-width: 52ch;
    text-align: center;
}
.intro-band .capsline {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10px;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--theme-ink-45);
    line-height: 2.4;
    max-width: 60ch;
}

/* ── Good to know — 4-column FAQ-style answers, border-divided. ── */
.gtk-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1220px;
    margin: 0 auto;
}
.gtk {
    padding: 30px clamp(18px, 2.4vw, 40px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    border-left: 1px solid var(--theme-hair);
}
.gtk:first-child { border-left: 0; }
.gtk h3 {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 10.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--theme-accent);
}
.gtk p {
    font-size: 16.5px;
    color: var(--theme-ink-72);
    max-width: 26ch;
}
@media (max-width: 960px) {
    .gtk-grid { grid-template-columns: 1fr 1fr; }
    .gtk { border-left: 0; border-top: 1px solid var(--theme-hair); }
    .gtk:nth-child(-n+2) { border-top: 0; }
    .gtk:nth-child(even) { border-left: 1px solid var(--theme-hair); }
}
/* RTL — mirror the divider to the side prose actually reads from. */
body.rtl .gtk { border-left: 0; border-right: 1px solid var(--theme-hair); }
body.rtl .gtk:first-child { border-right: 0; }
body.rtl .gtk:nth-child(even) { border-left: 0; }
@media (max-width: 960px) {
    body.rtl .gtk { border-right: 1px solid var(--theme-hair); border-top: 1px solid var(--theme-hair); }
    body.rtl .gtk:nth-child(-n+2) { border-top: 0; }
}

/* ── Guest-review proof — big star average + 3 real testimonials. ── */
.proof-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 64px);
}
.proof-star {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-weight: 400;
    /* REDESIGN_SPEC.md §1 — already ×0.75'd (mockup: clamp(44px,6vw,68px)). */
    font-size: clamp(33px, 4.5vw, 51px);
    color: var(--theme-ink);
    letter-spacing: .04em;
}
.proof-star .st {
    color: var(--theme-accent);
    font-size: .55em;
    vertical-align: .28em;
    letter-spacing: 0;
}
.proof-sub {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10px;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--theme-ink-45);
}
.quotecards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2.6vw, 36px);
    max-width: 1220px;
    margin: 0 auto;
}
.quotecard {
    border: 1px solid var(--theme-hair);
    padding: clamp(26px, 2.6vw, 38px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--theme-hair-soft);
}
.quotecard blockquote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1.75;
    color: var(--theme-ink-72);
}
.quotecard cite {
    font-style: normal;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 9.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--theme-accent-muted);
}
@media (max-width: 960px) {
    .quotecards { grid-template-columns: 1fr; max-width: 520px; }
}

/* ── Collection cards — location + facts lines layered onto the shared
   `.card`/`.card-media`/`.card-body` (lote 1). `a.card` needs its own
   text-decoration/color reset since lote 1's `.card` was written for a
   plain `<article>`, not an anchor (site/js/properties.js renders `<a
   class="card">`). `.card-body .card-loc`/`.card-body .card-meta` are
   scoped two-deep on purpose: a bare `.card-loc` would lose to the
   existing `.card-body p` rule on specificity (0,1,0 vs 0,1,1) — the
   mockup's own bare `.card-loc` has this same latent bug; scoping here
   avoids inheriting it. */
a.card {
    text-decoration: none;
    color: inherit;
}
.card-body .card-loc {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 9.5px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--theme-accent-muted);
    max-width: none;
}
.card-body .card-meta {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--theme-ink-45);
    max-width: none;
}

/* ── Empty/loading state for the collection grid (was unstyled — relied
   on inherited body color, legible but uncentered/unweighted). ── */
.properties-empty {
    text-align: center;
    color: var(--theme-ink-45);
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: .08em;
    padding: 32px 0;
}

/* ══════════════════════════════════════════════════════════════
   LOTE 5 — RESTORATION / EXPERIENCES (docs/planning/REDESIGN_SPEC.md)
   New, non-colliding classes (grepped against every site/*.html +
   site/css/*.css first — zero existing usage before this lote).
   `.rule` is a thin gold hairline divider; `.quoteband`/`.noteband`
   are centered proof/note bands reused by design.html + experiences.html
   today, and available to About/Learn/Invest in lotes 6–7.
   ══════════════════════════════════════════════════════════════ */
.rule { width: 52px; height: 1px; background: var(--theme-rule); border: 0; }

.quoteband { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.quoteband blockquote {
    font-family: 'Bodoni Moda', 'Times New Roman', serif; /* html[data-df=bodoni] usa Bodoni itálico no quoteband */
    font-style: italic; font-weight: 400;
    font-size: clamp(16.5px, 2.25vw, 24px); /* mockup clamp(22px,3vw,32px) ×0.75 */
    line-height: 1.55; color: var(--theme-ink); max-width: 26ch;
}
.quoteband cite {
    font-style: normal;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: var(--theme-accent);
}

.noteband { text-align: center; }
.noteband p {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10px; letter-spacing: .38em; text-transform: uppercase;
    color: var(--theme-ink-45); line-height: 2.5; max-width: 64ch; margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   LOTE 6 — ABOUT (story.html) / LEARN (learn.html)
   Ref.: redesign/mockups/src/page-about.html + page-learn.html.
   ══════════════════════════════════════════════════════════════ */

/* ── About §1 — hero split. Fusão APENAS lateral da foto.
   DECISÃO TRAVADA: corte limpo hero→seção clara, nenhum degradê vertical. */
.ahero {
    position: relative;
    min-height: 92dvh;
    isolation: isolate;
    overflow: hidden;
    background: var(--theme-canvas-alt);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
}
.ahero-copy {
    padding: clamp(120px, 14vh, 170px) clamp(28px, 5vw, 72px) clamp(60px, 8vh, 100px);
    display: flex;
    flex-direction: column;
    gap: 26px;
    align-items: flex-start;
}
.ahero-copy h1 {
    font-size: clamp(25.5px, 3.6vw, 45px);
    line-height: 1.22;
    color: var(--theme-ink);
    max-width: 14ch;
}
.ahero-sub {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: clamp(10px, 1.1vw, 12px);
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--theme-ink-72);
    line-height: 2.2;
}
.ahero-media { position: relative; height: 100%; min-height: 60dvh; }
.ahero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ahero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Fades the photo into .ahero's OWN background (not a fixed dark
       vignette like the hero/doorquote overlays) — must track
       --theme-canvas-alt or a hard seam appears at the image/copy
       boundary when the theme flips. */
    background: linear-gradient(90deg, var(--theme-canvas-alt) 0%, rgba(33, 25, 19, 0) 26%);
}
body.rtl .ahero-media::after {
    background: linear-gradient(270deg, var(--theme-canvas-alt) 0%, rgba(33, 25, 19, 0) 26%);
}

/* ── About §2 — primeira seção CLARA do redesign. */
.aeterna-section--light {
    background: var(--light);
    color: var(--ink-v4);
    max-width: none;
    width: 100%;
    margin: 0;
}
.about-story {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}
.about-story__media {
    padding: 10px;
    border: 1px solid rgba(44, 33, 24, .18);
    background: rgba(44, 33, 24, .03);
}
.about-story__media img { width: 100%; height: auto; }
.about-story__copy {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
}
.about-story__copy h2 {
    font-size: clamp(21px, 3vw, 34.5px);
    color: var(--ink-v4);
    max-width: 16ch;
}
.about-story__copy p { color: var(--ink-v4-64); max-width: 56ch; }
.about-story__copy .eyebrow { color: #A07E48; }
.about-story__copy .rule { background: rgba(44, 33, 24, .25); }
.about-story__sign {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 28px;
    color: var(--ink-v4);
    margin-top: 4px;
}
.about-story__copy p.about-story__sign { color: var(--ink-v4); }

/* ── About §3 — values (reutilizável; Invest lote 7 usa igual). */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 48px);
    max-width: 1120px;
    margin: 0 auto;
}
.steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 0 10px;
}
.steps .step h3 {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--theme-ink);
    line-height: 2;
}
.steps .step p { font-size: 17px; color: var(--theme-ink-45); max-width: 28ch; }
.about-values .sec-head h2 { font-size: clamp(21px, 3vw, 34px); }

/* ── About §4 — CTA trio. */
.about-begin {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}
.about-begin h2 {
    font-size: clamp(19.5px, 2.7vw, 31.5px);
    max-width: 20ch;
}
.about-begin__row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Learn §3 — ofertas alternadas. */
.learn-offers .sec-head h2 { font-size: clamp(21px, 3vw, 34px); }
.offer-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 4vw, 64px);
    max-width: 1180px;
    margin: 0 auto;
    align-items: center;
}
.offer-row + .offer-row { margin-top: clamp(56px, 7vw, 104px); }
.offer-row--flip .offer-media { order: 2; }
.offer-media {
    overflow: hidden;
    border: 1px solid var(--theme-hair);
    aspect-ratio: 4 / 3;
}
.offer-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 2s var(--ease-soft);
}
.offer-media:hover img { transform: scale(1.05); }
.offer-copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}
.offer-copy h3 {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(18px, 2.4vw, 28.5px);
    color: var(--theme-ink);
    letter-spacing: .02em;
    line-height: 1.2;
}
.offer-meta {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 9.5px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--theme-accent-muted);
}
.offer-copy p { color: var(--theme-ink-72); max-width: 46ch; }
.offer-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 2px;
    padding: 0;
}
.offer-list li {
    color: var(--theme-ink-45);
    font-size: 17px;
    padding-left: 20px;
    position: relative;
}
.offer-list li::before {
    content: '✦';
    position: absolute;
    left: 0;
    top: .35em;
    color: var(--theme-accent);
    font-size: 10px;
}
body.rtl .offer-list li { padding-left: 0; padding-right: 20px; }
body.rtl .offer-list li::before { left: auto; right: 0; }

/* ── Learn §5 — CTA + form. */
.learn-enquiry {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}
.learn-enquiry h2 {
    font-size: clamp(21px, 3vw, 34.5px);
    max-width: 20ch;
}
.learn-enquiry .body-copy { text-align: center; margin: 0 auto; }
.learn-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 8px;
    width: 100%;
    max-width: 560px;
    text-align: left;
}
body.rtl .learn-form { text-align: right; }
.learn-form label { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.learn-form span {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 9px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--theme-accent);
}
.learn-form input,
.learn-form select,
.learn-form textarea {
    width: 100%;
    background: var(--theme-field-bg);
    border: 1px solid var(--theme-field-border);
    border-radius: 0;
    padding: 14px 16px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    color: var(--theme-ink);
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
html[data-theme="light"] .learn-form input,
html[data-theme="light"] .learn-form select,
html[data-theme="light"] .learn-form textarea { color-scheme: light; }
.learn-form select option { background: var(--theme-canvas-alt); color: var(--theme-ink); }
.learn-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23F1E9D8' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px 6px !important;
    padding-right: 34px;
}
/* Light mode — the select arrow is an inline SVG with a hardcoded cream
   (#F1E9D8) stroke; on the marfim field background it's nearly invisible,
   so light mode swaps in an ink-coloured (#241B12) copy of the same glyph. */
html[data-theme="light"] .learn-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23241B12' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
}
.learn-form input:focus,
.learn-form select:focus,
.learn-form textarea:focus { outline: 0; border-color: var(--gold-70); }
.learn-form textarea {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    text-transform: none;
    font-size: 14px;
    line-height: 1.7;
    min-height: 140px;
    resize: vertical;
}
.learn-form button {
    justify-self: center;
    margin-top: 8px;
    background: var(--gold);
    color: var(--espresso);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 14px 34px;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.learn-form button:hover { background: var(--gold-70); border-color: var(--gold-70); opacity: 1; }
.learn-form__feedback {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    color: var(--theme-ink-72);
    background: rgba(201, 164, 106, .08);
    padding: 12px 16px;
    border-left: 2px solid var(--gold);
    text-align: left;
}

/* ── Responsivo (breakpoint 960px, como o mockup) ── */
@media (max-width: 960px) {
    .ahero { grid-template-columns: 1fr; min-height: 0; }
    .ahero-media { min-height: 52dvh; order: -1; }
    .ahero-media::after,
    body.rtl .ahero-media::after {
        background: linear-gradient(0deg, var(--theme-canvas-alt) 0%, rgba(33, 25, 19, 0) 30%);
    }
    .ahero-copy { padding-top: 34px; }
    .about-story { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .offer-row, .offer-row--flip { grid-template-columns: 1fr; }
    .offer-row--flip .offer-media { order: 0; }
}

/* ══════════════════════════════════════════════════════════════
   LOTE 7 — INVEST (landing) / CONTACT
   Ref.: redesign/mockups/src/page-invest.html + page-contact.html
   + shared.css (×0.75 onde havia var(--ts)).
   ══════════════════════════════════════════════════════════════ */

/* ── Invest §3 — numeral dos steps ── */
.steps .step .num {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-weight: 400;
    font-size: 30px;
    color: var(--theme-accent);
    letter-spacing: .08em;
}
.invest-how .sec-head h2 { font-size: clamp(21px, 3vw, 34px); }

/* ── Invest §4 — big facts ── */
.bigfacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1120px;
    margin: 0 auto;
}
.bigfact {
    padding: 26px clamp(16px, 2.4vw, 40px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-left: 1px solid var(--theme-hair);
}
.bigfact:first-child { border-left: 0; }
body.rtl .bigfact { border-left: 0; border-right: 1px solid var(--theme-hair); }
body.rtl .bigfact:first-child { border-right: 0; }
.bigfact .v {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(25.5px, 3.45vw, 39px);
    color: var(--theme-ink);
}
.bigfact .k {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 9.5px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--theme-ink-45);
    line-height: 2.2;
}

/* ── Invest §6 — CTA ── */
.invest-cta {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}
.invest-cta h2 { font-size: clamp(21px, 3vw, 34.5px); max-width: 18ch; }
.invest-cta .body-copy { text-align: center; margin: 0 auto; }
.invest-cta__note {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--theme-ink-45);
}

/* ── Contact §1 — hero com degradê LONGO (aprovado; ≠ About corte limpo) ── */
.chero {
    text-align: center;
    padding: clamp(150px, 20vh, 210px) 24px clamp(60px, 8vw, 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.chero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center 40%;
    opacity: .5;
}
.chero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(26, 19, 14, .88) 0%,
        rgba(26, 19, 14, .74) 26%,
        rgba(26, 19, 14, .78) 44%,
        rgba(26, 19, 14, .84) 58%,
        rgba(26, 19, 14, .9) 70%,
        rgba(26, 19, 14, .945) 80%,
        rgba(26, 19, 14, .975) 88%,
        rgba(26, 19, 14, .993) 95%,
        var(--espresso) 100%);
}
.chero h1 { font-size: clamp(28.5px, 4.5vw, 51px); color: var(--cream); }
.chero-sub {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-style: italic;
    font-size: clamp(19px, 2.2vw, 25px);
    color: var(--cream-72);
}

/* ── Contact §2 — form + direto ── */
.formwrap {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: clamp(40px, 6vw, 90px);
    max-width: 1120px;
    margin: 0 auto;
    align-items: start;
}
.contact-form { max-width: none; width: 100%; margin-top: 0; }
.contact-form button { justify-self: start; }
.contact-direct { display: flex; flex-direction: column; gap: 22px; }
.contact-direct h3 {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 10.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--theme-accent);
    margin-bottom: 10px;
}
.contact-direct a, .contact-direct p { color: var(--theme-ink-72); font-size: 19px; }
.contact-direct a:hover { color: var(--theme-ink); }
.contact-direct .ph {
    overflow: hidden;
    border: 1px solid var(--theme-hair);
    aspect-ratio: 4 / 3;
    margin-top: 6px;
}
.contact-direct .ph img { width: 100%; height: 100%; object-fit: cover; }

/* ── Responsivo ── */
@media (max-width: 960px) {
    .bigfacts { grid-template-columns: 1fr; }
    .bigfact, body.rtl .bigfact { border-left: 0; border-right: 0; border-top: 1px solid var(--theme-hair); }
    .bigfact:first-child, body.rtl .bigfact:first-child { border-top: 0; }
    .formwrap { grid-template-columns: 1fr; }
}

/* ══ LOTE 12 ══════════════════════════════════════════════════════
   FAB do WhatsApp retirado do site público (decisão do Diogo — "parece
   site barato"). O elemento ainda é injetado por js/main.js; esconder
   por CSS é zero-risco/reversível. Welcome NÃO carrega main.js e usa
   .ac-wa/#sbWhatsapp próprios — ilesa. Pendência: remover a injeção
   do main.js num passe futuro (REDESIGN_SPEC.md §9). */
.whatsapp-fab { display: none !important; }

/* Etiqueta "Coming soon" das ofertas Retreats/Courses da Learn */
.offer-soon {
    display: inline-block;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 9.5px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--theme-accent-muted);
    border: 1px solid var(--theme-hair);
    padding: 10px 12px 10px 16px;
}

/* ══ OUR ROLES — homepage (roles brief 2026-08-06, estágio 2) ═══════
   Seção #our-roles entre Pillars e Doorquote: 2 colunas Leah/Diogo,
   1 retrato + micro-label + parágrafos + .cta cada. Retratos por slot
   (Leah reusa `design-leah`, Diogo usa `portrait-diogo`) com o MESMO
   empty-guard do design.css (.d-leah--has-photo): a moldura do retrato
   NÃO existe por default — o JS no fim da index só a adiciona quando a
   foto do slot realmente decodificou. Hoje nenhum dos dois slots tem
   imagem publicada, então o default (sem foto, sem buraco) é o estado
   real. Só tokens --theme-* → os 2 temas funcionam sem regra extra. */
.roles {
    padding-top: clamp(64px, 8vw, 110px);
    padding-bottom: clamp(72px, 9vw, 124px);
    /* Header fixo — /#our-roles precisa ancorar com o título visível. */
    scroll-margin-top: 84px;
}
.roles__eyebrow { text-align: center; }
.roles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
    margin-top: clamp(36px, 5vw, 60px);
}
.role {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.role__portrait {
    /* Empty-guard: sem foto publicada → a moldura toda some. */
    display: none;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--theme-hair);
    background: var(--theme-hair-soft);
    margin-bottom: 28px;
}
.role--has-photo .role__portrait { display: block; }
.role__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s var(--ease);
}
.role__portrait img.is-loaded { opacity: 1; }
.role__label {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--theme-accent-muted);
}
.role__name {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 32px);
    letter-spacing: .02em;
    line-height: 1.16;
    color: var(--theme-ink);
    margin: 14px 0 18px;
}
.role p.body-copy { max-width: 52ch; }
.role p.body-copy + p.body-copy { margin-top: 14px; }
.role__cta { margin-top: 28px; }
@media (max-width: 820px) {
    .roles-grid { grid-template-columns: 1fr; gap: 64px; }
}

/* ══ PERFIS — /leah-wolf.html + /diogo-bordin.html (mesmo brief) ════
   Página editorial V4: hero contido só de texto (nenhum slot de hero
   próprio — o retrato vive na bio), bio em split retrato+copy com o
   mesmo empty-guard acima, áreas como lista editorial de micro-labels
   com hairlines, fechamento com prova/CTA. Sem foto (estado atual dos
   dois slots) tudo colapsa para uma coluna central de leitura. */
.p-hero {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: clamp(150px, 20vh, 210px);
    padding-bottom: clamp(28px, 4vw, 52px);
}
.p-hero__name {
    font-size: clamp(30px, 5vw, 58px);
    color: var(--theme-ink);
    line-height: 1.1;
}
.p-hero__subline {
    font-family: 'Bodoni Moda', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(19px, 2.3vw, 26px);
    letter-spacing: .01em;
    color: var(--theme-ink-72);
    max-width: 34ch;
}
/* /property-assessment.html (estágio 3) — o H1 do serviço é uma frase
   longa ("Property Assessment & Transformation Strategy"): cap de
   largura para quebrar em ~2 linhas equilibradas em vez de varar a
   faixa inteira. Título um degrau abaixo do nome próprio dos perfis. */
.p-hero--assess .p-hero__name {
    max-width: 22ch;
    font-size: clamp(26px, 4.2vw, 48px);
}
.profile-bio {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
    max-width: 720px;
    margin: 0 auto;
    padding-top: clamp(28px, 4vw, 48px);
    padding-bottom: clamp(36px, 5vw, 64px);
}
.profile-bio__portrait {
    /* Empty-guard — idêntico ao .role__portrait acima. */
    display: none;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--theme-hair);
    background: var(--theme-hair-soft);
}
.profile-bio--has-photo { grid-template-columns: .82fr 1fr; max-width: 1160px; }
.profile-bio--has-photo .profile-bio__portrait { display: block; }
.profile-bio__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s var(--ease);
}
.profile-bio__portrait img.is-loaded { opacity: 1; }
.profile-bio__copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    text-align: center;
}
.profile-bio--has-photo .profile-bio__copy { align-items: flex-start; text-align: start; }
.profile-bio__copy .body-copy { font-size: 17px; line-height: 1.75; }
.profile-areas {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    padding-top: clamp(24px, 3vw, 40px);
    padding-bottom: clamp(36px, 5vw, 64px);
}
.profile-areas__list {
    list-style: none;
    margin: clamp(22px, 3vw, 34px) 0 0;
    padding: 0;
    border-top: 1px solid var(--theme-hair);
}
.profile-areas__list li {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--theme-ink-72);
    padding: 18px 8px;
    border-bottom: 1px solid var(--theme-hair);
}
.profile-close {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-top: clamp(24px, 3vw, 40px);
    padding-bottom: clamp(88px, 11vw, 150px);
}
.profile-close__proof {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--theme-accent-muted);
    max-width: 46ch;
    line-height: 2;
}
@media (max-width: 820px) {
    .profile-bio--has-photo { grid-template-columns: 1fr; }
    .profile-bio__portrait { width: 100%; max-width: 420px; margin: 0 auto; }
}