/* =========================================================
   Caro Moreno CCA · Camino del Cuidado del Alma
   Tokens, fundamentos y componentes de la landing
   ========================================================= */

:root{
  --bg:oklch(0.955 0.007 80);
  --bg-2:oklch(0.918 0.010 78);
  --paper:oklch(0.977 0.005 80);
  --ink:oklch(0.262 0.014 250);
  --ink-2:oklch(0.452 0.016 250);
  --line:oklch(0.262 0.014 250 / 0.15);
  --clay:oklch(0.520 0.128 300);
  --amber:oklch(0.575 0.118 242);
  --sage:oklch(0.545 0.110 166);
  --espresso:oklch(0.248 0.022 250);
  --espresso-2:oklch(0.312 0.024 250);

  /* Seamless hexagonal scute (turtle-shell plate) tessellation tile */
  --pattern-scutes: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2297%22%20viewBox%3D%220%200%2056%2097%22%3E%3Cpath%20d%3D%22M28%200%20L56%2016.17%20L56%2048.5%20L28%2064.67%20L0%2048.5%20L0%2016.17%20Z%20M28%2064.67%20L28%2097%20M0%2080.83%20L28%2097%20L56%2080.83%20M0%200%20L0%2016.17%20M56%200%20L56%2016.17%22%20fill%3D%22none%22%20stroke%3D%22%23b9b4c4%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E');
}

*{box-sizing:border-box}

html{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Spectral',Georgia,serif;
}

h1,h2,h3,blockquote{font-family:'Cormorant Garamond','Spectral',Georgia,serif}

a{color:var(--clay);text-decoration:none}
a:hover{color:var(--ink)}

::selection{background:var(--clay);color:var(--paper)}

@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14)}}
@keyframes floaty{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-9px)}}

a.ul-grow{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .45s cubic-bezier(.16,.68,.24,1);
}
a.ul-grow:hover{background-size:100% 1px;color:inherit}

.page{position:relative;overflow-x:clip;background:var(--bg)}

/* -------- Skip link -------- */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  z-index:100;
  background:var(--paper);
  color:var(--ink);
  padding:14px 22px;
  border-radius:8px;
  font-family:'Spline Sans Mono',monospace;
  font-size:12px;
  letter-spacing:.08em;
}
.skip-link:focus{
  left:16px;
  top:16px;
}

/* -------- Reveals (initial states) -------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(28px);
}
[data-reveal].visible{
  opacity:1;
  transform:none;
  transition:
    opacity 1.1s cubic-bezier(.16,.68,.24,1),
    transform 1.1s cubic-bezier(.16,.68,.24,1),
    -webkit-mask-size 1.2s cubic-bezier(.16,.68,.24,1),
    mask-size 1.2s cubic-bezier(.16,.68,.24,1);
  transition-delay: var(--delay, 0s);
}

.js [data-rise]{
  -webkit-mask-image:linear-gradient(#000,#000);
  mask-image:linear-gradient(#000,#000);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 0%;
  mask-size:100% 0%;
  -webkit-mask-position:0 100%;
  mask-position:0 100%;
}
[data-rise].visible{
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}

.js [data-wipe]{
  -webkit-mask-image:linear-gradient(#000,#000);
  mask-image:linear-gradient(#000,#000);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:0% 100%;
  mask-size:0% 100%;
  -webkit-mask-position:0 0;
  mask-position:0 0;
}
[data-wipe].visible{
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}

/* =========================================================
   1 · SITE HEADER
   ========================================================= */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:clamp(14px,2vw,20px) clamp(20px,5vw,64px);
  background:transparent;
  border-bottom:1px solid transparent;
  backdrop-filter:blur(10px);
  transition:background .6s ease, border-color .6s ease;
}
.site-header.is-scrolled{
  background:oklch(0.963 0.012 302 / 0.9);
  border-bottom-color:var(--line);
}

.site-header__brand{
  display:flex;
  flex-direction:column;
  line-height:1;
  color:var(--paper);
  transition:color .6s ease;
}
.site-header.is-scrolled .site-header__brand{color:var(--ink)}

.site-header__name{
  font-family:'Cormorant Garamond',serif;
  font-size:24px;
  font-weight:500;
  letter-spacing:.01em;
}

