/* ============================================================
   LindaKomoni — Reflexology
   Design system adapted from the Meridian reference:
   swatches, type scale, spacing scale and interaction language.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --dark:#181312;
  --dark-2:#2e2927;
  --light:#f3ebe4;
  --light-2:#d8cdbc;
  --brand:#006039;          /* brand green */
  --brand-soft:#2E8B62;     /* lighter green for dark surfaces, where #006039 disappears */

  --bg:var(--light);
  --bg-2:var(--light-2);
  --text:var(--dark);
  --text-faded:color-mix(in srgb, var(--dark) 70%, transparent);
  --border:color-mix(in srgb, var(--dark) 16%, transparent);
  --card:var(--light-2);
  --accent:var(--brand);

  --f-sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Gambarino","Times New Roman",Georgia,serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",monospace;

  --fs-display:6rem;
  --fs-h1:4.5rem;
  --fs-h2:3.5rem;
  --fs-h3:2.75rem;
  --fs-h4:2.25rem;
  --fs-h5:1.75rem;
  --fs-h6:1.5rem;
  --fs-lg:1.375rem;
  --fs-main:1.125rem;
  --fs-sm:1rem;
  --fs-xs:.875rem;
  --fs-xxs:.75rem;

  --s-xs:.5rem; --s-sm:.75rem; --s-md:1rem; --s:1.5rem;
  --s-lg:2rem; --s-xl:3rem; --s-huge:4rem;
  --p-sm:3rem; --p-main:5rem; --p-lg:8rem; --p-xl:10rem;

  --r:.375rem; --r-sm:.1875rem; --r-round:100vw;
  --site:90rem; --margin:2rem; --gutter:1rem;

  --ease:cubic-bezier(.65,.05,.36,1);
  --ease-btn:cubic-bezier(.645,.045,.355,1);   /* the reference's button curve */
  --s-xs2:.25rem;
  /* photo colour grade: warm sand hue blended over every image */
  --grade:#a87a45;
  --grade-strength:.34;
  /* chevron for custom select indicators — same glyph as the reference's dropdowns */
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M9.75 4.5 6 8.25 2.25 4.5' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Crect x='2.1' y='3.4' width='11.8' height='10.5' rx='1.2'/%3E%3Cpath d='M2.1 6.9h11.8M5.3 1.9v2.6M10.7 1.9v2.6'/%3E%3C/g%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.theme-dark{
  --bg:var(--dark);
  --bg-2:var(--dark-2);
  --text:var(--light);
  --text-faded:color-mix(in srgb, var(--light) 70%, transparent);
  --border:color-mix(in srgb, var(--light) 16%, transparent);
  --card:var(--dark-2);
  /* #006039 sits at 2.4:1 on #181312 — unreadable. Small accents on dark
     surfaces use the lighter green instead. */
  --accent:var(--brand-soft);
}
.theme-sand{ --bg:var(--light-2); --card:var(--light); }

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{
  margin:0;background:var(--light);color:var(--dark);
  font-family:var(--f-sans);font-size:var(--fs-main);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--brand);color:var(--light)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.container{width:100%;max-width:var(--site);margin-inline:auto;padding-inline:var(--margin)}
.section{padding-block:var(--p-lg);background:var(--bg);color:var(--text);position:relative}
.section.is-tight{padding-block:var(--p-main)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-lg) var(--gutter)}
.rule{height:1px;background:var(--border);border:0;margin:0}

