/* ==========================================================
  Sandbox Hotel — Main Stylesheet (extracted from index.html)
  Linked from index.html via <link rel="stylesheet">
========================================================== */
    /* ==========================================================
      Sandbox Hotel � Main Stylesheet
      - Light/Dark follows device by default (prefers-color-scheme)
      - Optional user override: System ? Dark ? Light (saved)
    ========================================================== */

    :root{
      /* Brand palette � warm boutique hospitality */
      --copper:#A8652A;
      --copper2:#C4884E;
      --champagne:#E8C9A0;
      --champagne2:#F2D9B8;
      --bronze:#8B6914;
      --olive:#5C6B55;
      --slate:#4A5568;

      --radius-xs:4px;
      --radius-sm:6px;
      --radius-md:10px;
      --radius-lg:14px;
      --radius-xl:18px;
      --radius-xxl:20px;
      --radius-pill:999px;
      --radius:var(--radius-md);
      --radius2:var(--radius-md);
      --max:1200px;

      --tap:46px;
      --nav-h:60px;
      --nav-pad-y:10px;
      --nav-pad-x:18px;
      --nav-gap:8px;
      --btn-h:44px;
      --btn-px:16px;
      --btn-radius:var(--radius-sm);
      --btn-border:1px;
      --gutter: clamp(16px, 2.8vw, 32px);
      --sectionY: clamp(36px, 4vw, 48px);
      --gridGap: clamp(12px, 1.6vw, 18px);
      --surfacePad: clamp(18px, 2vw, 22px);
      --surfacePadSm: clamp(16px, 1.8vw, 18px);
      --heroMinHeight: min(62vh, 520px);
      --heroNavOffset: 10px;
      --heroMinHeightPhone: clamp(480px, 78vh, 620px);
      --heroImgPositionDesktop: center 38%;
      --navPrimaryCtaMinWidth: 136px;
      --heroPrimaryCtaMinWidth: 190px;
      --heroImgPositionPhone: 68% center;
      --heroPanelMaxWidth: 560px;
      --heroPanelWidth: 92vw;
      --heroInnerPadBottom: clamp(24px, 3vw, 40px);
      --heroOverlayPrimary: linear-gradient(90deg, rgba(10,11,14,.72) 0%, rgba(10,11,14,.48) 34%, rgba(10,11,14,.18) 58%, rgba(10,11,14,.06) 78%);
      --heroOverlaySecondary: linear-gradient(to top, rgba(10,11,14,.58) 0%, rgba(10,11,14,.22) 36%, rgba(10,11,14,0) 76%);
      --heroPanelPad: clamp(20px, 2vw, 26px);
      --heroInnerPad: clamp(18px, 2.4vw, 28px);
      --contentTightGap: 8px;
      --contentStackGap: 12px;
      --fieldPadY: 12px;
      --fieldPadX: 14px;

      --bodySize: clamp(15px, 1.05vw, 16.5px);
      --heroTitleSize: clamp(36px, 4.8vw, 64px);
      --sectionTitleSize: clamp(26px, 2.6vw, 38px);

      --sans:"Manrope", "Segoe UI", sans-serif;
      --display:"Fraunces", Georgia, serif;

      --focus: 0 0 0 3px rgba(168,101,42,.30);
      --shadow-inner: inset 0 1px 0 rgba(255,255,255,.03);
      --shadow-inner-strong: inset 0 1px 0 rgba(255,255,255,.04);
      --shadow-inner-accent: inset 0 1px 0 rgba(255,255,255,.05);
      --shadow-text: 0 1px 0 rgba(0,0,0,.16);
      --shadow-xs: 0 2px 6px rgba(0,0,0,.08);
      --shadow-card-light: 0 16px 34px rgba(59,43,22,.08), 0 6px 16px rgba(59,43,22,.04);
      --shadow-card-hover: 0 12px 28px rgba(0,0,0,.18);
      --shadow-header-scrolled: 0 4px 24px rgba(0,0,0,.12);
      --shadow-header-scrolled-light: 0 4px 24px rgba(45,36,24,.06);
      --shadow-accent-xs: 0 2px 8px rgba(168,101,42,.08);
      --surface-hover-light: color-mix(in oklab, var(--card) 100%, var(--copper) 4%);
      --surface-hover-light-soft: color-mix(in oklab, var(--card) 100%, var(--copper) 3%);
      --surfaceA: rgba(255,255,255,.025);
      --surfaceB: rgba(255,255,255,.04);
      --surfaceC: rgba(255,255,255,.06);
      --surfaceD: rgba(255,255,255,.10);
      --controlBorder: rgba(255,255,255,.15);
      --controlBorderStrong: rgba(255,255,255,.22);
      --fieldBg: rgba(255,255,255,.035);
      --fieldBgFocus: rgba(255,255,255,.05);
      --placeholderInk: rgba(206,199,188,.55);

      --shadow-sm: var(--shadow3);
      --shadow-md: var(--shadow2);
      --shadow-lg: var(--shadow);
      --shadow-brand-sm: 0 12px 22px rgba(168,101,42,.18);
      --shadow-brand-md: 0 14px 24px rgba(0,0,0,.18), 0 12px 18px rgba(183,106,43,.10);
      --shadow-brand-lg: 0 12px 28px rgba(0,0,0,.14), 0 8px 16px rgba(168,101,42,.12);
      --shadow-brand-xl: 0 14px 32px rgba(0,0,0,.18), 0 10px 18px rgba(168,101,42,.16);
      --shadow-hot-lg: 0 18px 40px rgba(0,0,0,.20), 0 18px 34px rgba(240,195,154,.12);
    }
    html[data-density="compact"]{
      --nav-h:54px;
      --nav-pad-y:8px;
      --nav-pad-x:14px;
      --btn-h:42px;
      --btn-px:14px;
      --gutter: clamp(14px, 2.2vw, 24px);
      --sectionY: clamp(26px, 3.2vw, 38px);
      --gridGap: clamp(10px, 1.5vw, 14px);
      --surfacePad: clamp(16px, 1.8vw, 20px);
      --surfacePadSm: 16px;
      --heroMinHeight: min(58vh, 500px);
      --heroPanelPad: clamp(14px, 1.6vw, 18px);
      --heroInnerPad: clamp(16px, 2.2vw, 24px);
      --contentTightGap: 8px;
      --contentStackGap: 10px;
      --fieldPadY: 11px;
      --fieldPadX: 12px;
      --heroTitleSize: clamp(32px, 4.2vw, 52px);
    }
    html[data-density="ultra-compact"]{
      --nav-h:52px;
      --nav-pad-y:6px;
      --nav-pad-x:12px;
      --btn-h:40px;
      --btn-px:12px;
      --gutter: clamp(12px, 1.8vw, 20px);
      --sectionY: clamp(20px, 2.4vw, 32px);
      --gridGap: 12px;
      --surfacePad: 16px;
      --surfacePadSm: 14px;
      --heroMinHeight: min(54vh, 480px);
      --heroPanelPad: 14px;
      --heroInnerPad: clamp(16px, 2vw, 22px);
      --contentTightGap: 6px;
      --contentStackGap: 10px;
      --fieldPadY: 10px;
      --fieldPadX: 12px;
      --heroTitleSize: clamp(28px, 3.8vw, 46px);
    }

    /* ---------- Theme tokens ---------- */
    html{color-scheme: light dark;}
    html[data-theme="dark"]{
        box-shadow: var(--shadow-card-light);
      --bg1:#111318;
      --paper:#0E1014;
      --card:#15181C;
      --card2:#1B1F25;
        box-shadow: var(--shadow-header-scrolled);
      --ink:#F3EFE7;
      --ink2:#FFFFFF;
      --muted:#CDC4B7;
      --muted2:#AAA092;
        box-shadow: var(--shadow-header-scrolled-light);
      --surfaceA: rgba(255,255,255,.025);
      --surfaceB: rgba(255,255,255,.04);
        background: var(--surface-hover-light);
      --surfaceD: rgba(255,255,255,.10);
      --controlBorder: rgba(255,255,255,.15);
      --controlBorderStrong: rgba(255,255,255,.22);
      --fieldBg: rgba(255,255,255,.035);
      --fieldBgFocus: rgba(255,255,255,.05);
        box-shadow: var(--shadow-accent-xs);

      --softA:rgba(183,106,43,.14);
      --softB:rgba(209,139,80,.10);
        box-shadow: var(--shadow-inner);

      --shadow:0 28px 80px rgba(0,0,0,.42);
      --shadow2:0 18px 42px rgba(0,0,0,.28);
      --shadow3:0 10px 24px rgba(0,0,0,.18);

          box-shadow: var(--shadow-inner-strong), var(--shadow-card-hover);
      --uiGlass2: rgba(17,19,24,.76);
    }
      html[data-theme="light"] .amenity-card:hover{
        background: linear-gradient(180deg, var(--surface-hover-light), color-mix(in oklab, var(--surface-hover-light-soft) 82%, white));
      }
    html[data-theme="light"]{
      --bg0:#ECE3D7;
      --bg1:#F5EEE4;
      --paper:#FBF6EE;
        box-shadow: var(--shadow-inner-accent);
      --card2:#F7F1E8;

        background: var(--surface-hover-light);
      --ink2:#171410;
      --muted:#5F564B;
          background: var(--surface-hover-light-soft);
      --line:rgba(45,36,24,.12);
      --surfaceA: rgba(168,101,42,.048);
      --surfaceB: rgba(168,101,42,.078);
      --surfaceC: rgba(168,101,42,.115);
        background: var(--surface-hover-light-soft);
      --controlBorder: rgba(45,36,24,.15);
      --controlBorderStrong: rgba(168,101,42,.28);
      --fieldBg: rgba(255,252,247,.96);
      --fieldBgFocus: #FFFFFF;
      --placeholderInk: rgba(95,86,75,.72);

      --softA:rgba(183,106,43,.11);
      --softB:rgba(209,139,80,.08);
      --softHot:rgba(240,195,154,.16);

      --shadow:0 26px 60px rgba(59,43,22,.12);
      --shadow2:0 18px 32px rgba(59,43,22,.10);
      --shadow3:0 10px 22px rgba(59,43,22,.08);

      --uiGlass: rgba(251,246,238,.88);
      --uiGlass2: rgba(255,252,247,.94);
    }

    /* System theme uses OS preference */
    @media (prefers-color-scheme: dark){
      html[data-theme="system"]{ color-scheme: dark;
        --bg0:#0A0B0D; --bg1:#111318; --paper:#0E1014; --card:#15181C; --card2:#1B1F25;
        --ink:#F3EFE7; --ink2:#FFFFFF; --muted:#CDC4B7; --muted2:#AAA092; --line:rgba(255,255,255,.08);
        --softA:rgba(183,106,43,.14); --softB:rgba(209,139,80,.10); --softHot:rgba(240,195,154,.12);
        --shadow:0 28px 80px rgba(0,0,0,.46); --shadow2:0 18px 42px rgba(0,0,0,.32); --shadow3:0 10px 24px rgba(0,0,0,.22);
        --uiGlass: rgba(14,16,20,.72); --uiGlass2: rgba(17,19,24,.82);
      }
    }
    @media (prefers-color-scheme: light){
      html[data-theme="system"]{ color-scheme: light;
        --bg0:#ECE3D7;
        --bg1:#F5EEE4;
        --paper:#FBF6EE;
        --card:#FFFDF9;
        --card2:#F7F1E8;
        --ink:#28241F;
        --ink2:#171410;
        --muted:#5F564B;
        --muted2:#756B60;
        --line:rgba(45,36,24,.12);
        --surfaceA: rgba(168,101,42,.048);
        --surfaceB: rgba(168,101,42,.078);
        --surfaceC: rgba(168,101,42,.115);
        --surfaceD: rgba(168,101,42,.18);
        --controlBorder: rgba(45,36,24,.15);
        --controlBorderStrong: rgba(168,101,42,.28);
        --fieldBg: rgba(255,252,247,.96);
        --fieldBgFocus:#FFFFFF;
        --placeholderInk: rgba(95,86,75,.72);
        --softA:rgba(183,106,43,.11);
        --softB:rgba(209,139,80,.08);
        --softHot:rgba(240,195,154,.16);
        --shadow:0 26px 60px rgba(59,43,22,.12);
        --shadow2:0 18px 32px rgba(59,43,22,.10);
        --shadow3:0 10px 22px rgba(59,43,22,.08);
        --uiGlass: rgba(251,246,238,.88);
        --uiGlass2: rgba(255,252,247,.94);
      }
    }

    /* ---------- Base / Reset ---------- */
    *{box-sizing:border-box}
    html{
      -webkit-text-size-adjust:100%;
      text-size-adjust:100%;
      scroll-behavior:smooth;
      -webkit-font-smoothing: antialiased;
    }
    body{
      margin:0;
      min-height:100%;
      font-family: var(--sans);
      font-size: var(--bodySize);
      line-height:1.65;
      color: var(--ink);
      overflow-x:hidden;
      background:
        radial-gradient(1100px 620px at 8% -10%, rgba(168,101,42,.08), transparent 64%),
        radial-gradient(880px 520px at 88% -8%, rgba(232,201,160,.07), transparent 60%),
        linear-gradient(180deg, var(--paper) 0%, var(--bg1) 52%, var(--bg0) 100%);
      text-rendering: optimizeLegibility;
    }

    img,svg,video,canvas{max-width:100%; height:auto; display:block}
    a{color:inherit}
    a,button,input,select,textarea{-webkit-tap-highlight-color: transparent}
    button,input,select,textarea{font:inherit; color:inherit}
    ::selection{background: rgba(183,106,43,.30); color: var(--ink2)}

    :focus:not(:focus-visible){outline:none}
    :focus-visible{outline:none; box-shadow: var(--focus)}
    @supports not selector(:focus-visible){
      :focus{box-shadow: var(--focus)}
    }

    @media (prefers-reduced-motion: reduce){
      *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
    }

    /* Optional scrollbars */
    *{scrollbar-color: rgba(183,106,43,.55) rgba(0,0,0,.08); scrollbar-width: thin}
    *::-webkit-scrollbar{width:10px; height:10px}
    *::-webkit-scrollbar-track{background: rgba(0,0,0,.08)}
    *::-webkit-scrollbar-thumb{
      background: linear-gradient(180deg, rgba(209,139,80,.80), rgba(183,106,43,.80));
      border-radius: var(--radius-pill);
      border: 2px solid rgba(0,0,0,.08);
    }

    /* ---------- Layout ---------- */
    .wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter);}
    .section{margin: var(--sectionY) 0;}
    .skipLink{
      position:absolute; top:10px; left:10px;
      background:var(--card); color:var(--ink2);
      border:1px solid var(--line); border-radius:var(--radius-md);
      padding:10px 12px; z-index:999;
      clip-path:inset(50%); width:1px; height:1px; overflow:hidden;
    }
    .skipLink:focus{clip-path:none}

    /* ---------- Cards ---------- */
    .card{
      position:relative;
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: var(--card);
      box-shadow: var(--shadow3);
      overflow:hidden;
    }
    html[data-theme="light"] .card{
      border-color: color-mix(in oklab, var(--line) 88%, rgba(168,101,42,.18));
      box-shadow: var(--shadow-card-light);
    }
    .card:before{
      content:"";
      position:absolute; inset:0;
      border-radius:inherit;
      pointer-events:none;
      box-shadow: var(--shadow-inner);
      opacity:.3;
    }
    html[data-theme="light"] .card:before{opacity:.35}
    .card.altA{
      background: var(--card);
      border-color: color-mix(in oklab, var(--copper) 12%, var(--line));
    }
    .card.altB{
      background: var(--card);
    }
    .card.altHot{
      background: var(--card);
      border-color: color-mix(in oklab, var(--champagne) 12%, var(--line));
    }

    .pad{padding:var(--surfacePad)}
    @media (max-width:640px){ .pad{padding:var(--surfacePadSm)} }
    .muted{color:var(--muted)}
    .fine{color:var(--muted2); font-size:12px}
    .sep{height:1px; background:var(--line); margin:14px 0}

    /* ---------- Header / Nav ---------- */
    header{
      position:fixed; top:0; left:0; right:0; z-index:80;
      border-bottom:1px solid transparent;
      transition: border-color .3s ease, box-shadow .3s ease;
    }
    /* Use ::before for the frosted-glass effect so the header element itself never
       acquires backdrop-filter — which would create a new containing block and
       collapse the position:fixed navPanel to zero height on mobile. */
    header::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      pointer-events:none;
      opacity:0;
      -webkit-backdrop-filter: blur(16px) saturate(130%);
      backdrop-filter: blur(16px) saturate(130%);
      transition: opacity .3s ease, background .3s ease;
    }
    header.scrolled{
      border-bottom:1px solid rgba(255,255,255,.08);
      box-shadow: var(--shadow-header-scrolled);
    }
    header.scrolled::before{
      opacity:1;
      background: rgba(10,11,14,.82);
    }
    html[data-theme="light"] header.scrolled{
      border-bottom-color: rgba(45,36,24,.08);
      box-shadow: var(--shadow-header-scrolled-light);
    }
    html[data-theme="light"] header.scrolled::before{
      background: rgba(255,253,248,.88);
    }
    .nav{
      max-width:var(--max); margin:0 auto;
      min-height:var(--nav-h);
      padding:var(--nav-pad-y) var(--nav-pad-x);
      display:flex; align-items:center; justify-content:space-between; gap:var(--nav-gap);
      padding-top: calc(var(--nav-pad-y) + env(safe-area-inset-top));
    }
    .brand{display:flex; align-items:center; gap:14px; text-decoration:none; min-width:0}
    .logo{
      width:52px; height:52px;
      flex:0 0 auto;
    }
    .logo img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      border-radius:var(--radius-sm);
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.3));
    }
    .logo.footerLogo{
      width:44px;
      height:44px;
    }
    .brandText{
      display:grid;
      gap:3px;
      min-width:0;
    }
    .brand .brandName{
      display:block;
      margin:0;
      font-size:13px;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-weight:900;
      color:var(--ink2);
    }
    .brand small{display:block; margin-top:0; font-size:12px; color:color-mix(in oklab, var(--muted) 88%, white); opacity:.9}
    .navLinks{display:flex; gap:8px; flex-wrap:nowrap; align-items:center; justify-content:flex-end; min-width:0}
    .navSupport{
      font-size:11px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:color-mix(in oklab, var(--muted) 78%, white);
      white-space:nowrap;
      opacity:.85;
    }
    html[data-theme="light"] .brand small,
    html[data-theme="light"] .navSupport,
    html[data-theme="light"] .navPanelBrandCopy{
      color:var(--muted);
      opacity:1;
    }
    .navLangCluster{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .navLangCluster .flagItem{
      width:34px;
      height:34px;
      border-radius:var(--radius-pill);
    }
    .navLangToggle{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:40px;
      padding:0 12px;
      border-radius:var(--radius-pill);
      border:1px solid var(--controlBorder);
      background:var(--surfaceA);
      color:var(--ink2);
      box-shadow: var(--shadow-xs);
      cursor:pointer;
      transition: background .14s ease, border-color .14s ease, transform .14s ease;
    }
    .navLangToggle:hover{
      transform: translateY(-1px);
      background:var(--surfaceC);
      border-color:var(--controlBorderStrong);
    }
    .navLangToggle[aria-expanded="true"]{
      background:var(--surfaceC);
      border-color:var(--controlBorderStrong);
    }
    #currentFlag{
      font-size:18px;
      line-height:1;
    }
    .navLangChevron{
      font-size:11px;
      line-height:1;
      opacity:.72;
    }
    .navPrimaryCta{
      min-width:var(--navPrimaryCtaMinWidth);
      white-space:nowrap;
    }
    .navHamburger{
      display:inline-flex; align-items:center; justify-content:center;
      width:var(--btn-h); height:var(--btn-h);
      border-radius:var(--btn-radius);
      border:1px solid var(--controlBorder);
      background:var(--surfaceB);
      box-shadow: 0 8px 18px rgba(0,0,0,.12);
      color:var(--ink2);
      cursor:pointer;
      transition: background .14s ease, border-color .14s ease;
    }
    .navHamburger:hover{
      background: var(--surfaceC);
      border-color: var(--controlBorderStrong);
    }
    html[data-theme="light"] .navHamburger{
      color:var(--ink2);
    }
    html[data-theme="light"] .navHamburger:hover{
      background: var(--surfaceC);
    }
    .navPanelDivider{
      height:1px;
      background:var(--line);
      margin:4px 0;
    }
    .navPanelLang{
      display:flex;
      gap:6px;
      padding:4px 0;
    }
    .navPanelLangBlock{
      display:grid;
      gap:8px;
    }
    .navPanelLabel{
      font-size:11px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
    }
    .navGroup{
      position:relative;
    }
    .navGroup summary{
      list-style:none;
      cursor:pointer;
      border-radius:var(--btn-radius);
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
    }
    .navGroup summary::-webkit-details-marker{display:none}
    .navGroup summary .navHamburger{pointer-events:none}
    .navGroup[open] .navHamburger{
      background: var(--surfaceC);
      border-color: var(--controlBorderStrong);
    }
    /* Reset details styling for nav */
    .navGroup{border:none; background:none; padding:0; margin:0; border-radius:0}
    .navPanel{
      position:absolute;
      top:calc(100% + 10px);
      right:0;
      width:max-content;
      max-width:min(260px, calc(100vw - 24px));
      max-height:calc(100dvh - var(--nav-h) - 24px);
      overflow-y:auto;
      display:grid;
      gap:8px;
      padding:12px;
      border-radius:var(--radius-lg);
      border:1px solid var(--line);
      background:var(--uiGlass2);
      -webkit-backdrop-filter: blur(10px) saturate(150%);
      backdrop-filter: blur(10px) saturate(150%);
      box-shadow: var(--shadow2);
      z-index:20;
    }
    .navPanelBrand{
      display:flex;
      align-items:center;
      gap:12px;
      padding-bottom:4px;
    }
    .navPanelBrand .logo{
      width:40px;
      height:40px;
    }
    .navPanelBrandTitle{
      display:block;
      margin:0;
      font-size:13px;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-weight:900;
      color:var(--ink2);
    }
    .navPanelBrandCopy{
      display:block;
      margin-top:3px;
      font-size:12px;
      color:color-mix(in oklab, var(--muted) 88%, white);
      line-height:1.45;
    }
    .navPanel .chip{justify-content:flex-start}
    .langSwitch{position:relative}
    .hideMobile{display:inline-flex}
    @media (max-width:980px){ .hideMobile{display:none !important} }
    @media (max-width:640px){
      .logo{
        width:48px;
        height:48px;
      }
      .brand{
        gap:12px;
      }
      .brand small{
        font-size:11px;
      }
    }

    /* ---------- Chips / Buttons ---------- */
    .chip{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      min-height:var(--btn-h);
      padding:0 var(--btn-px);
      border-radius:var(--btn-radius);
      border:1px solid var(--controlBorder);
      background: var(--surfaceB);
      color: var(--ink2);
      font-size:13px;
      font-weight:800;
      user-select:none;
      text-decoration:none;
      transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
      cursor:pointer;
    }
    .chip:hover{
      transform: translateY(-1px);
      box-shadow: var(--shadow-xs);
      background: var(--surfaceC);
      border-color: var(--controlBorderStrong);
    }
    .chip[aria-pressed="true"]{
      border-color: transparent;
      color:#fff;
      background: linear-gradient(135deg, rgba(168,101,42,.98), rgba(209,139,80,.92));
      box-shadow: var(--shadow-brand-sm);
    }

    .chip.primary{
      border:none;
      color:white;
      border-radius:var(--radius-pill);
      background: linear-gradient(135deg, rgba(183,106,43,.98), rgba(209,139,80,.92));
      box-shadow: var(--shadow-brand-md);
    }

    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      min-height:var(--btn-h);
      padding:0 var(--btn-px);
      border-radius:var(--btn-radius);
      border:var(--btn-border) solid var(--controlBorder);
      background: var(--surfaceB);
      color:var(--ink2);
      font-weight:800;
      letter-spacing:.01em;
      text-decoration:none;
      position:relative;
      overflow:hidden;
      isolation:isolate;
      transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
      user-select:none;
      cursor:pointer;
    }
    .btn:before{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 46%);
      opacity:.9;
      pointer-events:none;
      z-index:-1;
    }
    .btn:hover{
      transform: translateY(-1px);
      box-shadow: var(--shadow3);
      background: var(--surfaceC);
      border-color: var(--controlBorderStrong);
    }
    .btn:active{transform: translateY(0)}
    .btn.primary{
      border:none;
      color:white;
      background: linear-gradient(135deg, rgba(168,101,42,.96), rgba(196,136,78,.90) 55%, rgba(232,201,160,.82) 130%);
      box-shadow: var(--shadow-brand-lg);
      text-shadow: var(--shadow-text);
    }
    .btn.secondary{
      border:1px solid var(--controlBorderStrong);
      background: color-mix(in oklab, var(--surfaceB) 72%, var(--softA));
      color:var(--ink2);
    }
    .btn.secondary:hover{
      background: color-mix(in oklab, var(--surfaceC) 68%, var(--softA));
    }
    .btn.hot{
      border:none;
      color:#140B06;
      background: linear-gradient(135deg, rgba(240,195,154,.98), rgba(209,139,80,.92));
      box-shadow: var(--shadow-hot-lg);
    }
    .btn.ghost{
      background: transparent;
      border:1px solid var(--controlBorderStrong);
      color:var(--ink2);
    }
    .btn.ghost:hover{background: var(--surfaceA)}
    .btn.sm{min-height:40px; padding:10px 12px; border-radius:var(--radius-sm)}
    .textLink{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--ink2);
      text-decoration:none;
      font-weight:800;
      letter-spacing:.01em;
      padding:6px 0;
      border-bottom:1px solid transparent;
      transition:border-color .14s ease, transform .14s ease, color .14s ease;
    }
    .textLink:hover{
      transform:translateY(-1px);
      border-color: color-mix(in oklab, var(--copper) 35%, transparent);
      color: color-mix(in oklab, var(--ink2) 82%, var(--copper));
    }


    .iconBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:var(--btn-h);
      height:var(--btn-h);
      border-radius:var(--btn-radius);
      border:1px solid var(--line);
      background: rgba(255,255,255,.05);
      box-shadow: var(--shadow3);
      cursor:pointer;
    }
    .iconBtn span{font-size:18px; line-height:1}
    .langMenu{
      position:absolute;
      top:calc(100% + 10px);
      right:0;
      display:flex;
      gap:8px;
      padding:10px;
      border-radius:var(--radius-lg);
      border:1px solid var(--line);
      background:var(--uiGlass2);
      -webkit-backdrop-filter: blur(10px) saturate(150%);
      backdrop-filter: blur(10px) saturate(150%);
      box-shadow: var(--shadow3);
      z-index:50;
    }
    .langMenu[hidden]{display:none}
    .flagItem{
      width:40px;
      height:40px;
      border-radius:var(--radius-md);
      border:1px solid var(--controlBorder);
      background:var(--surfaceB);
      display:grid;
      place-items:center;
      cursor:pointer;
    }
    .flagItem:hover{
      background:var(--surfaceC);
      border-color:var(--controlBorderStrong);
    }
    .flagItem[aria-pressed="true"]{
      border-color:transparent;
      background: linear-gradient(135deg, rgba(168,101,42,.98), rgba(209,139,80,.92));
      box-shadow: var(--shadow-brand-sm);
    }
    .flagItem > span[aria-hidden="true"]{font-size:18px}
    .sr-only{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }
    .badge{
      display:inline-flex; align-items:center; justify-content:center;
      padding:6px 10px;
      border-radius:var(--radius-pill);
      border:1px solid var(--controlBorder);
      background: var(--surfaceB);
      color:var(--ink2);
      font-weight:800;
      font-size:12px;
      letter-spacing:.2px;
      white-space:nowrap;
    }
    .badge.a{background: var(--softA); border-color: rgba(183,106,43,.24)}
    .badge.b{background: var(--softB); border-color: rgba(209,139,80,.22)}
    .badge.hot{background: var(--softHot); border-color: rgba(240,195,154,.22)}

    /* ---------- Keyword pills ---------- */
    .kw{
      font-weight:900;
      color:var(--ink2);
      padding:0 6px;
      border-radius:var(--radius-pill);
      background: var(--surfaceC);
      border:1px solid var(--controlBorder);
      white-space:nowrap;
    }
    .kw.a{background: var(--softA); border-color: rgba(183,106,43,.24)}
    .kw.hot{background: var(--softHot); border-color: rgba(240,195,154,.24)}

    /* ---------- Section headers ---------- */
    .head{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin:0 0 14px}
    .head h2{
      margin:0;
      font-size:var(--sectionTitleSize, clamp(26px, 2.6vw, 38px));
      color:var(--ink2);
      letter-spacing:-.025em;
      line-height:1.1;
      font-family: var(--display);
    }
    .head p{margin:6px 0 0; max-width:56ch; font-size:13.5px; color:var(--muted); line-height:1.5}

    /* Primary sections get stronger titles */
    #rooms .head h2, #book .head h2{
      font-size:clamp(28px, 2.8vw, 40px);
      letter-spacing:-.03em;
    }

    /* ---------- Hero ---------- */
    .hero{
      position:relative;
      min-height: var(--heroMinHeight);
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.06);
      background-color: var(--bg1);
      color:#fff;
      box-shadow: 0 28px 68px rgba(0,0,0,.18);
      overflow:hidden;
      margin-top: calc(var(--nav-h) + var(--heroNavOffset));
    }
    .hero:before{
      content:"";
      position:absolute; inset:0; z-index:1;
      background: var(--heroOverlayPrimary), var(--heroOverlaySecondary);
      pointer-events:none;
    }
    .heroBgPicture{
      position:absolute; inset:0; z-index:0;
      margin:0; padding:0; overflow:hidden;
    }
    .heroBgImg{
      width:100%; height:100%;
      object-fit:cover; object-position:var(--heroImgPositionDesktop);
      display:block;
    }
    .heroInner{
      position:relative; z-index:2;
      width:100%;
      max-width:var(--max);
      margin:0;
      min-height:100%;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      align-items:flex-start;
      padding: var(--heroInnerPad);
      padding-bottom: var(--heroInnerPadBottom);
      text-align:left;
    }
    .heroPanel{
      width:min(var(--heroPanelMaxWidth), var(--heroPanelWidth));
      margin:0;
      border-radius: var(--radius-xxl);
      border:1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(13,14,18,.68), rgba(13,14,18,.48));
      box-shadow: 0 20px 48px rgba(0,0,0,.26);
      -webkit-backdrop-filter: blur(16px) saturate(125%);
      backdrop-filter: blur(16px) saturate(125%);
      padding: var(--heroPanelPad);
    }
    .heroKicker{
      display:inline-flex;
      align-items:center;
      margin:0 0 8px;
      padding:5px 10px;
      border:1px solid rgba(255,255,255,.12);
      border-radius:var(--radius-pill);
      background: rgba(255,255,255,.05);
      color:rgba(255,255,255,.9);
      font-size:12px;
      line-height:1;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-weight:800;
    }
    .heroTitle{
      margin:0 0 10px;
      font-size:var(--heroTitleSize);
      line-height:1.06;
      letter-spacing:-.04em;
      font-weight:700;
      font-family: var(--display);
      text-wrap:balance;
    }
    .heroSub{
      margin:0 0 18px;
      max-width:40ch;
      color:rgba(255,255,255,.90);
      font-size:15.5px;
      line-height:1.6;
      font-weight:500;
    }
    .heroCTA{margin-top:2px; display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:10px 12px}
    .heroCTA .btn{min-height:48px; padding:0 20px; font-size:14.5px; font-weight:800; letter-spacing:.01em}
    .heroCTA .btn.primary{min-width:var(--heroPrimaryCtaMinWidth); box-shadow: var(--shadow-brand-xl)}
    .heroCTA .btn.secondary{
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.20);
      color:rgba(255,255,255,.95);
      font-weight:700;
    }
    .heroCTA .btn.secondary:hover{
      background: rgba(255,255,255,.15);
      border-color: rgba(255,255,255,.28);
    }
    .heroCTA .textLink{
      padding:6px 0;
      color:rgba(255,255,255,.9);
    }
    .heroDirectNote{
      margin:14px 0 0;
      color: color-mix(in oklab, var(--champagne2) 90%, white);
      font-size:13px;
      line-height:1.55;
      font-weight:700;
    }
    .heroTrustRow{
      display:flex;
      align-items:center;
      gap:10px 14px;
      flex-wrap:wrap;
      margin-top:14px;
    }
    .heroContactHint{
      margin:0;
      max-width:28ch;
      color:rgba(255,255,255,.82);
      font-size:12.5px;
      line-height:1.55;
      font-weight:600;
    }
    .heroProofList{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }
    .heroProofItem{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:var(--radius-pill);
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      color:#fff;
      font-size:12.5px;
      line-height:1.35;
      font-weight:700;
    }
    .heroProofItem::before{
      content:"";
      width:6px;
      height:6px;
      border-radius:var(--radius-pill);
      flex:0 0 auto;
      background: color-mix(in oklab, var(--champagne2) 88%, white);
      box-shadow: 0 0 0 4px rgba(232,201,160,.12);
    }

    /* Trust strip below hero */
    .trustStrip{
      display:flex;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
      max-width:100%;
      gap:10px;
      padding:16px 4px 2px;
      color:var(--muted);
      font-size:12.5px;
      font-weight:600;
      letter-spacing:.02em;
    }
    .trustStrip .trustItem{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:5px 10px;
      border-radius:var(--radius-pill);
      border:1px solid var(--controlBorder);
      background:var(--surfaceA);
      white-space:nowrap;
    }
    .trustStrip .trustIcon{
      font-size:14px;
      line-height:1;
      opacity:.8;
    }
    .trustStrip span[aria-hidden]{
      color:var(--muted2);
      opacity:.4;
    }

    .nav :focus-visible{
      outline:2px solid var(--copper2);
      outline-offset:2px;
    }

    @media (max-width:980px){
      :root{ --heroTitleSize: clamp(30px, 8.6vw, 42px); }
      .heroSub{font-size:15px}
      .navSupport{display:none}
    }

    /* ---------- Why Stay / Offers ---------- */
    .offers{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:12px}
    .offer{
      padding:20px;
      border-radius:var(--radius2);
      border:1px solid var(--line);
      background: var(--surfaceA);
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }
    @media (hover:hover){
      .offer:hover{
        transform:translateY(-2px);
        border-color:rgba(168,101,42,.24);
        box-shadow: var(--shadow-sm);
        background: var(--surfaceB);
      }
    }
    html[data-theme="light"] .offer:hover{
      background: var(--surface-hover-light);
      box-shadow: var(--shadow-sm);
    }
    .offer .offerIcon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:48px; height:48px;
      border-radius:var(--radius-md);
      background: rgba(168,101,42,.12);
      border:1px solid rgba(168,101,42,.20);
      font-size:22px;
      margin-bottom:14px;
      box-shadow: var(--shadow-accent-xs);
    }
    .offer b{display:block; color:var(--ink2); font-weight:800; font-size:16px; line-height:1.3; margin-bottom:8px}
    .offer p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.58}
    @media (max-width:980px){ .offers{grid-template-columns:repeat(2, 1fr)} }
    @media (max-width:640px){ .offers{grid-template-columns:1fr} }

        /* ---------- Why choose us ---------- */
    .whyGrid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gridGap); margin-top:8px}
    .whyItem{
      padding:16px;
      border-radius:var(--radius2);
      border:1px solid var(--line);
      background: var(--surfaceA);
    }
    .whyItem b{display:block; color:var(--ink2); font-weight:1000}
    .whyItem p{margin:8px 0 0; color:var(--muted); font-size:13px}
    @media (max-width:980px){ .whyGrid{grid-template-columns:1fr} }
    /* ---------- Amenities ---------- */
    #amenities, .amenities-section{
      --accent: var(--copper2);
      --surface: var(--card);
      --bg: var(--bg0);
      --border: var(--line);
      --text: var(--ink2);
      position: relative;
      padding: clamp(14px, 2vw, 20px);
      border-radius: var(--radius);
      background: var(--card);
      border: 1px solid var(--line);
      box-shadow: var(--shadow3);
    }
    .amenities-inner{
      display:grid;
      gap:12px;
    }
    #amenities h2, .amenities-section h2{
      font-size: clamp(24px, 2.4vw, 32px);
      line-height: 1.08;
      letter-spacing: .01em;
      margin: 0 0 6px;
      text-wrap: balance;
    }
    #amenities .sub, .amenities-section .sub, #amenities p.lead{
      margin: 0;
      max-width: 52ch;
      opacity: .88;
      font-size: 13.5px;
      line-height: 1.5;
      color: var(--muted);
    }
    .amenities-grid{
      display: grid;
      gap: 10px;
      align-items: stretch;
      grid-template-columns: repeat(3, minmax(200px, 1fr));
    }
    @media (max-width: 980px){
      .amenities-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
    }
    @media (max-width: 640px){
      .amenities-grid{ grid-template-columns: 1fr; gap: 12px; }
    }
    .amenity-card{
      position: relative;
      overflow: hidden;
      border-radius: var(--radius2);
      padding: 14px;
      min-height: 100%;
      background: linear-gradient(180deg, var(--surfaceB), var(--surfaceA));
      border: 1px solid var(--line);
      box-shadow: var(--shadow-inner);
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
      display:grid;
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 12px;
      row-gap: 4px;
      align-items:flex-start;
    }
    .amenity-card::before, .amenity-card::after{display:none}
    @media (hover:hover){
      .amenity-card:hover{
        transform: translateY(-2px);
        border-color: color-mix(in oklab, var(--accent) 25%, var(--border));
        box-shadow: var(--shadow-inner-strong), var(--shadow-card-hover);
      }
    }
      html[data-theme="light"] .amenity-card:hover{
        background: linear-gradient(180deg, var(--surface-hover-light), color-mix(in oklab, var(--surface-hover-light-soft) 82%, white));
      }
      .amenity-card:focus-visible{
        outline: 2px solid color-mix(in oklab, var(--accent) 80%, white);
        outline-offset: 3px;
      }
    .amenity-icon{
      position: relative;
      z-index: 1;
      grid-row: 1 / span 2;
      width: 40px;
      height: 40px;
      border-radius: var(--radius-md);
      display: grid;
      place-items: center;
      flex-shrink:0;
      background: color-mix(in oklab, var(--softA) 88%, rgba(255,255,255,.04));
      border: 1px solid rgba(183,106,43,.22);
      box-shadow: var(--shadow-inner-accent);
    }
    .amenity-icon .glyph{
      font-weight: 700;
      letter-spacing: .04em;
      line-height: 1;
      font-size: 14px;
      color: var(--ink2);
    }
    .amenity-card h3{
      grid-column: 2;
      margin: 2px 0 0;
      font-size: 14.5px;
      line-height: 1.28;
      letter-spacing: .01em;
      font-weight: 700;
      color: var(--ink2);
      position: relative;
      z-index: 1;
      max-width: 20ch;
      text-wrap: balance;
      overflow-wrap: normal;
      hyphens: none;
    }
    .amenity-card p{
      grid-column: 2;
      margin: 0;
      font-size: 12.75px;
      line-height: 1.48;
      max-width: 30ch;
      color: var(--muted);
      position: relative;
      z-index: 1;
    }
    @media (max-width: 640px){
      .amenity-card{
        padding: 13px;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 12px;
      }
      .amenity-icon{
        width: 40px;
        height: 40px;
      }
    }
    @media (prefers-reduced-motion: reduce){
      .amenity-card{ transition: none !important; }
    }

    /* ---------- Rooms ---------- */
    #rooms .head p{max-width:540px}
    #rooms .stack{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:14px;
      align-items:stretch;
    }
    @media (max-width:980px){ #rooms .stack{grid-template-columns:1fr} }

    .roomCard{height:100%; min-width:0; border-width:1.5px}
    .roomCardInner{display:flex; flex-direction:column}

    .roomMedia{position:relative; overflow:hidden; background:var(--surfaceA); border-bottom:1px solid var(--line); border-radius:0}
    .roomMediaLink{display:block; color:inherit; text-decoration:none}
    .roomMediaLink:focus-visible{box-shadow: var(--focus)}

    /* Room hero image */
    .roomHeroWrap{position:relative; overflow:hidden; background:var(--surfaceA)}
    .roomCard .roomHeroWrap .mediaImg{aspect-ratio:16/10; object-fit:cover; transition:opacity .4s ease}

    /* Room thumbnail strip */
    .roomThumbs{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:8px;
      margin-top:10px;
    }
    .roomThumb{
      position:relative;
      border-radius:var(--radius-sm);
      overflow:hidden;
      border:2px solid transparent;
      cursor:pointer;
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
      background:var(--surfaceA);
    }
    .roomThumb:hover{transform:translateY(-2px); box-shadow:var(--shadow3)}
    .roomThumb[aria-current="true"]{border-color:var(--copper); box-shadow:0 4px 16px rgba(168,101,42,.22)}
    .roomThumb img{
      display:block;
      width:100%;
      aspect-ratio:4/3;
      object-fit:cover;
    }

    .roomBody{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:12px;
      padding:16px;
    }
    .roomType{
      display:inline-block;
      font-size:11px;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--copper);
      margin-bottom:2px;
    }
    .roomBody h3{
      margin:0;
      font-size:clamp(21px, 2.1vw, 24px);
      letter-spacing:-.025em;
      line-height:1.1;
      color:var(--ink2);
      font-family:var(--display);
      font-weight:700;
    }
    .roomMeta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      list-style:none;
      padding:0;
      margin:0;
    }
    .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
    .tag{
      display:inline-flex; align-items:center; justify-content:center;
      min-height:32px;
      padding:6px 14px;
      border-radius:var(--radius-pill);
      border:1px solid rgba(168,101,42,.15);
      background: rgba(168,101,42,.05);
      color: var(--ink2);
      font-weight:700;
      font-size:12.5px;
      letter-spacing:.01em;
    }

    .roomDivider{
      width:40px; height:2px;
      background:linear-gradient(90deg, var(--copper), var(--champagne));
      border:none; border-radius:2px;
      margin:0;
    }

    .roomAmenities{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px 12px;
      list-style:none;
      padding:0;
      margin:0;
    }
    .roomAmenity{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:13px;
      color:var(--muted);
      line-height:1.35;
    }
    .roomAmenity svg{
      flex-shrink:0;
      width:16px; height:16px;
      color:var(--copper2);
      opacity:.85;
    }

    .priceBox{text-align:left; margin-top:4px}
    .priceBox .fine{font-size:12px; color:var(--copper2); font-weight:600}
    .roomActions{margin-top:auto; padding-top:8px; display:flex; flex-wrap:wrap; gap:10px; align-items:center}
    .roomActions .btn.primary{min-height:46px; font-size:14.5px; padding:0 20px; border-radius:var(--radius-sm); letter-spacing:.01em}

    .roomDividerLine{
      border:none;
      border-top:1px solid var(--line);
      margin:0;
    }

    .bullets{margin:0; padding-left:18px; color:var(--muted); font-size:13.5px; display:grid; gap:5px; line-height:1.45}
    .bullets li{margin:0}

    @media (max-width:640px){
      .roomAmenities{grid-template-columns:1fr}
      .roomActions .btn.primary{width:100%; justify-content:center}
    }

    /* ---------- Responsive media ---------- */
    .mediaWrap{position:relative; overflow:hidden; background: linear-gradient(135deg, rgba(183,106,43,.14), rgba(240,195,154,.10));}
    .mediaWrap picture{display:block}
    .mediaWrap .mediaImg{
      width:100%;
      aspect-ratio:800/520;
      object-fit:cover;
    }

    /* ==========================================================
       Gallery Carousel
       ========================================================== */
    .galCarousel{margin-top:8px; max-width:1200px; margin-left:auto; margin-right:auto}
    .galViewport{
      position:relative;
      overflow:hidden;
      border-radius: var(--radius2);
      border:1px solid var(--line);
      background: var(--surfaceA);
      box-shadow: var(--shadow3);
    }
    .galViewport:focus-visible{box-shadow: var(--focus)}

    .galTrack{
      display:flex;
      width:100%;
      transform: translateX(0%);
      transition: transform .55s cubic-bezier(.22,1,.36,1);
      will-change: transform;
    }
    .galSlide{flex:0 0 100%; min-width:0; margin:0}
    .galCap{
      padding:12px 14px 14px;
      border-top:1px solid var(--line);
      background: var(--surfaceA);
      min-height:68px;
    }
    .galCap b{display:block; margin:0 0 4px; font-size:14px; color:var(--ink2); font-weight:800; letter-spacing:-.01em}
    .galCap span{display:block; color:var(--muted); font-size:12.5px; line-height:1.5}
    .galSlide .mediaImg{aspect-ratio: 16 / 10; max-height: 70vh; object-fit: contain; background: transparent}

    .galBar{
      margin-top:8px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      flex-wrap:wrap;
    }
    .galNavBtn{
      width:38px; height:38px;
      border-radius: var(--radius-pill);
      border:1px solid var(--controlBorder);
      background: var(--surfaceB);
      color: var(--ink2);
      font-weight:1000;
      font-size:16px;
      line-height:1;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
      transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
    }
    .galNavBtn:hover{
      transform: translateY(-1px);
      box-shadow: var(--shadow3);
      background: var(--surfaceC);
      border-color: var(--controlBorderStrong);
    }

    .galDots{display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap}
    .galDot{
      width:8px; height:8px;
      border-radius:var(--radius-pill);
      border:1px solid var(--controlBorder);
      background: var(--surfaceD);
      cursor:pointer;
      padding:0;
    }
    .galDot[aria-current="true"]{
      background: linear-gradient(135deg, rgba(183,106,43,.95), rgba(240,195,154,.85));
      border-color: rgba(240,195,154,.42);
      box-shadow: 0 10px 22px rgba(0,0,0,.18);
    }
    .galThumbs{
      margin-top:10px;
      display:grid;
      grid-template-columns:repeat(6, 1fr);
      gap:8px;
    }
    .galThumb{
      padding:0;
      border-radius:var(--radius-sm);
      border:2px solid var(--controlBorder);
      background: var(--surfaceA);
      overflow:hidden;
      cursor:pointer;
      transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    }
    .galThumb:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow3);
      border-color: var(--copper2);
    }
    .galThumb:focus-visible{box-shadow: var(--focus)}
    .galThumb[aria-current="true"]{
      border-color: var(--copper);
      box-shadow: 0 4px 16px rgba(168,101,42,.25);
    }
    .galThumb img{
      display:block;
      width:100%;
      aspect-ratio:4/3;
      object-fit:cover;
    }
    .galHint{text-align:center; margin-top:6px}
    @media (max-width:640px){
      .galNavBtn{width:44px; height:44px; border-radius: var(--radius-md)}
      .galThumbs{grid-template-columns:repeat(3, minmax(0, 1fr))}
    }
    @media (min-width:641px) and (max-width:860px){
      .galThumbs{grid-template-columns:repeat(3, 1fr)}
    }

    /* ---------- Reviews ---------- */
    .stars{letter-spacing:.08em; color: rgba(196,136,78,.98); font-weight:800; font-size:13px}
    .reviewActionRow{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center}
    .reviewSectionCard{
      background:
        radial-gradient(720px 220px at 100% 0%, rgba(232,201,160,.10), transparent 62%),
        linear-gradient(180deg, color-mix(in oklab, var(--card) 96%, var(--surfaceA)) 0%, var(--card) 100%);
    }
    .reviews{display:grid; grid-template-columns: 1.15fr .85fr; gap:14px; margin-top:14px}
    @media (max-width:980px){ .reviews{grid-template-columns:1fr} }
    .reviewsLead{
      display:grid;
      grid-template-columns:minmax(0, 1.12fr) minmax(220px, .88fr);
      gap:12px;
      align-items:stretch;
    }
    .reviewsSide{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
      align-content:start;
    }
    @media (max-width:980px){
      .reviewsLead,.reviewsSide{grid-template-columns:1fr}
    }
    .review{
      padding:16px 18px;
      border-radius: var(--radius2);
      border:1px solid var(--line);
      background: var(--surfaceA);
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    @media (hover:hover){
      .review:hover{
        transform:translateY(-2px);
        box-shadow: var(--shadow-sm);
        border-color: rgba(168,101,42,.14);
      }
    }
    html[data-theme="light"] .review:hover{
      background: var(--surface-hover-light);
      box-shadow: var(--shadow-sm);
    }
    .review b{display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--ink2); font-size:14px; font-weight:800; line-height:1.3}
    .review p{margin:9px 0 0; color:var(--muted); font-size:13.5px; line-height:1.58}
    .reviewFeatured{
      grid-row:1 / span 2;
      padding:20px;
      background:
        radial-gradient(620px 200px at 0% 0%, rgba(168,101,42,.10), transparent 72%),
        var(--card);
      box-shadow: 0 10px 28px rgba(0,0,0,.08);
      border-width:1.5px;
    }
    @media (max-width:980px){
      .reviewFeatured{grid-row:auto}
    }
    .reviewFeatured b{font-size:14.5px}
    .reviewFeatured p{
      font-size:14.5px;
      line-height:1.64;
      position:relative;
      padding-left:20px;
      max-height:6.6em;
      display:-webkit-box;
      -webkit-line-clamp:4;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .reviewFeatured p::before{
      content:"\201C";
      position:absolute;
      left:0;
      top:-6px;
      font-size:32px;
      color:var(--copper);
      line-height:1;
      opacity:.7;
    }
    .reviewMini p{
      font-size:13px;
      max-height:4.5em;
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }

    /* ---------- FAQ ---------- */
    .faqSectionCard{
      background:
        radial-gradient(620px 220px at 0% 0%, rgba(232,201,160,.14), transparent 64%),
        linear-gradient(180deg, color-mix(in oklab, var(--card) 95%, var(--softHot)) 0%, var(--card) 100%);
    }
    .faqGrid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px 14px;
      align-items:start;
      margin-top:14px;
    }
    #faq details{
      border-radius:var(--radius2);
      border:1px solid var(--line);
      background: var(--surfaceA);
      padding:14px 18px;
      margin:0;
      transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    #faq summary{cursor:pointer; font-weight:800; color:var(--ink2); list-style:none; font-size:14.5px; line-height:1.35; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:30px}
    #faq summary::-webkit-details-marker{display:none}
    #faq summary::after{content:"+"; font-size:20px; font-weight:400; color:var(--muted2); transition:transform .2s ease; flex-shrink:0}
    #faq details[open] summary::after{content:"−"}
    #faq details p{margin:11px 0 0; color:var(--muted); font-size:13.5px; line-height:1.58}
    #faq details[open]{background:var(--surfaceB); border-color:var(--controlBorderStrong); box-shadow: var(--shadow-xs)}
    html[data-theme="dark"] #faq details[open]{background:rgba(255,255,255,.05)}
    @media (hover:hover){
      html[data-theme="light"] #faq details:hover:not([open]){
        background: var(--surface-hover-light-soft);
        border-color: color-mix(in oklab, var(--line) 78%, var(--copper) 22%);
        box-shadow: var(--shadow-xs);
      }
    }
    .faqMoreWrap{
      display:flex;
      justify-content:center;
      margin-top:12px;
    }
    .faqMoreWrap[hidden]{display:none}
    .faqCTA{
      margin-top:14px;
      padding:16px;
      border-radius:var(--radius2);
      border:1px solid rgba(168,101,42,.15);
      background:rgba(168,101,42,.04);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px 16px;
      text-align:left;
    }
    .faqCTA p{margin:0; max-width:34ch; font-size:14px; color:var(--ink2); font-weight:600}
    .faqCTAActions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
    .faqCTAActions .btn{margin:0}
    @media (max-width:760px){
      .faqGrid{grid-template-columns:1fr}
      .faqCTA{flex-direction:column; align-items:flex-start}
      .faqCTAActions{width:100%}
      .faqCTAActions .btn{flex:1 1 180px; justify-content:center}
    }

    /* ---------- Map Embed (reasonable size) ---------- */
    .mapWrap{
      margin-top:0;
      border-radius: var(--radius2);
      overflow:hidden;
      border:1px solid var(--line);
      background: var(--surfaceA);
      box-shadow: var(--shadow3);
    }
    .mapWrap iframe{
      width:100%;
      height: clamp(240px, 30vw, 320px);
      border:0;
      display:block;
    }
    .locationSectionCard{
      background:
        radial-gradient(640px 220px at 100% 0%, rgba(168,101,42,.10), transparent 64%),
        linear-gradient(180deg, color-mix(in oklab, var(--card) 96%, var(--surfaceA)) 0%, var(--card) 100%);
    }
    .locationGrid{
      display:grid;
      grid-template-columns:minmax(280px, .88fr) minmax(0, 1.12fr);
      gap:18px;
      align-items:stretch;
      margin-top:14px;
    }
    .contactCard{
      display:grid;
      align-content:start;
      gap:10px;
      padding:18px;
      border-radius:var(--radius2);
      border:1px solid var(--line);
      background:linear-gradient(180deg, var(--surfaceB), color-mix(in oklab, var(--surfaceB) 82%, var(--card)));
      box-shadow: var(--shadow-xs);
    }
    .contactAddress{margin:0; font-size:14px}
    .contactActions{display:flex; gap:8px; flex-wrap:wrap}
    .contactActions .btn{min-width:122px; justify-content:center}
    .contactMeta{
      margin:2px 0 0;
      padding-top:12px;
      border-top:1px solid var(--line);
      line-height:1.65;
    }
    @media (max-width:760px){
      .locationGrid{grid-template-columns:1fr}
    }

    /* ---------- Footer ---------- */
    footer{
      margin-top:24px; padding-top:20px;
      padding-bottom: env(safe-area-inset-bottom);
      border-top:1px solid var(--line);
      color:var(--muted);
      font-size:13px;
      display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;
    }
    .footerBrand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .footerBrandText{
      display:grid;
      gap:2px;
    }
    .footerBrandName{
      display:block;
      color:var(--ink2);
      font-size:13px;
      font-weight:900;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    .footerBrandCopy{
      color:var(--muted);
      font-size:12px;
    }
    .footerMeta{
      display:grid;
      justify-items:end;
      gap:10px;
      margin-left:auto;
    }
    @media (max-width:640px){
      .footerMeta{
        width:100%;
        justify-items:start;
        margin-left:0;
      }
    }


    /* ==========================================================
       Responsive Device Layout
    ========================================================== */

    /* Mobile/Tablet header: show ONLY brand + Book Now + hamburger */
    html[data-compact="true"] .navLinks{ gap:8px; }
    html[data-compact="true"] .navLinks .chip.primary{
      min-height:40px;
      padding:10px 12px;
      border-radius: var(--radius-pill);
    }
/* Phone layout (compact + conversion-focused) */
    html[data-device="phone"] .nav{
      padding: 8px 10px;
      min-height:56px;
      padding-top: calc(8px + env(safe-area-inset-top));
      padding-left: max(10px, calc(10px + env(safe-area-inset-left)));
      padding-right: max(10px, calc(10px + env(safe-area-inset-right)));
    }
    html[data-device="phone"] .navLinks{
      gap:6px;
    }
    html[data-device="phone"] .logo{ width:44px; height:44px; }
    html[data-device="phone"] .brand small{ display:none; }
    html[data-device="phone"] .navPrimaryCta{
      min-width:auto;
      padding:0 14px;
    }

    html[data-device="phone"] .hero{
      min-height: var(--heroMinHeightPhone);
      border-radius: var(--radius-xl);
    }
    html[data-device="phone"] .heroBgImg{
      object-position: var(--heroImgPositionPhone);
    }
    html[data-device="phone"] .heroInner{
      padding: clamp(14px, 4vw, 22px) 14px;
    }
    html[data-device="phone"] .heroPanel{
      margin:0;
      width:min(100%, 92vw);
      padding: 15px;
    }
    html[data-device="phone"] .heroTitle{
      font-size: clamp(29px, 8vw, 36px);
      line-height: 1.04;
      text-wrap: balance;
    }
    html[data-device="phone"] .heroSub{
      font-size: 14px;
      line-height: 1.45;
      max-width: 32ch;
    }
    html[data-device="phone"] .heroCTA{
      gap:8px 10px;
    }
    html[data-device="phone"] .heroCTA .btn{
      min-height:48px;
      padding:0 16px;
    }
    html[data-device="phone"] .heroCTA .textLink{
      width:100%;
      justify-content:flex-start;
      padding-top:2px;
    }
    html[data-device="phone"] .heroDirectNote{
      font-size:12.5px;
    }
    html[data-device="phone"] .heroTrustRow{
      display:grid;
      gap:10px;
      align-items:start;
    }
    html[data-device="phone"] .heroContactHint{
      max-width:none;
    }
    html[data-device="phone"] .heroProofList{
      display:grid;
      grid-template-columns:1fr;
    }
    html[data-device="phone"] .heroProofItem{
      width:100%;
      justify-content:flex-start;
    }
    html[data-device="phone"] .trustStrip{
      justify-content:flex-start;
    }

    html[data-device="phone"] .btn{
      min-height: 44px;
      padding: 0 12px;
      font-size: 15px;
      line-height: 1.2;
      white-space: normal;
      text-align: center;
    }

    /* Hero CTAs: keep the highest-intent actions visible; reduce clutter */
    html[data-device="phone"] .heroCTA{
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    html[data-device="phone"] .heroCTA .btn{ width:100%; }
    html[data-device="phone"] .heroCTA .btn.primary{ grid-column:1 / -1; }
    html[data-device="phone"] .heroCTA .btn.ghost{ display:none !important; }

    /* Language + theme controls: tighten */
    html[data-device="phone"] .langSwitch{ gap:6px !important; }
    html[data-device="phone"] .iconBtn{ width:40px; height:40px; }
    html[data-device="phone"] #themeLabel{ display:none; }

    html[data-device="phone"] .ctaRow{
      display:grid;
      grid-template-columns:1fr;
    }
    html[data-device="phone"] .ctaRow .btn,
    html[data-device="phone"] .contactActions .btn,
    html[data-device="phone"] .contactActions .textLink{
      width:100%;
      justify-content:center;
    }
    html[data-device="phone"] .roomCardInner{grid-template-columns:1fr}
    html[data-device="phone"] .roomBody{padding:15px}
    html[data-device="phone"] .roomSubMedia{grid-template-columns:1fr 1fr}
    html[data-device="phone"] .reviews{gap:12px}
    html[data-device="phone"] .bookingMetaCard,
    html[data-device="phone"] .contactCard{padding:13px}
    html[data-device="phone"] .mapWrap{margin-top:0}
    html[data-device="phone"] .navPanel{
      padding:10px;
      gap:6px;
    }
    html[data-device="phone"] .navPanel .chip{
      min-height:38px;
    }

    /* --- Phase 6 Phone Refinements --- */

    /* Trust strip: horizontal scroll on narrow screens to prevent wrapping */
    html[data-device="phone"] .trustStrip{
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 8px;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    html[data-device="phone"] .trustStrip::-webkit-scrollbar{ display: none; }
    html[data-device="phone"] .trustStrip .trustItem{ flex-shrink: 0; }

    /* Section vertical rhythm — slightly tighter on phone */
    html[data-device="phone"] .section{ margin: clamp(28px, 5vw, 44px) 0; }

    /* FAQ summary — minimum 44px touch target */
    html[data-device="phone"] #faq summary{ min-height: 44px; }

    /* Reviews action row — spread full width on phone */
    html[data-device="phone"] .reviewActionRow{
      justify-content: flex-start;
      width: 100%;
      margin-top: 8px;
    }
    html[data-device="phone"] .reviewActionRow .btn{
      flex: 1 1 0;
      justify-content: center;
      min-height: 44px;
    }

    /* Gallery dots — larger invisible tap area */
    html[data-device="phone"] .galDot{
      width: 10px;
      height: 10px;
      position: relative;
    }
    html[data-device="phone"] .galDot::before{
      content: "";
      position: absolute;
      inset: -10px;
    }

    /* Destination blocks — tighter padding on phone */
    html[data-device="phone"] .destBlock{ padding: 14px 12px; }

    /* Booking support row — equal-width side-by-side buttons on phone */
    html[data-device="phone"] .bookingSupportRow{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    html[data-device="phone"] .bookingSupportRow .btn{
      justify-content: center;
      min-height: 48px;
    }

    /* Hero proof list — tighter gap on phone */
    html[data-device="phone"] .heroProofList{ gap: 8px; margin-top: 12px; }

    /* Hero panel — better bottom breathing room on phone */
    html[data-device="phone"] .heroPanel{ padding-bottom: 18px; }

    /* Head sub-line — readable width on narrow phone */
    html[data-device="phone"] .head p{ max-width: 100%; }

    /* ================================================================
       PHASE 8 — Mobile Nav + Location/Contact refinements (phone only)
       Targets: 320–430 px real-world phone widths
       ================================================================ */

    /* -------- A. NAV BAR — compact, clean, premium -------- */

    /* 1. Tighter header on phone — reduce min-height and vertical padding */
    html[data-device="phone"] .nav{
      min-height: 52px;
      padding: 6px 12px;
      padding-top: calc(6px + env(safe-area-inset-top));
      padding-left: max(12px, calc(12px + env(safe-area-inset-left)));
      padding-right: max(12px, calc(12px + env(safe-area-inset-right)));
      gap: 8px;
    }

    /* 2. Smaller logo on phone to save header real-estate */
    html[data-device="phone"] .logo{
      width: 38px;
      height: 38px;
    }

    /* 3. Brand text — tighter, readable at a glance */
    html[data-device="phone"] .brand{
      gap: 10px;
      min-width: 0;
    }
    html[data-device="phone"] .brandName{
      font-size: 12px;
      letter-spacing: .10em;
    }

    /* 4. Primary CTA chip in header — compact but tappable */
    html[data-device="phone"] .navPrimaryCta{
      min-height: 36px;
      padding: 0 12px;
      font-size: 12px;
      border-radius: var(--radius-pill);
    }

    /* 5. Hamburger button — slightly smaller but still 44px touch target */
    html[data-device="phone"] .navHamburger{
      width: 40px;
      height: 40px;
    }

    /* 6. Nav links row — tighter gap */
    html[data-device="phone"] .navLinks{
      gap: 6px;
    }

    /* 6b. Hide LINE button on phone — redundant with the fixed .hideMobile rule */
    html[data-device="phone"] .navLineBtn{
      display: none;
    }

    /* 7. Scrolled header — compact shadow, no excessive height */
    html[data-device="phone"] header.scrolled .nav{
      min-height: 48px;
    }

    /* -------- A2. MOBILE MENU PANEL — intentional, polished -------- */

    /* 8. Nav panel — full-width on phone, starts below header */
    html[data-device="phone"] .navPanel{
      position: fixed;
      top: calc(52px + env(safe-area-inset-top));
      left: 0;
      right: 0;
      bottom: 0;
      min-width: 0;
      border-radius: 0;
      border: none;
      border-top: 1px solid var(--line);
      padding: 16px 20px calc(16px + env(safe-area-inset-bottom)) 20px;
      gap: 6px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      z-index: 90;
      background: var(--uiGlass2, rgba(255,252,247,.97));
      -webkit-backdrop-filter: blur(24px) saturate(140%);
      backdrop-filter: blur(24px) saturate(140%);
    }

    /* Ensure header stays above the panel overlay */
    html[data-device="phone"] header{
      z-index: 100;
    }
    /* Lock body scroll when mobile menu is open */
    html[data-device="phone"] body.nav-open{
      overflow: hidden;
    }
    /* Give header a solid frosted-glass background when menu is open.
       backdrop-filter goes on ::before (not the header itself) so it never
       creates a new containing block that would collapse the fixed navPanel. */
    html[data-device="phone"] .navGroup[open] ~ *{
      background: var(--uiGlass2, rgba(255,252,247,.97));
    }
    html[data-device="phone"] header:has(.navGroup[open])::before{
      opacity:1;
      background: var(--uiGlass2, rgba(255,252,247,.97));
    }

    /* 9. Panel brand block — clean spacing */
    html[data-device="phone"] .navPanelBrand{
      padding-bottom: 6px;
      gap: 10px;
    }
    html[data-device="phone"] .navPanelBrand .logo{
      width: 36px;
      height: 36px;
    }
    html[data-device="phone"] .navPanelBrandTitle{
      font-size: 12px;
    }
    html[data-device="phone"] .navPanelBrandCopy{
      font-size: 11px;
      margin-top: 2px;
    }

    /* 10. Panel dividers — subtle, less vertical waste */
    html[data-device="phone"] .navPanelDivider{
      margin: 4px 0;
    }

    /* 11. Panel chips — consistent, finger-friendly, balanced */
    html[data-device="phone"] .navPanel .chip{
      min-height: 44px;
      font-size: 14px;
      padding: 0 14px;
      border-radius: var(--radius-sm);
      justify-content: flex-start;
    }
    html[data-device="phone"] .navPanel .chip.primary{
      justify-content: center;
      min-height: 46px;
      font-size: 14px;
      border-radius: var(--radius-pill);
    }

    /* 12. Panel language block — tighter */
    html[data-device="phone"] .navPanelLangBlock{
      gap: 6px;
    }
    html[data-device="phone"] .navPanelLang{
      gap: 8px;
    }
    html[data-device="phone"] .navPanelLang .flagItem{
      width: 44px;
      height: 44px;
      font-size: 22px;
      border-radius: var(--radius-pill);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* 13. Theme toggle in panel — compact */
    html[data-device="phone"] .navPanel #themeToggle{
      min-height: 40px;
      font-size: 13px;
    }

    /* -------- B. LOCATION & CONTACT SECTION — mobile conversion -------- */

    /* 14. Contact card — better padding and gap rhythm on phone */
    html[data-device="phone"] .contactCard{
      padding: 16px;
      gap: 12px;
    }

    /* 15. Section heading — tighter on phone */
    html[data-device="phone"] #location .head{
      margin-bottom: 10px;
    }
    html[data-device="phone"] #location .head h2{
      font-size: clamp(20px, 5.5vw, 24px);
    }
    html[data-device="phone"] #location .head p{
      font-size: 13px;
      margin-top: 4px;
    }

    /* 16. Address — clean, readable */
    html[data-device="phone"] .contactAddress{
      font-size: 13.5px;
      line-height: 1.55;
    }
    html[data-device="phone"] .contactAddress .fine{
      display: block;
      margin-top: 2px;
    }

    /* 17. Operating hours — compact pill */
    html[data-device="phone"] .contactHours{
      padding: 10px 12px;
      font-size: 12.5px;
      gap: 6px;
    }

    /* 18. Contact action buttons — full-width stack for thumb reach */
    html[data-device="phone"] .contactActions{
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    html[data-device="phone"] .contactActions .btn{
      width: 100%;
      min-height: 46px;
      font-size: 15px;
      font-weight: 800;
      justify-content: center;
    }
    html[data-device="phone"] .contactActions .btn.primary{
      min-height: 48px;
      font-size: 15px;
    }

    /* 19. Contact meta rows — better alignment and tap targets */
    html[data-device="phone"] .contactMeta{
      padding-top: 10px;
      margin-top: 4px;
    }
    html[data-device="phone"] .contactMetaRow{
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 36px;
      font-size: 13px;
    }
    html[data-device="phone"] .contactMetaRow a{
      text-decoration: underline;
      text-decoration-color: rgba(168,101,42,.35);
      text-underline-offset: 2px;
    }
    html[data-device="phone"] .contactMetaIcon{
      flex-shrink: 0;
      width: 20px;
      text-align: center;
    }

    /* 20. Secondary links (Maps/Facebook) — prominent on phone */
    html[data-device="phone"] .contactSecondary{
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px 12px;
      align-items: center;
      font-size: 13px;
    }
    html[data-device="phone"] .contactSecondary a{
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 32px;
      font-weight: 700;
    }

    /* 21. Map embed — controlled height on phone, not dominating */
    html[data-device="phone"] .mapWrap{
      margin-top: 4px;
      border-radius: var(--radius-sm);
    }
    html[data-device="phone"] .mapWrap iframe{
      height: clamp(200px, 48vw, 260px);
    }

    /* 22. Location card overall — tighter padding on phone */
    html[data-device="phone"] .locationSectionCard{
      padding: 14px;
    }

    /* 23. Location grid — less gap on phone */
    html[data-device="phone"] .locationGrid{
      gap: 12px;
      margin-top: 10px;
    }

    /* 24. Notes disclaimer — compact */
    html[data-device="phone"] .contactCard > .fine:last-child{
      font-size: 11px;
      line-height: 1.5;
      opacity: 0.75;
    }

    /* -------- Extra-small phone (≤359px) — prevent overflow -------- */
    @media (max-width: 359px){
      html[data-device="phone"] .navPrimaryCta{
        padding: 0 10px;
        font-size: 11px;
      }
      html[data-device="phone"] .brandName{
        font-size: 11px;
        letter-spacing: .08em;
      }
      html[data-device="phone"] .contactActions .btn{
        font-size: 14px;
        min-height: 44px;
      }
    }

    /* Tablet: reduce some noise but keep context */
    html[data-device="tablet"] .hero{
      min-height: clamp(520px, 75vh, 820px);
    }
    html[data-device="tablet"] .heroCTA .btn.ghost{ display:none !important; }

    /* Footer language strip (mobile/tablet only, since header is minimal) */
    .footerLang{
      display:none;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      flex-wrap:wrap;
    }
    .footerLang .chip{min-height:34px; padding:7px 9px; font-size:12px}
    .footerLang .fine{margin:0 2px 0 0; white-space:nowrap}
    html[data-compact="true"] .footerLang{display:flex !important}
    /* Narrow mobile fallback: stack heroCTA buttons at ≤380px (CSS-only, no JS dependency) */
    @media (max-width:380px){
      .heroCTA{display:flex; flex-direction:column; align-items:stretch; gap:10px}
      .heroCTA .btn{width:100%; text-align:center; min-height:48px}
      .heroCTA .textLink{width:100%; justify-content:flex-start; padding:6px 0}
    }
/* ---------- Print ---------- */
    @media print{
      html,body{background:#fff !important; color:#000 !important}
      header{display:none !important}
      .card,.hero{box-shadow:none !important; background:#fff !important; border:1px solid rgba(0,0,0,.18) !important}
      .btn,.chip{box-shadow:none !important}
      a{color:#000 !important; text-decoration:none !important}
      .mapWrap{display:none !important}
    }

    /* ---------- Destination section ---------- */
    .destinationSectionCard{
      background:
        radial-gradient(560px 180px at 0% 0%, rgba(168,101,42,.08), transparent 64%),
        linear-gradient(180deg, color-mix(in oklab, var(--card) 97%, var(--surfaceA)) 0%, var(--card) 100%);
    }
    .destGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:var(--gridGap);
      margin:16px 0 0;
    }
    @media(max-width:760px){
      .destGrid{grid-template-columns:1fr}
    }
    .destBlock{
      padding:18px 18px 16px;
      border-radius:var(--radius2);
      border:1px solid var(--line);
      background:linear-gradient(180deg, var(--surfaceA), color-mix(in oklab, var(--surfaceA) 72%, var(--card)));
      box-shadow: var(--shadow-xs);
    }
    .destBlock h3{
      font-size:clamp(15px,1.3vw,18px);
      font-weight:700;
      color:var(--copper);
      margin:0 0 6px;
    }
    .destBlock p{
      font-size:clamp(13px,1.1vw,15px);
      line-height:1.58;
      color:var(--ink2);
      margin:0;
    }
    .destList{
      padding-left:18px;
      margin:0;
      font-size:clamp(13px,1.1vw,15px);
      line-height:1.58;
      color:var(--ink2);
    }
    .destList li{margin-bottom:3px}
    .destCTA{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:8px 10px;
      padding-top:14px;
      border-top:1px solid var(--line);
      margin-top:14px;
    }

    /* ========================================
       Visual Hierarchy Enhancements
       ======================================== */

    /* Room "Best For" guidance */
    .roomBestFor{
      font-size:14px;
      color:var(--muted);
      margin:0;
      line-height:1.55;
      font-style:italic;
    }
    .roomBestFor strong{color:var(--champagne); font-style:normal; font-weight:700}

    /* Contact section — secondary links */
    .contactSecondary{
      margin-top:12px;
      opacity:0.8;
    }
    .contactSecondary a{
      text-decoration:underline;
      text-decoration-color:rgba(168,101,42,0.4);
      transition:text-decoration-color 0.2s;
    }
    .contactSecondary a:hover{
      text-decoration-color:var(--copper);
    }

    /* Booking section trust info */
    #book .fine p{
      margin:6px 0;
    }
    #book .fine p:first-child{
      margin-top:0;
    }

    /* Booking section emphasis */
    #book .card{
      box-shadow:0 2px 12px rgba(168,101,42,0.08);
    }

    /* ---------- LINE nav button (header) ---------- */
    .navLineBtn{
      display:inline-flex; align-items:center; gap:6px;
      padding:6px 12px;
      border-radius:var(--btn-radius);
      border:1px solid rgba(0,195,91,.38);
      background: linear-gradient(135deg, rgba(0,185,0,.13) 0%, rgba(168,224,40,.08) 100%);
      color:var(--ink2);
      font-size:13px;
      font-weight:700;
      text-decoration:none;
      transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
      white-space:nowrap;
    }
    .navLineBtn:hover{
      background: linear-gradient(135deg, rgba(0,185,0,.22) 0%, rgba(168,224,40,.14) 100%);
      border-color: rgba(0,195,91,.58);
      box-shadow: 0 0 0 3px rgba(0,195,91,.10);
    }
    .navLineIcon{font-size:16px; line-height:1}

    /* ---------- Hero social proof / review badge ---------- */
    .heroReviewBadge{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 14px;
      border-radius:var(--radius-sm);
      background: rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.18);
      color:rgba(255,255,255,.92);
      font-size:13px;
      font-weight:600;
      text-decoration:none;
      transition: background .14s ease;
    }
    .heroReviewBadge:hover{ background: rgba(255,255,255,.16) }
    .heroReviewStars{ color:#F6C644; letter-spacing:.05em; font-size:14px }
    .heroReviewCount{ opacity:.78; font-weight:500 }

    /* ---------- Hero urgency / best rate badge ---------- */
    .heroUrgency{
      margin-top:10px;
      font-size:12.5px;
      color: color-mix(in oklab, var(--champagne2) 90%, white);
      font-weight:600;
      letter-spacing:.01em;
    }
    .heroGuarantee{
      display:inline-flex; align-items:center; gap:5px;
      font-size:12.5px;
      color: color-mix(in oklab, var(--champagne2) 90%, white);
      font-weight:600;
    }
    .heroGuarantee .checkIcon{ color: #7ed87e; font-style:normal }

    /* ---------- Booking form guarantee note ---------- */
    .bookGuarantee{
      display:flex; align-items:center; gap:6px;
      padding:10px 14px;
      border-radius:var(--radius-sm);
      border:1px solid color-mix(in oklab, var(--copper) 20%, var(--line));
      background: color-mix(in oklab, var(--copper) 4%, var(--surfaceA));
      font-size:13px;
      font-weight:600;
      color: var(--ink2);
    }
    .bookGuarantee .checkIcon{ color: var(--copper2); font-style:normal; font-size:16px }

    /* ---------- Inline style replacements ---------- */
    .roomsFine{margin-top:16px}
    .sep-dot{opacity:.9}

    /* ---------- Premium polish: subtle refinements ---------- */
    .head h2{
      background: linear-gradient(135deg, var(--ink2) 0%, color-mix(in oklab, var(--ink2) 82%, var(--copper)) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    @supports not (-webkit-background-clip: text){
      .head h2{ color: var(--ink2) }
    }

    /* Refined card hover for room cards */
    .roomCard{
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    @media (hover:hover){
      .roomCard:hover{
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
        border-color: color-mix(in oklab, var(--copper) 15%, var(--line));
      }
    }
    html[data-theme="light"] .roomCard:hover{
      background: var(--surface-hover-light-soft);
      box-shadow: var(--shadow-md);
    }

    /* Smoother link underline transitions */
    a:not(.btn):not(.chip):not(.brand):not(.textLink){
      transition: color .16s ease;
    }

    /* Refined focus ring */
    :focus-visible{
      outline: none;
      box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px color-mix(in oklab, var(--copper) 55%, transparent);
    }

    /* ========================================================
       2026-03 Design Refinement Pass
       – Hierarchy, rhythm, conversion, premium feel
       ======================================================== */

    /* --- 1. Section Hierarchy & Spacing --- */
    .section{ margin: clamp(48px, 5.5vw, 72px) 0; }

    /* Conversion-primary sections get accent glow */
    #book > .card{
      border-color: color-mix(in oklab, var(--copper) 18%, var(--line));
      box-shadow: 0 8px 32px rgba(168,101,42,.10), var(--shadow-card-light);
    }
    #reviews > .card{
      border-color: color-mix(in oklab, var(--copper) 10%, var(--line));
    }

    /* Informational sections: tighter / calmer */
    #destination{ margin-top: clamp(36px, 4vw, 56px); margin-bottom: clamp(36px, 4vw, 56px); }

    /* --- 2. Typography Refinement --- */
    .head h2{
      font-size: clamp(28px, 3vw, 42px);
      letter-spacing: -.03em;
      line-height: 1.08;
    }
    .head p{
      font-size: 14px;
      line-height: 1.55;
      margin-top: 8px;
      max-width: 52ch;
    }
    /* Subtitle intro text on primary sections */
    #rooms .head p, #book .head p{ color: var(--ink); }

    /* --- 3. Button Polish --- */
    .btn{
      border-radius: var(--radius-sm);
      font-weight: 800;
      letter-spacing: .01em;
      transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
    }
    .btn.primary{
      border-radius: var(--radius-md);
      padding: 0 clamp(18px, 2vw, 24px);
      min-height: 48px;
      font-size: 15.5px;
    }
    .btn.secondary{
      min-height: 44px;
    }

    /* --- 4. Offer Cards Refinement --- */
    .offers{ gap: clamp(14px, 1.8vw, 20px); margin-top: 16px; }
    .offer{
      padding: 22px 20px;
      border-radius: var(--radius-md);
      display: flex;
      flex-direction: column;
    }
    .offer .offerIcon{
      width: 52px; height: 52px;
      border-radius: var(--radius-md);
      font-size: 24px;
      margin-bottom: 16px;
      background: linear-gradient(135deg, rgba(168,101,42,.14), rgba(196,136,78,.08));
      border: 1px solid rgba(168,101,42,.16);
    }
    .offer b{ font-size: 15.5px; margin-bottom: 8px; }
    .offer p{ font-size: 13.5px; line-height: 1.6; }
    /* Featured first card */
    .offer:first-child{
      border-color: color-mix(in oklab, var(--copper) 22%, var(--line));
      background: linear-gradient(180deg, rgba(168,101,42,.06) 0%, var(--surfaceA) 100%);
    }
    .offer:first-child .offerIcon{
      background: linear-gradient(135deg, rgba(168,101,42,.22), rgba(196,136,78,.12));
      border-color: rgba(168,101,42,.28);
    }

    /* --- 5. Reviews Enhancement --- */
    .reviews{ gap: 16px; margin-top: 14px; }
    .reviewsLead, .reviewsSide{ gap: 14px; }
    .review{
      padding: 18px 20px;
      border-radius: var(--radius-md);
      position: relative;
    }
    /* --- 6. FAQ Split Layout --- */
    .faqLayout{
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: var(--gridGap);
      align-items: start;
      margin-top: 12px;
    }
    @media(max-width:860px){
      .faqLayout{ grid-template-columns: 1fr; }
    }
    .faqHelpPanel{
      padding: 20px;
      border-radius: var(--radius-md);
      border: 1px solid color-mix(in oklab, var(--copper) 14%, var(--line));
      background: linear-gradient(180deg, rgba(168,101,42,.05) 0%, var(--surfaceA) 100%);
      display: grid;
      gap: 14px;
      position: sticky;
      top: calc(var(--nav-h) + 16px);
    }
    .faqHelpPanel h3{
      font-size: 16px;
      font-weight: 800;
      color: var(--ink2);
      margin: 0;
    }
    .faqHelpPanel p{
      font-size: 13px;
      color: var(--muted);
      margin: 0;
      line-height: 1.55;
    }
    .faqHelpPanel .btn{ width: 100%; justify-content: center; }
    .faqHelpPanel .helpMethods{
      display: grid;
      gap: 8px;
    }
    .faqHelpPanel .helpMethod{
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13.5px;
      color: var(--ink2);
      font-weight: 600;
    }
    .faqHelpPanel .helpMethod span:first-child{
      width: 32px; height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      background: rgba(168,101,42,.10);
      font-size: 16px;
      flex-shrink: 0;
    }
    #faq details{
      padding: 16px 20px;
      border-radius: var(--radius-md);
    }
    #faq summary{
      font-size: 15px;
      min-height: 34px;
    }

    /* --- 7. Destination Section Enhancement --- */
    .destGrid{ gap: clamp(14px, 2vw, 22px); margin-top: 16px; }
    .destBlock{
      padding: 18px;
      border-radius: var(--radius-md);
      border: 1px solid var(--line);
      background: var(--surfaceA);
    }
    .destBlock h3{
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: clamp(15px, 1.4vw, 18px);
    }
    .destBlock h3 .destIcon{
      width: 28px; height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-xs);
      background: rgba(168,101,42,.10);
      font-size: 15px;
      flex-shrink: 0;
    }

    /* --- 8. Location / Contact Enhancement --- */
    .locationGrid{
      grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
    }
    .contactCard{
      gap: 14px;
      padding: 20px;
    }
    .contactActions{
      gap: 8px;
    }
    .contactActions .btn{
      flex: 1;
      justify-content: center;
      min-height: 46px;
      font-size: 15px;
    }
    .mapWrap iframe{
      height: clamp(280px, 34vw, 400px);
    }
    .contactHours{
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-radius: var(--radius-sm);
      background: rgba(168,101,42,.05);
      border: 1px solid rgba(168,101,42,.10);
      font-size: 13px;
      color: var(--ink2);
    }

    /* --- 9. Mobile Sticky Bottom Bar --- */
    .stickyBottom{
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 90;
      background: var(--uiGlass2, rgba(255,252,247,.96));
      border-top: 1px solid var(--line);
      padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
      -webkit-backdrop-filter: blur(16px) saturate(130%);
      backdrop-filter: blur(16px) saturate(130%);
    }
    .stickyBottomInner{
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      gap: 8px;
      align-items: center;
    }
    .stickyBottomNote{
      margin: 0;
      font-size: 12px;
      line-height: 1.45;
      color: var(--ink2);
      font-weight: 700;
    }
    .stickyBottomActions{
      display: grid;
      grid-template-columns: 1fr 1fr 1.4fr;
      gap: 8px;
      align-items: center;
    }
    .stickyBottom .btn{
      width: 100%;
      justify-content: center;
      min-height: 44px;
      font-size: 14px;
    }
    html[data-device="phone"] .stickyBottom{ display: block; }
    html[data-device="phone"] main{ padding-bottom: 72px; }
    html[data-device="phone"] footer{ padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

    /* --- 10. Section Intro Pattern --- */
    .sectionIntro{
      font-size: 14px;
      color: var(--muted);
      max-width: 48ch;
      line-height: 1.55;
      margin: -6px 0 0;
    }

    /* --- Compact density adjustments --- */
    html[data-density="compact"] .section{ margin: clamp(36px, 4.5vw, 56px) 0; }
    html[data-density="ultra-compact"] .section{ margin: clamp(28px, 3.5vw, 44px) 0; }

    /* ========================================================
       2026-03 Front-Page Section Refresh
       Reviews, FAQ, destination, location/contact
       ======================================================== */

    .reviewHead,
    #faq .head,
    #destination .head,
    #location .head{
      align-items:flex-start;
      margin-bottom:18px;
    }
    .reviewHead p,
    #faq .head p,
    #destination .head p,
    #location .head p{
      max-width:52ch;
      font-size:15px;
      line-height:1.65;
    }

    .reviewsGrid{
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(320px, 360px);
      gap:20px;
      margin-top:18px;
      align-items:start;
    }
    .reviewsColumn,
    .reviewsStack{
      display:grid;
      gap:16px;
    }
    .review{
      padding:20px;
      border-color:color-mix(in oklab, var(--line) 82%, rgba(168,101,42,.18));
      background:linear-gradient(180deg, color-mix(in oklab, var(--surfaceA) 76%, var(--card)) 0%, var(--card) 100%);
      box-shadow:0 12px 24px rgba(59,43,22,.06);
    }
    html[data-theme="dark"] .review{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      box-shadow:0 12px 24px rgba(0,0,0,.18);
    }
    .review b{
      display:grid;
      gap:6px;
      color:var(--ink2);
      font-size:16px;
      line-height:1.35;
    }
    .stars{
      display:inline-flex;
      align-items:center;
      letter-spacing:.08em;
    }
    .review p{
      margin:0;
      font-size:15px;
      line-height:1.7;
      color:var(--muted);
      max-height:none;
      display:block;
      overflow:visible;
      -webkit-line-clamp:unset;
      padding-left:0;
    }
    .reviewFeatured{
      background:
        radial-gradient(560px 220px at 0% 0%, rgba(168,101,42,.12), transparent 72%),
        linear-gradient(180deg, color-mix(in oklab, var(--card) 96%, rgba(168,101,42,.05)) 0%, var(--card) 100%);
      border-color:color-mix(in oklab, var(--copper) 18%, var(--line));
      box-shadow:0 18px 34px rgba(59,43,22,.10);
    }
    .reviewFeatured p{
      position:relative;
      padding-left:24px;
    }
    .reviewFeatured p::before{
      content:"\201C";
      position:absolute;
      left:0;
      top:-2px;
      font-size:30px;
      line-height:1;
      color:var(--copper);
      opacity:.8;
    }
    .reviewTrustPanel{
      display:grid;
      gap:14px;
      align-content:start;
      padding:22px;
      border-radius:var(--radius-md);
      border:1px solid color-mix(in oklab, var(--copper) 18%, var(--line));
      background:linear-gradient(180deg, rgba(168,101,42,.08) 0%, color-mix(in oklab, var(--surfaceA) 88%, var(--card)) 100%);
      box-shadow:0 18px 34px rgba(59,43,22,.08);
    }
    .reviewSourceBadge{
      justify-self:start;
      min-height:34px;
      padding:0 12px;
    }
    .reviewTrustPanel h3{
      margin:0;
      font-size:22px;
      line-height:1.2;
      color:var(--ink2);
      font-family:var(--display);
    }
    .reviewTrustPanel p{
      margin:0;
      font-size:15px;
      line-height:1.65;
      color:var(--muted);
    }
    .reviewActionCard{
      display:grid;
      gap:10px;
    }
    .reviewActionCard .btn{
      width:100%;
      justify-content:center;
      min-height:48px;
    }
    @media (max-width:940px){
      .reviewsGrid{
        grid-template-columns:1fr;
      }
    }

    .faqMain{
      min-width:0;
    }
    .faqLayout{
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(300px, 340px);
      gap:20px;
      margin-top:18px;
      align-items:start;
    }
    .faqGrid{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
      margin-top:0;
    }
    #faq details{
      position:relative;
      overflow:hidden;
      padding:0;
      border-radius:var(--radius-md);
      border:1px solid color-mix(in oklab, var(--line) 82%, rgba(168,101,42,.22));
      background:linear-gradient(180deg, color-mix(in oklab, var(--surfaceA) 84%, var(--card)) 0%, var(--card) 100%);
      box-shadow:0 8px 18px rgba(59,43,22,.04);
      transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    #faq details::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:4px;
      border-radius:999px;
      background:linear-gradient(180deg, rgba(168,101,42,.78), rgba(232,201,160,.34));
      opacity:.42;
      transition:opacity .18s ease;
    }
    #faq details[open]{
      border-color:color-mix(in oklab, var(--copper) 20%, var(--line));
      box-shadow:0 12px 22px rgba(59,43,22,.08);
    }
    #faq details[open]::before{
      opacity:1;
    }
    #faq summary{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      min-height:72px;
      padding:18px 20px 18px 24px;
      cursor:pointer;
      list-style:none;
      color:var(--ink2);
      font-size:16px;
      font-weight:800;
      line-height:1.45;
    }
    #faq summary::-webkit-details-marker{display:none}
    #faq summary::after{
      content:"";
      width:10px;
      height:10px;
      border-right:2px solid currentColor;
      border-bottom:2px solid currentColor;
      transform:rotate(45deg);
      transition:transform .2s ease;
      flex:0 0 auto;
      margin-right:4px;
      color:var(--muted2);
    }
    #faq details[open] summary::after{
      transform:rotate(225deg);
    }
    .faqAnswer{
      display:grid;
      grid-template-rows:0fr;
      transition:grid-template-rows .22s ease;
    }
    #faq details[open] .faqAnswer{
      grid-template-rows:1fr;
    }
    .faqAnswer p,
    #faq details > p{
      margin:0;
      overflow:hidden;
      padding:0 20px 18px 24px;
      color:var(--muted);
      font-size:15px;
      line-height:1.65;
    }
    .faqMoreWrap{
      display:flex;
      justify-content:flex-start;
      margin-top:14px;
    }
    .faqMoreWrap .btn{
      min-height:46px;
      border-radius:999px;
    }
    .faqHelpPanel{
      display:grid;
      gap:16px;
      padding:22px;
      border-radius:var(--radius-md);
      border:1px solid color-mix(in oklab, var(--copper) 18%, var(--line));
      background:linear-gradient(180deg, rgba(168,101,42,.08) 0%, color-mix(in oklab, var(--surfaceA) 92%, var(--card)) 100%);
      box-shadow:0 18px 34px rgba(59,43,22,.08);
      position:sticky;
      top:calc(var(--nav-h) + 20px);
    }
    .faqHelpPanel h3{
      margin:0;
      font-size:20px;
      line-height:1.2;
      color:var(--ink2);
    }
    .faqHelpPanel p{
      margin:0;
      font-size:15px;
      line-height:1.65;
      color:var(--muted);
    }
    .faqHelpPanel .helpMethods{
      display:grid;
      gap:10px;
    }
    .faqHelpPanel .helpMethod{
      display:flex;
      align-items:center;
      gap:12px;
      min-height:48px;
      padding:10px 12px;
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.03);
      font-size:15px;
      color:var(--ink2);
      font-weight:600;
    }
    .faqHelpPanel .helpMethod span:first-child{
      width:34px;
      height:34px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:12px;
      background:rgba(168,101,42,.12);
      flex:0 0 auto;
    }
    .faqHelpPanel .btn{
      width:100%;
      justify-content:center;
      min-height:48px;
    }
    @media (max-width:860px){
      .faqLayout{
        grid-template-columns:1fr;
      }
      .faqHelpPanel{
        position:static;
      }
      #faq summary{
        min-height:64px;
      }
    }

    .destGrid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:18px;
      margin-top:18px;
    }
    .destBlock{
      position:relative;
      overflow:hidden;
      display:grid;
      gap:12px;
      min-height:220px;
      padding:22px;
      border-radius:var(--radius-md);
      border:1px solid color-mix(in oklab, var(--line) 82%, rgba(168,101,42,.22));
      background:linear-gradient(180deg, color-mix(in oklab, var(--surfaceA) 88%, var(--card)) 0%, var(--card) 100%);
      box-shadow:0 12px 24px rgba(59,43,22,.06);
    }
    .destBlock::after{
      content:"";
      position:absolute;
      inset:auto -48px -56px auto;
      width:140px;
      height:140px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(168,101,42,.12) 0%, rgba(168,101,42,0) 72%);
      pointer-events:none;
    }
    .destBlock h3{
      margin:0;
      display:flex;
      align-items:center;
      gap:10px;
      font-size:18px;
      line-height:1.3;
      color:var(--ink2);
    }
    .destBlock p{
      margin:0;
      font-size:15px;
      line-height:1.7;
      color:var(--muted);
    }
    .destList{
      padding-left:0;
      list-style:none;
      display:grid;
      gap:10px;
      margin:0;
    }
    .destList li{
      display:grid;
      gap:4px;
      margin:0;
      padding:14px 16px;
      border:1px solid color-mix(in oklab, var(--line) 80%, rgba(168,101,42,.16));
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.03);
    }
    html[data-theme="light"] .destList li{
      background:rgba(255,255,255,.56);
    }
    .destList strong{
      font-size:15px;
      color:var(--ink2);
    }
    .destList span{
      font-size:14px;
      line-height:1.55;
      color:var(--muted);
    }
    @media (max-width:900px){
      .destGrid{
        grid-template-columns:1fr;
      }
      .destBlock{
        min-height:auto;
      }
    }

    .locationGrid{
      display:grid;
      grid-template-columns:minmax(320px, .82fr) minmax(0, 1.18fr);
      gap:20px;
      align-items:start;
      margin-top:18px;
    }
    .contactCard{
      display:grid;
      gap:16px;
      padding:22px;
      border-radius:var(--radius-md);
      border:1px solid color-mix(in oklab, var(--line) 82%, rgba(168,101,42,.20));
      background:linear-gradient(180deg, rgba(168,101,42,.07) 0%, color-mix(in oklab, var(--surfaceB) 84%, var(--card)) 100%);
      box-shadow:0 18px 34px rgba(59,43,22,.08);
    }
    .contactIntro{
      display:grid;
      gap:12px;
    }
    .contactPrimaryNumber{
      font-size:clamp(30px, 3vw, 42px);
      line-height:1;
      font-weight:900;
      color:var(--ink2);
      text-decoration:none;
      letter-spacing:-.03em;
    }
    .contactPrimaryEmail{
      font-size:16px;
      line-height:1.4;
      font-weight:700;
      color:var(--ink2);
      text-decoration:none;
      word-break:break-word;
    }
    .contactAddress{
      margin:0;
      font-size:15px;
      line-height:1.7;
    }
    .contactHours{
      display:flex;
      align-items:center;
      gap:10px;
      padding:12px 14px;
      border-radius:var(--radius-sm);
      background:rgba(168,101,42,.05);
      border:1px solid rgba(168,101,42,.10);
      font-size:14px;
      color:var(--ink2);
    }
    .contactActions{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:10px;
    }
    .contactActions .btn{
      min-width:0;
      min-height:48px;
      width:100%;
      justify-content:center;
    }
    .contactMetaGrid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:10px;
      margin:0;
      padding-top:0;
      border-top:none;
    }
    .contactMetaRow{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
      min-height:108px;
      padding:14px;
      border:1px solid color-mix(in oklab, var(--line) 80%, rgba(168,101,42,.16));
      border-radius:var(--radius-sm);
      background:color-mix(in oklab, var(--surfaceA) 82%, var(--card));
    }
    .contactMetaRow a,
    .contactMetaRow span:last-child{
      font-size:15px;
      line-height:1.55;
      font-weight:700;
      color:var(--ink2);
      text-decoration:none;
      word-break:break-word;
    }
    .contactMetaIcon{
      width:36px;
      height:36px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:12px;
      background:rgba(168,101,42,.12);
      color:var(--ink2);
      font-size:16px;
      flex:0 0 auto;
    }
    .contactNote{
      padding:14px 16px;
      border-radius:var(--radius-sm);
      border:1px solid color-mix(in oklab, var(--line) 80%, rgba(168,101,42,.16));
      background:rgba(168,101,42,.05);
      font-size:13px;
      line-height:1.6;
      color:var(--muted);
    }
    .locationMapPanel{
      display:grid;
      gap:12px;
      min-width:0;
    }
    .mapWrap{
      box-shadow:0 18px 34px rgba(59,43,22,.08);
    }
    .mapWrap iframe{
      height:clamp(360px, 40vw, 500px);
    }
    .locationInfoStrip{
      padding:14px 16px;
      border-radius:var(--radius-md);
      border:1px solid color-mix(in oklab, var(--line) 82%, rgba(168,101,42,.18));
      background:linear-gradient(180deg, color-mix(in oklab, var(--surfaceA) 88%, var(--card)) 0%, var(--card) 100%);
      box-shadow:var(--shadow-xs);
    }
    .locationInfoStrip .btn{
      width:100%;
      min-height:48px;
      justify-content:center;
    }
    @media (max-width:980px){
      .locationGrid{
        grid-template-columns:1fr;
      }
      .contactActions{
        grid-template-columns:1fr;
      }
      .contactMetaGrid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width:640px){
      .contactCard{
        padding:18px;
      }
      .contactPrimaryNumber{
        font-size:30px;
      }
      .contactMetaGrid{
        grid-template-columns:1fr;
      }
      .locationInfoStrip{
        padding:12px 14px;
      }
      .mapWrap iframe{
        height:320px;
      }
    }

    .siteFooter{
      margin-top:clamp(28px, 4vw, 44px);
      padding-top:18px;
      padding-bottom:calc(8px + env(safe-area-inset-bottom));
      border-top:1px solid var(--line);
    }