/* ============================================================
   JOY OF EVERGREEN — Design tokens
   Palette drawn from the actual place: Doon valley stone/mist,
   Sal forest floor, turmeric from the farm kitchen.
   ============================================================ */
:root{
  --mist:        #EFEAE1;   /* base canvas — warm stone, not paper-white */
  --mist-deep:   #E4DDCC;   /* alternating section bg */
  --ink:         #292820;   /* near-black, warm brown-green, never pure black */
  --ink-soft:    #55523f;   /* secondary text */
  --forest:      #3F4B34;   /* deep moss — dark sections, primary CTA */
  --forest-deep: #2B3323;
  --turmeric:    #A97B3C;   /* farm-spice ochre — sparing accent, links/labels */
  --turmeric-deep:#8C6530;
  --stone-line:  rgba(41,40,32,0.14);
  --stone-line-lt:rgba(239,234,225,0.28);
  --cream:       #FBF9F4;

  /* brand palette — used for nav tab accents */
  --evergreen:   #00493C;
  --crimson-bloom:#8B2D36;
  --baked-brown: #8F764D;
  --petal-white: #F3F1E7;
  --teal:        #4EC1B6;
  --spring:      #94CA5A;
  --marigold:    #F3C10D;
  --sand:        #D9C7AB;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Work Sans", -apple-system, "Segoe UI", sans-serif;

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

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

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

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.08;
  margin:0 0 0.4em;
  color:var(--ink);
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.6rem, 6vw, 5rem); font-weight:400;}
h2{font-size:clamp(1.9rem, 4vw, 3rem);}
h3{font-size:clamp(1.3rem, 2.4vw, 1.7rem);}
p{margin:0 0 1em; color:var(--ink-soft); max-width:60ch;}
a{color:inherit;}

.eyebrow{
  font-family:var(--sans);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--turmeric-deep);
  font-weight:600;
  display:inline-block;
  margin-bottom:0.9em;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* ---------- NAV ---------- */
.site-nav{
  position:sticky; top:0; z-index:130;
  border-bottom:1px solid var(--stone-line);
}
.site-nav::before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1;
  background:rgba(239,234,225,0.92);
  backdrop-filter:blur(10px);
}
.site-nav .container{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.nav-right{display:flex; align-items:center; gap:1.1rem;}
.brand{
  font-family:var(--serif); font-size:1.35rem; letter-spacing:0.01em;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.nav-links{
  display:flex; gap:2rem; list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none; font-size:0.86rem; letter-spacing:0.03em;
  color:var(--ink-soft); position:relative; padding:4px 0;
}
.nav-links a[aria-current="page"]{color:var(--ink);}
.nav-links a:hover{color:var(--tab-color, var(--turmeric));}
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:3px; border-radius:2px;
  background:var(--tab-color, var(--turmeric));
}
.brand-cluster .logo-cycle{box-shadow:0 0 0 1px var(--stone-line);}
.nav-cta{
  font-size:0.8rem; letter-spacing:0.03em; text-decoration:none;
  border:1px solid var(--ink); padding:0.65em 1.3em; border-radius:2px;
  transition:background .25s ease, color .25s ease;
}
.nav-cta:hover{background:var(--ink); color:var(--mist);}
.nav-toggle{display:none; background:none; border:0; font-size:1.6rem; cursor:pointer; color:var(--ink);}

@media (max-width:860px){
  .nav-links{
    position:fixed; top:78px; left:0; right:0; background:var(--mist);
    flex-direction:column; padding:2rem var(--gutter); gap:1.4rem;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    z-index:120; max-height:calc(100dvh - 78px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:0 16px 28px rgba(41,40,32,0.14);
    border-bottom:1px solid var(--stone-line);
  }
  .nav-links.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  .nav-links a{font-size:1.1rem;}
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block; text-decoration:none;
  font-family:var(--sans); font-size:0.85rem; letter-spacing:0.04em;
  padding:0.95em 2em; border-radius:2px; border:1px solid transparent;
  transition:transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.btn-primary{background:var(--forest); color:var(--cream); border-color:var(--forest);}
.btn-primary:hover{background:var(--forest-deep); transform:translateY(-1px);}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--mist);}
.btn-outline-light{border-color:rgba(251,249,244,0.55); color:var(--cream);}
.btn-outline-light:hover{background:var(--cream); color:var(--forest-deep);}

/* ---------- LAYOUT HELPERS ---------- */
section{padding:clamp(64px,10vw,140px) 0;}
.section-alt{background:var(--mist-deep);}
.section-dark{background:var(--forest); color:var(--cream);}
.section-dark p{color:rgba(251,249,244,0.78);}
.section-dark h2, .section-dark h3{color:var(--cream);}
.center{text-align:center; margin-left:auto; margin-right:auto;}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem); max-width:52ch;}