.site-header__tagline{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:13px;
  line-height:1;
  margin-top:4px;
  color:var(--paper);
  transition:color .6s ease;
}
.site-header.is-scrolled .site-header__tagline{color:var(--ink)}

.site-header__label{
  font-family:'Spline Sans Mono',monospace;
  font-size:9px;
  letter-spacing:.32em;
  margin-top:6px;
  text-transform:uppercase;
  color:oklch(0.982 0.005 210 / 0.65);
  transition:color .6s ease;
}
.site-header.is-scrolled .site-header__label{color:var(--ink-2)}

.site-header__cta{
  font-family:'Spline Sans Mono',monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:12px 22px;
  border-radius:999px;
  background:transparent;
  color:var(--paper);
  border:1px solid oklch(0.982 0.005 210 / 0.5);
  transition:all .5s ease;
  white-space:nowrap;
}
.site-header__cta:hover{color:var(--paper)}
.site-header.is-scrolled .site-header__cta{
  background:var(--ink);
  border-color:var(--ink);
}

/* =========================================================
   2 · HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--espresso);
}

.hero__image{
  position:absolute;
  inset:-6%;
  z-index:0;
  background-color:var(--espresso);
  background-image:image-set(url('../assets/caro-hero-v2e.webp') type('image/webp'), url('../assets/caro-hero-v2e.png') type('image/png'));
  background-size:cover;
  background-position:center top;
  animation:kenburns 24s ease-out forwards;
}

.hero__overlay{position:absolute;inset:0;z-index:1}
.hero__overlay--vertical{
  background:linear-gradient(175deg,oklch(0.19 0.022 250 / 0.58) 0%,oklch(0.28 0.024 250 / 0.10) 42%,oklch(0.15 0.020 250 / 0.88) 100%);
}
.hero__overlay--horizontal{
  background:linear-gradient(90deg,oklch(0.15 0.020 250 / 0.92) 0%,oklch(0.17 0.022 250 / 0.55) 38%,transparent 68%);
}

.hero__particles{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  pointer-events:none;
}

.hero__content{
  position:relative;
  z-index:2;
  width:100%;
  padding:clamp(96px,12vh,150px) clamp(24px,5vw,80px);
}

.hero__kicker{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:26px;
}
.hero__kicker-line{
  width:34px;
  height:1px;
  background:oklch(0.82 0.07 55);
}
.hero__kicker-text{
  font-family:'Spline Sans Mono',monospace;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:oklch(0.86 0.05 60);
}

.hero__title{
  font-weight:400;
  font-size:clamp(40px,6.4vw,96px);
  line-height:1.0;
  letter-spacing:-0.02em;
  margin:0;
  max-width:19ch;
  color:var(--paper);
}

.hero__row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-top:clamp(30px,4vw,44px);
}

.hero__paragraph-wrap{max-width:48ch}
.hero__paragraph{
  font-size:clamp(16px,1.3vw,20px);
  line-height:1.6;
  color:oklch(0.982 0.005 210 / 0.86);
  margin:0;
  font-weight:300;
}

.hero__cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:'Spline Sans Mono',monospace;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--paper);
  color:var(--ink);
  padding:16px 30px;
  border-radius:999px;
  white-space:nowrap;
  transition:background .3s, color .3s;
}
.hero__cta:hover{background:var(--clay);color:var(--paper)}

.hero__price{
  font-family:'Spline Sans Mono',monospace;
  font-size:10px;
  letter-spacing:.14em;
  color:oklch(0.982 0.005 210 / 0.55);
  margin-top:14px;
}

.hero__scroll-cue{
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  animation:floaty 3s ease-in-out infinite;
  transition:opacity .6s ease;
}
body.is-scrolled .hero__scroll-cue{
  opacity:0;
  pointer-events:none;
}
.hero__scroll-cue-text{
  font-family:'Spline Sans Mono',monospace;
  font-size:9px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:oklch(0.982 0.005 210 / 0.5);
}
.hero__scroll-cue-line{
  width:1px;
  height:34px;
  background:linear-gradient(oklch(0.82 0.07 55),transparent);
}

/* -------- shared italic accents -------- */
.accent{font-style:italic}
.accent--clay{color:var(--clay)}
.accent--gold{color:oklch(0.83 0.07 55)}

/* =========================================================
   3 · CREDENTIALS
   ========================================================= */
