/* ============================================================
   KARVE DESIGN CO. — design tokens
   Boho modern · cinematic luxury · hand-crafted
   ============================================================ */
:root{
  --linen:#F2EDE6;        /* sun-washed base */
  --sand:#E6DCCB;         /* warm secondary surface */
  --bark:#211B14;         /* cinematic dark */
  --bark-soft:#2C251C;
  --ink:#26201A;          /* body text on light */
  --ink-soft:#5B5247;
  --clay:#A9603F;         /* earthen accent */
  --accent:#181e08;       /* deep olive green — decorative accents */
  --palm:#5F6A4E;         /* olive green */
  --cream:#EFE7D8;        /* text on dark */
  --gold:#C9AE82;         /* script accent on dark */
  --hairline:rgba(38,32,26,.16);
  --hairline-dark:rgba(239,231,216,.18);

  --serif:"Fraunces", Georgia, serif;
  --script:"Carattere", cursive;
  --sans:"Jost", system-ui, sans-serif;

  --gut:clamp(1.25rem, 4vw, 4rem);
  --ease:cubic-bezier(.22,.8,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--linen);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--clay);color:var(--cream)}

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

/* ---------- film grain ---------- */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:2000;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}
  75%{transform:translate(-1%,-2%)}
}

/* ============================================================
   PRELOADER  (sixtwentysix-style: counter + curtain reveal)
   ============================================================ */
#loader{
  position:fixed;inset:0;z-index:3000;
  display:flex;align-items:center;justify-content:center;
  background:var(--bark);color:var(--cream);
  transition:visibility 0s 1.4s;
}
#loader .panel{
  position:absolute;inset:0;background:var(--bark);
  transform-origin:top;
}
#loader .panel.two{background:var(--bark-soft);z-index:-1}
#loader .l-mark{
  position:relative;text-align:center;z-index:2;
}
#loader .l-script{
  font-family:var(--script);
  font-size:clamp(4rem, 12vw, 9rem);
  color:var(--gold);
  line-height:1;
  display:inline-block;
  clip-path:inset(0 100% 0 0);
}
#loader .l-sub{
  font-family:var(--sans);letter-spacing:.55em;text-transform:uppercase;
  font-size:.94rem;margin-top:1.25rem;opacity:0;color:var(--cream);
  text-indent:.55em;
}
#loader .l-count{
  position:absolute;left:var(--gut);bottom:calc(var(--gut) * .75);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.5rem, 6vw, 4.5rem);line-height:1;
  color:var(--cream);z-index:2;font-variant-numeric:tabular-nums;
}
#loader .l-note{
  position:absolute;right:var(--gut);bottom:calc(var(--gut) * .9);
  font-size:.94rem;letter-spacing:.35em;text-transform:uppercase;
  opacity:.5;z-index:2;
}
body.loaded #loader{visibility:hidden}
body.loaded #loader .panel{transform:scaleY(0);transition:transform 1.1s var(--ease)}
body.loaded #loader .panel.two{transition-delay:.12s}
body.loaded #loader .l-mark,
body.loaded #loader .l-count,
body.loaded #loader .l-note{opacity:0;transition:opacity .4s ease}
body:not(.loaded){overflow:hidden}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem var(--gut);
  transition:background .5s ease, padding .5s ease, box-shadow .5s ease;
  color:var(--cream);
}
.nav.scrolled{
  background:#f2ede6;
  color:var(--ink);
  padding:.9rem var(--gut);
  box-shadow:0 1px 0 var(--hairline);
}
.nav-logo{display:flex;align-items:baseline;gap:.5rem;line-height:1}
.nav-logo .k-serif{
  font-family:var(--serif);font-weight:500;font-size:1.45rem;letter-spacing:.06em;
}
.nav-logo .k-script{
  font-family:var(--script);font-size:1.35rem;color:var(--gold);
  transform:translateY(2px);
}
.nav.scrolled .nav-logo .k-script{color:var(--accent)}
.nav-links{display:flex;gap:2.4rem;align-items:center;list-style:none}
.nav-links a{
  font-size:1rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  position:relative;padding:.25rem 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{
  font-size:1rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  border:1px solid currentColor;border-radius:100px;
  padding:.7rem 1.6rem;transition:all .4s var(--ease);
}
.nav-cta:hover{background:var(--clay);border-color:var(--clay);color:var(--cream)}
.nav-burger{display:none}

@media (max-width:880px){
  .nav-links{display:none}
  .nav-burger{
    display:flex;flex-direction:column;gap:5px;padding:.5rem;
  }
  .nav-burger span{width:26px;height:1.5px;background:currentColor;transition:.35s var(--ease)}
  body.menu-open .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  body.menu-open .nav-burger span:nth-child(2){opacity:0}
  body.menu-open .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .nav-cta{display:none}
}
.mobile-menu{
  position:fixed;inset:0;z-index:900;background:var(--bark);color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;padding:var(--gut);
  gap:1.4rem;opacity:0;visibility:hidden;transition:opacity .5s ease, visibility 0s .5s;
}
body.menu-open .mobile-menu{opacity:1;visibility:visible;transition:opacity .5s ease}
.mobile-menu a{
  font-family:var(--serif);font-size:clamp(2rem,8vw,3rem);font-weight:300;
  border-bottom:1px solid var(--hairline-dark);padding-bottom:1rem;
}
.mobile-menu .mm-script{font-family:var(--script);color:var(--gold);font-size:1.5rem}

/* ============================================================
   HERO  — full-bleed cinematic
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  color:var(--cream);overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  animation:kenburns 18s ease-out forwards;
}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(20,16,11,.82) 0%, rgba(20,16,11,.25) 45%, rgba(20,16,11,.35) 100%);
}
.hero-inner{
  position:relative;z-index:2;width:100%;
  padding:0 var(--gut) clamp(3rem, 7vh, 5.5rem);
}
.hero-eyebrow{
  font-family:var(--script);font-size:clamp(1.6rem, 3.5vw, 2.6rem);
  color:var(--gold);display:block;margin-bottom:.4rem;
  transform:rotate(-2deg);transform-origin:left;
}
.hero h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.8rem, 7.4vw, 6.6rem);
  line-height:1.02;letter-spacing:-.01em;
  max-width:18ch;
}
.hero h1 em{font-style:italic;font-weight:400}
.hero-sub{
  margin-top:1.4rem;max-width:46ch;font-weight:300;
  font-size:clamp(1.1rem, 1.5vw, 1.3rem);opacity:.92;
}
.hero-paths{
  margin-top:2.4rem;display:flex;gap:1rem;flex-wrap:wrap;
}
.btn{
  display:inline-flex;align-items:center;gap:.8rem;
  font-size:.88rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
  padding:1.05rem 2.1rem;border-radius:100px;
  border:1px solid rgba(38,32,26,.18);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  overflow:hidden;position:relative;
  transition:all .45s var(--ease);
}
.btn::after{
  content:"";position:absolute;left:2.1rem;right:2.1rem;bottom:.75rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.btn:hover::after{transform:scaleX(1);}
.btn svg{transition:transform .45s var(--ease);position:relative;z-index:1;}
.btn:hover svg{transform:translateX(5px)}
.btn-solid{background:var(--cream);color:var(--ink);border-color:rgba(38,32,26,.15);}
.btn-solid:hover{background:var(--clay);color:var(--cream);border-color:var(--clay);}
.btn-ghost{border:1px solid rgba(239,231,216,.55);color:var(--cream);}
.btn-ghost:hover{background:rgba(239,231,216,.12);border-color:var(--cream);}
.btn-clay{background:var(--clay);color:var(--cream);border-color:var(--clay);box-shadow:0 0 18px 2px rgba(169,96,63,.18);}
.btn-clay:hover{background:var(--bark);border-color:var(--bark);}
.btn-dark{border:1px solid rgba(38,32,26,.3);color:var(--ink);}
.btn-dark:hover{background:var(--ink);color:var(--cream);}

.hero-scroll{
  position:absolute;right:var(--gut);bottom:clamp(3rem,7vh,5.5rem);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  font-size:1rem;letter-spacing:.4em;text-transform:uppercase;
  writing-mode:vertical-rl;opacity:.8;
}
.hero-scroll::after{
  content:"";width:1px;height:54px;background:var(--cream);
  animation:scrollPulse 2.2s ease-in-out infinite;transform-origin:top;
}
@keyframes scrollPulse{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:680px){.hero-scroll{display:none}}

/* ============================================================
   SHARED SECTION SCAFFOLD
   ============================================================ */
section{position:relative}
.wrap{padding:clamp(3rem, 7vh, 5.5rem) var(--gut)}
.eyebrow{
  display:flex;align-items:center;gap:1rem;margin-bottom:2rem;
  font-family:var(--script);font-size:clamp(1.4rem,2.2vw,1.8rem);letter-spacing:0;text-transform:none;color:var(--accent);
}
.dark .eyebrow{color:var(--gold)}
.script-note{
  font-family:var(--script);color:var(--accent);
  font-size:clamp(1.5rem, 2.6vw, 2.1rem);line-height:1.1;
}
.dark .script-note{color:var(--gold)}

h2.display{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.1rem, 4.6vw, 3.9rem);
  line-height:1.12;letter-spacing:-.01em;max-width:24ch;
}
h2.display em{font-style:italic;font-weight:400;color:var(--accent)}
.dark h2.display em{color:var(--gold)}

/* hand-drawn underline */
.hand-underline{position:relative;white-space:nowrap}
.hand-underline svg{
  position:absolute;left:-2%;bottom:-.18em;width:104%;height:.45em;
  overflow:visible;
}
.hand-underline svg path{
  fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.dark .hand-underline svg path{stroke:var(--gold)}
.inview .hand-underline svg path{animation:draw 1.1s .35s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease), transform 1s var(--ease)}
.rv.inview{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}

/* ============================================================
   INTRO — positioning statement
   ============================================================ */
.intro{background:var(--linen)}
.intro-grid{
  display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
@media (max-width:880px){.intro-grid{grid-template-columns:1fr}}
.intro p.lede{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem, 2.5vw, 2.1rem);line-height:1.45;
  color:var(--ink);
}
.intro p.lede em{font-style:italic;color:var(--clay)}
.intro-side p{color:var(--ink-soft);margin-bottom:1.2rem}
.intro-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--hairline);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  margin-top:clamp(3rem,6vh,4.5rem);
}
.intro-stats>div{background:var(--linen);padding:2.2rem 1.5rem;text-align:center}
.intro-stats .num{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.4rem,4.5vw,3.6rem);line-height:1;color:var(--ink);
}
.intro-stats .num sup{font-size:.45em;color:var(--clay)}
.intro-stats .lbl{
  margin-top:.7rem;font-size:1.02rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft);
}
@media (max-width:680px){
  .intro-stats{grid-template-columns:1fr}
}