/* real photography frames */
.photo-frame{
  position:relative; overflow:hidden; border:1px solid var(--stone-line);
  border-radius:2px; background:var(--mist-deep); min-height:220px;
}
.photo-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  min-height:220px;
}
.photo-frame figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:0.6em 0.9em;
  font-size:0.68rem; letter-spacing:0.03em; color:var(--cream);
  background:linear-gradient(180deg, rgba(20,23,14,0) 0%, rgba(20,23,14,0.55) 100%);
}

/* small botanical line-mark — original, echoes the brand's own logo motif */
.leaf-mark{width:30px; height:30px; display:inline-block; margin-bottom:0.6em;}
.leaf-mark path{fill:none; stroke:var(--turmeric); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

/* placeholder photography blocks — obvious, labeled, replaceable */
.ph{
  background:
    repeating-linear-gradient(135deg, rgba(41,40,32,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #DCD4C0, #C7BEA5);
  border:1px solid var(--stone-line);
  display:flex; align-items:flex-end; padding:1.1rem;
  color:var(--ink-soft); font-size:0.72rem; letter-spacing:0.02em;
  min-height:220px; border-radius:2px;
}
.ph span{background:rgba(251,249,244,0.75); padding:0.4em 0.7em; line-height:1.4;}

/* ---------- SIGNATURE MOTIF: the path ----------
   A hand-drawn winding line — literal to the brand's own
   "Reflexology Path" and the visitor's journey through it.
   Used as connective tissue between sections. */
.path-divider{display:block; width:100%; height:64px; margin:0 auto;}
.path-divider svg{width:100%; height:100%;}
.path-divider path{
  fill:none; stroke-width:1.6;
  stroke-linecap:round; opacity:0.7;
  animation:pathColorCycle 12s linear infinite;
}
@keyframes pathColorCycle{
  0%{stroke:var(--evergreen);}
  14.28%{stroke:var(--crimson-bloom);}
  28.56%{stroke:var(--baked-brown);}
  42.84%{stroke:var(--teal);}
  57.12%{stroke:var(--spring);}
  71.4%{stroke:var(--marigold);}
  85.68%{stroke:var(--sand);}
  100%{stroke:var(--evergreen);}
}
@media (prefers-reduced-motion: reduce){
  .path-divider path{animation:none; stroke:var(--turmeric);}
}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  color:var(--cream);
}
.hero-media{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:0; overflow:hidden;
}
.hero-media img{
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity 1s ease;
}
.hero-media img.active{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .hero-media img{transition:none;}
}
.hero-media::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(180deg, rgba(24,27,17,0.18) 0%, rgba(20,23,14,0.78) 100%);
}
.hero-content{position:relative; z-index:1; padding-bottom:clamp(50px,8vw,100px);}
.hero-content .eyebrow{color:rgba(251,249,244,0.85);}
.hero h1{color:var(--cream); margin-bottom:0.3em;}
.hero .lede{color:rgba(251,249,244,0.88); font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2.2vw,1.5rem); margin-bottom:1.6em;}
.hero-ctas{display:flex; gap:1rem; flex-wrap:wrap;}
.scroll-cue{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  z-index:1; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(251,249,244,0.7); text-decoration:none;
}

/* ---------- PILLARS ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem;}
@media (max-width:860px){.pillars{grid-template-columns:1fr;}}
.pillar h3{margin-top:1.1em;}
.pillar .ph, .pillar .photo-frame{min-height:260px;}

/* ---------- EXPERIENCE GROUPS ---------- */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;}
@media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr;}}
.tile{border-top:1px solid var(--stone-line); padding-top:1.2rem;}
.tile h3{font-size:1.15rem; margin-bottom:0.3em;}
.tile p{font-size:0.92rem;}

/* activity tag chips */
.tag-chips{display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1rem;}
.tag-chips span{
  font-size:0.78rem; letter-spacing:0.02em; color:var(--ink-soft);
  border:1px solid var(--stone-line); border-radius:20px; padding:0.35em 0.9em;
  background:var(--cream);
}