/* ---------- TYPE ---------- */
.display{font-family:var(--f-serif);font-weight:400;font-size:var(--fs-display);line-height:1.05;letter-spacing:-.03em}
.h1{font-family:var(--f-serif);font-weight:400;font-size:var(--fs-h1);line-height:1.1;letter-spacing:-.03em}
.h2{font-family:var(--f-serif);font-weight:400;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.03em}
.h3{font-family:var(--f-serif);font-weight:400;font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.02em}
.h4{font-family:var(--f-serif);font-weight:400;font-size:var(--fs-h4);line-height:1.2;letter-spacing:-.02em}
.h5{font-size:var(--fs-h5);font-weight:500;line-height:1.25;letter-spacing:-.02em}
.h6{font-size:var(--fs-h6);font-weight:500;line-height:1.3;letter-spacing:-.01em}
.lg{font-size:var(--fs-lg);line-height:1.4}
.sm{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.mono{font-family:var(--f-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}
.faded{color:var(--text-faded)}
.measure{max-width:38rem}
.measure-sm{max-width:30rem}
.stack{display:flex;flex-direction:column;gap:var(--s)}
.stack-sm{display:flex;flex-direction:column;gap:var(--s-sm)}
.stack-lg{display:flex;flex-direction:column;gap:var(--s-lg)}

.eyebrow{display:inline-flex;align-items:center;gap:var(--s-xs);
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.03em;
  text-transform:uppercase;color:var(--text-faded)}
.eyebrow::before{content:"";width:.25rem;height:.25rem;background:var(--accent);flex:none}

.tag{display:inline-block;border:1px solid var(--border);border-radius:var(--r-round);
  padding:.13rem .6rem;font-family:var(--f-mono);font-size:var(--fs-xxs);
  text-transform:uppercase;letter-spacing:.04em;color:var(--text)}
.tag.is-solid{background:var(--text);border-color:var(--text);color:var(--bg)}

/* ---------- BUTTONS ----------
   Anatomy lifted from the reference: an outer shell with 0.25rem of padding
   holds a text block and a contrasting square badge carrying a north-east
   arrow. On hover the whole button scales to 0.98, the label slides up out
   of its clip while a duplicate rises into place, and the arrow exits right
   while a second arrow enters from the left. Colours do not change. */
.btn{
  --btn-bg:var(--brand);
  --btn-border:var(--brand);
  --btn-fg:var(--light);
  --badge-bg:var(--light);
  --badge-fg:var(--dark);
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--s-xs2, .25rem);
  border:1px solid var(--btn-border);border-radius:var(--r);
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:var(--fs-sm);line-height:1.5;text-align:center;cursor:pointer;
  transition:transform .3s var(--ease-btn),color .3s var(--ease-btn),
             background-color .3s var(--ease-btn),border-color .3s var(--ease-btn)}
.btn:hover{transform:scale(.98)}

.btn-inner{display:block;padding:var(--s-sm) var(--s)}
.btn-clip{display:block;position:relative;overflow:hidden}
.btn-t{display:block;white-space:nowrap;transition:transform .4s var(--ease-btn)}
.btn-t.is-hover{position:absolute;inset:100% auto auto 0;pointer-events:none}
.btn:hover .btn-t{transform:translateY(-100%)}

.btn-badge{flex:none;display:flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;border-radius:var(--r-sm);
  background:var(--badge-bg);color:var(--badge-fg)}
.btn-ico{position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:center;width:50%;height:50%}
.btn-ico svg{width:100%;height:100%;display:block;transition:transform .4s var(--ease-btn)}
.btn-ico svg.is-hover{position:absolute;inset:0 auto auto -100%}
.btn:hover .btn-ico svg{transform:translateX(100%)}

.btn.is-ghost{--btn-bg:transparent;--btn-border:var(--border);--btn-fg:var(--text);
  --badge-bg:var(--text);--badge-fg:var(--bg)}
.btn.is-solid{--btn-bg:var(--text);--btn-border:var(--text);--btn-fg:var(--bg);
  --badge-bg:var(--bg);--badge-fg:var(--text)}
.btn.is-on-dark{--btn-bg:transparent;--btn-fg:var(--light);
  --btn-border:color-mix(in srgb,var(--light) 35%,transparent);
  --badge-bg:var(--light);--badge-fg:var(--dark)}
/* compact variant for the header */
.btn.is-sm{padding:.1875rem}
.btn.is-sm .btn-inner{padding:.35rem .75rem;font-size:var(--fs-xs)}
.btn.is-sm .btn-badge{width:1.9rem;height:1.9rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-sm)}

/* text link with the same arrow behaviour, no shell */
.link-arrow{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--fs-sm)}
.la-ico{position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:center;width:1rem;height:1rem;flex:none}
.la-ico svg{width:100%;height:100%;display:block;transition:transform .4s var(--ease-btn)}
.la-ico svg.is-hover{position:absolute;inset:0 auto auto -100%}
.link-arrow:hover .la-ico svg{transform:translateX(100%)}