/* ============================================================
   FULL-BLEED CINEMATIC BAND  (sixtwentysix-style)
   ============================================================ */
.band{
  min-height:92svh;display:flex;align-items:center;
  background-size:cover;background-position:center;background-attachment:fixed;
  color:var(--cream);position:relative;
}
@media (max-width:880px), (hover:none){.band{background-attachment:scroll}}
.band::after{content:"";position:absolute;inset:0;background:rgba(22,17,12,.66)}
.band-inner{position:relative;z-index:2;padding:clamp(5rem,12vh,8rem) var(--gut);width:100%}
.band h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.6rem, 7vw, 6rem);line-height:1.06;letter-spacing:-.01em;
  max-width:16ch;
}
.band .swap{
  font-style:italic;color:var(--gold);display:inline-block;min-width:6.5ch;
}
.band-foot{
  margin-top:2.6rem;display:flex;align-items:center;gap:2rem;flex-wrap:wrap;
}
.band-foot .script-note{font-size:clamp(1.6rem,3vw,2.4rem)}

/* ============================================================
   CASE STUDIES  (Somerled-style w/ metrics)
   ============================================================ */
.cases{background:var(--linen)}
.case{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);
  align-items:center;
  padding:clamp(3.5rem,8vh,6rem) 0;
}
.case + .case{border-top:none}
.case:nth-child(even of .case){direction:rtl}
.case:nth-child(even of .case) > *{direction:ltr}
@media (max-width:880px){
  .case{grid-template-columns:1fr}
  .case:nth-child(even of .case){direction:ltr}
}
.case-media{
  position:relative;overflow:hidden;border-radius:18rem 18rem 1.2rem 1.2rem;
  aspect-ratio:4/4.6;
}
.case:nth-child(even of .case) .case-media{border-radius:1.2rem 1.2rem 18rem 18rem}
.case-media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 1.4s var(--ease);
}
.case:hover .case-media img{transform:scale(1)}
.case-tag{
  position:absolute;top:1.4rem;left:1.4rem;z-index:2;
  background:rgba(33,27,20,.55);backdrop-filter:blur(8px);
  color:var(--cream);border-radius:100px;padding:.55rem 1.2rem;
  font-size:.79rem;letter-spacing:.3em;text-transform:uppercase;
}
.case-body .loc{
  font-size:.96rem;letter-spacing:.38em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:1rem;display:block;
}
.case-body h3{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.2rem, 4vw, 3.5rem);line-height:1.1;letter-spacing:-.01em;
}
.case-body h3 .script-note{display:block;margin-top:.2rem}
.case-body p{margin-top:1.3rem;color:var(--ink-soft);max-width:52ch}
.metrics{
  margin-top:2rem;display:grid;grid-template-columns:repeat(3,auto);gap:clamp(1.5rem,3vw,3rem);
  padding-top:0;width:fit-content;
}
.metrics .m-num{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;color:var(--ink);
}
.metrics .m-lbl{
  margin-top:.5rem;font-size:.88rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
}
.case-links{margin-top:2.2rem;display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.text-link{
  font-size:.86rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.55rem 1.1rem;
  border:1px solid rgba(38,32,26,.18);border-radius:100px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  background:rgba(242,237,230,.35);
  box-shadow:0 0 14px 2px rgba(242,237,230,.3);
  position:relative;overflow:hidden;
  transition:color .35s ease, border-color .35s ease;
}
.text-link::after{
  content:"";position:absolute;left:1.1rem;right:1.1rem;bottom:7px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.text-link:hover{color:var(--accent);border-color:var(--accent);}
.text-link:hover::after{transform:scaleX(1);}

/* ============================================================
   PROCESS — hand-drawn icons
   ============================================================ */
.process{background:var(--bark);color:var(--cream)}
.process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline-dark);
  border:1px solid var(--hairline-dark);margin-top:clamp(3rem,6vh,4.5rem);
}
@media (max-width:1024px){.process-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.process-grid{grid-template-columns:1fr}}
.step{background:var(--bark);padding:clamp(2rem,3.5vw,3rem);transition:background .5s ease}
.step:hover{background:var(--bark-soft)}
.step .s-script{
  font-family:var(--script);color:var(--gold);font-size:1.6rem;display:block;margin-bottom:1.6rem;
}
.step svg{width:54px;height:54px;margin-bottom:1.6rem}
.step svg path, .step svg circle, .step svg line, .step svg rect{
  fill:none;stroke:var(--cream);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.step svg .accent{stroke:var(--gold)}
.step h4{
  font-family:var(--serif);font-weight:400;font-size:1.4rem;margin-bottom:.8rem;letter-spacing:.01em;
}
.step p{font-size:1.05rem;color:rgba(239,231,216,.85)}

/* ============================================================
   PROPERTIES — book a stay
   ============================================================ */
.stays{background:var(--linen)}
.stays-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.stays-grid{
  margin-top:clamp(3rem,6vh,4.5rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.5vw,2.2rem);
}
@media (max-width:980px){.stays-grid{grid-template-columns:1fr}}
.stay{
  position:relative;border-radius:1.2rem;overflow:hidden;
  aspect-ratio:3/4.1;display:flex;align-items:flex-end;color:var(--cream);
}
.stay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.stay:hover img{transform:scale(1.07)}
.stay::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(20,16,11,.85) 0%, rgba(20,16,11,0) 55%);
}
.stay-body{position:relative;z-index:2;padding:1.8rem;width:100%}
.stay-body .s-loc{
  font-size:1rem;letter-spacing:.34em;text-transform:uppercase;opacity:.85;display:block;margin-bottom:.5rem;
}
.stay-body h3{font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1.15}
.stay-specs{
  margin-top:.9rem;display:flex;gap:1.2rem;
  font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9;
}
.stay-cta{
  margin-top:1.2rem;display:inline-flex;align-items:center;gap:.6rem;
  font-size:.94rem;letter-spacing:.3em;text-transform:uppercase;font-weight:500;

}
.stay .s-script{
  position:absolute;top:1.4rem;right:1.6rem;z-index:2;
  font-family:var(--script);font-size:1.5rem;color:var(--gold);transform:rotate(3deg);
}

/* amenity ribbon */
.amenities{
  margin-top:clamp(3.5rem,7vh,5rem);
  display:grid;grid-template-columns:repeat(6,1fr);gap:1.4rem;
  padding-top:2.6rem;
}
@media (max-width:1024px){.amenities{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.amenities{grid-template-columns:repeat(2,1fr)}}
.amenity{text-align:center}
.amenity svg{width:42px;height:42px;margin:0 auto .8rem}
.amenity svg *{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.amenity svg .accent{stroke:var(--clay)}
.amenity span{font-size:.79rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.voices{background:var(--linen);overflow:hidden}
.voices .stars{color:var(--clay);letter-spacing:.3em;font-size:1rem;margin-bottom:1.4rem}
.quote-wrap{max-width:62rem}
.quote-wrap blockquote{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.7rem, 3.2vw, 2.7rem);line-height:1.4;letter-spacing:-.005em;
}
.quote-wrap .open-mark{
  font-family:var(--script);font-size:2.8rem;color:var(--accent);line-height:1.2;
  display:block;margin-bottom:.4rem;
}
.quote-cite{
  margin-top:2rem;display:flex;align-items:center;gap:1rem;
  font-size:.96rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft);
}

.quote-dots{display:flex;gap:.7rem;margin-top:2.6rem}
.quote-dots button{
  width:10px;height:10px;border-radius:50%;border:1px solid var(--ink-soft);
  transition:all .35s ease;
}
.quote-dots button[aria-current="true"]{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}

/* ============================================================
   CLOSING BAND + FOOTER
   ============================================================ */
.close-band{
  min-height:88svh;display:flex;align-items:center;justify-content:center;text-align:center;
  background-size:cover;background-position:center;background-attachment:fixed;
  color:var(--cream);position:relative;
}
@media (max-width:880px),(hover:none){.close-band{background-attachment:scroll}}
.close-band::after{content:"";position:absolute;inset:0;background:rgba(22,17,12,.7)}
.close-inner{position:relative;z-index:2;padding:clamp(5rem,12vh,8rem) var(--gut);max-width:60rem}
.close-inner .script-note{font-size:clamp(2rem,4.5vw,3.2rem);color:var(--gold);display:block;margin-bottom:.6rem;transform:rotate(-2deg)}
.close-inner h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.6rem,6vw,5.2rem);line-height:1.08;letter-spacing:-.01em;
}
.close-inner h2 em{font-style:italic}
.close-ctas{margin-top:2.8rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

footer{background:var(--bark);color:var(--cream)}
.foot-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2.5rem,5vw,5rem);
  padding:clamp(4rem,9vh,6.5rem) var(--gut) 3rem;
}
@media (max-width:880px){.foot-grid{grid-template-columns:1fr}}
.foot-logo{font-family:var(--serif);font-weight:400;font-size:2rem;letter-spacing:.04em}
.foot-logo .k-script{font-family:var(--script);color:var(--gold);font-size:1.7rem;margin-left:.4rem}
.foot-grid p{color:rgba(239,231,216,.65);margin-top:1.2rem;max-width:36ch;font-size:1.05rem}
.foot-col h5{
  font-size:1.02rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.4rem;font-weight:500;
}
.foot-col a{display:block;padding:.4rem 0;color:rgba(239,231,216,.8);transition:color .3s ease;font-size:.95rem}
.foot-col a:hover{color:var(--cream)}
.foot-bottom{
  border-top:1px solid var(--hairline-dark);
  padding:1.8rem var(--gut);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.94rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(239,231,216,.5);
}

/* ============================================================
   MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  html{scroll-behavior:auto}
  .hero-bg{animation:none;transform:none}
  .band,.close-band{background-attachment:scroll}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   SUBPAGE COMPONENTS
   ============================================================ */

