:root {
        --black:#0a0907;
        --deep:#100e0b;
        --dark:#1a1612;
        --teal:#1d4a47;
        --teal-light:#2a6b66;
        --gold:#c9a96e;
        --gold-dim:#8a6f3f;
        --cream:#e8dcc8;
        --cream-dim:#b8a888;
        --white:#f5f0e8;
      }
      *,*::before,*::after {
        margin:0;
        padding:0;
        box-sizing:border-box
      }
      html {
        scroll-behavior:smooth
      }
      body {
        background:var(--black);
        color:var(--cream);
        font-family:'Cormorant Garamond',serif;
        overflow-x:hidden;
        /* cursor handled in site.css */}
      body::before {
        content:'';
        position:fixed;
        inset:0;
        background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
        opacity:.035;
        pointer-events:none;
        z-index:100
      }
      /* cursor */
      .cursor {
        width:10px;
        height:10px;
        border-radius:50%;
        background:var(--gold);
        position:fixed;
        top:0;
        left:0;
        pointer-events:none;
        z-index:9999;
        transform:translate(-50%,-50%);
        mix-blend-mode:difference;
        transition:width .2s,height .2s
      }
      .cursor-ring {
        width:36px;
        height:36px;
        border:1px solid var(--gold);
        border-radius:50%;
        position:fixed;
        top:0;
        left:0;
        pointer-events:none;
        z-index:9998;
        transform:translate(-50%,-50%);
        opacity:.5
      }
      /* nav */
      nav {
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:500;
        padding:24px clamp(32px,6vw,80px);
        display:flex;
        align-items:center;
        justify-content:space-between;
        transition:background .4s
      }
      nav.scrolled {
        background:rgba(10,9,7,.95);
        backdrop-filter:blur(8px)
      }
      .nav-logo img {
        height:40px;
        width:auto;
        display:block
      }
      .nav-links {
        display:flex;
        gap:clamp(20px,3vw,44px);
        list-style:none;
        align-items:center
      }
      .nav-links a {
        font-family:'Josefin Sans',sans-serif;
        font-size:10px;
        font-weight:300;
        letter-spacing:.35em;
        text-transform:uppercase;
        color:var(--cream-dim);
        text-decoration:none;
        transition:color .25s
      }
      .nav-links a:hover,.nav-links a.active {
        color:var(--gold)
      }
      .nav-reserve {
        border:1px solid rgba(201,169,110,.4);
        padding:10px 22px;
        color:var(--cream)!important;
        transition:all .3s!important
      }
      .nav-reserve:hover {
        background:var(--gold);
        color:var(--black)!important;
        border-color:var(--gold)!important
      }
      /* hamburger */
      .nav-burger {
        display:none;
        flex-direction:column;
        gap:5px;
        cursor:pointer;
        background:none;
        border:none;
        padding:4px
      }
      .nav-burger span {
        display:block;
        width:24px;
        height:1px;
        background:var(--cream);
        transition:all .3s
      }
      /* mobile nav */
      .nav-mobile {
        display:none;
        position:fixed;
        inset:0;
        background:var(--black);
        z-index:490;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:32px
      }
      .nav-mobile.open {
        display:flex
      }
      .nav-mobile a {
        font-family:'Playfair Display',serif;
        font-size:clamp(28px,6vw,48px);
        font-style:italic;
        color:var(--white);
        text-decoration:none;
        transition:color .25s
      }
      .nav-mobile a:hover {
        color:var(--gold)
      }
      /* sections */
      .section-label {
        font-family:'Josefin Sans',sans-serif;
        font-size:10px;
        font-weight:100;
        letter-spacing:.4em;
        text-transform:uppercase;
        color:var(--gold);
        margin-bottom:28px;
        display:flex;
        align-items:center;
        gap:16px
      }
      .section-label::before {
        content:'';
        display:block;
        width:32px;
        height:1px;
        background:var(--gold)
      }
      /* footer */
      footer {
        border-top:1px solid rgba(201,169,110,.15);
        padding:36px clamp(32px,6vw,80px);
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:24px;
        flex-wrap:wrap
      }
      .footer-logo img {
        height:44px;
        width:auto
      }
      .footer-middle {
        font-family:'Josefin Sans',sans-serif;
        font-size:10px;
        font-weight:100;
        letter-spacing:.3em;
        text-transform:uppercase;
        color:var(--cream-dim);
        text-align:center
      }
      .footer-links {
        display:flex;
        gap:24px
      }
      .footer-links a {
        font-family:'Josefin Sans',sans-serif;
        font-size:10px;
        font-weight:100;
        letter-spacing:.3em;
        text-transform:uppercase;
        color:var(--gold-dim);
        text-decoration:none;
        transition:color .2s
      }
      .footer-links a:hover {
        color:var(--gold)
      }
      /* reveal */
      .reveal {
        opacity:0;
        transform:translateY(36px);
        transition:opacity .9s ease,transform .9s ease
      }
      .reveal.visible {
        opacity:1;
        transform:none
      }
      /* rule */
      .gold-rule {
        display:flex;
        align-items:center;
        gap:20px;
        padding:0 clamp(32px,6vw,80px)
      }
      .gold-rule::before,.gold-rule::after {
        content:'';
        flex:1;
        height:1px;
        background:linear-gradient(to right,transparent,rgba(201,169,110,.3))
      }
      .gold-rule::after {
        background:linear-gradient(to left,transparent,rgba(201,169,110,.3))
      }
      .gold-rule-diamond {
        width:6px;
        height:6px;
        border:1px solid var(--gold);
        transform:rotate(45deg);
        flex-shrink:0
      }
      @media(max-width:760px) {
        .nav-links {
          display:none
        }
        .nav-burger {
          display:flex
        }
        footer {
          flex-direction:column;
          align-items:center;
          text-align:center
        }
        /* Mobile hero: waiter illustration collides with buttons at narrow
           widths; the scroll-hint absolute-positioning overlaps them too.
           Hide waiter on mobile and pull scroll-hint into normal flow.
           Selectors compound with .hero to out-specificity the base rules
           further down the file. */
        .hero .hero-waiter {
          display:none
        }
        /* Push hero content below the fixed nav so eyebrow doesn't sit
           behind the logo (nav is ~88px tall: 24+40+24). */
        .hero .hero-content {
          padding-top:110px
        }
        /* CTA-band paragraph is set to nowrap for the desktop one-line
           look; on mobile it must wrap or it overflows the viewport.
           !important because the base rule sits further down the file
           at same specificity and would otherwise win the cascade. */
        .cta-band p {
          white-space:normal !important
        }
      }
      /* Scroll-hint is a desktop-cursor pattern; touch devices don't
         need it and the absolute-positioning overlaps CTAs on any
         viewport where the hero content nearly fills the height.
         Applies to tablet-portrait and below. */
      @media (max-width:1024px) {
        .hero .scroll-hint {
          position:static;
          transform:none;
          margin:28px auto 12px;
          animation:none;
          opacity:1
        }
        .hero .scroll-hint::after {
          height:32px
        }
      }
      /* hero */
      .hero {
        min-height:100vh;
        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        position:relative;
        overflow:hidden
      }
      /* Hero background via CSS + image-set() so modern browsers pick WebP.
         Mobile media query serves the smaller 1200w variant (216KB WebP /
         477KB JPG) instead of the 2400w desktop asset (997KB / 2020KB). */
      .hero-bg {
        position:absolute;
        inset:0;
        background-image:url('/assets/images/photos/home-hero.jpg');
        background-image:image-set(
          url('/assets/images/photos/home-hero.webp') type('image/webp'),
          url('/assets/images/photos/home-hero.jpg') type('image/jpeg')
        );
        background-size:cover;
        background-position:center 30%
      }
      @media (max-width:768px) {
        .hero-bg {
          background-image:url('/assets/images/photos/home-hero-1200.jpg');
          background-image:image-set(
            url('/assets/images/photos/home-hero-1200.webp') type('image/webp'),
            url('/assets/images/photos/home-hero-1200.jpg') type('image/jpeg')
          )
        }
      }
      .hero-bg::after {
        content:'';
        position:absolute;
        inset:0;
        background:linear-gradient(to right,rgba(10,9,7,.88) 0%,rgba(10,9,7,.5) 55%,rgba(10,9,7,.15) 100%),linear-gradient(to top,rgba(10,9,7,.9) 0%,transparent 50%)
      }
      .hero-content {
        position:relative;
        z-index:2;
        padding:clamp(40px,8vw,100px);
        padding-bottom:clamp(80px,12vw,140px)
      }
      .eyebrow {
        font-family:'Josefin Sans',sans-serif;
        font-weight:100;
        font-size:clamp(9px,1.1vw,12px);
        letter-spacing:.35em;
        text-transform:uppercase;
        color:var(--gold);
        margin-bottom:24px;
        opacity:0;
        animation:fadeUp 1s ease .4s forwards
      }
      .hero-title {
        font-family:'Playfair Display',serif;
        font-size:clamp(52px,9vw,130px);
        line-height:.9;
        font-weight:700;
        letter-spacing:-.02em;
        color:var(--white);
        margin-bottom:20px;
        opacity:0;
        animation:fadeUp 1s ease .6s forwards;
        max-width:60%
      }
      .hero-title em {
        display:block;
        font-style:italic;
        color:var(--gold)
      }
      .hero-sub {
        font-size:clamp(15px,1.8vw,20px);
        font-weight:300;
        font-style:italic;
        color:var(--cream-dim);
        max-width:480px;
        line-height:1.7;
        margin-bottom:48px;
        opacity:0;
        animation:fadeUp 1s ease .8s forwards
      }
      .hero-actions {
        display:flex;
        gap:16px;
        flex-wrap:wrap;
        opacity:0;
        animation:fadeUp 1s ease 1s forwards
      }
      .btn-gold {
        font-family:'Josefin Sans',sans-serif;
        font-size:11px;
        font-weight:300;
        letter-spacing:.3em;
        text-transform:uppercase;
        text-decoration:none;
        color:var(--black);
        background:var(--gold);
        padding:18px 40px;
        transition:background .3s
      }
      .btn-gold:hover {
        background:var(--cream)
      }
      .btn-outline {
        font-family:'Josefin Sans',sans-serif;
        font-size:11px;
        font-weight:300;
        letter-spacing:.3em;
        text-transform:uppercase;
        text-decoration:none;
        color:var(--cream);
        border:1px solid rgba(201,169,110,.4);
        padding:18px 40px;
        transition:all .3s
      }
      .btn-outline:hover {
        border-color:var(--gold);
        color:var(--gold)
      }
      .scroll-hint {
        position:absolute;
        bottom:36px;
        left:50%;
        transform:translateX(-50%);
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:8px;
        z-index:2;
        opacity:0;
        animation:fadeUp 1s ease 1.3s forwards
      }
      .scroll-hint span {
        font-family:'Josefin Sans',sans-serif;
        font-size:9px;
        letter-spacing:.3em;
        text-transform:uppercase;
        color:var(--gold-dim)
      }
      .scroll-hint::after {
        content:'';
        display:block;
        width:1px;
        height:50px;
        background:linear-gradient(to bottom,var(--gold-dim),transparent);
        animation:pulse 2s ease infinite
      }
      @keyframes pulse {
        0%,100% {
          opacity:.4
        }
        50% {
          opacity:1
        }
      }
      /* intro strip */
      .intro {
        padding:clamp(80px,10vw,140px) clamp(32px,8vw,120px);
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:80px;
        align-items:center
      }
      .intro-text h2 {
        font-family:'Playfair Display',serif;
        font-size:clamp(32px,4vw,54px);
        font-weight:400;
        color:var(--white);
        line-height:1.15;
        margin-bottom:28px
      }
      .intro-text h2 em {
        font-style:italic;
        color:var(--gold)
      }
      .intro-text p {
        font-size:clamp(15px,1.3vw,18px);
        font-weight:300;
        line-height:1.85;
        color:var(--cream-dim);
        margin-bottom:32px
      }
      .intro-visual {
        position:relative
      }
      .intro-visual img {
        width:100%;
        aspect-ratio:4/5;
        object-fit:cover;
        display:block;
        object-position:25% center
      }
      /* spaces */
      .spaces {
        background:var(--deep);
        padding:clamp(80px,10vw,140px) clamp(32px,6vw,80px)
      }
      .spaces-header {
        text-align:center;
        margin-bottom:clamp(48px,6vw,80px)
      }
      .spaces-header h2 {
        font-family:'Playfair Display',serif;
        font-size:clamp(36px,5vw,64px);
        font-style:italic;
        font-weight:400;
        color:var(--white)
      }
      .spaces-grid {
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:3px
      }
      .space-card {
        position:relative;
        overflow:hidden;
        aspect-ratio:3/4
      }
      .space-card img {
        width:100%;
        height:100%;
        object-fit:cover;
        transition:transform .7s cubic-bezier(.25,.46,.45,.94)
      }
      .space-card:hover img {
        transform:scale(1.06)
      }
      .space-card-overlay {
        position:absolute;
        inset:0;
        background:linear-gradient(to top,rgba(10,9,7,.85) 0%,transparent 50%);
        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        padding:28px;
        opacity:.85;
        transition:opacity .3s
      }
      .space-card:hover .space-card-overlay {
        opacity:1
      }
      .space-card-tag {
        font-family:'Josefin Sans',sans-serif;
        font-size:9px;
        letter-spacing:.35em;
        text-transform:uppercase;
        color:var(--gold);
        margin-bottom:8px
      }
      .space-card-title {
        font-family:'Playfair Display',serif;
        font-size:22px;
        font-style:italic;
        color:var(--white)
      }
      /* cta band */
      .cta-band {
        background:var(--teal);
        padding:clamp(60px,8vw,100px) clamp(32px,6vw,80px);
        text-align:center;
        position:relative;
        overflow:hidden
      }
      .cta-band::before {
        content:'';
        position:absolute;
        inset:0;
        background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(255,255,255,.04) 0%,transparent 70%);
        pointer-events:none
      }
      .cta-band h2 {
        font-family:'Playfair Display',serif;
        font-size:clamp(36px,5vw,72px);
        font-weight:400;
        color:var(--white);
        margin-bottom:16px;
        position:relative
      }
      .cta-band h2 em {
        font-style:italic;
        color:var(--gold)
      }
      .cta-band p {
        font-size:clamp(15px,1.5vw,19px);
        font-weight:300;
        font-style:italic;
        color:rgba(232,220,200,.7);
        max-width:900px;
        margin:0 auto 40px;
        position:relative;
        white-space:nowrap
      }
      @keyframes fadeUp {
        from {
          opacity:0;
          transform:translateY(30px)
        }
        to {
          opacity:1;
          transform:none
        }
      }
      @media(max-width:800px) {
        .intro {
          grid-template-columns:1fr
        }
        .intro-visual {
          display:none
        }
        .spaces-grid {
          grid-template-columns:1fr 1fr
        }
        .space-card:last-child {
          display:none
        }
      }
      .hero-waiter {
        position:absolute;
        bottom:clamp(60px,10vw,120px);
        right:clamp(20px,6vw,80px);
        width:clamp(128px,14.4vw,208px);
        opacity:0.6;
        pointer-events:none;
        z-index:3;
        filter:drop-shadow(0 8px 24px rgba(0,0,0,0.5));
        transform:scaleX(-1);
      }
      .cta-bottles {
        position:absolute;
        inset:0;
        background-image:url('/assets/images/extracted/index-01.png');
        background-size:60%;
        background-position:center;
        background-repeat:no-repeat;
        opacity:0.06;
        pointer-events:none;
      }
      .cta-olive {
        display:block;
        margin:40px auto -40px;
        width:clamp(60px,8vw,100px);
        opacity:0.55;
        filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4));
        position:relative;
        top:16px;
      }