/* ---------- STAYS ---------- */
.stay-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem;}
@media (max-width:900px){.stay-cards{grid-template-columns:1fr;}}
.stay-card{
  border:1px solid var(--stone-line); padding:2.2rem 1.8rem; background:var(--cream);
  display:flex; flex-direction:column; gap:0.8rem;
}
.stay-card .eyebrow{margin-bottom:0;}
.stay-card h3{margin:0;}
.stay-card .price{font-family:var(--serif); font-style:italic; color:var(--turmeric-deep); font-size:1.05rem;}

/* ---------- TWO COL ---------- */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center;}
@media (max-width:860px){.two-col{grid-template-columns:1fr;}}

/* ---------- FORM ---------- */
.enquiry-form{max-width:640px; margin:0 auto; display:grid; gap:1.4rem;}
.field{display:grid; gap:0.5rem;}
.field label{font-size:0.82rem; letter-spacing:0.03em; color:var(--ink);}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea,
.field select{
  font-family:var(--sans); font-size:0.98rem; padding:0.85em 1em;
  border:1px solid var(--stone-line); background:var(--cream); color:var(--ink);
  border-radius:2px;
}
.field textarea{resize:vertical; min-height:90px;}
.choice-group{display:flex; flex-wrap:wrap; gap:0.6rem;}
.location-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.7rem;}
@media (max-width:560px){.location-grid{grid-template-columns:1fr;}}
.phone-row{display:grid; grid-template-columns:auto 1fr; gap:0.6rem;}
.phone-row select{
  font-family:var(--sans); font-size:0.92rem; padding:0.85em 0.8em;
  border:1px solid var(--stone-line); background:var(--cream); color:var(--ink); border-radius:2px;
}
@media (max-width:480px){.phone-row{grid-template-columns:1fr;}}
.field-error{display:none; color:var(--crimson-bloom, #8B2D36); font-size:0.82rem; margin-top:0.4em;}
.field-error.show{display:block;}
.field input.invalid{border-color:var(--crimson-bloom, #8B2D36);}
.choice-group label{
  border:1px solid var(--stone-line); padding:0.6em 1.1em; border-radius:20px;
  font-size:0.86rem; cursor:pointer; background:var(--cream);
  display:flex; align-items:center; gap:0.5em;
}
.choice-group input{accent-color:var(--forest);}
.form-note{font-size:0.82rem; color:var(--ink-soft);}
.form-success{
  display:none; text-align:center; padding:3rem 1.5rem; border:1px solid var(--stone-line); background:var(--cream);
}
.form-success p{max-width:48ch; margin-left:auto; margin-right:auto;}

/* ---------- FOOTER ---------- */
footer{background:var(--forest-deep); color:rgba(251,249,244,0.82); padding:60px 0 30px;}
footer a{color:rgba(251,249,244,0.82); text-decoration:none;}
footer a:hover{color:var(--cream);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{color:var(--cream); font-family:var(--sans); font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:1em;}
.footer-grid ul{list-style:none; padding:0; margin:0; display:grid; gap:0.6em; font-size:0.92rem;}
.footer-bottom{border-top:1px solid rgba(251,249,244,0.14); padding-top:1.5rem; font-size:0.78rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; color:rgba(251,249,244,0.55);}

/* ---------- MOBILE STICKY CTA ---------- */
.mobile-sticky{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:0.8rem var(--gutter); background:var(--mist);
  border-top:1px solid var(--stone-line);
}
.mobile-sticky .btn{display:block; text-align:center; width:100%;}
@media (max-width:760px){.mobile-sticky{display:block;}}

/* ---------- VIDEO EMBEDS (YouTube Shorts — 9:16 portrait) ---------- */
.video-frame{
  position:relative; width:100%; aspect-ratio:9/16;
  overflow:hidden; border-radius:2px; border:1px solid var(--stone-line);
  background:#111;
}
.video-frame iframe{
  position:absolute; top:0; left:0; width:100%; height:100%; border:0;
}

/* ---------- SLIDESHOW CONTROLS (hero + place slideshows) ---------- */
.slide-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:50%;
  background:rgba(251,249,244,0.18); backdrop-filter:blur(6px);
  border:1px solid rgba(251,249,244,0.4); color:var(--cream);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s ease;
}
.slide-nav:hover{background:rgba(251,249,244,0.32);}
.slide-nav.prev{left:16px;}
.slide-nav.next{right:16px;}
.slide-nav svg{width:16px; height:16px;}
.place-slideshow .slide-nav{background:rgba(41,40,32,0.35);}
.place-slideshow .slide-nav:hover{background:rgba(41,40,32,0.55);}

/* ---------- MAP ---------- */
.map-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  overflow:hidden; border-radius:2px; border:1px solid var(--stone-line);
}
.map-frame iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}

/* ---------- PLACE SLIDESHOW (auto-cycling, all site photography) ---------- */
.place-slideshow{
  position:relative; width:100%; min-height:380px; overflow:hidden;
  border-radius:2px; border:1px solid var(--stone-line);
}
.place-slideshow img{
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1s ease;
}
.place-slideshow img.active{opacity:1;}
.place-slideshow .dots{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; gap:6px;
}
.place-slideshow .dots span{
  width:5px; height:5px; border-radius:50%; background:rgba(251,249,244,0.4);
  transition:background .2s ease, transform .2s ease;
}
.place-slideshow .dots span.active{background:rgba(251,249,244,0.95); transform:scale(1.3);}

/* ---------- PRICE REVEAL ---------- */
.price-reveal{
  background:none; border:1px solid var(--stone-line); border-radius:20px;
  padding:0.4em 1em; font-family:var(--sans); font-size:0.8rem; letter-spacing:0.02em;
  color:var(--ink-soft); cursor:pointer; transition:border-color .2s ease, color .2s ease;
}
.price-reveal:hover{border-color:var(--turmeric); color:var(--turmeric-deep);}
.price-value{font-family:var(--serif); font-style:italic; color:var(--turmeric-deep); font-size:1.05rem;}
.inaugural-tag{
  display:inline-block; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--turmeric-deep); background:rgba(169,123,60,0.12); border:1px solid rgba(169,123,60,0.3);
  padding:0.35em 0.8em; border-radius:20px; font-weight:600;
}
.enquire-note{font-size:0.85rem; color:var(--ink-soft); margin:0.5em 0 0;}

/* ---------- ANIMATED LOGO MARK (cycles through brand color variants) ---------- */
.logo-cycle{
  position:relative; width:44px; height:44px; border-radius:50%;
  overflow:hidden; flex:0 0 auto; box-shadow:0 0 0 1px var(--stone-line);
}
.logo-cycle img{
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  animation:logoCycle 17.5s infinite;
}
.logo-cycle img:nth-child(1){animation-delay:0s;}
.logo-cycle img:nth-child(2){animation-delay:-2.5s;}
.logo-cycle img:nth-child(3){animation-delay:-5s;}
.logo-cycle img:nth-child(4){animation-delay:-7.5s;}
.logo-cycle img:nth-child(5){animation-delay:-10s;}
.logo-cycle img:nth-child(6){animation-delay:-12.5s;}
.logo-cycle img:nth-child(7){animation-delay:-15s;}
@keyframes logoCycle{
  0%{opacity:0;}
  2%{opacity:1;}
  12%{opacity:1;}
  16%{opacity:0;}
  100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .logo-cycle img{animation:none; opacity:0;}
  .logo-cycle img:nth-child(1){opacity:1;}
}
.logo-cycle-lg{width:120px; height:120px;}

/* ---------- NAV brand cluster ---------- */
.brand-cluster{display:flex; align-items:center; gap:0.75rem; text-decoration:none;}
.brand-cluster .brand{font-size:1.25rem; transition:color .2s ease;}
.brand-cluster:hover .brand{color:var(--evergreen);}

/* ---------- SEARCH ---------- */
.search-toggle{
  background:none; border:1px solid var(--stone-line); border-radius:50%;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink); flex:0 0 auto; transition:border-color .25s ease, background .25s ease;
}
.search-toggle:hover{border-color:var(--ink); background:rgba(41,40,32,0.04);}
.search-toggle svg{width:17px; height:17px;}