.credentials{
  background:var(--espresso-2);
  color:var(--paper);
  padding:clamp(28px,3vw,40px) clamp(24px,5vw,80px);
}
.credentials__wrap{max-width:1180px;margin:0 auto}
.credentials__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:oklch(0.982 0.005 210 / 0.14);
}
.credentials__item{
  background:var(--espresso-2);
  padding:clamp(20px,2vw,28px) clamp(18px,2vw,26px);
}
.credentials__value{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(22px,2vw,28px);
  font-weight:500;
}
.credentials__detail{
  font-family:'Spline Sans Mono',monospace;
  font-size:10px;
  letter-spacing:.12em;
  color:oklch(0.982 0.005 210 / 0.55);
  margin-top:8px;
}

/* =========================================================
   4 · AXIS
   ========================================================= */
.axis{
  background:var(--bg);
  padding:clamp(96px,13vw,170px) clamp(24px,5vw,80px);
}
.axis__wrap{max-width:1080px;margin:0 auto}
.axis__kicker{
  font-family:'Spline Sans Mono',monospace;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--clay);
}
.axis__title{
  font-weight:400;
  font-size:clamp(30px,4.6vw,60px);
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:22px 0 0;
  max-width:20ch;
}
.axis__columns{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:clamp(28px,5vw,72px);
  margin-top:clamp(36px,4vw,52px);
}
.axis__text-primary{
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.7;
  color:var(--ink);
  margin:0;
  font-weight:300;
}
.axis__text-secondary{
  font-size:clamp(16px,1.2vw,18px);
  line-height:1.75;
  color:var(--ink-2);
  margin:0;
  font-weight:300;
}
.axis__tags{
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:clamp(40px,5vw,60px);
}
.axis__tag{
  flex:1 1 160px;
  background:var(--bg);
  padding:clamp(22px,2vw,30px);
}
.axis__tag-label{
  font-family:'Spline Sans Mono',monospace;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.axis__tag-label--clay{color:var(--clay)}
.axis__tag-label--amber{color:var(--amber)}
.axis__tag-label--blue{color:oklch(0.60 0.055 235)}
.axis__tag-label--sage{color:var(--sage)}

/* =========================================================
   5 · MOMENTS
   ========================================================= */
.moments{
  background:var(--bg-2);
  padding:clamp(96px,13vw,170px) clamp(24px,5vw,80px);
}
.moments__wrap{max-width:1080px;margin:0 auto}
.moments__intro{max-width:640px}
.moments__kicker{
  font-family:'Spline Sans Mono',monospace;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--clay);
}
.moments__title{
  font-weight:400;
  font-size:clamp(30px,4.4vw,56px);
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:22px 0 0;
}
.moments__list{
  margin-top:clamp(44px,5vw,68px);
  display:flex;
  flex-direction:column;
}
.moments__item{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:clamp(16px,4vw,56px);
  padding:clamp(28px,3vw,40px) 0;
  border-top:1px solid var(--line);
}
.moments__item--last{border-bottom:1px solid var(--line)}
.moments__item-title{
  font-weight:500;
  font-size:clamp(21px,2.2vw,29px);
  margin:0;
  letter-spacing:-0.01em;
  max-width:20ch;
}
.moments__item-text{
  font-size:16px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0;
  font-weight:300;
}

/* =========================================================
   6 · METHOD
   ========================================================= */
.method{
  background:var(--bg);
  padding:clamp(96px,13vw,170px) clamp(24px,5vw,80px);
}
.method__wrap{max-width:1080px;margin:0 auto}
.method__intro{
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
.method__kicker{
  font-family:'Spline Sans Mono',monospace;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--clay);
}
.method__title{
  font-weight:400;
  font-size:clamp(30px,4.4vw,56px);
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:20px 0 0;
}
.method__steps{
  margin-top:clamp(52px,6vw,80px);
  display:flex;
  flex-direction:column;
}
.method__step{
  display:grid;
  grid-template-columns:auto 1fr 1.4fr;
  gap:clamp(20px,4vw,64px);
  padding:clamp(28px,3vw,44px) 0;
  border-top:1px solid var(--line);
  align-items:baseline;
}
.method__step--last{border-bottom:1px solid var(--line)}
.method__step-number{
  font-family:'Spline Sans Mono',monospace;
  font-size:clamp(26px,3vw,44px);
  font-weight:400;
  color:var(--clay);
  line-height:1;
}
.method__step-title{
  font-weight:500;
  font-size:clamp(22px,2.4vw,32px);
  margin:0;
  letter-spacing:-0.01em;
}
.method__step-text{
  font-size:16px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0;
  font-weight:300;
}
.method__note{
  font-size:clamp(15px,1.15vw,17px);
  line-height:1.7;
  color:var(--ink-2);
  margin:28px 0 0;
  font-weight:300;
  max-width:60ch;
}