/* ---------- property hero ---------- */
.p-hero{
  position:relative;min-height:92svh;display:flex;align-items:flex-end;
  color:var(--cream);overflow:hidden;
}
.p-hero .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:kenburns 16s ease-out forwards}
.p-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(20,16,11,.85) 0%, rgba(20,16,11,.15) 55%, rgba(20,16,11,.4) 100%)}
.p-hero-inner{position:relative;z-index:2;width:100%;padding:0 var(--gut) clamp(2.5rem,6vh,4.5rem)}
.p-hero .crumb{
  font-size:1.02rem;letter-spacing:.34em;text-transform:uppercase;opacity:.85;
  display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.6rem;
}
.p-hero .crumb:hover{opacity:1}
.p-hero h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.8rem,7vw,6rem);line-height:1.02;letter-spacing:-.01em;
}
.p-hero .hero-eyebrow{margin-bottom:.2rem}
.p-strip{
  position:relative;z-index:2;
  display:flex;flex-wrap:wrap;gap:0;
  margin-top:2.2rem;padding-top:1.6rem;
}
.p-strip>div{padding-right:clamp(1.8rem,4vw,4rem)}
.p-strip .m-num{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1}
.p-strip .m-lbl{margin-top:.4rem;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;opacity:.75}

/* ---------- story two-col ---------- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem)}
@media (max-width:880px){.story-grid{grid-template-columns:1fr}}
.story-grid h3{
  font-family:var(--serif);font-weight:400;font-size:1.5rem;margin-bottom:1rem;
}
.story-grid h3 .script-note{font-size:1.4rem;margin-left:.5rem}
.story-grid p{color:var(--ink-soft);margin-bottom:1.1rem}

/* ---------- signature spaces ---------- */
.sig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.5vw,2.2rem);margin-top:clamp(3rem,6vh,4.5rem);justify-items:center;text-align:center;}
@media (max-width:980px){.sig-grid{grid-template-columns:1fr}}
.sig{padding-top:1.6rem}
.sig .s-script{font-family:var(--script);color:var(--clay);font-size:1.6rem;display:block;margin-bottom:.6rem}
.sig h4{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin-bottom:.6rem}
.sig p{font-size:1.05rem;color:var(--ink-soft)}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(3rem,6vh,4.5rem)}
@media (max-width:880px){.gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gal{grid-template-columns:1fr}}
.gal-item{
  position:relative;overflow:hidden;border-radius:1rem;cursor:zoom-in;
  aspect-ratio:4/3;background:var(--linen);
}
.gal-item:nth-child(1){grid-row:span 2;aspect-ratio:auto;border-radius:12rem 12rem 1rem 1rem}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gal-item:hover img{transform:scale(1.06)}

/* lightbox */
#lightbox{
  position:fixed;inset:0;z-index:2500;background:rgba(22,17,12,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .4s ease, visibility 0s .4s;
}
#lightbox.open{opacity:1;visibility:visible;transition:opacity .4s ease}
#lightbox img{max-width:88vw;max-height:84vh;object-fit:contain;border-radius:.6rem}
#lightbox button{
  position:absolute;color:var(--cream);font-size:1rem;letter-spacing:.2em;text-transform:uppercase;
  padding:1rem;opacity:.8;transition:opacity .3s ease;
}
#lightbox button:hover{opacity:1}
.lb-close{top:1.2rem;right:var(--gut)}
.lb-prev{left:var(--gut);top:50%;transform:translateY(-50%)}
.lb-next{right:var(--gut);top:50%;transform:translateY(-50%)}

/* ---------- numbers band ---------- */
.numbers{background:var(--bark);color:var(--cream)}

.numbers .metrics .m-num{color:var(--cream);font-size:clamp(2.4rem,5vw,4rem)}
.numbers .metrics .m-lbl{color:rgba(239,231,216,.9)}
.numbers .fine{margin-top:2rem;font-size:1.02rem;color:rgba(239,231,216,.5);max-width:60ch}

/* ---------- location list ---------- */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
@media (max-width:880px){.loc-grid{grid-template-columns:1fr}}
.loc-list{list-style:none}
.loc-list li{
  display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;
  padding:1.1rem 0;
}
.loc-list .what{font-family:var(--serif);font-size:1.15rem;font-weight:400}
.loc-list .dist{font-size:.94rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}

/* ---------- book band ---------- */
.book-band{background:var(--linen);text-align:center}
.book-band .script-note{font-size:clamp(1.8rem,3.5vw,2.6rem);display:block;margin-bottom:.4rem;transform:rotate(-2deg)}
.book-band h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5vw,4rem);line-height:1.1}
.book-band .book-ctas{margin-top:2.4rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.book-band .fine{margin-top:1.6rem;font-size:1.02rem;color:var(--ink-soft)}

/* ---------- next property footer ---------- */
.next-prop{
  display:block;position:relative;min-height:46svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;color:var(--cream);
}
.next-prop .np-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);transition:transform 1.4s var(--ease)}
.next-prop:hover .np-bg{transform:scale(1)}
.next-prop::after{content:"";position:absolute;inset:0;background:rgba(22,17,12,.62);transition:background .6s ease}
.next-prop:hover::after{background:rgba(22,17,12,.48)}
.np-inner{position:relative;z-index:2;padding:4rem var(--gut)}
.np-inner .lbl{font-size:.94rem;letter-spacing:.4em;text-transform:uppercase;opacity:.85;display:block;margin-bottom:1rem}
.np-inner .name{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.05}
.np-inner .s-script{font-family:var(--script);color:var(--gold);font-size:clamp(1.4rem,3vw,2rem)}

/* ---------- services (work-with page) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-top:clamp(3rem,6vh,4.5rem)}
@media (max-width:980px){.svc-grid{grid-template-columns:1fr}}
.svc{background:var(--linen);padding:clamp(2rem,3.5vw,3rem);transition:background .5s ease}
.svc:hover{background:var(--sand)}
.svc .s-script{font-family:var(--script);color:var(--clay);font-size:1.7rem;display:block;margin-bottom:1.4rem}
.svc h3{font-family:var(--serif);font-weight:400;font-size:1.6rem;margin-bottom:.9rem;line-height:1.2}
.svc p{font-size:1.07rem;color:var(--ink-soft);margin-bottom:1rem}
.svc ul{list-style:none;margin-top:1.2rem}
.svc li{
  padding:.55rem 0 .55rem 1.6rem;position:relative;font-size:1.02rem;color:var(--ink-soft);
}
.svc li::before{content:"\2192";position:absolute;left:0;color:var(--clay)}

/* ---------- FAQ ---------- */
.faq{max-width:54rem}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:2rem;
  padding:1.5rem 0;font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,2vw,1.45rem);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--sans);font-weight:300;font-size:1.6rem;color:var(--clay);
  transition:transform .35s var(--ease);flex-shrink:0;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.6rem;color:var(--ink-soft);max-width:60ch}

/* ---------- form embed ---------- */
.form-shell{
  margin-top:clamp(2.5rem,5vh,4rem);border-radius:1.4rem;overflow:hidden;
  background:#fff;box-shadow:0 30px 80px -30px rgba(38,32,26,.25);
}
.form-shell iframe{display:block;width:100%;min-height:760px;border:0}
.contact-row{
  display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:2.2rem;
  font-size:1rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);
}
.contact-row a{border-bottom:1px solid var(--hairline);padding-bottom:.3rem;transition:color .3s, border-color .3s}
.contact-row a:hover{color:var(--clay);border-color:var(--clay)}

/* ---------- framework cards (about) ---------- */
.frame-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.5vw,2.2rem);margin-top:clamp(3rem,6vh,4.5rem)}
@media (max-width:980px){.frame-grid{grid-template-columns:1fr}}
.frame{
  background:var(--linen);border:1px solid var(--hairline);
  border-radius:1.2rem 1.2rem 8rem 1.2rem;padding:clamp(2rem,3.5vw,2.8rem);
}
.frame:nth-child(2){border-radius:1.2rem 8rem 1.2rem 1.2rem}
.frame:nth-child(3){border-radius:8rem 1.2rem 1.2rem 1.2rem}
.frame .s-script{font-family:var(--script);color:var(--clay);font-size:1.6rem;display:block;margin-bottom:1rem}
.frame h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin-bottom:.8rem;line-height:1.2}
.frame p{font-size:1.05rem;color:var(--ink-soft)}

/* ============================================================
   BRAND LOGO INTEGRATION
   ============================================================ */
/* loader becomes the brand card: cream, like the logo's native ground */
#loader{background:var(--linen);color:var(--ink)}
#loader .panel{background:var(--linen)}
#loader .panel.two{background:var(--sand)}
#loader .l-count{color:var(--ink)}
#loader .l-note{color:var(--ink-soft);opacity:.7}
.l-logo-mark{
  width:clamp(72px, 9vw, 112px);height:auto;display:block;margin:0 auto;
  clip-path:inset(0 100% 0 0);
}
.l-logo-word{
  width:clamp(190px, 24vw, 300px);height:auto;display:block;margin:1.7rem auto 0;
  opacity:0;transform:translateY(16px);
}

/* nav logo: white over imagery, full-color once the nav frosts */
.nav-logo{position:relative;display:block;width:clamp(140px, 15vw, 188px)}
.nav-logo img{width:100%;height:auto;display:block}
.nav-logo .logo-light{transition:opacity .45s ease}
.nav-logo .logo-dark{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.nav.scrolled .nav-logo .logo-light{opacity:0}
.nav.scrolled .nav-logo .logo-dark{opacity:1}

/* footer + mobile menu */
.foot-logo-img{width:clamp(190px, 21vw, 250px);height:auto;display:block}
.mobile-menu .mm-logo{width:160px;height:auto;margin-bottom:.5rem}

/* ============================================================
   CINEMATIC HERO — slideshow + orchestrated text entrance
   ============================================================ */
.hero-slides{position:absolute;inset:0;overflow:hidden}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.8s ease;will-change:transform,opacity;
}
.hero-slide.is-active{opacity:1;animation:kbIn 8s ease-out forwards}
.hero-slide.is-active.alt{animation:kbOut 8s ease-out forwards}
@keyframes kbIn{from{transform:scale(1.12) translateX(1.4%)}to{transform:scale(1) translateX(0)}}
@keyframes kbOut{from{transform:scale(1.02)}to{transform:scale(1.12) translateX(-1.4%)}}
.hero::after{z-index:1}
.hero-inner{will-change:transform,opacity}

/* eyebrow writes itself in */
.hero .hero-eyebrow{
  clip-path:inset(-25% 103% -25% -3%);
  transition:clip-path 1.3s var(--ease) .15s;
}
body.loaded .hero .hero-eyebrow{clip-path:inset(-25% -6% -25% -3%)}