.search-overlay{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:200;
  background:rgba(30,30,24,0.55); backdrop-filter:blur(4px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:9vh 1.2rem 2rem;
}
.search-overlay[hidden]{display:none;}
.search-panel{
  background:var(--cream); width:100%; max-width:620px; border-radius:4px;
  box-shadow:0 30px 80px rgba(0,0,0,0.35); overflow:hidden;
  animation:searchIn .25s ease;
}
@keyframes searchIn{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }
.search-panel-head{
  display:flex; align-items:center; gap:0.8rem; padding:1.1rem 1.3rem;
  border-bottom:1px solid var(--stone-line);
}
.search-panel-head svg{width:18px; height:18px; color:var(--ink-soft); flex:0 0 auto;}
#search-input{
  flex:1; border:0; background:none; font-family:var(--sans); font-size:1.05rem;
  color:var(--ink); outline:none;
}
.search-close{
  background:none; border:0; cursor:pointer; font-size:1.1rem; color:var(--ink-soft);
  width:28px; height:28px; flex:0 0 auto;
}
.search-hint{padding:0.9rem 1.3rem 0; font-size:0.76rem; letter-spacing:0.03em; color:var(--ink-soft);}
.search-results{max-height:56vh; overflow-y:auto; padding:0.6rem 0.6rem 1rem;}
.search-result{
  display:block; padding:0.85em 0.9em; border-radius:3px; text-decoration:none;
  color:var(--ink); transition:background .18s ease;
}
.search-result:hover, .search-result:focus-visible{background:var(--mist-deep);}
.search-result .r-page{
  font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--turmeric-deep); font-weight:600;
}
.search-result .r-title{font-family:var(--serif); font-size:1.15rem; margin:0.15em 0 0.2em;}
.search-result .r-excerpt{font-size:0.88rem; color:var(--ink-soft); margin:0;}
.search-result mark{background:rgba(169,123,60,0.25); color:inherit; border-radius:2px;}
.search-empty{padding:1.4rem 0.9em; font-size:0.9rem; color:var(--ink-soft);}