/* =========================================================
   7 · ABOUT
   ========================================================= */
.about{
  background:var(--espresso);
  color:var(--paper);
  padding:clamp(96px,13vw,170px) clamp(24px,5vw,80px);
  position:relative;
  overflow:hidden;
}
.about__pattern{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.14;
  background-image:var(--pattern-scutes);
  background-size:96px auto;
  -webkit-mask-image:radial-gradient(120% 100% at 88% 30%,#000 4%,transparent 66%);
  mask-image:radial-gradient(120% 100% at 88% 30%,#000 4%,transparent 66%);
}
.about__grid{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:clamp(40px,6vw,88px);
  align-items:center;
}
.about__portrait{
  position:relative;
  aspect-ratio:4/5;
  border-radius:clamp(16px,1.6vw,22px);
  overflow:hidden;
  background-color:var(--espresso);
  background-image:image-set(url('../assets/caro-color-portrait.webp') type('image/webp'), url('../assets/caro-color-portrait.png') type('image/png'));
  background-size:cover;
  background-position:center 24%;
}
.about__kicker{
  font-family:'Spline Sans Mono',monospace;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:oklch(0.82 0.07 55);
}
.about__title{
  font-weight:400;
  font-size:clamp(30px,3.8vw,52px);
  line-height:1.1;
  letter-spacing:-0.02em;
  margin:20px 0 0;
  max-width:16ch;
}
.about__text{
  font-size:clamp(16px,1.2vw,18px);
  line-height:1.75;
  color:oklch(0.982 0.005 210 / 0.82);
  max-width:52ch;
  margin:28px 0 0;
  font-weight:300;
}
.about__text + .about__text{margin-top:20px}

.about__quote-row{
  display:flex;
  align-items:flex-start;
  gap:24px;
  margin-top:32px;
}
.about__carapace{
  width:clamp(72px,8vw,110px);
  flex-shrink:0;
  color:oklch(0.82 0.07 55 / 0.55);
}
.js .about__carapace ellipse,
.js .about__carapace path{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 2.2s cubic-bezier(.16,.68,.24,1);
}
.about__carapace.visible ellipse:nth-child(1){transition-delay:0s}
.about__carapace.visible ellipse:nth-child(2){transition-delay:.2s}
.about__carapace.visible path:nth-child(3){transition-delay:.4s}
.about__carapace.visible path:nth-child(4){transition-delay:.55s}
.about__carapace.visible path:nth-child(5){transition-delay:.7s}
.about__carapace.visible path:nth-child(6){transition-delay:.85s}
.about__carapace.visible ellipse,
.about__carapace.visible path{
  stroke-dashoffset:0;
}
/* GSAP path animates strokeDashoffset directly via inline styles;
   disable the CSS transition on those elements to avoid double motion. */
.about__carapace.gsap-draw ellipse,
.about__carapace.gsap-draw path{
  transition:none;
}

.about__quote{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(18px,1.5vw,23px);
  line-height:1.4;
  color:oklch(0.982 0.005 210 / 0.92);
  max-width:48ch;
  margin:0;
  padding-left:22px;
  border-left:2px solid oklch(0.82 0.07 55 / 0.6);
}

/* =========================================================
   8 · PRIVACY
   ========================================================= */
.privacy{
  background:var(--bg);
  padding:clamp(80px,10vw,140px) clamp(24px,5vw,80px);
}
.privacy__wrap{
  max-width:820px;
  margin:0 auto;
  text-align:center;
}
.privacy__kicker{
  font-family:'Spline Sans Mono',monospace;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--clay);
}
.privacy__title{
  font-weight:400;
  font-size:clamp(28px,4vw,50px);
  line-height:1.1;
  letter-spacing:-0.02em;
  margin:20px 0 0;
}
.privacy__text{
  font-size:clamp(17px,1.3vw,20px);
  line-height:1.65;
  color:var(--ink-2);
  max-width:52ch;
  margin:26px auto 0;
  font-weight:300;
}

/* =========================================================
   9 · ENDORSEMENTS
   ========================================================= */
.endorsements{
  background:var(--bg-2);
  padding:clamp(80px,10vw,140px) clamp(24px,5vw,80px);
}
.endorsements__wrap{max-width:1080px;margin:0 auto}
.endorsements__kicker{
  font-family:'Spline Sans Mono',monospace;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--clay);
}
.endorsements__title{
  font-weight:400;
  font-size:clamp(28px,4vw,50px);
  line-height:1.1;
  letter-spacing:-0.02em;
  margin:20px 0 0;
  max-width:20ch;
}
.endorsements__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:clamp(36px,4vw,52px);
}
.endorsements__item{
  background:var(--bg-2);
  padding:clamp(28px,3vw,44px);
}
.endorsements__name{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(20px,1.8vw,25px);
  font-weight:500;
  color:var(--ink-2);
}
.endorsements__detail{
  font-family:'Spline Sans Mono',monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-top:10px;
}
.endorsements__note{
  font-family:'Spline Sans Mono',monospace;
  font-size:10px;
  letter-spacing:.12em;
  color:var(--ink-2);
  margin:18px 0 0;
}