/* masked line-by-line headline rise */
.hero-title .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero-title .line-in{display:block;transform:translateY(116%);transition:transform 1.15s var(--ease)}
body.loaded .hero-title .line:nth-child(1) .line-in{transform:none;transition-delay:.3s}
body.loaded .hero-title .line:nth-child(2) .line-in{transform:none;transition-delay:.46s}

/* gold flourish draws under the final word */
.hw{position:relative;white-space:nowrap}
.hero-flourish{position:absolute;left:-1%;bottom:-.13em;width:102%;height:.42em;overflow:visible}
.hero-flourish path{
  fill:none;stroke:var(--gold);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
body.loaded .hero-flourish path{animation:draw 1.1s 1.35s var(--ease) forwards}

/* supporting copy + CTAs cascade in */
.hero .hero-sub,
.hero .hero-paths{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease), transform 1s var(--ease)}
body.loaded .hero .hero-sub{opacity:1;transform:none;transition-delay:.8s}
body.loaded .hero .hero-paths{opacity:1;transform:none;transition-delay:.95s}
.hero .hero-scroll{opacity:0;transition:opacity 1s ease 1.4s}
body.loaded .hero .hero-scroll{opacity:.8}

/* slide counter + progress line */
.hero-meta{
  position:absolute;right:var(--gut);top:calc(50% - 50px);z-index:2;
  display:flex;flex-direction:column;align-items:flex-end;gap:.8rem;
  color:var(--cream);opacity:0;transition:opacity 1s ease 1.3s;
}
body.loaded .hero-meta{opacity:1}
.hp-count{font-size:1.02rem;letter-spacing:.32em;font-variant-numeric:tabular-nums}
.hp-count #slideNow{color:var(--gold)}
.hp-track{width:74px;height:1px;background:rgba(239,231,216,.3);overflow:hidden;display:block}
.hp-fill{display:block;height:100%;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
.hp-fill.run{animation:fillBar 6.5s linear forwards}
@keyframes fillBar{to{transform:scaleX(1)}}
@media (max-width:680px){.hero-meta{display:none}}

@media (prefers-reduced-motion:reduce){
  .hero-slide.is-active{animation:none;transform:none}
  .hero-title .line-in{transform:none}
  .hero .hero-eyebrow{clip-path:none}
}

/* ============================================================
   LOADER — hand-drawn house + progress line (replaces counter)
   ============================================================ */
.l-house{
  position:absolute;left:var(--gut);bottom:calc(var(--gut) * 1.15);z-index:2;
  width:clamp(180px, 26vw, 320px);aspect-ratio:529/227;
}
.l-house img{
  position:absolute;inset:0;width:100%;height:100%;
  clip-path:inset(-2% 100% -2% 0);
}
.l-house .h-sketch{opacity:.45}
.l-bar{
  position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:rgba(38,32,26,.12);
}
.l-bar span{
  display:block;height:100%;width:100%;
  background:var(--clay);transform:scaleX(0);transform-origin:left;
}
@media (max-width:560px){
  .l-house{width:46vw;bottom:calc(var(--gut) * 1.6)}
}

/* ============================================================
   HERO H1 v2 — "Reimagined Spaces / Bespoke Design"
   line 1 rises from below · line 2 drops from above at 2s
   ============================================================ */
.hero-title .line{padding-bottom:.34em;margin-bottom:-.34em}
.hero-title .line.line-down .line-in{transform:translateY(-116%)}
body.loaded .hero-title .line:nth-child(1) .line-in{transform:none;transition-delay:.3s}
body.loaded .hero-title .line:nth-child(2) .line-in{transform:none;transition-delay:2s}

/* two hand-drawn flourishes: sweep under "Reimagined", pen-loop under "Design" */
.hero-flourish.f1{bottom:-.1em;height:.34em}
.hero-flourish.f2{bottom:-.3em;height:.62em}
body.loaded .hero-flourish.f1 path{animation:draw 1s 1.25s var(--ease) forwards}
body.loaded .hero-flourish.f2 path{animation:draw 1.3s 2.85s var(--ease) forwards}

/* re-time the cascade so copy follows the full headline */
body.loaded .hero .hero-sub{transition-delay:2.45s}
body.loaded .hero .hero-paths{transition-delay:2.6s}
.hero .hero-scroll{transition-delay:3.05s}
.hero-meta{transition-delay:2.95s}

/* ============================================================
   PEN SCRIPT v2 — La Belle Aurore + olive ink (Hanalei Bay ref)
   ============================================================ */
:root{
  --script:"La Belle Aurore", cursive;
  --pen:#41443B;          /* sampled olive ink */
  --pen-light:#D7DCC6;    /* sage tint for dark grounds */
}

/* La Belle Aurore runs small & thin — upscale every script accent */
.hero-eyebrow{font-size:clamp(2rem, 4.4vw, 3.2rem);color:var(--pen-light)}
.script-note{color:var(--accent);font-size:clamp(1.9rem, 3.2vw, 2.6rem)}
.dark .script-note{color:var(--pen-light)}
.band-foot .script-note{font-size:clamp(2rem, 3.6vw, 2.9rem)}
.close-inner .script-note{color:var(--pen-light);font-size:clamp(2.3rem, 5vw, 3.6rem)}
.book-band .script-note{font-size:clamp(2.1rem, 4vw, 3rem)}
.step .s-script, .svc .s-script, .frame .s-script, .sig .s-script{font-size:2rem}
.step .s-script{color:var(--pen-light)}
.svc .s-script, .frame .s-script, .sig .s-script{color:var(--accent)}
.stay .s-script{font-size:1.9rem;color:var(--pen-light)}
.np-inner .s-script{color:var(--pen-light);font-size:clamp(1.7rem, 3.4vw, 2.4rem)}
.mm-script{font-size:1.9rem}
.mobile-menu .mm-script{color:var(--pen-light)}
.open-mark{color:var(--accent) !important;font-size:5.5rem !important}

/* underlines pass THROUGH the letters, behind the text */
.hw{position:relative;z-index:0}
.hw .hero-flourish{z-index:-1}
.hero-flourish path{stroke:var(--pen-light)}
.hero-flourish.f1{bottom:.07em;height:.36em}
.hero-flourish.f2{bottom:-.1em;height:.6em}

.hand-underline{z-index:0}
.hand-underline svg{bottom:-.02em;z-index:-1}
.hand-underline svg path{stroke:var(--pen)}
.dark .hand-underline svg path{stroke:var(--pen-light)}

/* eyebrow rules + quote cite keep the ink family */




/* ============================================================
   REFINEMENTS v3
   ============================================================ */
/* H1 flourishes: ON TOP of descenders, dropped lower, darker ink */
:root{--pen-mid:#9CAA77}
.hw .hero-flourish{z-index:1}
.hero-flourish path{stroke:var(--pen-mid)}
.hero-flourish.f1{bottom:-.22em;height:.36em}
.hero-flourish.f2{bottom:-.36em;height:.6em}
.hand-underline svg{z-index:1;bottom:-.16em}

/* script words write themselves in once, on first view */
.write{clip-path:inset(-30% 104% -30% -6%)}
.write.written{
  clip-path:inset(-30% -8% -30% -6%);
  transition:clip-path 1.5s cubic-bezier(.35,.55,.3,1);
}

/* ============================================================
   CASE STUDIES v2 — editorial rows (replaces arched cards)
   ============================================================ */
.case2{
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2.5rem,5.5vw,5.5rem);
  align-items:center;padding:clamp(4rem,9vh,6.5rem) 0;
}
.case2 + .case2{border-top:none}
.case2.flip .c2-media{order:2}
@media (max-width:920px){
  .case2{grid-template-columns:1fr}
  .case2.flip .c2-media{order:0}
}
.c2-media{
  position:relative;border-radius:14px;overflow:hidden;
  aspect-ratio:4/3.1;isolation:isolate;transform:translateZ(0);
}
.c2-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.6s var(--ease);
}
.case2:hover .c2-media img{transform:scale(1.045)}
/* matted-print offset frame */
.c2-frame{position:relative}
.c2-frame::after{
  content:"";position:absolute;inset:0;border:1px solid var(--pen);
  border-radius:14px;transform:translate(16px,16px);z-index:-1;opacity:.4;
  transition:transform .8s var(--ease);
}
.case2:hover .c2-frame::after{transform:translate(10px,10px)}
.c2-body{position:relative}
.c2-num{
  position:absolute;top:-1.2em;right:0;z-index:-1;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(5rem,10vw,8.5rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(38,32,26,.18);
}
.c2-tag{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:1rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:1.1rem;
}
.c2-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pen)}
.c2-body .loc{
  font-size:.96rem;letter-spacing:.38em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:.9rem;display:block;
}
.c2-body h3{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.08;letter-spacing:-.01em;
}
.c2-body h3 .script-note{display:block;margin-top:.25rem}
.c2-body > p{margin-top:1.3rem;color:var(--ink-soft);max-width:52ch}

/* ============================================================
   KARVE JOURNAL
   ============================================================ */
.j-hero{
  background:var(--linen);text-align:center;
  padding:clamp(9rem,18vh,13rem) var(--gut) clamp(3rem,6vh,4.5rem);
}
.j-hero .script-note{display:block;margin-bottom:.2rem;transform:rotate(-2deg)}
.j-hero h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(3rem,8vw,6.5rem);line-height:1;letter-spacing:-.01em;
}
.j-hero p{max-width:52ch;margin:1.6rem auto 0;color:var(--ink-soft)}

.j-tools{
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding:1.6rem var(--gut);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  background:var(--linen);position:sticky;top:0;z-index:50;
}
.j-cats{display:flex;gap:.6rem;flex-wrap:wrap}
.j-cat{
  font-size:1.02rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
  padding:.6rem 1.3rem;border:1px solid var(--hairline);border-radius:100px;
  transition:all .35s var(--ease);color:var(--ink-soft);
}
.j-cat:hover{border-color:var(--accent);color:var(--accent)}
.j-cat[aria-pressed="true"]{background:var(--pen);border-color:var(--accent);color:var(--cream)}
.j-search{position:relative}
.j-search input{
  font:inherit;font-size:1rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--hairline);
  padding:.55rem 2rem .55rem 0;width:min(240px,60vw);outline:none;
  transition:border-color .3s ease;
}
.j-search input:focus{border-color:var(--accent)}
.j-search input::placeholder{color:var(--ink-soft);opacity:.7}
.j-search svg{position:absolute;right:0;top:50%;transform:translateY(-50%);opacity:.55}