/* ---------- MEDIA ---------- */
.media{position:relative;overflow:hidden;border-radius:var(--r);
  background-color:#a8917a;
  background-image:var(--src,none),linear-gradient(150deg,#d7c3a8 0%,#a8917a 48%,#6d5a4c 100%);
  background-size:cover;background-position:center}
.media.is-warm{background-color:#d8cdbc;
  background-image:var(--src,none),linear-gradient(160deg,#f0dcc2 0%,#d8cdbc 45%,#b49a7d 100%)}
.media.is-deep{background-color:#2e2927;
  background-image:var(--src,none),linear-gradient(160deg,#43372f 0%,#2e2927 55%,#181312 100%)}
/* warm colour grade — pulls every photo onto the same muted palette,
   applied as a blend layer so overlaid text/tags stay untouched */
.media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--grade);mix-blend-mode:color;opacity:var(--grade-strength)}
.media::after{content:"";position:absolute;inset:0;z-index:1;background-image:var(--grain);
  opacity:.14;mix-blend-mode:overlay;pointer-events:none}
/* the reference's own ratios: split visual 6.72/8, service card 1/1, case image 5/3.3 */
.media.is-square{aspect-ratio:1/1}
.media.is-portrait{aspect-ratio:6.72/8}
.media.is-wide{aspect-ratio:5/3.3}
/* Linda's own portrait: enough grade to sit with the stock photography,
   not so much that her skin tone goes olive. Raise toward .34 to match the
   rest exactly, drop to 0 for the untouched photo. */
.media.is-soft-grade{--grade-strength:.15}
.media-cap{position:absolute;left:var(--s-md);bottom:var(--s-md);z-index:2}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:999;padding-block:var(--s-md);color:var(--light);
  transition:background .45s var(--ease),backdrop-filter .45s var(--ease),padding .45s var(--ease)}
.nav::before{content:"";position:absolute;inset:0 0 auto;height:7rem;pointer-events:none;
  background:linear-gradient(180deg,rgba(24,19,18,.6) 0%,rgba(24,19,18,0) 100%);
  transition:opacity .45s var(--ease)}
.nav.is-stuck::before{opacity:0}
.nav-inner{position:relative;z-index:1}
/* Frosted glass on scroll rather than a solid black bar. It goes LIGHT, not
   dark: the page beneath is cream, and a translucent dark bar over cream only
   reaches ~2:1 against cream nav text. Light glass + dark text reads cleanly
   over both the cream sections and the dark hero. */
.nav.is-stuck{
  background:color-mix(in srgb,var(--light) 72%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
          backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid color-mix(in srgb,var(--dark) 10%,transparent);
  color:var(--dark);
  padding-block:.55rem}
/* the logo has no currentColor once it is an <img>, so swap between the two files */
.brand-mark{position:relative}
.brand-mark img{position:absolute;inset:0;width:100%;height:100%;
  transition:opacity .45s var(--ease)}
.brand-mark .mark-light{opacity:1}
.brand-mark .mark-dark{opacity:0}
.nav.is-stuck .brand-mark .mark-light{opacity:0}
.nav.is-stuck .brand-mark .mark-dark{opacity:1}
.nav.is-stuck .brand-sub{border-left-color:color-mix(in srgb,var(--dark) 25%,transparent)}
.nav-inner{display:flex;align-items:center;gap:var(--s-lg)}
.brand{display:flex;align-items:center;gap:.6rem;flex:none}
.brand-mark{width:3.5rem;height:3.5rem;flex:none;display:block}
.brand-name{font-size:1.125rem;font-weight:500;letter-spacing:-.035em;white-space:nowrap}
.brand-sub{font-family:var(--f-mono);font-size:var(--fs-xxs);text-transform:uppercase;
  letter-spacing:.1em;opacity:.55;padding-left:.65rem;
  border-left:1px solid color-mix(in srgb,var(--light) 25%,transparent)}
.nav-links{display:flex;align-items:center;gap:var(--s);margin-left:auto}
/* the reference fades nav links on hover rather than brightening them */
.nav-links a{font-size:var(--fs-sm);opacity:1;transition:opacity .3s var(--ease-btn)}
.nav-links a:hover{opacity:.6}
.nav-cta{flex:none}
.nav-toggle{display:none;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;margin-left:auto}
.nav-toggle i{display:block;width:1.2rem;height:1px;background:currentColor;position:relative;transition:.35s var(--ease)}
.nav-toggle i::before,.nav-toggle i::after{content:"";position:absolute;left:0;width:100%;height:1px;background:currentColor;transition:.35s var(--ease)}
.nav-toggle i::before{top:-.34rem}
.nav-toggle i::after{top:.34rem}
.nav.is-open .nav-toggle i{background:transparent}
.nav.is-open .nav-toggle i::before{top:0;transform:rotate(45deg)}
.nav.is-open .nav-toggle i::after{top:0;transform:rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-block:var(--p-xl) var(--p-main);background:var(--dark);color:var(--light);overflow:hidden}
.hero-bg{position:absolute;inset:0;background-color:#5c4a3d;
  background-image:var(--src,none),
    radial-gradient(120% 90% at 78% 18%, #b98f5a 0%, transparent 55%),
    linear-gradient(165deg,#3d322a 0%,#241d1a 55%,#181312 100%);
  background-size:cover;background-position:center;
  transform:scale(1.08);transition:transform 1.6s var(--ease)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:var(--grade);mix-blend-mode:color;opacity:.18}
.is-ready .hero-bg{transform:scale(1)}
/* Tuned against the hero photo by measuring contrast behind each text band,
   not by eye. Stronger from 62% down, where the headline and copy sit. */
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,19,18,.60) 0%,rgba(24,19,18,.42) 30%,rgba(24,19,18,.72) 62%,rgba(24,19,18,.94) 100%)}
.hero-grain{position:absolute;inset:0;background-image:var(--grain);opacity:.12;mix-blend-mode:overlay}
.hero .container{position:relative;z-index:2;width:100%}
.hero-layout{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-lg) var(--gutter);align-items:end}
.hero-title{grid-column:span 7}
.hero-aside{grid-column:9/13;display:flex;flex-direction:column;gap:var(--s);
  border-left:1px solid color-mix(in srgb,var(--light) 20%,transparent);padding-left:var(--s)}
.hero .eyebrow{color:color-mix(in srgb,var(--light) 70%,transparent)}
.hero-scroll{position:absolute;right:var(--margin);bottom:var(--p-main);z-index:2;
  display:flex;align-items:center;gap:.55rem;font-family:var(--f-mono);font-size:var(--fs-xxs);
  text-transform:uppercase;letter-spacing:.1em;color:color-mix(in srgb,var(--light) 55%,transparent)}
.hero-scroll i{display:block;width:1px;height:2.5rem;background:currentColor;opacity:.5;position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;inset:0 0 auto;height:40%;background:var(--accent);animation:trickle 2.4s var(--ease) infinite}
@keyframes trickle{0%{transform:translateY(-100%)}100%{transform:translateY(250%)}}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--dark-2);color:var(--light);padding-block:var(--s-md);
  border-block:1px solid color-mix(in srgb,var(--light) 12%,transparent);overflow:hidden}