/* ---------- FLOATING SOCIAL RAIL (visible from page load, all pages) ---------- */
.social-rail-wrap{
  position:fixed; left:18px; top:50%; transform:translateY(-50%); z-index:55;
  display:flex; align-items:center; gap:0.4rem;
}
.social-rail{
  display:flex; flex-direction:column; gap:0.6rem;
  mix-blend-mode:difference;
  transition:opacity .3s ease, transform .3s ease;
}
.social-rail.collapsed{opacity:0; transform:translateX(-16px); pointer-events:none;}
.social-rail a{
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.04); backdrop-filter:blur(8px);
  border:1.4px solid rgba(255,255,255,0.75);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow:0 0 8px rgba(255,255,255,0.25), inset 0 0 6px rgba(255,255,255,0.08);
}
.social-rail a:hover{
  transform:translateX(3px) scale(1.06);
  box-shadow:0 0 16px rgba(255,255,255,0.55), inset 0 0 8px rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.12);
}
.social-rail svg{width:17px; height:17px;}
.rail-toggle{
  width:22px; height:40px; border-radius:0 20px 20px 0;
  background:rgba(41,40,32,0.5); backdrop-filter:blur(6px);
  border:1px solid rgba(251,249,244,0.25); border-left:0;
  color:var(--cream); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:0 0 auto; transition:background .2s ease;
}
.rail-toggle:hover{background:rgba(41,40,32,0.7);}
.rail-toggle svg{width:12px; height:12px;}
@media (max-width:760px){
  .social-rail-wrap{left:auto; right:0; top:auto; bottom:78px; transform:none; flex-direction:row-reverse;}
  .social-rail{flex-direction:column;}
  .social-rail a{width:36px; height:36px;}
  .social-rail.collapsed{transform:translateX(16px);}
  .rail-toggle{border-radius:20px 0 0 20px; border:1px solid rgba(251,249,244,0.25); border-right:0;}
}

/* ---------- FOOTER SOCIAL ROW ---------- */
.social-row{display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:1.4rem;}
.social-row a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(251,249,244,0.3);
  display:flex; align-items:center; justify-content:center; color:var(--cream);
  transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.social-row a:hover{background:var(--turmeric); border-color:var(--turmeric); transform:translateY(-2px); color:var(--forest-deep);}
.social-row svg{width:17px; height:17px;}

/* ---------- MODERN TOUCHES: rotated photo frames, big numerals ---------- */
.photo-frame.tilt-l{transform:rotate(-1.3deg);}
.photo-frame.tilt-r{transform:rotate(1.1deg);}
.photo-frame.tilt-l:hover, .photo-frame.tilt-r:hover{transform:rotate(0deg) scale(1.01);}
.photo-frame{transition:transform .4s ease;}