.j-featured{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,5vw,5rem);
  align-items:center;padding:clamp(4rem,8vh,6rem) var(--gut);background:var(--linen);
}
@media (max-width:920px){.j-featured{grid-template-columns:1fr}}
.j-featured .jf-media{border-radius:14px;overflow:hidden;aspect-ratio:16/10;isolation:isolate;transform:translateZ(0)}
.j-featured .jf-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.j-featured:hover .jf-media img{transform:scale(1.045)}
.jf-kicker{
  display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;
  font-size:.79rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft);
}
.jf-kicker .script-note{font-size:1.7rem;letter-spacing:0;text-transform:none}
.j-featured h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,4vw,3.4rem);line-height:1.1;letter-spacing:-.01em;
}
.j-featured .jf-ex{margin-top:1.2rem;color:var(--ink-soft);max-width:50ch}
.jf-meta{margin-top:1.4rem;font-size:.96rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}

.j-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.6rem);
  padding:clamp(4rem,8vh,6rem) var(--gut);background:var(--linen);
}
@media (max-width:980px){.j-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.j-grid{grid-template-columns:1fr}}
.j-card{display:block}
.j-card .jc-media{
  border-radius:12px;overflow:hidden;aspect-ratio:4/3;isolation:isolate;transform:translateZ(0);
  background:var(--linen);position:relative;
}
.j-card .jc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.j-card:hover .jc-media img{transform:scale(1.05)}
.jc-cat{
  position:absolute;top:1rem;left:1rem;z-index:2;
  background:rgba(33,27,20,.5);backdrop-filter:blur(8px);color:var(--cream);
  border-radius:100px;padding:.45rem 1rem;font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;
}
.j-card h3{
  font-family:var(--serif);font-weight:400;font-size:1.45rem;line-height:1.2;
  margin-top:1.2rem;transition:color .3s ease;
}
.j-card:hover h3{color:var(--accent)}
.j-card p{margin-top:.6rem;font-size:1.03rem;color:var(--ink-soft)}
.jc-meta{margin-top:.8rem;font-size:1rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft)}
.j-card.soon{pointer-events:none}
.j-card.soon .jc-media::after{
  content:"Coming Soon";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(242,237,230,.55);backdrop-filter:blur(2px);
  font-family:var(--script);font-size:1.9rem;color:var(--accent);
}
.j-empty{
  grid-column:1/-1;text-align:center;padding:4rem 0;color:var(--ink-soft);
  font-family:var(--serif);font-style:italic;font-size:1.3rem;display:none;
}

/* article page */
.art-hero{position:relative;min-height:72svh;display:flex;align-items:flex-end;color:var(--cream);overflow:hidden}
.art-hero .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.art-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,11,.85),rgba(20,16,11,.2) 60%)}
.art-hero-inner{position:relative;z-index:2;width:100%;padding:0 var(--gut) clamp(2.5rem,6vh,4rem);max-width:62rem;margin:0 auto}
.art-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,5.5vw,4.6rem);line-height:1.05;letter-spacing:-.01em}
.art-kicker{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;margin-bottom:1.2rem;font-size:1.02rem;letter-spacing:.32em;text-transform:uppercase}
.art-kicker .cat{border:1px solid rgba(239,231,216,.5);border-radius:100px;padding:.45rem 1.1rem}
.art-body{max-width:46rem;margin:0 auto;padding:clamp(3.5rem,7vh,5.5rem) var(--gut)}
.art-body .lede{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.5;color:var(--ink);
  border-left:2px solid var(--pen);padding-left:1.6rem;margin-bottom:2.5rem;
}
.art-body p{margin-bottom:1.4rem;color:var(--ink-soft)}
.art-body h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.3rem);
  line-height:1.2;margin:3rem 0 1.2rem;letter-spacing:-.01em;color:var(--ink);
}
.art-body h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.65rem);
  margin:2.4rem 0 .8rem;color:var(--ink);
}
.art-body h3 .dist{font-size:.88rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:.4rem;font-family:var(--sans);font-weight:400}
.art-body a{border-bottom:1px solid var(--hairline);transition:color .3s,border-color .3s}
.art-body a:hover{color:var(--accent);border-color:var(--accent)}
.art-callout{
  background:var(--linen);border-radius:14px;padding:clamp(1.8rem,3vw,2.6rem);
  margin:2.8rem 0;border:1px solid var(--hairline);
}
.art-callout .script-note{display:block;margin-bottom:.4rem}
.art-callout h4{font-family:var(--serif);font-weight:400;font-size:1.45rem;margin-bottom:.6rem}
.art-callout p{margin-bottom:1.2rem}

/* ============================================================
   HAND-DRAWN ICON SYSTEM (1 Hotels style)
   ============================================================ */
.ico{width:52px;height:52px;display:block;margin:0 auto .9rem}
.ico *{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico .ax{stroke:var(--pen)}
.ico-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:2.4rem 1.2rem;margin-top:clamp(2.5rem,5vh,3.5rem);
  justify-items:center;
}
.ico-item{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.6rem;}
.ico-item span{
  font-size:.94rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  line-height:1.6;display:block;
}
/* sleeping cards */
.sleep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.2rem;margin-top:clamp(2.5rem,5vh,3.5rem)}
.sleep{
  border:1px solid var(--hairline);border-radius:14px;padding:2rem 1.4rem;text-align:center;
  transition:background .4s ease, transform .5s var(--ease);
}
.sleep:hover{background:var(--linen);transform:translateY(-4px)}
.sleep .ico{width:60px;height:60px}
.sleep h4{font-family:var(--serif);font-weight:400;font-size:1.15rem;margin-bottom:.3rem}
.sleep span{font-size:1rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}