.marquee-track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;gap:var(--s-xl);padding-right:var(--s-xl);flex:none}
.marquee-item{display:inline-flex;align-items:center;gap:var(--s-sm);
  font-family:var(--f-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;
  color:color-mix(in srgb,var(--light) 65%,transparent);white-space:nowrap}
.marquee-item::before{content:"";width:.28rem;height:.28rem;background:var(--accent);flex:none;rotate:45deg}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.stat{display:flex;flex-direction:column;gap:var(--s-xs);
  padding-left:var(--s-md);border-left:1px solid var(--border)}
.stat-value{font-family:var(--f-serif);font-size:var(--fs-h3);line-height:1.05;letter-spacing:-.03em}
.stat-label{font-family:var(--f-mono);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.04em;line-height:1.3;color:var(--text-faded)}

/* ---------- SPLIT ---------- */
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-huge) var(--gutter);align-items:center}
.split-media{grid-column:span 5}
.split-body{grid-column:7/13;display:flex;flex-direction:column;gap:var(--s)}
.split.is-flip .split-media{grid-column:8/13;order:2}
.split.is-flip .split-body{grid-column:1/7;order:1}

.section-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s) var(--gutter);
  align-items:end;margin-bottom:var(--p-sm)}
.section-head .sh-left{grid-column:span 7;display:flex;flex-direction:column;gap:var(--s-md)}
.section-head .sh-right{grid-column:9/13;display:flex;flex-direction:column;gap:var(--s-md);align-items:flex-start}

/* ---------- ZONE CARDS ---------- */
.zones{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-xl) var(--gutter)}
/* ---------- SERIF LEAD ----------
   her copy closes several sections with a single quiet line; the serif face
   sets it apart from the body text without needing a heading */
.serif-lead{font-family:var(--f-serif);font-size:var(--fs-lg);line-height:1.35;
  letter-spacing:-.01em;color:var(--text);padding-top:var(--s-xs)}

/* ---------- WHEN IT HELPS ----------
   Nine life moments, outlined rather than filled: an unfilled cell sits on the
   sand section without turning the page into a wall of panels, and the hairline
   is the same weight as the rules used elsewhere. Photographs were tried here
   and taken back out — the cards carry the icon alone. */
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-lg)}
.care-card{display:flex;flex-direction:column;gap:var(--s-sm);
  padding:var(--s);
  background:transparent;border:1px solid var(--border);border-radius:.5rem;
  transition:border-color .5s var(--ease)}
.care-card:hover{border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.care-head{display:flex;align-items:flex-start;gap:var(--s-sm)}
.care-ico{width:2rem;height:2rem;flex:none;display:block;color:var(--accent);
  /* pinned to the first line of the title, not centred on a title that wraps */
  margin-top:-.125rem;transition:transform .6s var(--ease)}
.care-card:hover .care-ico{transform:translateY(-2px) rotate(-3deg)}
.care-card h3{font-size:var(--fs-lg);font-weight:500;letter-spacing:-.01em;
  line-height:1.2}
.care-signs{line-height:1.5}
.care-card > p:last-child{color:var(--text)}

/* ---------- ABOUT ---------- */
.about-role{font-family:var(--f-serif);font-size:var(--fs-lg);line-height:1.3;
  letter-spacing:-.01em;color:var(--text-faded)}
.about-chapter{display:block;padding-top:var(--s-xs)}
.about-quote{display:flex;flex-wrap:wrap;gap:var(--s-xs) var(--s-md);
  font-family:var(--f-serif);font-size:var(--fs-h4);line-height:1.15;letter-spacing:-.02em;
  padding-block:var(--s-xs)}
.about-close{padding-top:0}
/* the narrative is long; keep the portrait in view alongside it */
.split.is-tall{align-items:start}
.split.is-tall .split-media{position:sticky;top:7rem}

.zone{grid-column:span 3;display:flex;flex-direction:column;gap:var(--s-md);
  padding-bottom:var(--s-lg);border-bottom:1px solid var(--border);position:relative}
.zone::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--text);transition:width .6s var(--ease)}
.zone:hover::after{width:100%}
.zone-visual{aspect-ratio:1/1;border-radius:var(--r);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background-color:var(--card);
  background-image:var(--src,none);background-size:cover;background-position:center}
.zone-visual::before{content:"";position:absolute;inset:0;z-index:1;
  background:var(--grade);mix-blend-mode:color;opacity:var(--grade-strength)}
.zone-visual::after{content:"";position:absolute;inset:0;z-index:1;
  background-image:var(--grain);opacity:.1;mix-blend-mode:overlay}
.zone-visual{transition:transform .8s var(--ease)}
.zone:hover .zone-visual{transform:scale(1.015)}
.zone-num{position:absolute;top:var(--s-md);right:var(--s-md);z-index:2;
  background:color-mix(in srgb,var(--dark) 55%,transparent);
  border-color:color-mix(in srgb,var(--light) 45%,transparent);
  color:var(--light);backdrop-filter:blur(6px)}