.big-numeral{
  position:absolute; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(6rem,16vw,11rem); color:rgba(41,40,32,0.05); line-height:1;
  pointer-events:none; z-index:0; user-select:none;
}
.section-dark .big-numeral{color:rgba(251,249,244,0.06);}
.rel{position:relative; z-index:1;}

/* draw-on-scroll path divider */
.path-divider path{
  stroke-dasharray:900; stroke-dashoffset:900;
  transition:stroke-dashoffset 1.6s ease;
}
.path-divider.is-visible path{stroke-dashoffset:0;}

/* ---------- LIGHTBOX (Gallery) ---------- */
.gallery-grid .photo-frame{cursor:pointer;}
.lightbox{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:250;
  background:rgba(20,23,14,0.94); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
}
.lightbox[hidden]{display:none;}
.lightbox-stage{
  position:relative; max-width:90vw; max-height:78vh;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-stage img{
  max-width:90vw; max-height:78vh; width:auto; height:auto;
  border-radius:2px; box-shadow:0 30px 80px rgba(0,0,0,0.5);
  animation:lbFade .25s ease;
}
@keyframes lbFade{from{opacity:0; transform:scale(0.98);} to{opacity:1; transform:scale(1);}}
.lightbox-close{
  position:absolute; top:20px; right:20px; z-index:2;
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(251,249,244,0.35);
  background:rgba(251,249,244,0.08); color:var(--cream); font-size:1.1rem; cursor:pointer;
}
.lightbox-close:hover{background:rgba(251,249,244,0.18);}
.lightbox .slide-nav{position:fixed; top:50%;}
.lightbox-actions{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; gap:0.8rem;
}
.lightbox-share{
  display:flex; align-items:center; gap:0.5em;
  background:rgba(251,249,244,0.1); border:1px solid rgba(251,249,244,0.35);
  color:var(--cream); border-radius:20px; padding:0.6em 1.3em; font-size:0.85rem;
  cursor:pointer; transition:background .2s ease;
}
.lightbox-share:hover{background:rgba(251,249,244,0.2);}
.lightbox-share svg{width:15px; height:15px;}
.lightbox-toast{
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--cream); padding:0.7em 1.3em; border-radius:20px;
  font-size:0.85rem; z-index:260; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.lightbox-toast.show{opacity:1;}
@media (max-width:640px){
  .lightbox .slide-nav.prev{left:8px;}
  .lightbox .slide-nav.next{right:8px;}
}

/* ---------- COOKIE BANNER ---------- */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:180;
  max-width:560px; margin:0 auto;
  background:var(--ink); color:var(--cream);
  border-radius:8px; padding:1.2rem 1.4rem;
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  animation:cookieIn .4s ease;
}
@keyframes cookieIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);}}
.cookie-banner p{color:rgba(251,249,244,0.85); font-size:0.85rem; margin:0; flex:1 1 240px;}
.cookie-banner a{text-decoration:underline; color:var(--cream);}
.cookie-actions{display:flex; gap:0.6rem; flex:0 0 auto;}
.cookie-actions button{
  font-size:0.8rem; padding:0.55em 1.1em; border-radius:20px; cursor:pointer;
  font-family:var(--sans); white-space:nowrap;
}
.cookie-accept{background:var(--turmeric); color:var(--forest-deep); border:1px solid var(--turmeric);}
.cookie-essential{background:none; color:var(--cream); border:1px solid rgba(251,249,244,0.4);}
@media (max-width:480px){
  .cookie-banner{flex-direction:column; align-items:stretch; text-align:center;}
  .cookie-actions{justify-content:center;}
}

