:root{
    --wine-950:#1e0a10;
    --wine-900:#2b0f16;
    --wine-800:#3c1620;
    --wine-700:#5c1a2b;
    --parchment:#f2e8d9;
    --parchment-dim:#cdbfae;
    --sage:#7c8f6e;
    --sage-dim:#5c6b52;
    --gold:#c9a24b;
    --gold-soft:#e8d9b5;
    --straw:#e8d9b5;
    --sand:#e9dcc3;
    --sand-deep:#ddc9a0;
    --line: color-mix(in srgb, var(--gold) 35%, var(--sand) 35%, transparent);

    --display: "Fraunces", ui-serif, Georgia, serif;
    --body: "Inter", ui-sans-serif, system-ui, sans-serif;

    --container: 1120px;
    --gap: clamp(1.5rem, 4vw, 4rem);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  body{
    margin:0;
    background:var(--wine-900);
    color:var(--parchment);
    font-family:var(--body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  a{color:inherit;}
  img{max-width:100%; display:block;}

  ::selection{background:var(--gold); color:var(--wine-950);}

  :focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }

  .wrap{
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:clamp(1.25rem, 5vw, 2.5rem);
  }

  .eyebrow{
    font-family:var(--body);
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
  }

  h1,h2,h3{
    font-family:var(--display);
    font-weight:500;
    margin:0;
    letter-spacing:-0.01em;
  }

  p{margin:0;}

  /* ---------- NAV ---------- */
  .page-shell{ position:relative; }
  .vine-rail{
    position:absolute;
    top:0; right:0;
    width:150px;
    height:100%;
    pointer-events:none;
    z-index:1;
    opacity:0;
    animation:railFade 1.6s ease forwards .4s;
  }
  @keyframes railFade{ to{ opacity:1; } }
  @media (prefers-reduced-motion: reduce){ .vine-rail{ opacity:1; animation:none; } }
  .vine-rail-stem{ position:absolute; inset:0; width:100%; height:100%; opacity:0.55; }
  .vine-icon{ position:absolute; overflow:visible; opacity:0.92; transform:translate(-50%, -22%); }
  @media (max-width:1300px){ .vine-rail{ display:none; } }

  header.site-nav{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:blur(10px);
    background:color-mix(in srgb, var(--wine-900) 82%, transparent);
    border-bottom:1px solid color-mix(in srgb, var(--parchment) 10%, transparent);
    transition:box-shadow .4s ease, background .4s ease;
  }
  header.site-nav.scrolled{
    background:color-mix(in srgb, var(--wine-900) 95%, transparent);
    box-shadow:0 16px 40px -24px rgba(0,0,0,0.65);
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-block:1rem;
    gap:1rem;
  }
  .logo{
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:0.65rem;
  }
  .logo-mark{
    width:34px;
    height:34px;
    object-fit:contain;
    display:block;
  }
  .logo-text{
    font-family:var(--display);
    font-size:1.05rem;
    letter-spacing:0.04em;
    color:var(--parchment);
    display:flex;
    align-items:baseline;
    gap:0.5rem;
  }
  .logo-text span{color:var(--gold); font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase; font-family:var(--body); font-weight:600;}
  .hero-mark{
    width:58px;
    height:58px;
    object-fit:contain;
    margin-bottom:1.2rem;
  }
  .footer-brand{ display:flex; align-items:center; gap:0.6rem; }
  .footer-mark{ width:22px; height:22px; object-fit:contain; opacity:0.92; }
  nav.links{
    display:flex;
    gap:clamp(1rem, 3vw, 2rem);
    font-size:0.85rem;
  }
  nav.links a{
    text-decoration:none;
    color:var(--parchment-dim);
    transition:color .25s ease;
    position:relative;
  }
  nav.links a:hover{color:var(--parchment);}
  .nav-phone{
    font-size:0.85rem;
    text-decoration:none;
    color:var(--parchment);
    border:1px solid color-mix(in srgb, var(--gold) 55%, transparent);
    padding:0.5rem 0.9rem;
    border-radius:100px;
    white-space:nowrap;
    transition:background .25s ease, border-color .25s ease;
  }
  .nav-phone:hover{background:color-mix(in srgb, var(--gold) 14%, transparent); border-color:var(--gold);}

  @media (max-width:640px){
    .nav-inner{
      flex-wrap:wrap;
      row-gap:0.7rem;
      padding-block:0.85rem 0.7rem;
    }
    nav.links{
      order:3;
      width:100%;
      justify-content:center;
      gap:1.4rem;
      font-size:0.78rem;
      padding-top:0.6rem;
      border-top:1px solid color-mix(in srgb, var(--parchment) 8%, transparent);
    }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:92vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    isolation:isolate;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 80% 60% at 50% -10%, color-mix(in srgb, var(--wine-700) 55%, transparent), transparent 60%),
      radial-gradient(ellipse 60% 50% at 100% 100%, color-mix(in srgb, var(--sage) 16%, transparent), transparent 70%);
    z-index:-2;
  }
  .grain{
    position:absolute; inset:0; z-index:-1; opacity:0.05; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .hero-content{
    position:relative;
    max-width:640px;
  }
  .hero-content h1{
    font-size:clamp(2.6rem, 6.5vw, 4.6rem);
    line-height:1.03;
    margin-top:0.9rem;
    color:var(--parchment);
  }
  .hero-content h1 em{
    font-style:italic;
    color:var(--gold-soft);
  }
  .hero-sub{
    margin-top:1.6rem;
    max-width:46ch;
    color:var(--parchment-dim);
    font-size:1.05rem;
  }
  .hero-cta{
    margin-top:2.4rem;
    display:flex;
    gap:1rem;
    align-items:center;
    flex-wrap:wrap;
  }
  .btn-primary{
    background:var(--gold);
    color:var(--wine-950);
    text-decoration:none;
    padding:0.85rem 1.6rem;
    border-radius:100px;
    font-weight:600;
    font-size:0.9rem;
    transition:transform .25s ease, box-shadow .25s ease;
    box-shadow:0 8px 30px -10px color-mix(in srgb, var(--gold) 60%, transparent);
  }
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-ghost{
    text-decoration:none;
    color:var(--parchment);
    font-size:0.9rem;
    border-bottom:1px solid color-mix(in srgb, var(--parchment) 40%, transparent);
    padding-bottom:2px;
    transition:border-color .25s ease, color .25s ease;
  }
  .btn-ghost:hover{border-color:var(--parchment); color:var(--gold-soft);}

  .scroll-cue{
    position:absolute;
    bottom:2.4rem;
    left:clamp(1.25rem, 5vw, 2.5rem);
    display:flex;
    align-items:center;
    gap:0.6rem;
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--parchment-dim);
  }
  .scroll-cue .line{
    width:28px; height:1px; background:var(--parchment-dim);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse{ 50%{opacity:0.25;} }

  /* ---------- REVEAL ---------- */
  .reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity 1s cubic-bezier(.16,.84,.44,1), transform 1s cubic-bezier(.16,.84,.44,1);
  }
  .reveal.in{ opacity:1; transform:translateY(0); }

  .varieties-grid .variety-card:nth-child(1){ transition-delay:0s; }
  .varieties-grid .variety-card:nth-child(2){ transition-delay:.08s; }
  .varieties-grid .variety-card:nth-child(3){ transition-delay:.16s; }
  .varieties-grid .variety-card:nth-child(4){ transition-delay:.24s; }
  .varieties-grid .variety-card:nth-child(5){ transition-delay:.32s; }
  .varieties-grid .variety-card:nth-child(6){ transition-delay:.4s; }

  /* ---------- SECTION SHELL ---------- */
  section{ padding-block: clamp(4rem, 10vw, 7.5rem); transition:background .6s ease; }
  .section-head{ max-width:640px; margin-bottom:clamp(2.5rem, 6vw, 4rem); }
  .section-head h2{
    font-size:clamp(2rem, 4vw, 2.8rem);
    margin-top:0.8rem;
    color:var(--parchment);
  }

  /* ---------- SAND BREAK (color pause between wine-dark sections) ---------- */
  .section-sand{
    position:relative;
    color:var(--wine-950);
    isolation:isolate;
    background:linear-gradient(180deg,
      var(--wine-900) 0px,
      var(--sand) 130px,
      var(--sand-deep) calc(100% - 130px),
      var(--wine-900) 100%
    );
  }
  .section-sand::before{
    content:"";
    position:absolute; inset:0; z-index:-1; opacity:0.05; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .section-sand .eyebrow{ color:var(--wine-700); }
  .section-sand .section-head h2{ color:var(--wine-950); }
  .section-sand .section-head > p{ color:color-mix(in srgb, var(--wine-950) 68%, transparent); }
  .section-sand .variety-card{
    background:color-mix(in srgb, var(--wine-950) 90%, transparent);
    border-color:color-mix(in srgb, var(--wine-950) 14%, transparent);
  }
  .section-sand .variety-card:hover{
    background:var(--wine-950);
    border-color:color-mix(in srgb, var(--gold) 55%, transparent);
  }

  /* ---------- STORY ---------- */
  .story{ border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent); }
  .story-grid{
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap:var(--gap);
    align-items:start;
  }
  .story-copy p{
    color:var(--parchment-dim);
    margin-bottom:1.3rem;
    font-size:1.02rem;
  }
  .story-copy p:last-child{margin-bottom:0;}
  .story-copy strong{color:var(--parchment); font-weight:600;}

  .growth-card{
    background:color-mix(in srgb, var(--wine-800) 70%, transparent);
    border:1px solid var(--line);
    border-radius:20px;
    padding:clamp(1.6rem, 3vw, 2.4rem);
  }
  .growth-card .eyebrow{ margin-bottom:0.4rem; display:block; }
  .growth-track{
    position:relative;
    height:6px;
    background:color-mix(in srgb, var(--parchment) 12%, transparent);
    border-radius:10px;
    margin-block:2.6rem 0.8rem;
  }
  .growth-fill{
    position:absolute; left:0; top:0; height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--sage), var(--gold));
    border-radius:10px;
    transition:width 1.4s cubic-bezier(.2,.8,.2,1);
  }
  .growth-track.in .growth-fill{ width:100%; }
  .growth-point{
    position:absolute;
    top:50%;
    transform:translate(-50%,-50%);
    width:12px; height:12px;
    border-radius:50%;
    background:var(--wine-900);
    border:2px solid var(--gold);
  }
  .growth-point.start{ left:0%; }
  .growth-point.end{ left:100%; }
  .growth-labels{
    display:flex; justify-content:space-between;
    font-size:0.82rem;
    color:var(--parchment-dim);
  }
  .growth-labels b{ color:var(--parchment); display:block; font-family:var(--display); font-size:1.3rem; font-weight:500;}

  /* ---------- QUOTE ---------- */
  .quote-section{
    background:var(--wine-950);
    border-top:1px solid color-mix(in srgb, var(--line) 45%, transparent);
    border-bottom:1px solid color-mix(in srgb, var(--line) 45%, transparent);
  }
  blockquote{
    margin:0;
    max-width:820px;
    font-family:var(--display);
    font-weight:400;
    font-style:italic;
    font-size:clamp(1.6rem, 3.6vw, 2.5rem);
    line-height:1.35;
    color:var(--gold-soft);
  }
  blockquote::before{ content:"“"; color:var(--gold); }
  blockquote::after{ content:"”"; color:var(--gold); }
  .quote-attr{
    margin-top:1.6rem;
    font-family:var(--body);
    font-style:normal;
    font-size:0.85rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--sage);
  }

  /* ---------- VARIETIES ---------- */
  .varieties-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:1.4rem;
  }
  .variety-card{
    background:color-mix(in srgb, var(--wine-800) 55%, transparent);
    border:1px solid color-mix(in srgb, var(--line) 55%, transparent);
    border-radius:18px;
    padding:1.7rem 1.6rem;
    transition:transform .3s ease, border-color .3s ease, background .3s ease;
  }
  .variety-card:hover{
    transform:translateY(-4px);
    border-color:color-mix(in srgb, var(--gold) 45%, transparent);
    background:color-mix(in srgb, var(--wine-800) 85%, transparent);
  }
  .variety-card h3{
    font-size:1.25rem;
    color:var(--parchment);
    font-weight:500;
  }
  .variety-card p{
    margin-top:0.6rem;
    color:var(--parchment-dim);
    font-size:0.92rem;
    min-height:3.2em;
  }
  .spectrum{
    margin-top:1.4rem;
  }
  .spectrum-track{
    position:relative;
    height:4px;
    border-radius:10px;
    background:linear-gradient(90deg, var(--straw), var(--sage) 45%, var(--wine-700));
  }
  .spectrum-dot{
    position:absolute; top:50%; transform:translate(-50%,-50%);
    width:10px; height:10px; border-radius:50%;
    background:var(--parchment);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--wine-900) 70%, transparent);
  }
  .spectrum-caption{
    display:flex; justify-content:space-between;
    font-size:0.66rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--parchment-dim);
    margin-top:0.5rem;
    opacity:0.7;
  }

  /* ---------- WINES SHOWCASE ---------- */
  .wine-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:2rem;
  }
  .wine-card{ margin:0; text-align:center; }
  .wine-card img{
    width:100%;
    display:block;
    border-radius:14px;
    box-shadow:
      0 20px 45px -20px rgba(0,0,0,0.6),
      0 0 0 1px color-mix(in srgb, rgb(var(--accent)) 45%, transparent);
    transition:transform .4s cubic-bezier(.16,.84,.44,1), box-shadow .4s ease;
  }
  .wine-card:hover img{
    transform:translateY(-6px);
    box-shadow:
      0 30px 60px -18px rgba(0,0,0,0.65),
      0 0 0 1px color-mix(in srgb, rgb(var(--accent)) 70%, transparent),
      0 0 44px -10px rgba(var(--accent), 0.5);
  }
  .wine-card figcaption{
    margin-top:1.15rem;
    display:flex;
    flex-direction:column;
    gap:0.3rem;
  }
  .wine-card figcaption strong{
    font-family:var(--display);
    font-size:1.15rem;
    font-weight:500;
    color:var(--parchment);
  }
  .wine-card figcaption span{
    font-size:0.82rem;
    letter-spacing:0.02em;
    color:var(--parchment-dim);
  }

  /* ---------- LOCATION ---------- */
  .location{
  }
  .location-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:var(--gap);
    align-items:stretch;
  }
  .location-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1.6rem;
  }
  .info-block dt{
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:0.4rem;
  }
  .info-block dd{
    margin:0;
    font-family:var(--display);
    font-size:1.3rem;
    color:var(--parchment);
    font-weight:400;
  }
  .info-block a{ text-decoration:none; }
  .info-block a:hover{ color:var(--gold-soft); }

  .map-frame{
    border-radius:20px;
    overflow:hidden;
    border:1px solid color-mix(in srgb, var(--gold) 25%, transparent);
    min-height:340px;
    filter:sepia(18%) saturate(75%) brightness(0.92) hue-rotate(-6deg);
  }
  .map-frame iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }

  /* ---------- FINAL CTA ---------- */
  .cta-final-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:2rem;
    flex-wrap:wrap;
  }
  .cta-final-inner h2{
    font-size:clamp(1.8rem, 3.4vw, 2.4rem);
    margin-top:0.6rem;
    color:var(--wine-950);
  }
  .cta-final-inner p{
    margin-top:0.8rem;
    max-width:44ch;
    font-size:1rem;
    color:color-mix(in srgb, var(--wine-950) 68%, transparent);
  }

  /* ---------- STICKY CALL BUTTON ---------- */
  .sticky-call{
    position:fixed;
    bottom:1.25rem;
    right:1.25rem;
    z-index:60;
    width:56px; height:56px;
    border-radius:50%;
    background:var(--gold);
    color:var(--wine-950);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 30px -10px rgba(0,0,0,0.55);
    text-decoration:none;
    opacity:0;
    pointer-events:none;
    transform:translateY(14px);
    transition:opacity .35s ease, transform .35s ease, box-shadow .25s ease;
  }
  .sticky-call.visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .sticky-call:hover{ box-shadow:0 16px 34px -8px rgba(0,0,0,0.6); transform:translateY(-3px); }
  .sticky-call svg{ width:22px; height:22px; }
  @media (min-width:901px){ .sticky-call{ display:none; } }

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid color-mix(in srgb, var(--line) 45%, transparent);
    padding-block:2.4rem;
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    font-size:0.8rem;
    color:var(--parchment-dim);
  }
  .footer-inner strong{ color:var(--parchment); font-weight:500; font-family:var(--display); }

  @media (max-width:820px){
    .story-grid, .location-grid{ grid-template-columns:1fr; }
    .location-info{ order:2; }
    .map-frame{ order:1; }
  }
  @media (max-width:640px){
    .cta-final-inner{ flex-direction:column; align-items:flex-start; }
  }

  /* ---------- AGE GATE ---------- */
  .age-gate{
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    padding:1.5rem;
    background:
      radial-gradient(ellipse 80% 60% at 50% 15%, color-mix(in srgb, var(--wine-700) 60%, transparent), transparent 65%),
      var(--wine-950);
  }
  .age-gate-card{
    max-width:420px; width:100%;
    background:color-mix(in srgb, var(--wine-900) 92%, transparent);
    border:1px solid var(--line);
    border-radius:24px;
    padding:clamp(2rem,5vw,2.8rem);
    text-align:center;
    box-shadow:0 30px 80px -20px rgba(0,0,0,0.6);
  }
  .age-gate-logo{ width:52px; height:52px; margin-inline:auto; margin-bottom:1.1rem; display:block; }
  .age-gate-card h2{
    font-family:var(--display); font-weight:500; font-size:1.55rem;
    color:var(--parchment); margin-top:.7rem;
  }
  .age-gate-sub{ margin-top:.9rem; color:var(--parchment-dim); font-size:.92rem; line-height:1.55; }
  .age-gate-actions{ margin-top:1.8rem; display:flex; flex-direction:column; gap:.7rem; }
  .age-gate-actions .btn-primary{ width:100%; border:none; cursor:pointer; font-family:var(--body); }
  .age-gate-no{
    background:transparent; cursor:pointer; font-family:var(--body);
    border:1px solid color-mix(in srgb, var(--parchment) 28%, transparent);
    color:var(--parchment-dim); padding:.85rem 1.6rem; border-radius:100px; font-size:.9rem;
    transition:border-color .25s ease, color .25s ease;
  }
  .age-gate-no:hover{ border-color:var(--parchment); color:var(--parchment); }
  .age-gate-legal{ margin-top:1.3rem; font-size:.7rem; color:color-mix(in srgb, var(--parchment-dim) 65%, transparent); }