/* =========================================================
   10 · BOOKING (primera conversación)
   ========================================================= */
.booking{
  background:var(--bg);
  padding:clamp(96px,13vw,170px) clamp(24px,5vw,80px);
}
.booking__grid{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:clamp(40px,6vw,80px);
}
.booking__kicker{
  font-family:'Spline Sans Mono',monospace;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--clay);
}
.booking__title{
  font-weight:400;
  font-size:clamp(30px,4.4vw,56px);
  line-height:1.06;
  letter-spacing:-0.02em;
  margin:20px 0 0;
  max-width:14ch;
}
.booking__text{
  font-size:clamp(16px,1.25vw,19px);
  line-height:1.7;
  color:var(--ink-2);
  max-width:46ch;
  margin:26px 0 0;
  font-weight:300;
}
.booking__text + .booking__text{margin-top:20px}
.booking__value{color:var(--ink)}
.booking__cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:'Spline Sans Mono',monospace;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--ink);
  color:var(--paper);
  padding:16px 30px;
  border-radius:999px;
  margin-top:32px;
  transition:background .3s;
}
.booking__cta:hover{background:var(--clay);color:var(--paper)}

.booking__not-kicker{
  font-family:'Spline Sans Mono',monospace;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:6px;
}
.booking__not-item{
  display:flex;
  gap:16px;
  padding:20px 0;
  border-top:1px solid var(--line);
}
.booking__not-item--last{border-bottom:1px solid var(--line)}
.booking__not-marker{color:var(--clay)}
.booking__not-text{
  font-size:16px;
  line-height:1.65;
  color:var(--ink-2);
  margin:0;
  font-weight:300;
}

/* =========================================================
   11 · FAQ / ACCORDION
   ========================================================= */
.faq{
  background:var(--bg-2);
  padding:clamp(96px,13vw,170px) clamp(24px,5vw,80px);
}
.faq__wrap{max-width:860px;margin:0 auto}
.faq__kicker{
  font-family:'Spline Sans Mono',monospace;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--clay);
}
.faq__title{
  font-weight:400;
  font-size:clamp(30px,4.4vw,56px);
  line-height:1.06;
  letter-spacing:-0.02em;
  margin:20px 0 clamp(40px,5vw,60px);
}

.accordion__item{border-top:1px solid var(--line)}