/* booking hero */
.b-hero{position:relative;min-height:94svh;display:flex;align-items:flex-end;color:var(--cream);overflow:hidden}
.b-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,11,.84),rgba(20,16,11,.2) 55%,rgba(20,16,11,.38));z-index:1}
.b-hero .hero-inner{padding-bottom:clamp(2.5rem,6vh,4.5rem)}
.b-strip{display:flex;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.4rem}
.b-strip>div{padding-right:clamp(1.8rem,4vw,3.6rem)}
.b-strip .m-num{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1}
.b-strip .m-lbl{margin-top:.35rem;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;opacity:.75}
/* sticky book bar */
.book-bar{
  position:sticky;top:0;z-index:80;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:1rem var(--gut);background:rgba(242,237,230,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.book-bar .bb-name{font-family:var(--serif);font-size:1.2rem;font-weight:400}
.book-bar .bb-name .script-note{font-size:1.3rem;margin-left:.5rem}
.book-bar .btn{padding:.75rem 1.6rem}
@media (max-width:680px){.book-bar .bb-name .script-note{display:none}}

/* experiences */
.exp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2vw,2rem);margin-top:clamp(2.5rem,5vh,3.5rem)}
@media (max-width:1024px){.exp-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.exp-grid{grid-template-columns:1fr}}
.exp{padding-top:1.6rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.exp .e-k{font-size:1rem;letter-spacing:.34em;text-transform:uppercase;color:var(--pen-light);display:block;margin-bottom:.6rem}
.exp h4{font-family:var(--serif);font-weight:400;font-size:1.55rem;margin-bottom:.5rem}
.exp p{font-size:1rem;line-height:1.5;color:rgba(239,231,216,.9);max-width:20ch;text-align:center}

/* ============================================================
   HOMEPAGE SKETCHES
   ============================================================ */
.sketch{mix-blend-mode:multiply;opacity:.92;display:block}
.sketch-note{font-family:var(--script);color:var(--accent);font-size:1.7rem;display:block;text-align:center;margin-top:.4rem;transform:rotate(-2deg)}
.intro-sketch{max-width:300px;margin:2.2rem 0 0 auto}
.intro-sketch img{width:100%;height:auto}
.sketch-divider{text-align:center;padding:0 var(--gut) clamp(3.5rem,7vh,5rem);background:var(--linen)}
.sketch-divider img{max-width:min(440px,70vw);margin:0 auto}
.voices-sketch{max-width:300px;margin-top:2.5rem}
.voices-sketch img{width:100%}
@media (max-width:880px){.intro-sketch{margin:2.2rem auto 0}}

/* ============================================================
   LOADER PALM — drawn bottom-up + ascending meter line
   ============================================================ */
.l-palm{
  position:absolute;left:var(--gut);bottom:calc(var(--gut) * 1.05);z-index:2;
  display:flex;align-items:flex-end;gap:1.6rem;
}
.l-palm svg{width:clamp(96px,13vw,150px);height:auto;overflow:visible}
.l-palm svg path, .l-palm svg circle{
  fill:none;stroke:var(--pen);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.l-palm svg .coco{stroke:var(--clay)}
.l-vline{
  position:relative;width:2px;height:clamp(90px,12vw,140px);
  background:rgba(38,32,26,.12);border-radius:2px;overflow:hidden;
}
.l-vline span{
  position:absolute;left:0;right:0;bottom:0;top:0;
  background:var(--pen);transform:scaleY(0);transform-origin:bottom;
}
@media (max-width:560px){.l-palm{bottom:calc(var(--gut) * 1.5)}}

/* ============================================================
   FIXES v4
   ============================================================ */
/* loader only on first visit; instant fade after */
body.instant #loader{display:none}
body.instant{animation:pageFade .55s ease both}
@keyframes pageFade{from{opacity:0}}

/* hero: true full bleed, no peek */
.hero{height:100svh;min-height:620px}

/* H1 flourishes: line 2 paints over line 1's stroke; loop no longer clipped */
.hero-title .line{position:relative}
.hero-title .line:nth-child(2){z-index:2;padding-bottom:.6em;margin-bottom:-.6em}
.hero-flourish.f1{bottom:-.18em}

/* ============================================================
   FLOATING BOOKING WIDGET + AVAILABILITY CALENDAR
   ============================================================ */
.bk-widget{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:600;
  width:min(340px, calc(100vw - 2.8rem));
  background:rgba(242,237,230,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hairline);border-radius:18px;
  box-shadow:0 30px 70px -25px rgba(38,32,26,.4);
  padding:1.5rem 1.5rem 1.4rem;
  opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  max-height:calc(100svh - 3rem);overflow:auto;
}
.bk-widget.show{opacity:1;transform:none;pointer-events:auto}
.bk-widget.closed{display:none}
.bkw-close{
  position:absolute;top:.8rem;right:.9rem;font-size:1.07rem;color:var(--ink-soft);
  padding:.35rem .5rem;line-height:1;transition:color .3s ease;
}
.bkw-close:hover{color:var(--ink)}
.bkw-head .script-note{font-size:1.5rem;display:block}
.bkw-head h4{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:.1rem 0 1rem}
.bkw-note{font-size:.96rem;color:var(--ink-soft);margin:0.9rem 0 1rem;line-height:1.5}
.bkw-btn{width:100%;justify-content:center}
.bkw-reopen{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:600;display:none;
  background:var(--clay);color:var(--cream);border-radius:100px;
  font-size:.96rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  padding:.95rem 1.8rem;box-shadow:0 18px 40px -15px rgba(38,32,26,.5);
}
body.bkw-closed .bkw-reopen{display:block}

/* calendar */
.kcal{user-select:none}
.kcal .kc-month{margin-bottom:1.1rem}
.kcal .kc-title{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--serif);font-size:1.05rem;font-weight:400;margin-bottom:.6rem;
}
.kcal .kc-title small{font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);font-family:var(--sans)}
.kcal table{width:100%;border-collapse:collapse;table-layout:fixed}
.kcal th{font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;padding:.3rem 0}
.kcal td{
  text-align:center;padding:.42rem 0;font-size:.94rem;color:var(--ink);
  position:relative;font-variant-numeric:tabular-nums;
}
.kcal td.blocked{color:rgba(38,32,26,.32);text-decoration:line-through}
.kcal td.past{color:rgba(38,32,26,.22)}
.kcal td.today span{
  display:inline-flex;width:1.7em;height:1.7em;align-items:center;justify-content:center;
  border:1px solid var(--pen);border-radius:50%;
}
.kc-legend{display:flex;gap:1.4rem;font-size:.88rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:.4rem}
.kc-legend i{font-style:normal;display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.45rem;background:var(--pen);vertical-align:middle}
.kc-legend .bl i{background:rgba(38,32,26,.28)}
.kcal-lg{max-width:46rem}
.kcal-lg .kc-months{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
@media (max-width:720px){.kcal-lg .kc-months{grid-template-columns:1fr}}

/* ============================================================
   JOURNAL HERO v2 — full-bleed image + glass tools
   ============================================================ */
.j-hero{position:relative;color:var(--cream);overflow:hidden;padding-bottom:clamp(8rem,16vh,12rem)}
.j-hero .jh-bg{position:absolute;inset:0;background-size:cover;background-position:center 65%}
.j-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(20,16,11,.62) 0%, rgba(20,16,11,.3) 45%, rgba(20,16,11,.66) 100%);
}
.j-hero > *{position:relative;z-index:2}
.j-hero .script-note{color:var(--pen-light)}
.j-hero p{color:rgba(239,231,216,.88)}
.j-tools{
  position:sticky;top:0;z-index:60;margin-top:-92px;
  background:rgba(24,20,15,.38);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(239,231,216,.16);border-bottom:1px solid rgba(239,231,216,.16);
  color:var(--cream);
}
.j-tools .j-cat{border-color:rgba(239,231,216,.35);color:rgba(239,231,216,.85)}
.j-tools .j-cat:hover{border-color:var(--cream);color:var(--cream)}
.j-tools .j-cat[aria-pressed="true"]{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.j-search input{color:var(--cream);border-bottom-color:rgba(239,231,216,.4)}
.j-search input::placeholder{color:rgba(239,231,216,.85)}
.j-search input:focus{border-color:var(--cream)}
.j-search svg{color:var(--cream)}

/* ============================================================
   JOURNAL HERO v3 — readable scrim, no bar: glass on the controls
   ============================================================ */
.j-hero::after{
  background:linear-gradient(to bottom,
    rgba(18,14,10,.62) 0%, rgba(18,14,10,.46) 45%, rgba(18,14,10,.8) 100%);
}
.j-hero h1{text-shadow:0 2px 30px rgba(0,0,0,.5)}
.j-hero p, .j-hero .script-note{text-shadow:0 1px 18px rgba(0,0,0,.55)}

/* kill the band — controls float directly on the image */
.j-tools{
  background:transparent;border:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  padding-top:0;padding-bottom:2.2rem;margin-top:-118px;
}
.j-tools .j-cat{
  background:rgba(22,18,13,.45);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(239,231,216,.3);color:var(--cream);
  box-shadow:0 8px 24px -12px rgba(0,0,0,.4);
}
.j-tools .j-cat:hover{border-color:var(--cream);color:var(--cream);background:rgba(22,18,13,.6)}
.j-tools .j-cat[aria-pressed="true"]{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.j-search input{
  background:rgba(22,18,13,.45);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(239,231,216,.3);border-radius:100px;
  padding:.7rem 2.6rem .7rem 1.3rem;color:var(--cream);
  box-shadow:0 8px 24px -12px rgba(0,0,0,.4);
}
.j-search input:focus{border-color:var(--cream)}
.j-search svg{right:1.1rem;color:var(--cream);opacity:.8}

/* ============================================================
   FOOTER v2 — full-bleed image, three columns (matches live site)
   ============================================================ */
footer.f2{position:relative;color:var(--cream);overflow:hidden;background:var(--bark)}
.f2-bg{position:absolute;inset:0;background-size:cover;background-position:center}
footer.f2::before{content:"";position:absolute;inset:0;background:rgba(26,21,15,.72)}
.f2-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.25fr 1fr .75fr;
  gap:clamp(2.5rem,6vw,6rem);
  padding:clamp(5rem,11vh,7.5rem) var(--gut) clamp(3rem,7vh,4.5rem);
}
@media (max-width:920px){.f2-grid{grid-template-columns:1fr}}
.f2-brand{
  font-family:var(--sans);font-weight:300;letter-spacing:.38em;
  font-size:clamp(1.35rem,2.4vw,1.9rem);text-transform:uppercase;
  margin-bottom:1.8rem;
}
.f2 h5{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.7rem,2.8vw,2.3rem);margin-bottom:1.6rem;letter-spacing:.01em;
}
.f2-grid p{color:rgba(239,231,216,.92);line-height:1.95;max-width:42ch;font-size:1rem}
.f2-grid a{
  display:block;padding:.45rem 0;color:rgba(239,231,216,.92);
  font-size:1rem;line-height:1.7;transition:color .3s ease;width:fit-content;
}
.f2-grid a:hover{color:#fff}
.f2-bottom{
  position:relative;z-index:2;
  border-top:1px solid rgba(239,231,216,.2);
  padding:1.6rem var(--gut);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:1.02rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(239,231,216,.6);
}

/* ============================================================
   FIXES v5
   ============================================================ */
/* accent system: terracotta out, Karve-logo dark green in */
:root{--clay:#41443B}

/* footer: uploaded image + stronger legibility scrim */
footer.f2::before{
  background:linear-gradient(to bottom,
    rgba(23,19,14,.8) 0%, rgba(23,19,14,.7) 50%, rgba(23,19,14,.84) 100%);
}

/* journal hero: pin the bg under the scrim (the > * rule was lifting it above) */
.j-hero .jh-bg{z-index:0 !important}
.j-hero::after{z-index:1}

/* case-study ghost numbers: contain the negative z-index so they can't vanish */
.c2-body{isolation:isolate}
.c2-num{color:transparent;-webkit-text-stroke:1px rgba(38,32,26,.22)}

/* ============================================================
   LOADER v3 — logo slides in, wordmark hand-writes (no palm)
   ============================================================ */
.l-logo-mark{clip-path:none;opacity:0;transform:translateY(-36px)}
.l-logo-word{opacity:1;transform:none;clip-path:inset(-6% 102% -6% -2%)}

/* signature-space icons (case study pages) */
.sig .ico{width:50px;height:50px;margin:0 0 1.1rem}

/* ============================================================
   FIXES v6
   ============================================================ */
/* footer: gradient was painting UNDER the image — pin layers */
.f2-bg{z-index:0}
footer.f2::before{z-index:1}

/* journal hero: heavier gradient + nav-style all-caps headline */
.j-hero::after{
  background:linear-gradient(to bottom,
    rgba(16,13,9,.74) 0%, rgba(16,13,9,.5) 45%, rgba(16,13,9,.86) 100%);
}
.j-hero h1{
  font-family:var(--sans);font-weight:300;
  text-transform:uppercase;letter-spacing:.3em;text-indent:.3em;
  font-size:clamp(1.9rem, 5vw, 4rem);
}

/* btn underline animation defined in base .btn block above */
.nav-cta{position:relative}
.nav-cta::after{
  content:"";position:absolute;left:1.6rem;right:1.6rem;bottom:.55rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .65s var(--ease);
}
.nav-cta:hover{transform:scale(1.05)}
.nav-cta:hover::after{transform:scaleX(1)}

/* flourish draw: butt caps so no dot appears before the stroke */
.hero-flourish path, .hand-underline svg path{stroke-linecap:butt}

/* portfolio rows: no separating lines */
.case2 + .case2{border-top:0}

/* property sketches replace the ghost numbers */
.c2-num{display:none}
.c2-sketch{
  position:absolute;top:-2.2rem;right:0;
  width:clamp(120px, 13vw, 175px);opacity:.6;pointer-events:none;
}
.c2-sketch svg{width:100%;height:auto;display:block}
.c2-sketch path, .c2-sketch circle{
  fill:none;stroke:var(--pen);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
@media (max-width:920px){
  .c2-sketch{position:static;margin:0 0 1.2rem;width:130px}
}

/* ============================================================
   PAGE HEROES — full bleed + nav clearance (no logo collisions)
   ============================================================ */
.p-hero{min-height:100svh}
.p-hero-inner{padding-top:130px}
.b-hero{min-height:100svh}
.b-hero .hero-inner{padding-top:130px}
.art-hero{min-height:100svh}
.art-hero-inner{padding-top:130px}

/* ============================================================
   KARVE PROJECT FORM (replaces the JotForm iframe)
   ============================================================ */
.kform{
  margin-top:clamp(2.5rem,5vh,4rem);
  display:grid;grid-template-columns:1fr 1fr;gap:2.6rem clamp(2rem,4vw,3.5rem);
  max-width:56rem;
}
@media (max-width:760px){.kform{grid-template-columns:1fr}}
.kf-field{display:flex;flex-direction:column;position:relative}
.kf-field.full{grid-column:1/-1}
.kf-field label{
  font-size:.79rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.7rem;font-weight:500;
}
.kf-field label em{
  font-family:var(--script);font-style:normal;text-transform:none;letter-spacing:0;
  font-size:1.25rem;color:var(--accent);margin-left:.6rem;
}
.kf-field input,
.kf-field select,
.kf-field textarea{
  font:inherit;font-weight:300;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--hairline);
  padding:.65rem 0;outline:none;border-radius:0;
  transition:border-color .35s ease;
}
.kf-field input:focus,
.kf-field select:focus,
.kf-field textarea:focus{border-bottom-color:var(--accent)}
.kf-field input::placeholder,
.kf-field textarea::placeholder{color:rgba(38,32,26,.35)}
.kf-field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1.5c4 4 8 5.5 6 5.5S9 5.5 13 1.5' stroke='%2341443B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .2rem center;
  padding-right:1.8rem;
}
.kf-field textarea{resize:vertical;min-height:120px;line-height:1.7}
.kf-foot{grid-column:1/-1;display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-top:.5rem}
.kf-note{font-size:1.02rem;color:var(--ink-soft);max-width:38ch}
.kf-success{
  grid-column:1/-1;display:none;text-align:center;
  border:1px solid var(--hairline);border-radius:18px;
  padding:clamp(2.5rem,5vw,4rem);background:var(--linen);
}
.kform.sent .kf-success{display:block}
.kform.sent .kf-field, .kform.sent .kf-foot{display:none}
.kf-success .script-note{font-size:clamp(1.8rem,3vw,2.4rem);display:block;margin-bottom:.6rem;transform:rotate(-2deg)}
.kf-success h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin-bottom:.7rem}
.kf-success p{color:var(--ink-soft);max-width:46ch;margin:0 auto}

