:root{
  --vine:#4A5A3F;
  --vine-deep:#333F2B;
  --earth:#8A5A3C;
  --earth-dark:#6E4830;
  --chalk:#F6F2E9;
  --stone:#D8C9A7;
  --sage:#A8B89B;
  --ink:#39392F;
  --card:#FFFEFA;
  --muted:#726B58;
  --line:#E3DCC3;
  --shadow: 0 14px 34px rgba(51,63,43,0.14);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--chalk);
  color:var(--ink);
  font-family:'Jost',system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Playfair Display',Georgia,serif;
  color:var(--vine-deep);
  margin:0 0 0.4em 0;
  font-weight:600;
  letter-spacing:0.2px;
}
.script{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;}
p{margin:0 0 1em 0;}
a{color:var(--earth-dark);text-decoration:none;}
a:hover{color:var(--earth);}
img{max-width:100%;display:block;object-fit:cover;}
label{font-size:14px;font-weight:600;color:var(--vine-deep);display:block;margin-bottom:6px;}
input,textarea{
  width:100%;
  font-family:'Jost',sans-serif;
  font-size:15px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
}
input:focus,textarea:focus{outline:2px solid var(--earth);outline-offset:1px;}

.eyebrow{
  font-family:'Jost',sans-serif;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:12.5px;
  font-weight:600;
  color:var(--earth-dark);
  margin:0 0 14px 0;
}

.container{max-width:1160px;margin:0 auto;padding:0 32px;}
.section{padding:88px 0;}
.section-tight{padding:56px 0;}