.zone h3{font-size:var(--fs-h6);font-weight:500;letter-spacing:-.01em}

/* ---------- MERIDIAN BAND ---------- */
.meridian{position:relative;overflow:hidden}
.meridian-mark{position:absolute;right:-6rem;top:50%;transform:translateY(-50%);width:34rem;height:34rem;
  opacity:.07;pointer-events:none}
.meridian-mark img{width:100%;height:100%;animation:spin 90s linear infinite}
@keyframes spin{to{rotate:360deg}}
.meridian .container{position:relative;z-index:2}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.step{grid-column:span 3;display:flex;flex-direction:column;gap:var(--s-sm);
  padding-top:var(--s);border-top:1px solid var(--border)}
.step-num{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--accent);letter-spacing:.06em}
.step h3{font-size:var(--fs-h6);font-weight:500;letter-spacing:-.01em}

/* ---------- FEATURE BAND ---------- */
.feature{position:relative;overflow:hidden;border-radius:var(--r);
  background-color:#2e2927;color:var(--light);padding:var(--p-sm)}
/* image lives on ::before so the grade and scrim never touch the copy */
.feature::before{content:"";position:absolute;inset:0;
  background-color:#2e2927;
  background-image:
    linear-gradient(150deg, rgba(24,19,18,.88) 0%, rgba(24,19,18,.62) 55%, rgba(24,19,18,.9) 100%),
    var(--src,none),
    linear-gradient(150deg,#3d332c 0%,#241d1a 60%,#181312 100%);
  background-size:cover;background-position:center}
.feature::after{content:"";position:absolute;inset:0;background-image:var(--grain);
  opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.feature-inner{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,1fr);
  gap:var(--s-lg) var(--gutter);align-items:end}
.feature-body{grid-column:span 7;display:flex;flex-direction:column;gap:var(--s)}
.feature-side{grid-column:9/13;display:flex;flex-direction:column;gap:var(--s-md)}
.feature .eyebrow{color:color-mix(in srgb,var(--light) 70%,transparent)}
.feature .btn.is-ghost{border-color:color-mix(in srgb,var(--light) 35%,transparent);color:var(--light)}
.feature .btn.is-ghost:hover{background:var(--light);color:var(--dark);border-color:var(--light)}

/* ---------- PRINCIPLES / QUOTES ---------- */
.quotes{display:flex;flex-direction:column;align-items:center;gap:var(--s-lg);text-align:center}
/* all quotes share one grid cell, so the stage sizes to the tallest one */
.quote-stage{display:grid;width:100%;max-width:56rem}
.quote{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:var(--s);
  opacity:0;transform:translateY(1rem);transition:opacity .7s var(--ease),transform .7s var(--ease);
  pointer-events:none}
.quote.is-active{opacity:1;transform:none;pointer-events:auto}
/* the dot stays small, the hit area is finger-sized */
.quote-dots{display:flex;gap:.1rem}
.quote-dot{width:2.5rem;height:2.5rem;display:grid;place-items:center;
  background:none;border-radius:var(--r-round);-webkit-tap-highlight-color:transparent}
.quote-dot::before{content:"";display:block;width:.4rem;height:.4rem;border-radius:var(--r-round);
  background:color-mix(in srgb,var(--text) 25%,transparent);
  transition:background .3s var(--ease),width .3s var(--ease)}
.quote-dot.is-active::before{background:var(--accent);width:1.4rem}

/* ---------- ABOUT ---------- */
.about-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s) var(--gutter);
  padding-top:var(--s);border-top:1px solid var(--border)}
.about-meta div{display:flex;flex-direction:column;gap:.15rem}

/* ---------- BOOKING ---------- */
.booking{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-huge) var(--gutter);align-items:start}
.booking-info{grid-column:span 5;display:flex;flex-direction:column;gap:var(--s-lg)}
.booking-widget{grid-column:7/13}
.price-card{border:1px solid var(--border);border-radius:var(--r);padding:var(--s-lg);
  display:flex;flex-direction:column;gap:var(--s-md);background:var(--card)}
.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-md)}
.price-row + .price-row{padding-top:var(--s-md);border-top:1px solid var(--border)}

/* the session rows double as the picker that drives the calendar embed */
.price-row.is-option{width:100%;text-align:left;align-items:center;cursor:pointer;
  padding-block:.55rem;padding-inline:.6rem;margin-inline:-.6rem;
  border-radius:var(--r-sm);
  transition:background-color .3s var(--ease-btn)}
.price-row.is-option + .price-row.is-option{margin-top:0}
.price-row.is-option:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
.opt-mark{flex:none;width:.6rem;height:.6rem;border:1px solid var(--border);
  transition:background-color .3s var(--ease-btn),border-color .3s var(--ease-btn)}
.price-row.is-option[aria-pressed="true"] .opt-mark{background:var(--accent);border-color:var(--accent)}
.price-row.is-option[aria-pressed="true"]{background:color-mix(in srgb,var(--text) 5%,transparent)}