/* ============================================================
   PORTFOLIO PAGE
   ============================================================ */
.c2-specs{
  margin-top:1.1rem;display:flex;gap:1.4rem;flex-wrap:wrap;
  font-size:.96rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
}
.c2-icons{display:flex;gap:1.8rem;margin-top:1.6rem;flex-wrap:wrap}
.c2-icons .mi{text-align:center;width:64px}
.c2-icons .ico{width:40px;height:40px;margin:0 auto .45rem}
.c2-icons span{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);display:block;line-height:1.5}

/* split-screen "more case studies" on case pages */
.next-grid{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:880px){.next-grid{grid-template-columns:1fr}}
.next-grid .next-prop{min-height:54svh}
.next-grid .next-prop + .next-prop{border-left:1px solid rgba(239,231,216,.18)}
@media (max-width:880px){.next-grid .next-prop + .next-prop{border-left:0;border-top:1px solid rgba(239,231,216,.18)}}

/* footer: unify column headings with the brand line; no rule above the bottom bar */
.f2 h5{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1.35rem, 2.4vw, 1.9rem);
  letter-spacing:.38em;text-transform:uppercase;
  margin-bottom:1.8rem;
}
.f2-bottom{border-top:0}

/* scroll choreography perf hints */
.p-hero-inner, .b-hero .hero-inner, .art-hero-inner, .jh-inner,
.band-inner, .close-inner{will-change:transform,opacity}
.j-hero .jh-inner{position:relative;z-index:2}

/* ============================================================
   ABOUT PAGE v2
   ============================================================ */
.team-block{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,6rem);align-items:start;padding-top:clamp(3rem,6vh,4.5rem)}
.team-block + .team-block{margin-top:clamp(3rem,6vh,4.5rem)}
@media (max-width:880px){.team-block{grid-template-columns:1fr}}
.team-name h3{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.05;letter-spacing:-.01em}
.team-name .script-note{display:block;margin-top:.4rem}
.team-name .role{
  margin-top:1.2rem;font-size:1.02rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft);
}
.team-bio p{color:var(--ink-soft);margin-bottom:1.3rem}
.team-bio p strong{color:var(--ink);font-weight:500}

/* Jenn's manifesto — letterpress band */
.manifesto{background:var(--bark);color:var(--cream);text-align:center}
.manifesto .m-inner{max-width:54rem;margin:0 auto}
.manifesto .script-note{font-size:clamp(1.8rem,3vw,2.5rem);display:block;margin-bottom:2rem;transform:rotate(-2deg)}
.m-line{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.5;display:block;
}
.m-line.small{font-style:normal;font-family:var(--sans);font-weight:300;font-size:clamp(.98rem,1.4vw,1.1rem);line-height:1.85;color:rgba(239,231,216,.78);max-width:58ch;margin:1.6rem auto}
.m-sig{
  font-family:var(--script);color:var(--pen-light);
  font-size:clamp(1.9rem,3.4vw,2.7rem);display:block;margin-top:2.4rem;transform:rotate(-3deg);
}

/* inspiration stamps */
.stamps{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.8rem}
.stamp{
  font-family:var(--script);font-size:1.45rem;color:var(--accent);
  border:1px solid var(--hairline);border-radius:100px;padding:.45rem 1.4rem .55rem;
  transform:rotate(-2deg);
}
.stamp:nth-child(even){transform:rotate(1.5deg)}

/* about gallery: flat grid + portrait talls */
.gal.flat .gal-item:nth-child(1){grid-row:auto;aspect-ratio:4/3;border-radius:12px}
.gal .gal-item.tall{grid-row:span 2;aspect-ratio:auto}

/* ============================================================
   PERFORMANCE v2 — real data, market comparison, badges
   ============================================================ */
/* properties hero strip — no rules, per request */
.p-strip.noline{border:0;padding-top:2rem}
.p-strip.noline > div{border:0 !important}
.p-strip .ps-sh{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
@media (max-width:760px){.p-strip .ps-sh{align-items:center}}

/* superhost medallion — frosted pill, button-sized */
.superhost{
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:middle;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.28);
  border-radius:100px;
  padding:.45rem 1rem;
  white-space:nowrap;
  line-height:1;
}
.superhost-img{height:22px;width:auto;display:block;object-fit:contain;vertical-align:middle;}
.p-hero .superhost,.numbers .superhost,.band .superhost{
  background:rgba(255,255,255,0.15);
  border-color:rgba(255,255,255,0.25);
}
/* On light backgrounds (rank-badges on cream) */
.rank-badges .superhost{
  background:rgba(38,32,26,0.06);
  border-color:rgba(38,32,26,0.14);
}
/* ps-sh: superhost stacked with label — keep column layout */
.ps-sh{display:inline-flex;flex-direction:column;align-items:center;gap:.5rem;vertical-align:middle;}

/* team photos */
/* ranking pills */
.rank-badges{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin-top:1.5rem}
.rank-pill{
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  border:1px solid var(--hairline);border-radius:100px;padding:.5rem .95rem;color:var(--ink-soft);
}
.rank-pill.lead{border-color:var(--accent);color:var(--accent);font-weight:600}