/* ---- nav ---- */
.nav{
  position:sticky;top:0;z-index:40;
  background:var(--vine-deep);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav-inner{
  max-width:1240px;margin:0 auto;padding:10px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav-brand{display:flex;align-items:center;gap:12px;}
.nav-brand img{height:62px;width:auto;}
.nav-links{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
.nav-links a{
  color:var(--stone);font-size:14.5px;font-weight:500;letter-spacing:0.3px;
  font-family:'Jost',sans-serif;
}
.nav-links a:hover{color:#fff;}
.nav-links a.active{color:#fff;border-bottom:2px solid var(--sage);padding-bottom:4px;}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;
  font-family:'Jost',sans-serif;font-weight:600;font-size:15px;letter-spacing:0.3px;
  border:1.5px solid transparent;cursor:pointer;
  min-height:44px;
}
.btn-primary{background:var(--vine-deep);color:#fff;}
.btn-primary:hover{background:#242D1E;color:#fff;}
.btn-outline{background:transparent;border-color:rgba(255,255,255,0.6);color:#fff;}
.btn-outline:hover{border-color:#fff;color:#fff;}
.btn-earth{background:var(--earth);color:#fff;}
.btn-earth:hover{background:var(--earth-dark);color:#fff;}
.btn-line{background:transparent;border-color:var(--vine-deep);color:var(--vine-deep);}
.btn-line:hover{background:var(--vine-deep);color:#fff;}

/* ---- hero ---- */
.hero{
  position:relative;color:#fff;padding:130px 0 100px 0;overflow:hidden;
  background:linear-gradient(180deg, rgba(51,63,43,0.80) 0%, rgba(51,63,43,0.55) 55%, rgba(51,63,43,0.85) 100%), var(--vine-deep);
  background-size:cover;background-position:center;
}
.hero-eyebrow{color:var(--stone);}
.hero h1{color:#fff;font-size:clamp(40px,6vw,68px);line-height:1.05;max-width:780px;}
.hero p.lead{color:#EDE7D6;font-size:19px;max-width:560px;margin-bottom:32px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

/* ---- photo ---- */
.photo{
  border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:var(--stone);
}
.photo img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-cap{
  font-family:'Jost',sans-serif;font-size:12.5px;color:var(--muted);
  margin-top:8px;letter-spacing:0.2px;
}

/* ---- cards / grid ---- */
.grid{display:grid;gap:28px;}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow);
}
.card-body{padding:26px;}
.card h3{font-size:22px;margin-bottom:8px;}
.card .price{font-family:'Jost',sans-serif;font-weight:700;color:var(--earth-dark);font-size:19px;margin:10px 0 16px 0;}

/* ---- band ---- */
.band-vine{background:var(--vine-deep);color:#fff;}
.band-vine h2{color:#fff;}
.band-vine p{color:#E7E1CE;}
.band-stone{background:var(--stone);}
.band-sage{background:#EEF1E7;}

/* ---- divider ---- */
.rule{height:1px;background:var(--line);border:none;margin:0;}

/* ---- footer ---- */
.footer{background:var(--vine-deep);color:var(--stone);padding:64px 0 32px 0;}
.footer h4{color:#fff;font-size:16px;font-family:'Jost',sans-serif;font-weight:600;}
.footer a{color:var(--stone);}
.footer a:hover{color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.14);padding-top:24px;font-size:13px;color:#B9AF8E;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.footer-logo{height:72px;width:auto;margin-bottom:14px;}

/* ---- tags/pills ---- */
.pill{
  display:inline-block;background:#EEF1E7;color:var(--vine-deep);
  border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:600;
  letter-spacing:0.3px;margin-right:8px;margin-bottom:8px;
}

/* ---- gallery ---- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.gallery .photo:nth-child(1){grid-column:span 2;grid-row:span 2;}
.gallery .photo{height:100%;}
.gallery img{height:100%;min-height:120px;}

/* ---- icon row ---- */
.icon-row{display:flex;gap:40px;flex-wrap:wrap;}
.icon-item{display:flex;flex-direction:column;align-items:center;gap:10px;width:96px;text-align:center;}
.icon-item svg{color:var(--earth-dark);}
.icon-item span{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:600;}

/* ---- note banner ---- */
.note{
  background:#FBF6E8;border:1px solid var(--line);border-left:4px solid var(--earth);
  border-radius:10px;padding:20px 24px;font-size:15px;color:var(--ink);
}

@media (max-width:860px){
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .gallery .photo:nth-child(1){grid-column:span 2;grid-row:span 1;}
  .nav-links{gap:16px;}
}

/* ---- scroll reveal + motion system (site-wide) ---- */
@media (prefers-reduced-motion: no-preference){
  .reveal-item{opacity:0;transform:translateY(18px);transition:opacity 600ms cubic-bezier(.22,.61,.36,1), transform 600ms cubic-bezier(.22,.61,.36,1);}
  .reveal-item.is-visible{opacity:1;transform:translateY(0);}
  .img-reveal{overflow:hidden;}
  .img-reveal .reveal-photo{opacity:0;clip-path:inset(0 0 100% 0);transition:opacity 600ms ease-out, clip-path 650ms cubic-bezier(.22,.61,.36,1);}
  .img-reveal.is-visible .reveal-photo{opacity:1;clip-path:inset(0 0 0% 0);}
  .img-reveal .reveal-photo.reveal-scale{transform:scale(1.04);transition:opacity 600ms ease-out, clip-path 650ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1);}
  .img-reveal.is-visible .reveal-photo.reveal-scale{transform:scale(1);}

  /* decorative vine illustrations: slow, delicate "growing" reveal from the stem */
  .vine-illustration{opacity:0;clip-path:inset(0 100% 0 0);transition:opacity 1000ms ease-out, clip-path 1500ms cubic-bezier(.22,.61,.36,1);}
  .vine-illustration.is-visible{opacity:0.6;clip-path:inset(0 0% 0 0);}
}
@media (prefers-reduced-motion: reduce){
  .reveal-item{opacity:1 !important;transform:none !important;transition:none !important;}
  .img-reveal .reveal-photo{opacity:1 !important;clip-path:none !important;transform:none !important;transition:none !important;}
  .vine-illustration{opacity:0.6 !important;clip-path:none !important;transition:none !important;}
}

.vine-illustration{pointer-events:none;}

/* ---- button / tap feedback ---- */
.btn{transition:transform 150ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease;}
.btn:active{transform:scale(0.97);}
a.link-underline:active,.story-gallery-item:active{opacity:0.85;}

/* ---- hover refinements ---- */
.btn .arrow{display:inline-block;transition:transform 220ms ease;}
.btn:hover .arrow{transform:translateX(4px);}
.link-underline{position:relative;padding-bottom:2px;}
.link-underline::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0.4);transform-origin:left;transition:transform 260ms ease, opacity 260ms ease;opacity:0.5;}
.link-underline:hover::after{transform:scaleX(1);opacity:1;}
.link-underline .arrow{display:inline-block;transition:transform 220ms ease;}
.link-underline:hover .arrow{transform:translateX(3px);}
.hover-zoom{overflow:hidden;}
.hover-zoom img{transition:transform 600ms ease;}
.hover-zoom:hover img{transform:scale(1.035);}
.nav-links a{transition:color 200ms ease;}

/* ---- subtle image hover (Life between the rows) ---- */
.hoverable{cursor:pointer;}
.hoverable .reveal-photo{transition:clip-path 950ms cubic-bezier(.22,.61,.36,1), transform 400ms ease;}
.hoverable:hover .reveal-photo{transform:scale(1.02) !important;}

/* ---- Our Story photo journal + lightbox ---- */
.story-gallery{display:flex;flex-wrap:wrap;gap:18px;}
.story-gallery-grid{
  display:flex;flex-wrap:nowrap;gap:14px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding-bottom:14px;margin-bottom:-14px;
  scrollbar-width:thin;scrollbar-color:var(--earth-dark) transparent;
}
.story-gallery-grid::-webkit-scrollbar{height:6px;}
.story-gallery-grid::-webkit-scrollbar-track{background:transparent;}
.story-gallery-grid::-webkit-scrollbar-thumb{background:var(--stone);border-radius:6px;}
.story-gallery-grid .story-gallery-item{
  aspect-ratio:1/1.05;height:auto !important;
  flex:0 0 calc(25% - 10.5px);min-width:180px;
  scroll-snap-align:start;
}
.story-gallery-item{position:relative;border-radius:3px;overflow:hidden;cursor:pointer;border:none;padding:0;display:block;background:none;}
.story-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 500ms ease;}
.story-gallery-item:hover img{transform:scale(1.035);}
.story-gallery-caption{position:absolute;left:14px;bottom:12px;color:#fff;font-family:'Playfair Display',serif;font-style:italic;font-size:13px;text-shadow:0 1px 8px rgba(0,0,0,0.55);pointer-events:none;}

.lightbox-overlay{position:fixed;inset:0;background:rgba(20,24,16,0.95);z-index:200;display:flex;align-items:center;justify-content:center;}
.lightbox-img-wrap{max-width:86vw;max-height:84vh;display:flex;flex-direction:column;align-items:center;}
.lightbox-img-wrap img{max-width:86vw;max-height:76vh;object-fit:contain;border-radius:2px;box-shadow:0 30px 70px rgba(0,0,0,0.5);}
.lightbox-caption{color:var(--stone);font-family:'Playfair Display',serif;font-style:italic;font-size:15px;margin-top:16px;}
.lightbox-btn{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.3);color:#fff;width:48px;height:48px;border-radius:50%;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 200ms ease;font-family:'Jost',sans-serif;}
.lightbox-btn:hover{background:rgba(255,255,255,0.24);}
.lightbox-close{position:fixed;top:28px;right:32px;}
.lightbox-prev{position:fixed;top:50%;left:28px;transform:translateY(-50%);}
.lightbox-next{position:fixed;top:50%;right:28px;transform:translateY(-50%);}
.story-gallery-caption:empty,.lightbox-caption:empty{display:none;}

/* =======================================================================
   MOBILE
   Adapts layout intelligently rather than just stacking the desktop grid.
   Breakpoints tested at 375 / 390 / 430px (all fall under 600px below).
   ======================================================================= */

/* ---- compact header: hamburger menu ---- */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;
}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform 250ms ease, opacity 200ms ease;}
.nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---- mobile-adaptive section swaps: some homepage sections get a
   purpose-built mobile layout instead of a squeezed desktop one ---- */
.mobile-only{display:none;}

@media (max-width:880px){
  .nav-inner{padding:8px 20px;}
  .nav-brand img{height:40px !important;}
  .nav-toggle{display:flex;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    background:var(--vine-deep);
    flex-direction:column;align-items:stretch;gap:0;
    max-height:0;overflow:hidden;
    transition:max-height 320ms ease;
    border-top:1px solid rgba(255,255,255,0.08);
    box-shadow:0 18px 30px rgba(0,0,0,0.22);
  }
  .nav.nav-open .nav-links{max-height:440px;}
  .nav-links a{padding:16px 24px;border-bottom:1px solid rgba(255,255,255,0.08);width:100%;}
  .nav-links a.nav-cta{
    margin:16px 24px;width:calc(100% - 48px);border-color:#fff;
    text-align:center;justify-content:center;border-bottom:none;
  }

  /* ---- vertical rhythm: reduce excess whitespace ---- */
  .hero{padding-top:96px !important;padding-bottom:56px !important;}
  .section{padding-top:52px !important;padding-bottom:52px !important;}
  .section-tight{padding-top:40px !important;padding-bottom:40px !important;}

  /* ---- two-column layouts become single column ---- */
  .container[style*="display:flex"],
  .row-2col,
  .photo-row{
    flex-direction:column !important;
  }
  .container[style*="display:flex"] > div,
  .container[style*="display:flex"] > a,
  .row-2col > div,
  .row-2col > a,
  .photo-row > div{
    width:100% !important;min-width:0 !important;flex:1 1 auto !important;
  }
  [style*="margin-right:calc(-1"]{margin-right:0 !important;}

  /* ---- large feature photography: intentional mobile crop ---- */
  [style*="height:420px"],[style*="height:480px"],[style*="height:640px"],
  [style*="height:460px"],[style*="height:400px"],[style*="height:380px"],
  [style*="height:360px"],[style*="height:340px"],[style*="height:320px"],
  [style*="height:240px"]{
    height:230px !important;
  }

  /* ---- vine illustrations: keep decorative, never in the way ---- */
  .vine-illustration{width:160px !important;opacity:0.4 !important;}
  .vine-illustration.is-visible{opacity:0.4 !important;}

  /* ---- galleries: swipe carousel, one tile + a peek of the next ---- */
  .story-gallery-grid{gap:12px;scroll-snap-type:x mandatory;}
  .story-gallery-grid .story-gallery-item{flex:0 0 86%;min-width:0;}
  .gallery-hint{
    display:none;justify-content:space-between;align-items:center;
    margin-top:14px;font-family:'Jost',sans-serif;font-size:13px;
    color:var(--muted);letter-spacing:0.3px;
  }
  .gallery-hint.mobile-only{display:flex !important;}

  /* ---- mobile-adaptive section swaps (homepage) ---- */
  .desktop-only{display:none !important;}
  .mobile-only{display:block !important;}
  .mobile-hide{display:none !important;}
  .mobile-img-first{order:-1 !important;}

  /* ---- hero CTAs: stack full-width instead of side-by-side ---- */
  .hero-cta-row{flex-direction:column !important;align-items:stretch !important;gap:12px !important;}
  .hero-cta-row .btn{width:100%;text-align:center;justify-content:center;}
  .hero-cta-secondary{
    display:flex !important;align-items:center;justify-content:center;
    width:100%;padding:13px 22px;border:1.5px solid rgba(255,255,255,0.55);
    border-radius:999px;text-decoration:none;box-sizing:border-box;
  }

  /* ---- generic CTA button rows: stack full-width ---- */
  .cta-btn-row{flex-direction:column !important;align-items:stretch !important;}
  .cta-btn-row .btn{width:100%;text-align:center;justify-content:center;}

  /* ---- full-width feature images that should stay immersive, not compressed ---- */
  .pour-break.pour-break[style*="height:460px"]{height:58vh !important;}

  /* ---- forms: full-width, easy to complete ---- */
  input,textarea{min-height:44px;font-size:16px;}
  .card-body{padding:20px;}
}

@media (max-width:480px){
  .container{padding:0 20px;}
  .hero h1{font-size:clamp(30px,8vw,40px) !important;}
  .hero{padding-top:80px !important;padding-bottom:48px !important;}
  .section{padding-top:44px !important;padding-bottom:44px !important;}
  .section-tight{padding-top:32px !important;padding-bottom:32px !important;}
  [style*="height:420px"],[style*="height:480px"],[style*="height:640px"],
  [style*="height:460px"],[style*="height:400px"],[style*="height:380px"],
  [style*="height:360px"],[style*="height:340px"],[style*="height:320px"],
  [style*="height:240px"]{
    height:200px !important;
  }
  .btn{padding:13px 22px;font-size:14.5px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}

/* ---- static export: the lightbox is toggled via the hidden attribute ---- */
.lightbox-overlay[hidden]{display:none !important;}