.cal-head-note{margin-left:auto}
/* shown only while every session points at the same Google schedule */
.cal-note{padding:.75rem var(--s);border-top:1px solid var(--border);
  font-size:var(--fs-xs);color:var(--text-faded)}
.detail-list{display:flex;flex-direction:column;gap:var(--s-sm)}
.detail-list li{display:flex;gap:var(--s-sm);align-items:flex-start;font-size:var(--fs-sm);color:var(--text-faded)}
.detail-list li::before{content:"";width:.28rem;height:.28rem;background:var(--accent);flex:none;margin-top:.6rem;rotate:45deg}

.cal-shell{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--card)}
.cal-head{display:flex;align-items:center;gap:var(--s-sm);padding:var(--s-md) var(--s);
  border-bottom:1px solid var(--border)}
.cal-dot{width:.45rem;height:.45rem;border-radius:var(--r-round);background:var(--accent);flex:none}
.cal-frame{width:100%;height:640px;border:0;display:block;background:#fff}
.cal-fallback{padding:var(--s-lg);display:flex;flex-direction:column;gap:var(--s)}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-family:var(--f-mono);font-size:var(--fs-xxs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-faded)}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--fs-sm);color:var(--text);background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:.6rem .75rem;width:100%;
  transition:border-color .3s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field ::placeholder{color:color-mix(in srgb,var(--text) 42%,transparent);opacity:1}
/* the select shows its prompt option in the same muted tone until a real choice is made */
.select-wrap select.is-prompt{color:color-mix(in srgb,var(--text) 42%,transparent)}
.select-wrap select option{color:var(--dark);background:var(--light)}
.field textarea{resize:vertical;min-height:6rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-sm)}

/* This form sits on the dark theme. Browsers draw native control furniture —
   the select arrow, the date picker icon — in a dark tone by default, which is
   invisible on #181312. `color-scheme` tells them to render the light variants,
   and `accent-color` puts the brand tone in the date picker itself. */
.theme-dark .field input,
.theme-dark .field select,
.theme-dark .field textarea{color-scheme:dark}
.field input,.field select{accent-color:var(--accent)}

/* Custom chevron: the native arrow varies wildly across platforms and is the
   thing most likely to vanish. Masked, so it takes the theme's text colour. */
.select-wrap{position:relative;display:block;color:var(--text)}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:2.5rem}
.select-wrap::after{content:"";position:absolute;right:.9rem;top:50%;transform:translateY(-50%);
  width:.75rem;height:.75rem;pointer-events:none;opacity:.75;
  background-color:currentColor;
  -webkit-mask:var(--chevron) center/contain no-repeat;
          mask:var(--chevron) center/contain no-repeat;
  transition:opacity .3s var(--ease-btn)}
.select-wrap:hover::after{opacity:1}

/* Date field. iOS Safari renders no calendar indicator at all, and the browsers
   that do draw one style it inconsistently — so draw our own, masked in
   currentColor like the chevron, and let the native trigger sit invisibly on top
   stretched across the whole field so a tap anywhere opens the picker. */
.date-wrap{position:relative;display:block;color:var(--text)}
.date-wrap input[type="date"]{padding-right:2.5rem}
.date-wrap::after{content:"";position:absolute;right:.85rem;top:50%;transform:translateY(-50%);
  width:1rem;height:1rem;pointer-events:none;opacity:.75;
  background-color:currentColor;
  -webkit-mask:var(--calendar) center/contain no-repeat;
          mask:var(--calendar) center/contain no-repeat;
  transition:opacity .3s var(--ease-btn)}
.date-wrap:hover::after{opacity:1}
/* A native date field renders in the BROWSER's locale, not the page's — an
   English-locale Chrome shows mm/dd/yyyy and an English calendar on the French
   page. So paint our own text over the field (the placeholder while empty, the
   date formatted in the page's language once set) and only reveal the native
   input while it has focus, so typing still works. scripts.js fills
   data-display. The picker popup itself stays browser UI and cannot be
   overridden without replacing it wholesale. */
.date-wrap input[type="date"]{color:transparent}
/* keyed to typing, not focus: a phone keeps the field focused after the picker
   closes, so :focus-within would leave the browser-locale text showing there */
.date-wrap.is-editing input[type="date"]{color:var(--text)}
.date-wrap::before{content:attr(data-display);position:absolute;
  left:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;
  font-size:var(--fs-sm);line-height:1.5;color:var(--text);
  white-space:nowrap;overflow:hidden;max-width:calc(100% - 3.5rem)}
.date-wrap.is-empty::before{color:color-mix(in srgb,var(--text) 42%,transparent)}
.date-wrap.is-editing::before{display:none}
/* Drop the native furniture entirely: it is invisible on dark, styled
   inconsistently, and its intrinsic height made the date field taller than every
   other control in the form. scripts.js opens the picker on click instead. */
.date-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.date-wrap input[type="date"]::-webkit-inner-spin-button,
.date-wrap input[type="date"]::-webkit-clear-button{
  -webkit-appearance:none;appearance:none;display:none}
.date-wrap input[type="date"]{cursor:pointer}