.accordion__toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:26px 0;
  background:none;
  border:none;
  cursor:pointer;
  text-align:left;
  font-family:'Cormorant Garamond',serif;
}
.accordion__question{
  font-size:clamp(19px,1.7vw,25px);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.accordion__icon{
  font-size:24px;
  color:var(--clay);
  flex-shrink:0;
  transition:transform .4s ease;
  transform:rotate(0deg);
}
.accordion__toggle[aria-expanded="true"] .accordion__icon{
  transform:rotate(45deg);
}

.accordion__panel{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .5s ease, opacity .5s ease;
}
.accordion__item.accordion__item--open .accordion__panel{
  max-height:520px;
  opacity:1;
}
.accordion__answer{
  font-size:17px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 28px;
  max-width:60ch;
  font-weight:300;
}

/* =========================================================
   12 · CLOSING
   ========================================================= */
.closing{
  background:var(--espresso);
  color:var(--paper);
  padding:clamp(96px,14vw,190px) clamp(24px,5vw,80px);
  position:relative;
  overflow:hidden;
}
.closing__pattern{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.14;
  background-image:var(--pattern-scutes);
  background-size:96px auto;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 0%,transparent 70%);
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 0%,transparent 70%);
}
.closing__wrap{
  position:relative;
  z-index:1;
  max-width:820px;
  margin:0 auto;
  text-align:center;
}
.closing__title{
  font-weight:400;
  font-size:clamp(32px,5vw,72px);
  line-height:1.04;
  letter-spacing:-0.025em;
  margin:0;
}
.closing__cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:'Spline Sans Mono',monospace;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--paper);
  color:var(--ink);
  padding:18px 34px;
  border-radius:999px;
  margin-top:clamp(32px,4vw,44px);
  transition:background .3s, color .3s;
}
.closing__cta:hover{background:var(--clay);color:var(--paper)}

/* =========================================================
   13 · SITE FOOTER
   ========================================================= */
.site-footer{
  background:var(--espresso-2);
  color:var(--paper);
  padding:clamp(48px,6vw,72px) clamp(24px,5vw,80px) clamp(28px,3vw,40px);
}
.site-footer__top{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  justify-content:space-between;
  align-items:flex-start;
}
.site-footer__brand-name{
  font-family:'Cormorant Garamond',serif;
  font-size:26px;
  font-weight:500;
}
.site-footer__brand-detail{
  font-family:'Spline Sans Mono',monospace;
  font-size:10px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:oklch(0.982 0.005 210 / 0.55);
  margin-top:10px;
}
.site-footer__nav{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.site-footer__link{
  font-family:'Spline Sans Mono',monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:oklch(0.982 0.005 210 / 0.7);
  padding:12px 0;
  display:inline-block;
}
.site-footer__legal{
  max-width:1180px;
  margin:clamp(36px,4vw,52px) auto 0;
  padding-top:22px;
  border-top:1px solid oklch(0.982 0.005 210 / 0.14);
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:space-between;
  font-family:'Spline Sans Mono',monospace;
  font-size:10px;
  letter-spacing:.12em;
  color:oklch(0.982 0.005 210 / 0.42);
}

/* =========================================================
   Responsive · 860px (template columns)
   ========================================================= */
@media (max-width:860px){
  .credentials__grid{grid-template-columns:1fr 1fr}
  .axis__columns{grid-template-columns:1fr}
  .moments__item{grid-template-columns:1fr}
  .method__step{grid-template-columns:auto 1fr}
  .method__step-text{grid-column:2}
  .about__grid{grid-template-columns:1fr}
  .about__quote-row{flex-direction:column;gap:16px}
  .endorsements__grid{grid-template-columns:1fr}
  .booking__grid{grid-template-columns:1fr}

  .hero__image{
    /* Re-create the desktop art direction (blue-violet grade baked into
       the 16:9 asset) on top of the ungraded vertical mobile photo. */
    background-image:
      linear-gradient(180deg, oklch(0.34 0.055 278 / 0.82), oklch(0.22 0.048 262 / 0.9)),
      url('../assets/caro-hero-mobile.webp');
    background-blend-mode:multiply, normal;
    background-position:center top;
    transform-origin:center 35%;
    filter:saturate(0.78);
  }

  .site-header__label{display:none}
  .site-header{padding-block:12px}
  .hero__scroll-cue{bottom:calc(18px + env(safe-area-inset-bottom))}
  .hero__content{padding-top:clamp(120px,16vh,150px)}
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero__image{animation:none}
  .hero__scroll-cue{animation:none}
  [data-reveal]{opacity:1 !important;transform:none !important}
  [data-rise],[data-wipe]{
    -webkit-mask-size:100% 100% !important;
    mask-size:100% 100% !important;
  }
  .about__carapace ellipse,
  .about__carapace path{
    stroke-dashoffset:0 !important;
    transition:none !important;
  }
}