/* ---------- COUNTDOWN GATE ---------- */
.countdown-gate{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:300;
  background:radial-gradient(ellipse at center, #33402A 0%, var(--forest-deep) 70%);
  color:var(--cream);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:2rem;
}
.countdown-gate .logo-wrap{position:relative; width:150px; height:150px; margin:0 auto 2.2rem;}
.countdown-gate .logo-ring-svg{position:absolute; inset:-18px; width:186px; height:186px; transform:rotate(-90deg);}
.countdown-gate .logo-ring-svg circle{
  fill:none; stroke-width:5; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; pathLength:1;
  animation: ringDraw 4s ease-in-out infinite, ringColor 32s steps(1) infinite;
}
.countdown-gate .spark{
  position:absolute; inset:-18px; width:186px; height:186px;
  pointer-events:none;
}
.countdown-gate .spark span{
  position:absolute; top:0; left:0; width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0%, rgba(255,255,255,0.7) 45%, transparent 72%);
  box-shadow:0 0 6px 2px rgba(255,255,255,0.95), 0 0 16px 6px currentColor;
  offset-path: circle(90px at 93px 93px);
  offset-rotate: 0deg;
  animation: sparkMove 4s ease-in-out infinite, sparkColor 32s steps(1) infinite;
}
@keyframes ringDraw{
  0%{stroke-dashoffset:1;}
  68%{stroke-dashoffset:0;}
  100%{stroke-dashoffset:0;}
}
@keyframes sparkMove{
  0%{offset-distance:0%; opacity:1;}
  66%{offset-distance:100%; opacity:1;}
  69%{opacity:0; offset-distance:100%;}
  100%{opacity:0; offset-distance:0%;}
}
@keyframes ringColor{
  0%{stroke:var(--evergreen);}
  12.5%{stroke:var(--crimson-bloom);}
  25%{stroke:var(--baked-brown);}
  37.5%{stroke:var(--teal);}
  50%{stroke:var(--spring);}
  62.5%{stroke:var(--marigold);}
  75%{stroke:var(--sand);}
  87.5%{stroke:var(--petal-white);}
  100%{stroke:var(--evergreen);}
}
@keyframes sparkColor{
  0%{color:var(--evergreen);}
  12.5%{color:var(--crimson-bloom);}
  25%{color:var(--baked-brown);}
  37.5%{color:var(--teal);}
  50%{color:var(--spring);}
  62.5%{color:var(--marigold);}
  75%{color:var(--sand);}
  87.5%{color:var(--petal-white);}
  100%{color:var(--evergreen);}
}
@media (prefers-reduced-motion: reduce){
  .countdown-gate .logo-ring-svg circle{animation:none; stroke:var(--turmeric); stroke-dashoffset:0;}
  .countdown-gate .spark{display:none;}
}
.countdown-gate .gate-content{max-width:640px; padding:0 1rem;}
.countdown-gate .logo-static{
  position:relative; z-index:1; width:120px; height:120px; border-radius:50%;
  overflow:hidden; display:block; margin:0 auto; box-shadow:0 0 0 5px var(--forest-deep);
}
.countdown-gate .logo-static img{width:100%; height:100%; object-fit:cover; display:block;}
.countdown-gate .eyebrow{color:rgba(251,249,244,0.72);}
.countdown-gate h1{color:var(--cream); font-size:clamp(1.9rem,4.6vw,2.9rem); margin-bottom:0.5em; line-height:1.15;}
.countdown-gate .sub{color:rgba(251,249,244,0.82); font-size:clamp(1rem,2vw,1.2rem); font-family:var(--serif); font-style:italic; margin:0 auto 1.4rem;}
.countdown-gate .live-in{color:rgba(251,249,244,0.65); font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:1rem;}
.countdown-digits{
  display:flex; gap:1.8rem; justify-content:center; margin:0 0 1.6rem;
}
.countdown-digits div{display:flex; flex-direction:column; align-items:center;}
.countdown-digits .num{
  font-family:var(--serif); font-size:clamp(2.2rem,7vw,3.6rem); font-style:italic; color:var(--turmeric);
  line-height:1;
}
.countdown-digits .lbl{font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(251,249,244,0.6); margin-top:0.4em;}
.countdown-gate p.note{color:rgba(251,249,244,0.55); font-size:0.85rem; max-width:36ch; margin:0 auto;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--turmeric); outline-offset:2px;
}

/* page hero (interior pages, no full media) */
.page-hero{padding-top:clamp(70px,12vw,120px); padding-bottom:clamp(40px,6vw,70px);}
.page-hero .eyebrow{margin-bottom:0.6em;}

.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;}
@media (max-width:760px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
.gallery-grid .photo-frame{min-height:220px;}
.gallery-grid .photo-frame.tall{min-height:460px;}
.gallery-grid .photo-frame.tall img{min-height:460px;}

.journal-list{display:grid; gap:2.5rem;}
.journal-item{display:grid; grid-template-columns:220px 1fr; gap:1.8rem; align-items:start; border-bottom:1px solid var(--stone-line); padding-bottom:2.5rem;}
@media (max-width:640px){.journal-item{grid-template-columns:1fr;}}
.journal-item .photo-frame{min-height:150px;}