/* Every control is the same height, whatever its type. An explicit height rather
   than min-height: date inputs have an intrinsically taller inner edit area than
   text inputs, and each engine sizes it differently, so intrinsic height can
   never line up. */
.field input,.field select{height:2.875rem}
.field input[type="date"]{-webkit-appearance:none;appearance:none}
.field input[type="date"]::-webkit-datetime-edit{padding:0;line-height:1.5}
.form-note{font-size:var(--fs-xs);color:var(--text-faded)}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:var(--s);
  width:100%;text-align:left;padding-block:var(--s);font-size:var(--fs-h6);font-weight:500;letter-spacing:-.01em}
.faq-icon{position:relative;width:1rem;height:1rem;flex:none}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--text);transition:transform .45s var(--ease)}
.faq-icon::before{width:1rem;height:1px;transform:translate(-50%,-50%)}
.faq-icon::after{width:1px;height:1rem;transform:translate(-50%,-50%)}
.faq-item.is-open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
/* explicit timing function: a var() inside this shorthand stops Chrome
   from resolving the 0fr -> 1fr transition at all */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.65,.05,.36,1)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{padding-bottom:var(--s);max-width:46rem;color:var(--text-faded)}


/* ---------- FOOTER ---------- */
.footer{background:var(--dark);color:var(--light);padding-block:var(--p-main) var(--s-lg);overflow:hidden}
.footer-top{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-lg) var(--gutter);
  padding-bottom:var(--p-sm)}
.footer-brand{grid-column:span 5;display:flex;flex-direction:column;gap:var(--s-md)}
.footer-col{grid-column:span 2}
.footer-col:last-of-type{grid-column:span 3}
.footer-col h4{font-family:var(--f-mono);font-size:var(--fs-xxs);text-transform:uppercase;
  letter-spacing:.1em;color:color-mix(in srgb,var(--light) 50%,transparent);margin-bottom:var(--s-md);font-weight:400}
.footer-col li + li{margin-top:.55rem}
.footer-col a,.footer-col span{font-size:var(--fs-sm);color:color-mix(in srgb,var(--light) 78%,transparent);
  transition:color .3s var(--ease)}
.footer-col a:hover{color:var(--accent)}
.footer-wordmark{font-family:var(--f-serif);font-size:clamp(3rem,15.5vw,15rem);line-height:.9;
  letter-spacing:-.04em;color:color-mix(in srgb,var(--light) 12%,transparent);
  white-space:nowrap;user-select:none;padding-block:var(--s-lg) var(--s)}
.footer-base{display:flex;flex-wrap:wrap;gap:var(--s) var(--s-lg);align-items:center;
  padding-top:var(--s);border-top:1px solid color-mix(in srgb,var(--light) 14%,transparent);
  font-size:var(--fs-xs);color:color-mix(in srgb,var(--light) 55%,transparent)}
.footer-base .spacer{margin-left:auto}
.lang-switch{display:inline-flex;border:1px solid color-mix(in srgb,var(--light) 22%,transparent);
  border-radius:var(--r-round);overflow:hidden}
.lang-switch a{padding:.2rem .7rem;font-family:var(--f-mono);font-size:var(--fs-xxs);
  text-transform:uppercase;letter-spacing:.06em}
.lang-switch a.is-active{background:var(--light);color:var(--dark)}