/* market comparison bars */
.perf{margin-top:1.7rem;display:flex;flex-direction:column;gap:1.25rem;max-width:34rem}
.perf-row .pr-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.45rem;gap:1rem}
.pr-label{font-size:1rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.pr-delta{font-size:1rem;letter-spacing:.06em;font-weight:600;color:var(--accent);white-space:nowrap}
.pr-line{display:flex;align-items:center;gap:.85rem;margin-top:.4rem}
.pr-bar{flex:1;height:7px;border-radius:100px;background:rgba(38,32,26,.08);overflow:hidden}
.pr-fill{display:block;height:100%;border-radius:100px;background:var(--pen)}
.pr-fill.mkt{background:rgba(38,32,26,.22)}
.pr-val{font-size:1rem;font-variant-numeric:tabular-nums;width:6.6rem;text-align:right;color:var(--ink);flex:none}
.pr-line.muted .pr-val{color:var(--ink-soft);font-size:.78rem}
.pr-val em{font-style:normal;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* dark context (case-study Numbers + portfolio band) */
.numbers .rank-pill,.band .rank-pill{border-color:rgba(239,231,216,.3);color:rgba(239,231,216,.82)}
.numbers .rank-pill.lead,.band .rank-pill.lead{border-color:var(--pen-light);color:var(--pen-light)}
/* superhost — no border variant in dark sections handled globally above */
.numbers .rank-badges{justify-content:center}
.numbers .perf{margin-left:auto;margin-right:auto}
.numbers .pr-bar{background:rgba(239,231,216,.12)}
.numbers .pr-fill{background:var(--pen-light)}
.numbers .pr-fill.mkt{background:rgba(239,231,216,.26)}
.numbers .pr-val{color:var(--cream)}
.numbers .pr-line.muted .pr-val{color:rgba(239,231,216,.85)}
.numbers .pr-label{color:rgba(239,231,216,.85)}
.numbers .pr-delta{color:var(--pen-light)}

/* pending (Family Tides — figures being verified) */
.perf-pending{margin-top:1.6rem;max-width:38rem}
.perf-pending .s-script{display:block;margin-bottom:.4rem}
.perf-pending p{color:var(--ink-soft);line-height:1.7}
.numbers .perf-pending{margin-left:auto;margin-right:auto}
.numbers .perf-pending p{color:rgba(239,231,216,.72)}

/* ============================================================
   HOMEPAGE PROOF BAND (below hero) — no lines, real proof + superhost
   ============================================================ */
.proof{margin-top:clamp(2.5rem,5vh,3.8rem)}
.proof-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
@media (max-width:760px){.proof-row{grid-template-columns:1fr 1fr;gap:2.4rem 1.5rem}}
.proof-item{text-align:center}
.proof-item .num{
  font-family:var(--serif);font-weight:300;line-height:1;letter-spacing:-.01em;
  font-size:clamp(2.6rem,5vw,3.9rem);color:var(--ink);
}
.proof-item .num sup{font-size:.42em;vertical-align:super;color:var(--accent)}
.proof-item .lbl{
  margin-top:.8rem;font-size:1rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);line-height:1.7;
}
.proof-badges{
  display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;align-items:center;
  margin-top:clamp(2.2rem,4.5vh,3.2rem);
}

/* ============================================================
   CASE STUDY FLOATING BOOK WIDGET
   ============================================================ */
.cs-book-widget{
  position:fixed;right:1.6rem;top:50%;transform:translateY(-50%) translateX(24px);z-index:600;
  width:min(280px,calc(100vw - 3.2rem));
  background:rgba(242,237,230,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--hairline);border-radius:18px;
  box-shadow:0 30px 70px -20px rgba(38,32,26,.35);
  padding:1.6rem 1.5rem 1.5rem;
  opacity:0;pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.cs-book-widget.cs-show{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto;}
.cs-bkw-close{
  position:absolute;top:.75rem;right:.85rem;
  font-size:1.02rem;color:var(--ink-soft);padding:.3rem .45rem;line-height:1;
  transition:color .25s ease;background:none;border:none;cursor:pointer;
}
.cs-bkw-close:hover{color:var(--ink);}
.cs-bkw-title{
  font-family:var(--serif);font-weight:400;font-size:1.25rem;
  margin:.15rem 0 .9rem;color:var(--ink);
}
.cs-bkw-note{
  font-size:.94rem;line-height:1.6;color:var(--ink-soft);
  margin:0 0 1.1rem;
}
.cs-bkw-note strong{color:var(--ink);font-weight:500;}
.cs-bkw-btn{width:100%;justify-content:center;font-size:1.02rem;}
.cs-bkw-reopen{
  position:fixed;right:1.6rem;bottom:1.6rem;z-index:600;
  background:var(--clay);color:var(--cream);border:none;border-radius:100px;
  font-size:1.02rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500;cursor:pointer;
  padding:.9rem 1.6rem;box-shadow:0 16px 40px -12px rgba(38,32,26,.5);
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.cs-bkw-reopen.cs-reopen-show{opacity:1;pointer-events:auto;transform:translateY(0);}
@media(max-width:900px){
  .cs-book-widget{right:1rem;top:auto;bottom:1rem;transform:translateY(24px);}
  .cs-book-widget.cs-show{transform:translateY(0);}
}

/* ============================================================
   RESERVE MODAL (Family Tides — third-party redirect notice)
   ============================================================ */
.reserve-modal-backdrop{
  position:fixed;inset:0;z-index:800;
  background:rgba(28,23,18,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
.reserve-modal-backdrop.active{opacity:1;pointer-events:auto;}
.reserve-modal{
  position:fixed;left:50%;top:50%;z-index:801;
  transform:translate(-50%,-50%) scale(.96);
  width:min(420px,calc(100vw - 2.4rem));
  background:rgba(247,243,237,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--hairline);border-radius:20px;
  box-shadow:0 40px 80px -20px rgba(28,23,18,.4);
  padding:2.2rem 2rem 1.8rem;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease, transform .35s var(--ease);
}
.reserve-modal.active{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.reserve-modal-close{
  position:absolute;top:.9rem;right:1rem;
  font-size:1.07rem;color:var(--ink-soft);
  background:none;border:none;cursor:pointer;padding:.35rem .5rem;
  transition:color .2s ease;
}
.reserve-modal-close:hover{color:var(--ink);}

/* ============================================================
   EXP-GRID PHOTO IMAGES (Make the Most of Your Stay)
   ============================================================ */
.exp-img{
  width:100%;max-width:280px;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  margin:.6rem 0 .9rem;
  border:1px solid rgba(255,255,255,0.35);
  box-shadow:0 0 0 1px rgba(255,255,255,0.12), 0 0 18px 3px rgba(242,237,230,0.1), 0 6px 24px -6px rgba(0,0,0,0.3);
}
.exp-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.exp:hover .exp-img img{transform:scale(1.04);}

/* ============================================================
   PROOF BAND — Verified on Airbnb label alignment
   ============================================================ */
.ps-sh{display:flex;flex-direction:column;align-items:center;gap:.6rem;}
.ps-sh .m-lbl{
  font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);text-align:center;
}

/* ============================================================
   PROOF BAND — increase label contrast
   ============================================================ */
.proof-item .lbl{color:var(--ink);}

/* team photos */
.team-photo{
  width:100%;max-width:260px;
  border-radius:12px;overflow:hidden;
  aspect-ratio:3/4;margin:0 auto 1.6rem auto;
  box-shadow:0 0 0 1px rgba(255,255,255,0.6), 0 0 28px 6px rgba(242,237,230,0.7), 0 20px 50px -15px rgba(38,32,26,.18);
  background:#fff;
}
.team-photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 5%;
  display:block;
  filter:contrast(1.02) saturate(0.95);
}
.team-name{display:flex;flex-direction:column;align-items:center;text-align:center;}
@media(max-width:880px){
  .team-photo{max-width:160px;aspect-ratio:1/1;border-radius:50%;margin-bottom:1.2rem;}
  .team-photo img{object-position:center 10%;}
}

/* ── Experiences section: centered heading + 4-up grid */
.process.dark .eyebrow,
.process.dark h2.display{text-align:center;}

/* ============================================================
   PROP-STATS — clean editorial stat grid (replaces perf bars)
   ============================================================ */
.prop-stats{
  display:flex;align-items:flex-start;gap:clamp(1.2rem,3vw,2.4rem);
  flex-wrap:wrap;
  margin-top:1.8rem;padding-top:1.4rem;
  border-top:1px solid var(--hairline);
}
.ps-stat{display:flex;flex-direction:column;gap:.25rem;min-width:80px;}
.ps-num{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.6rem,2.8vw,2.2rem);
  line-height:1;letter-spacing:-.02em;color:var(--ink);
}
.ps-lbl{
  font-size:1rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:.15rem;
}
.ps-delta{
  font-size:1rem;letter-spacing:.04em;
  color:var(--accent);font-weight:500;margin-top:.2rem;
}
.ps-badge{
  display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;
}
.ps-badge-lbl{
  font-size:1rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
}

/* Dark context (portfolio performance band) */
.numbers .prop-stats,.band .prop-stats{border-color:rgba(239,231,216,.15);}
.numbers .ps-num,.band .ps-num{color:var(--cream);}
.numbers .ps-lbl,.band .ps-lbl{color:rgba(239,231,216,.6);}
.numbers .ps-delta,.band .ps-delta{color:var(--gold);}
.numbers .ps-badge-lbl,.band .ps-badge-lbl{color:rgba(239,231,216,.55);}

/* ============================================================
   HERO CAROUSEL ARROWS + DOTS
   ============================================================ */
.slide-prev,.slide-next{
  position:absolute;top:50%;z-index:10;
  transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(242,237,230,.18);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.28);
  color:var(--cream);cursor:pointer;
  transition:background .25s ease, transform .25s ease;
  box-shadow:0 4px 24px rgba(0,0,0,.25);
}
.slide-prev{left:clamp(1rem,3vw,2rem);}
.slide-next{right:clamp(1rem,3vw,2rem);}
.slide-prev:hover,.slide-next:hover{
  background:rgba(242,237,230,.32);
  transform:translateY(-50%) scale(1.08);
}
.slide-dots{
  position:absolute;bottom:clamp(5rem,10vh,7rem);left:50%;
  transform:translateX(-50%);z-index:10;
  display:flex;gap:.5rem;
}
.slide-dots button{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,0.4);border:none;cursor:pointer;
  transition:background .3s ease, transform .3s ease;padding:0;
}
.slide-dots button.active{
  background:rgba(255,255,255,0.95);transform:scale(1.3);
}

/* ============================================================
   PROPERTY GALLERY SPLIT (booking pages — below hero)
   ============================================================ */
.prop-gallery-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.pgs-left{position:relative;}
.pgs-carousel{
  position:relative;
  width:100%;aspect-ratio:4/3;
  border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px -16px rgba(38,32,26,.22);
}
.pgs-slides{position:absolute;inset:0;}
.pgs-slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .7s ease;
}
.pgs-slide.is-active{opacity:1;}
.pgs-carousel .slide-prev{left:.8rem;top:50%;}
.pgs-carousel .slide-next{right:.8rem;top:50%;}
.pgs-carousel .slide-dots{bottom:.9rem;}
.pgs-right{display:flex;flex-direction:column;justify-content:center;}
.pgs-desc{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.2rem,1.8vw,1.6rem);
  line-height:1.6;color:var(--ink);
}
@media(max-width:800px){
  .prop-gallery-split{grid-template-columns:1fr;}
  .pgs-carousel{aspect-ratio:16/9;}
}

/* ============================================================
   CASE STUDY FLOATING BOOK PROMPT
   ============================================================ */
.cs-love-btn{
  position:fixed;bottom:2rem;right:2rem;z-index:600;
  display:flex;flex-direction:column;align-items:center;
  background:var(--clay);color:var(--cream);
  border-radius:100px;padding:1rem 1.8rem;
  box-shadow:0 16px 40px -8px rgba(38,32,26,.45);
  border:1px solid rgba(255,255,255,.15);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  text-align:center;
}
.cs-love-btn.cs-love-show{opacity:1;transform:translateY(0);pointer-events:auto;}
.cs-love-text{
  font-family:var(--script);font-size:1.1rem;
  color:rgba(239,231,216,.85);line-height:1;margin-bottom:.2rem;
}
.cs-love-cta{
  font-size:1rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:500;color:var(--cream);
}
.cs-love-btn:hover{background:var(--bark);}

/* ============================================================
   MOBILE CENTER-ALIGNMENT (<=640px)
   Centers content site-wide on phones. Desktop layout untouched.
   ============================================================ */
@media (max-width:640px){
  /* Property cards: center body text, specs, icons, stats, CTAs */
  .c2-body{text-align:center}
  .c2-body .loc{text-align:center}
  .c2-body > p{margin-left:auto;margin-right:auto}
  .c2-specs{justify-content:center}
  .c2-icons{justify-content:center}
  .prop-stats{justify-content:center;text-align:center}
  .ps-stat{align-items:center}
  .case-links{justify-content:center}
  .c2-num{left:0;right:0;text-align:center}

  /* Booking-page hero overlay */
  .b-hero .hero-inner{text-align:center}
  .b-hero .hero-eyebrow,
  .b-hero .loc{display:block;text-align:center}
  .b-hero .metrics{justify-content:center;margin-left:auto;margin-right:auto}

  /* Properties-page hero stat block: 4 cols -> 2 cols, centered */
  .p-hero .metrics{
    grid-template-columns:repeat(2,auto)!important;
    justify-content:center;margin-left:auto;margin-right:auto;
    gap:1.8rem 2.4rem;
  }
  .p-hero-inner{text-align:center}
  .p-hero .hero-eyebrow{text-align:center}

  /* Home + properties hero */
  .hero-inner{text-align:center}
  .hero-eyebrow{text-align:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-paths{justify-content:center}
  .p-strip{justify-content:center;text-align:center}
  .p-strip>div{padding-right:0}

  /* Intro / editorial paragraphs */
  .intro-grid,.story-grid{text-align:center}
  .intro-grid p,.story-grid p{margin-left:auto;margin-right:auto}
}