/* ============================================================================
   film-page.css — shared stylesheet for Signature Property film pages.
   Product grammar only (SIGNATURE-PROPERTY-CANON §2): ground sheet, gallery,
   staff menus, guest book, booking card, footer, engine chrome restyle, and
   the film readiness veil. The ONLY per-page CSS is the token block that
   stays in each page's own <style> (derived from that property's photos).
   ========================================================================== */
    /* Self-hosted variable faces (Fontshare zips, licenses alongside the files).
       The api.fontshare.com CSS endpoint went down 2026-07-30 and took the live
       type system with it — identity never rides a third-party CDN again. */
    @font-face { font-family: 'Zodiak'; src: url('/assets/fonts/Zodiak-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
    @font-face { font-family: 'Zodiak'; src: url('/assets/fonts/Zodiak-VariableItalic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
    @font-face { font-family: 'General Sans'; src: url('/assets/fonts/GeneralSans-Variable.woff2') format('woff2'); font-weight: 200 700; font-style: normal; font-display: swap; }
    * { box-sizing: border-box; margin: 0; }
    html { scroll-behavior: smooth; }
    body { background: var(--sand); color: var(--ink); font-family: 'General Sans', sans-serif; font-weight: 300; }
    /* ---------- ground page (below the film) ---------- */
    .g-section { max-width: 1120px; margin: 0 auto; padding: 130px 24px; }
    .g-eyebrow { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--teak); font-weight: 500; margin-bottom: 20px; padding-top: 18px; border-top: 1px solid rgba(38,34,28,.18); display: inline-block; }
    h2.g-title { font-family: 'Zodiak', serif; font-weight: 500; font-size: clamp(27px, 3.4vw, 42px); line-height: 1.12; margin-bottom: 24px; }
    .g-body { font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); max-width: 62ch; }
    .g-body + .g-body { margin-top: 1em; }
    .g-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
    @media (max-width: 860px) { .g-cols { grid-template-columns: 1fr; gap: 32px; } }
    /* gallery */
    .gal { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 130px; gap: 8px; }
    .gal a { overflow: hidden; border-radius: 2px; }
    .gal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.6,.2,1); }
    .gal a:hover img { transform: scale(1.04); }
    .gal .w4h3 { grid-column: span 4; grid-row: span 3; }
    .gal .w2h3 { grid-column: span 2; grid-row: span 3; }
    .gal .w2h2 { grid-column: span 2; grid-row: span 2; }
    .gal .w3h2 { grid-column: span 3; grid-row: span 2; }
    .gal .w6h3 { grid-column: span 6; grid-row: span 3; }
    @media (max-width: 700px) { .gal { grid-auto-rows: 90px; gap: 6px; }
      .gal .w4h3, .gal .w3h2, .gal .w6h3 { grid-column: span 6; }
      .gal .w2h3, .gal .w2h2 { grid-column: span 3; } }
    /* services menu */
    .menu-h { font-family: 'Zodiak', serif; font-weight: 500; font-size: 22px; margin-bottom: 18px; }
    .menu { list-style: none; padding: 0; }
    .menu li { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid rgba(38,34,28,.12); font-size: 15px; }
    .menu li span { color: var(--ink-soft); font-size: 13.5px; text-align: right; }
    /* amenities (legacy) */
    .amen { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px; background: var(--sand-deep); border-radius: 3px; overflow: hidden; }
    .amen div { background: var(--sand); padding: 22px 20px; font-size: 14px; line-height: 1.5; color: var(--ink); }
    .amen div b { display: block; font-weight: 500; margin-bottom: 3px; }
    .amen div span { color: var(--ink-soft); font-size: 13px; }
    /* quote — the guest book */
    .quote { text-align: center; padding: 120px 24px 110px; background: var(--sand-deep); }
    .quote .g-eyebrow { border-top: none; padding-top: 0; }
    .q-mark { font-family: 'Zodiak', serif; font-weight: 500; font-size: 84px; line-height: .5; color: var(--teak); opacity: .45; display: block; margin: 18px auto 6px; }
    .quote p { font-family: 'Zodiak', serif; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.32; font-style: italic; max-width: 24ch; margin: 0 auto 34px; }
    .q-score { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 16px; }
    .q-score i { display: block; width: 2px; height: 15px; background: var(--teak); }
    .q-score span { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--teak); font-weight: 500; margin-left: 12px; }
    .quote cite { font-style: normal; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
    /* facts strip */
    .facts { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--sand-deep); border-bottom: 1px solid var(--sand-deep); }
    .facts div { flex: 1 1 140px; padding: 26px 18px; text-align: center; }
    .facts b { display: block; font-family: 'Zodiak', serif; font-size: 30px; font-weight: 500; }
    .facts span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
    /* booking */
    .book { background: #17140F; color: var(--sand); }
    .book .g-eyebrow { color: var(--bronze); }
    .book h2 { color: var(--sand); }
    .book .g-body { color: #CFC5B3; }
    /* booking — the concierge desk, not a form */
    .book-card { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: 3px; padding: 40px 38px 34px; }
    .book-card .bc-head { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--bronze); font-weight: 500; padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,.1); }
    .bc-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
    .book-card label { display: block; font-size: 10.5px; letter-spacing: .25em; text-transform: uppercase; color: #B9AE9C; margin: 0 0 4px; }
    .book-card input { width: 100%; padding: 10px 2px 12px; margin-bottom: 8px; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.22); border-radius: 0; color: var(--sand); font-family: 'General Sans', sans-serif; font-size: 15.5px; color-scheme: dark; transition: border-color .25s; }
    .book-card input:focus { outline: none; border-bottom-color: var(--bronze); }
    .bc-summary { min-height: 34px; margin: 18px 0 20px; opacity: 0; transition: opacity .4s; }
    .bc-summary.is-on { opacity: 1; }
    .bc-summary b { display: block; font-family: 'Zodiak', serif; font-weight: 500; font-size: 22px; color: var(--sand); }
    .bc-summary span { font-size: 12.5px; color: #B9AE9C; }
    .bc-merits { list-style: none; padding: 0; margin: 22px 0 0; }
    .bc-merits li { font-size: 13.5px; line-height: 1.55; color: #C9BFAD; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.08); }
    .wa-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 17px; background: var(--bronze); color: #17140F; border-radius: 3px; text-decoration: none; font-weight: 500; font-size: 15px; letter-spacing: .02em; transition: background .2s; }
    .wa-btn:hover { background: var(--bronze-bright); }
    .sw-btn, .wa-btn { border-radius: 2px !important; }
    .book-alt { text-align: center; margin-top: 16px; font-size: 14px; color: #A99E8B; }
    .book-alt a { color: #CFC5B3; text-decoration: underline; text-underline-offset: 3px; }
    footer { background: #0C0A07; color: #A99E8B; padding: 104px 24px 72px; text-align: center; font-size: 15.5px; border-top: 1px solid rgba(255,255,255,.09); }
    footer a { color: #D6C9AE; text-decoration: none; border-bottom: 1px solid rgba(214,201,174,.45); padding-bottom: 2px; }
    .f-mark { font-family: 'Zodiak', serif; font-weight: 500; font-size: 17px; letter-spacing: .4em; text-transform: uppercase; color: #a89a83; padding-left: .4em; margin-bottom: 26px; }
    .f-rule { width: 56px; height: 1px; background: rgba(198,155,98,.55); margin: 0 auto 32px; }
    .f-line { margin: 10px 0; letter-spacing: .01em; }
    .f-fine { margin-top: 28px; font-size: 13px; color: rgba(169,158,139,.8); }
    /* the giant wordmark — daylight-computer's footer sunrise, in estate bronze */
    .f-giant { font-family: 'Zodiak', serif; font-weight: 500; font-size: clamp(58px, 12.5vw, 216px); line-height: .94; letter-spacing: -.015em; color: var(--bronze); margin-top: 72px; text-align: center; }
    @media (max-width: 700px) { .f-giant { font-size: clamp(44px, 14vw, 80px); } }
    /* whisper bands (amankila): ~2% luminance chapter shifts, no borders */
    .band { width: 100%; }
    .band-lift { background: #F7F2E9; }
    /* distances list (getting here) */
    .dist { list-style: none; padding: 0; margin-top: 26px; }
    .dist li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(38,34,28,.12); font-size: 14.5px; }
    .dist li b { font-weight: 500; white-space: nowrap; }
    .dist li span { color: var(--ink-soft); }
    /* wordmark divider (karoso): the emptiness budget */
    .divider { padding: 160px 24px; text-align: center; background: var(--sand); }
    .divider span { font-family: 'Zodiak', serif; font-weight: 500; font-size: clamp(17px, 2.2vw, 26px); letter-spacing: .45em; text-transform: uppercase; color: var(--ink); opacity: .5; padding-left: .45em; }
    .sw-pt { display: none !important; }
    .ground { position: relative; z-index: 70; background: var(--sand); }
    /* ---- engine chrome, restyled for the dark film (engine CSS is layered; these win) ---- */
    /* The estate topnav (below) owns the top edge, so the engine's own topbar
       drops below it and keeps only the section pills, right-aligned (the
       pages pass no brand — the topnav wordmark replaced it, decided 09-03). */
    .sw-topbar { top: 46px; justify-content: flex-end; }
    .sw-scrollbar { top: 46px; }
    /* Square editorial chrome — the film speaks the same 2px language as the
       ground sheet (pills read SaaS against the estate register; decided 07-30). */
    .sw-nav { background: rgba(23,20,15,.5); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(18px); border-radius: 3px; padding: 7px; gap: 6px; }
    .sw-nav__item { color: rgba(244,239,230,.58); font-weight: 400; letter-spacing: .03em; border-radius: 2px; font-size: .95rem; padding: 11px 20px; }
    .sw-nav__item:hover { color: #F4EFE6; }
    .sw-nav__item.is-active { color: #17140F; background: var(--bronze); font-weight: 500; }
    .sw-route__label { background: rgba(23,20,15,.72); color: #F4EFE6; border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); border-radius: 2px; }
    .sw-copy__tags li { border-radius: 2px; }
    .sw-btn { border-radius: 2px; }
    /* ---- hero / scene copy rhythm ---- */
    .sw-copy__num { color: rgba(244,239,230,.38); font-size: .7rem; letter-spacing: .18em; }
    .sw-copy__eyebrow { font-family: 'General Sans', sans-serif; font-weight: 500; font-size: .7rem; letter-spacing: .32em; margin-top: 22px; }
    .sw-copy__title { font-weight: 500; line-height: 1.04; margin: 16px 0 0; letter-spacing: 0; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
    .sw-copy__body { margin-top: 22px; color: rgba(244,239,230,.82); line-height: 1.68; font-weight: 300; text-shadow: 0 1px 16px rgba(0,0,0,.5); }
    .sw-copy__tags { margin-top: 30px; gap: 10px; }
    .sw-copy__tags li { background: rgba(23,20,15,.34); border: 1px solid rgba(255,255,255,.24); color: #F4EFE6; font-weight: 400; font-size: .78rem; letter-spacing: .04em; backdrop-filter: blur(8px); }
    .sw-copy__cta { margin-top: 34px; }
    .sw-btn--primary { color: #17140F; background: var(--bronze); }
    .sw-btn--ghost { color: #F4EFE6; border: 1.5px solid rgba(244,239,230,.35); }
    .sw-hint { color: rgba(244,239,230,.45); }
    .sw-hint i { border-color: rgba(244,239,230,.3); }
    @media (max-width: 860px) { .sw-hint { display: none; } }
    /* film readiness overlay — center stage until the film is alive */
    #filmload { position: fixed; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center;
      pointer-events: none; transition: opacity .9s ease;
      background: radial-gradient(ellipse at center, rgba(23,20,15,.82) 0%, rgba(23,20,15,.45) 55%, rgba(23,20,15,.15) 100%); }
    #filmload.off { opacity: 0; }
    .fload-box { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 0 24px; }
    .fload-box .fl-eyebrow { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--bronze); font-weight: 500; }
    .fload-box h2 { font-family: 'Zodiak', serif; font-weight: 500; font-size: clamp(30px, 5vw, 54px); color: var(--cream, #F4EFE6); color: #F4EFE6; margin: 0; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
    .fload-box .fl-sub { font-size: 14.5px; color: rgba(244,239,230,.75); }
    .fload-bar { width: min(320px, 64vw); height: 2px; background: rgba(244,239,230,.16); position: relative; margin-top: 6px; }
    .fload-bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--bronze); transition: width .5s ease; }
    .fload-pct { font-size: 12px; letter-spacing: .22em; color: var(--bronze); font-weight: 500; }
    #filmrest { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 66;
      background: rgba(23,20,15,.62); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px);
      color: rgba(244,239,230,.85); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
      padding: 9px 16px; border-radius: 2px; pointer-events: none; transition: opacity .6s ease; }
    #filmrest.off { opacity: 0; }
    .sw-copylayer, .sw-hint { transition: opacity 1s ease; }
    html.film-loading .sw-copylayer, html.film-loading .sw-hint { opacity: 0 !important; }
    /* ---- estate top nav (two-villa product grammar) ----
       .topnav — ONE slim fixed bar on both villa pages: wordmark → the chooser
       at /, villa ↔ villa at right (the current page carries the bronze
       underline). Above the ground sheet (z-80) so it rides the whole page;
       dark glass reads on both the film and the sand ground. The engine's
       topbar and progress bar are pushed below it (overrides above). Hidden
       while the readiness veil is up, exactly like the chip it replaced. */
    .topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: 46px;
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      padding: 0 clamp(18px, 5vw, 64px);
      background: rgba(23,20,15,.55); border-bottom: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      transition: opacity .9s ease; }
    .tn-mark { font-family: 'Zodiak', serif; font-weight: 500; font-size: 13.5px; letter-spacing: .3em;
      text-transform: uppercase; color: #F4EFE6; text-decoration: none; white-space: nowrap; }
    .tn-villas { display: flex; gap: clamp(16px, 3vw, 30px); }
    .tn-villas a { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
      color: rgba(244,239,230,.6); text-decoration: none; padding: 4px 0 5px;
      border-bottom: 1px solid transparent; white-space: nowrap; transition: color .2s, border-color .2s; }
    .tn-villas a:hover { color: #F4EFE6; }
    .tn-villas a.is-here { color: #F4EFE6; border-bottom-color: var(--bronze); }
    @media (max-width: 700px) { .topnav { height: 42px; padding: 0 16px; }
      .tn-mark { font-size: 11.5px; letter-spacing: .24em; }
      .tn-villas a { font-size: 9.5px; letter-spacing: .16em; }
      .sw-topbar, .sw-scrollbar { top: 42px; } }
    /* .x-sib — the sibling villa, one line at the foot of the booking section */
    .x-sib { max-width: 1120px; margin: 88px auto 0; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.09); text-align: center; }
    .x-sib .xs-eyebrow { display: block; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--bronze); font-weight: 500; margin-bottom: 14px; }
    .x-sib a { font-family: 'Zodiak', serif; font-weight: 500; font-size: clamp(20px, 2.6vw, 28px); color: var(--sand);
      text-decoration: none; border-bottom: 1px solid rgba(216,176,120,.45); padding-bottom: 3px; transition: border-color .2s; }
    .x-sib a:hover { border-bottom-color: var(--bronze-bright); }