/* ---------- REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(1.75rem);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-stagger] > *{opacity:0;transform:translateY(1.75rem);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal-stagger].is-in > *{opacity:1;transform:none}
.line-mask{display:block;overflow:clip}
.line-mask > span{display:block;transform:translateY(105%);
  transition:transform 1.05s var(--ease)}
.is-in .line-mask > span,.is-ready .line-mask > span{transform:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1200px){
  :root{--fs-display:4.75rem;--fs-h1:3.75rem;--fs-h2:3rem;--fs-h3:2.4rem;--fs-h4:2rem}
}
@media (max-width:991px){
  :root{--margin:1.5rem;--fs-display:3.75rem;--fs-h1:3rem;--fs-h2:2.5rem;--fs-h3:2rem;
    --fs-h4:1.75rem;--fs-h5:1.5rem;--fs-h6:1.25rem;--p-lg:5rem;--p-xl:6rem;--p-main:3.5rem}
  /* The panel slides out from BEHIND the header row. z-index:-1 inside
     .nav-inner keeps the logo, the CTA and the toggle painted over it —
     without it the panel covered the logo, which is half of why an open menu
     looked like an empty sheet. */
  .nav-links{position:fixed;inset:0 0 auto;top:0;z-index:-1;
    flex-direction:column;align-items:flex-start;gap:var(--s-xs);
    padding:6rem var(--margin) var(--s-lg);margin:0;
    /* the scrolled header's frosted glass, continued downwards: opening the
       menu extends that surface rather than dropping a black sheet over the
       page. Light glass, so the links are dark — a dark panel inherited the
       stuck header's dark text and rendered the whole menu invisible. */
    background:color-mix(in srgb,var(--light) 82%,transparent);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
            backdrop-filter:blur(18px) saturate(180%);
    color:var(--dark);
    border-bottom:1px solid color-mix(in srgb,var(--dark) 10%,transparent);
    transform:translateY(-105%);transition:transform .55s var(--ease)}
  .nav.is-open .nav-links{transform:none}
  .nav-links a{font-size:var(--fs-h6);opacity:1;padding-block:.6rem}
  .nav-toggle{display:flex;margin-left:0}

  /* While the menu is open the panel supplies the glass, so the bar must not
     stack a second blurred layer on top of it, and its own furniture has to go
     dark even at the top of the page where it is normally light on photograph. */
  .nav.is-open,.nav.is-open.is-stuck{
    background:transparent;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom-color:transparent;
    color:var(--dark)}
  .nav.is-open::before{opacity:0}
  .nav.is-open .brand-mark .mark-light{opacity:0}
  .nav.is-open .brand-mark .mark-dark{opacity:1}
  .nav.is-open .brand-sub{border-left-color:color-mix(in srgb,var(--dark) 25%,transparent)}
  /* booking is the point of the site — keep the CTA reachable without
     opening the menu, since most visitors arrive on a phone */
  .nav-cta{display:inline-flex;margin-left:auto}
  .brand-sub{display:none}
  .nav-inner{gap:var(--s-sm)}
  .hero-title,.hero-aside{grid-column:1/-1}
  .hero-aside{border-left:0;padding-left:0;border-top:1px solid color-mix(in srgb,var(--light) 20%,transparent);padding-top:var(--s)}
  .hero-scroll{display:none}
  .split-media,.split-body,.split.is-flip .split-media,.split.is-flip .split-body{grid-column:1/-1;order:0}
  .split{gap:var(--s-lg) var(--gutter)}
  .section-head{margin-bottom:var(--s-huge)}
  .section-head .sh-left,.section-head .sh-right{grid-column:1/-1}
  .zone{grid-column:span 6}
  .step{grid-column:span 6}
  .care-grid{grid-template-columns:repeat(2,1fr)}
  /* sticky needs a tall viewport beside a long column; stacked, it just sticks badly */
  .split.is-tall .split-media{position:static}
  .feature-body,.feature-side{grid-column:1/-1}
  .booking-info,.booking-widget{grid-column:1/-1}
  .footer-brand{grid-column:1/-1}
  .footer-col{grid-column:span 4}
  .footer-col:last-of-type{grid-column:span 4}
  .meridian-mark{display:none}
}
@media (max-width:640px){
  :root{--margin:1.25rem;--fs-display:2.9rem;--fs-h1:2.5rem;--fs-h2:2.1rem;--fs-h3:1.8rem;
    --fs-main:1.0625rem;--p-lg:4.25rem;--p-main:3rem}
  .stats{grid-template-columns:1fr}
  .care-grid{grid-template-columns:1fr}
  .about-quote{font-size:var(--fs-h5);gap:var(--s-xs) var(--s-sm)}
  .zone{grid-column:1/-1}
  .step{grid-column:1/-1}
  .footer-col,.footer-col:last-of-type{grid-column:span 6}
  .feature{padding:var(--s-lg)}
  .field-row{grid-template-columns:1fr}
  .about-meta{grid-template-columns:1fr}
  .cal-frame{height:600px}

  /* finger-sized hit areas — every tappable element clears 44px */
  .footer-col a,.footer-col span{display:inline-block;padding-block:.65rem}
  .footer-col li + li{margin-top:0}
  .link-arrow{padding-block:.6rem}
  .lang-switch a{padding:.6rem 1rem}
  .brand{padding-block:.5rem}
  .footer-wordmark{font-size:clamp(2.5rem,13.8vw,15rem)}
  .faq-q{padding-block:1.05rem}
  /* The emblem already carries the KL monogram, and a 46px mark plus the
     wordmark pushed the hamburger off a 375px screen. Drop the wordmark on
     phones and give the mark enough size to actually resolve. */
  .brand-name{display:none}
  .brand-mark{width:3.4rem;height:3.4rem}
  .btn-inner{padding:.7rem 1rem}
  .btn-badge{width:2.6rem;height:2.6rem}
  /* guarantee the 44px floor rather than relying on padding maths */
  .btn,.link-arrow,.brand,.lang-switch a,
  .field input,.field select{min-height:44px}
  .link-arrow,.lang-switch a,.brand{display:inline-flex;align-items:center}
  .nav-toggle{width:44px;height:44px}
  .quote-dot{width:2.75rem;height:2.75rem}
}

/* phones report a hover-less pointer: drop the label-swap animation, which
   only ever completes on a real hover */
/* phones report a hover-less pointer: the label/arrow swap can never complete
   there, so pin both to their resting state */
@media (hover:none){
  .btn-t{transition:none}
  .btn-t.is-hover{display:none}
  .btn:hover{transform:none}
  .btn:hover .btn-t{transform:none}
  .btn-ico svg.is-hover,.la-ico svg.is-hover{display:none}
  .btn:hover .btn-ico svg,.link-arrow:hover .la-ico svg{transform:none}
  .btn:active{transform:scale(.98)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal],[data-reveal-stagger] > *{opacity:1;transform:none}
  .line-mask > span{transform:none}
  .hero-bg{transform:none}
}