/* =====================================================================
   IsKeenLab — site styles
   Skin, read properly. A lab and a clinic, run by people who pay attention.
   Whitespace is the dominant brand asset; the accent is a decision.
   ===================================================================== */

/* ---- Tokens ---------------------------------------------------------- */
:root{
  /* Core palette */
  --ink:        #14262A;   /* Clinic Ink  */
  --white:      #F8F6F2;   /* Lab White   */
  --teal:       #2E6E6A;   /* Keen Teal — the tittle */
  --deep-teal:  #1F5350;   /* AA teal on light */
  --champagne:  #BFA37A;   /* premium hairline, never body text */
  --mist:       #DCE7E5;   /* cool tint */
  --clay:       #E8DDD1;   /* warm tint */
  --slate:      #5C6F72;   /* secondary text */

  /* Semantic */
  --bg:          var(--white);
  --surface:     #FCFBF9;
  --text:        var(--ink);
  --text-soft:   var(--slate);
  --accent:      var(--deep-teal);
  --line:        rgba(20,38,42,.14);
  --line-soft:   rgba(20,38,42,.08);

  /* Type */
  --display: "Jost", system-ui, sans-serif;
  --body:    "Inter", system-ui, sans-serif;
  --serif:   "Instrument Serif", Georgia, serif;   /* italic, tagline only */

  /* Scale — fluid */
  --step--1: clamp(.78rem, .76rem + .12vw, .86rem);
  --step-0:  clamp(1rem, .97rem + .18vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.34rem + .8vw, 2.15rem);
  --step-3:  clamp(2rem, 1.66rem + 1.7vw, 3.4rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 5.4rem);
  --step-5:  clamp(3.2rem, 2.1rem + 5.2vw, 7.5rem);

  /* Rhythm */
  --pad: clamp(1.25rem, 5vw, 6rem);
  --gap: clamp(2.5rem, 6vw, 7rem);
  --maxw: 1240px;
  --radius: 3px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset ----------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:var(--step-0);line-height:1.65;
  font-weight:400;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:500;line-height:1.05;letter-spacing:-.01em}
p{margin:0}
::selection{background:var(--teal);color:var(--white)}

/* ---- Layout helpers -------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--gap)}
.eyebrow{
  font-family:var(--display);font-size:var(--step--1);font-weight:500;
  text-transform:uppercase;letter-spacing:.28em;color:var(--accent);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--teal);flex:none;   /* the tittle */
}
.lede{font-size:var(--step-1);line-height:1.5;color:var(--text);max-width:34ch}
.muted{color:var(--text-soft)}
.serif-italic{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}

/* Champagne hairline that draws in on reveal */
.hairline{height:1px;width:100%;background:var(--champagne);transform-origin:left;
  transform:scaleX(0);transition:transform 1.1s var(--ease)}
.in .hairline,.hairline.in{transform:scaleX(1)}

/* ---- Buttons --------------------------------------------------------- */
.btn{
  --bg-btn:var(--ink);--fg-btn:var(--white);
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--display);font-weight:500;font-size:var(--step--1);
  letter-spacing:.06em;text-transform:uppercase;
  padding:.95em 1.6em;border-radius:var(--radius);
  background:var(--bg-btn);color:var(--fg-btn);border:1px solid var(--bg-btn);
  cursor:pointer;position:relative;overflow:hidden;
  transition:transform .5s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);
  transition:transform .5s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .dot{transform:translateX(4px)}
.btn--ghost{--bg-btn:transparent;--fg-btn:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--light{--bg-btn:var(--white);--fg-btn:var(--ink)}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* Text link with animated underline */
.link{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);
  font-weight:500;letter-spacing:.02em;color:var(--accent);position:relative}
.link::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease)}
.link:hover::after{transform:scaleX(1);transform-origin:left}
.link .arw{transition:transform .45s var(--ease)}
.link:hover .arw{transform:translateX(4px)}

/* =====================================================================
   Header
   ===================================================================== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.1rem var(--pad);
  transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
}
.site-header.scrolled{
  background:rgba(248,246,242,.82);backdrop-filter:blur(14px) saturate(1.1);
  padding-block:.7rem;box-shadow:0 1px 0 var(--line-soft);
}
.brand-logo{height:30px;width:auto}
.site-header.scrolled .brand-logo{height:26px}
.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem)}
.nav a.navlink{
  font-family:var(--display);font-size:var(--step--1);font-weight:500;
  letter-spacing:.04em;color:var(--ink);position:relative;padding-block:.3em;
}
.nav a.navlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--teal);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a.navlink:hover::after,.nav a.navlink[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav a.navlink[aria-current="page"]{color:var(--accent)}
.nav-cta{padding:.7em 1.2em}
.menu-toggle{display:none}

@media (max-width:820px){
  .menu-toggle{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;
    cursor:pointer;padding:.5rem;z-index:70}
  .menu-toggle span{width:26px;height:2px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav{
    position:fixed;inset:0;flex-direction:column;justify-content:center;
    gap:2rem;background:var(--white);
    clip-path:circle(0% at 100% 0);transition:clip-path .6s var(--ease);
  }
  .nav.open{clip-path:circle(150% at 100% 0)}
  .nav a.navlink{font-size:var(--step-2);font-family:var(--display)}
  .nav-cta{font-size:var(--step--1)}
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:6rem;overflow:hidden}
.hero__grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5}
.hero__lens{position:absolute;z-index:0;border-radius:50%;pointer-events:none;
  border:1px solid var(--line);
  background:radial-gradient(circle at 38% 34%,rgba(220,231,229,.55),rgba(232,221,209,.28) 55%,transparent 72%);
  mix-blend-mode:multiply;filter:blur(.2px)}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__eyebrow{margin-bottom:clamp(1.4rem,4vh,2.6rem)}
.tagline{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:var(--step-5);line-height:1.02;letter-spacing:-.01em;color:var(--ink)}
.tagline .k{color:var(--deep-teal)}
.hero h1{font-size:var(--step-2);font-weight:400;color:var(--ink);
  max-width:20ch;margin-top:clamp(1.2rem,3vh,2rem);line-height:1.15;letter-spacing:-.01em}
.hero__row{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:center;
  margin-top:clamp(1.8rem,4vh,2.8rem)}
.hero__meta{position:absolute;right:var(--pad);bottom:clamp(1.5rem,5vh,3rem);z-index:2;
  text-align:right;max-width:22ch;font-size:var(--step--1);color:var(--text-soft);
  border-right:1px solid var(--champagne);padding-right:1rem}
@media (max-width:820px){.hero__meta{display:none}}

/* reveal words in tagline — padding gives italic ascenders/descenders room,
   negative margins keep the visual spacing tight */
.reveal-line{display:block;overflow:hidden;
  padding:.08em .18em .2em .04em;margin:-.08em -.18em -.12em -.04em}
.reveal-line > span{display:block;transform:translateY(120%);
  transition:transform 1s var(--ease)}
.hero.in .reveal-line > span{transform:translateY(0)}
.hero .fade-up{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s}
.hero.in .fade-up{opacity:1;transform:none}

/* =====================================================================
   Reveal-on-scroll utility
   ===================================================================== */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  [data-reveal],.hero .fade-up,.reveal-line>span{opacity:1!important;transform:none!important;transition:none!important}
  .hairline{transform:scaleX(1)!important}
  .carousel,.carousel__prog i,.carousel__dot{transition:none!important}
}

/* =====================================================================
   Section heading block
   ===================================================================== */
.sect-head{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-bottom:var(--gap);
  max-width:56ch}
.sect-head h2{font-size:var(--step-3);letter-spacing:-.015em}
.sect-head .lede{max-width:52ch;color:var(--text-soft)}
@media (min-width:900px){
  .sect-head--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    max-width:none;align-items:end;gap:2rem 4rem}
  .sect-head--split .lede{margin-bottom:.3em}
}

/* =====================================================================
   Consultation — the product (signature section)
   ===================================================================== */
.consult{background:var(--ink);color:var(--white);position:relative;overflow:hidden}
.consult .eyebrow{color:var(--champagne)}
.consult .eyebrow::before{background:var(--teal)}
.consult__grid{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (min-width:900px){.consult__grid{grid-template-columns:1.1fr .9fr}}
.consult h2{font-size:var(--step-4);color:var(--white);letter-spacing:-.02em;line-height:1}
.consult h2 em{font-family:var(--serif);font-style:italic;color:var(--mist);font-weight:400}
.consult p{color:rgba(248,246,242,.82);max-width:46ch;margin-top:1.5rem;font-size:var(--step-1);line-height:1.55}
.consult__aside{border-left:1px solid rgba(191,163,122,.4);padding-left:clamp(1.4rem,3vw,2.4rem)}
.consult__list{list-style:none;padding:0;margin:0;display:grid;gap:1.4rem}
.consult__list li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.consult__list .n{font-family:var(--display);font-size:var(--step--1);color:var(--champagne);
  letter-spacing:.1em;padding-top:.35em;font-variant-numeric:tabular-nums}
.consult__list h3{font-size:var(--step-1);color:var(--white);font-weight:500;margin-bottom:.25rem}
.consult__list p{color:rgba(248,246,242,.66);margin-top:0;font-size:var(--step-0)}
/* travelling attention dot */
.consult__spark{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(46,110,106,.55);top:0;left:0;opacity:.9}

/* =====================================================================
   Principles
   ===================================================================== */
.principles{display:grid;gap:0}
.principle{display:grid;gap:1rem 3rem;padding-block:clamp(1.8rem,4vw,2.6rem);
  border-top:1px solid var(--line);align-items:baseline}
.principle:last-child{border-bottom:1px solid var(--line)}
@media (min-width:820px){.principle{grid-template-columns:6rem minmax(0,26ch) 1fr}}
.principle .idx{font-family:var(--display);font-size:var(--step-1);color:var(--teal);
  font-variant-numeric:tabular-nums;font-weight:500}
.principle h3{font-size:var(--step-2);font-weight:400;letter-spacing:-.01em}
.principle p{color:var(--text-soft);max-width:52ch}
.principle:hover .idx{color:var(--champagne)}

/* =====================================================================
   Two modes
   ===================================================================== */
.modes{display:grid;gap:1.5rem}
@media (min-width:860px){.modes{grid-template-columns:1fr 1fr}}
.mode{position:relative;border-radius:var(--radius);padding:clamp(1.8rem,3.5vw,3rem);
  overflow:hidden;border:1px solid var(--line-soft);min-height:340px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.mode:hover{transform:translateY(-4px);box-shadow:0 24px 60px -30px rgba(20,38,42,.4)}
.mode--clinic{background:linear-gradient(155deg,var(--mist),#eef4f3)}
.mode--lab{background:linear-gradient(155deg,var(--clay),#f1e9df)}
.mode .eyebrow{color:var(--deep-teal)}
.mode h3{font-size:var(--step-3);font-weight:400;margin-top:1rem;letter-spacing:-.01em}
.mode p{color:var(--ink);opacity:.78;max-width:38ch;margin-top:1rem}
.mode__foot{margin-top:2rem}
.mode__mark{position:absolute;right:-10px;bottom:-10px;width:150px;opacity:.12;pointer-events:none}

/* =====================================================================
   Offerings preview (home) / grid (services)
   ===================================================================== */
.cards{display:grid;gap:1.5rem}
@media (min-width:720px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(1.5rem,2.6vw,2.2rem);display:flex;flex-direction:column;gap:1rem;
  position:relative;overflow:hidden;transition:border-color .5s var(--ease),transform .5s var(--ease)}
.card::before{content:"";position:absolute;top:0;left:0;height:2px;width:100%;
  background:var(--champagne);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:var(--line)}
.card:hover::before{transform:scaleX(1)}
.card__tag{font-family:var(--display);font-size:var(--step--1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal)}
.card h3{font-size:var(--step-2);font-weight:400;letter-spacing:-.01em}
.card p{color:var(--text-soft);font-size:var(--step-0)}
.card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-top:.6rem}
.price{font-family:var(--display);font-weight:500;color:var(--ink);font-size:var(--step-0)}
.price small{color:var(--text-soft);font-weight:400;font-size:var(--step--1)}

/* Involves / detail list inside service cards */
.involves{list-style:none;padding:0;margin:.4rem 0 0;display:grid;gap:.55rem}
.involves li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;
  font-size:var(--step--1);color:var(--text-soft);line-height:1.5}
.involves li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);
  margin-top:.6em}

/* =====================================================================
   Page hero (interior)
   ===================================================================== */
.page-hero{padding-top:clamp(8rem,16vh,11rem);padding-bottom:var(--gap);
  border-bottom:1px solid var(--line-soft)}
.page-hero h1{font-size:var(--step-4);font-weight:400;letter-spacing:-.02em;max-width:16ch;
  line-height:1.02;margin-top:1.4rem}
.page-hero h1 em{font-family:var(--serif);font-style:italic;color:var(--deep-teal);font-weight:400}
.page-hero .lede{margin-top:1.8rem;max-width:52ch;color:var(--text-soft)}

/* Category label rows */
.cat-label{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:2rem;flex-wrap:wrap}
.cat-label h2{font-size:var(--step-3);font-weight:400;letter-spacing:-.015em}
.cat-label .count{font-family:var(--display);color:var(--teal);font-size:var(--step-0);
  font-variant-numeric:tabular-nums}
.cat-label p{color:var(--text-soft);max-width:44ch;margin-left:auto;font-size:var(--step-0)}

/* Compliance / honest note */
.note{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;
  background:var(--mist);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2rem);
  border:1px solid rgba(46,110,106,.16)}
.note__mark{width:34px;height:34px;border-radius:50%;border:1px solid var(--deep-teal);
  display:grid;place-items:center;color:var(--deep-teal);flex:none;font-family:var(--display);
  font-weight:500}
.note h3{font-size:var(--step-1);font-weight:500;margin-bottom:.4rem;color:var(--ink)}
.note p{color:var(--ink);opacity:.82;max-width:70ch;font-size:var(--step-0)}

/* =====================================================================
   CTA band
   ===================================================================== */
.cta-band{background:var(--clay);border-radius:var(--radius);
  padding:clamp(2.4rem,6vw,5rem);text-align:center;position:relative;overflow:hidden}
.cta-band h2{font-size:var(--step-4);font-weight:400;letter-spacing:-.02em;line-height:1}
.cta-band h2 em{font-family:var(--serif);font-style:italic;color:var(--deep-teal);font-weight:400}
.cta-band p{color:var(--ink);opacity:.78;max-width:44ch;margin:1.4rem auto 0}
.cta-band .hero__row{justify-content:center}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer{background:var(--ink);color:var(--white);padding-block:clamp(3rem,7vw,5.5rem)}
.footer__top{display:grid;gap:2.5rem}
@media (min-width:820px){.footer__top{grid-template-columns:1.4fr 1fr 1fr}}
.footer__logo{height:34px;width:auto;margin-bottom:1.4rem}
.site-footer p.tag{font-family:var(--serif);font-style:italic;font-size:var(--step-1);
  color:var(--mist);max-width:26ch}
.site-footer h4{font-family:var(--display);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.2em;color:var(--champagne);margin-bottom:1.2rem;font-weight:500}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.site-footer a{color:rgba(248,246,242,.78);transition:color .3s var(--ease)}
.site-footer a:hover{color:var(--white)}
.footer__bar{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  align-items:center;margin-top:clamp(2.5rem,6vw,4rem);padding-top:1.6rem;
  border-top:1px solid rgba(191,163,122,.28);font-size:var(--step--1);color:rgba(248,246,242,.6)}
.footer__bar .serif-italic{color:var(--mist)}

/* =====================================================================
   Imagery — cards, hero, modes  (photo support)
   Every media box sizes itself with a padding-ratio spacer (::before) and
   an absolutely-positioned image. This holds the correct shape on EVERY
   browser and server — images can never fall back to their natural size.
   ===================================================================== */
/* Shared media box */
.card__media,.hero__media,.mode__media,.page-hero__media{
  position:relative;overflow:hidden;background:var(--mist)}
.card__media::before,.hero__media::before,.mode__media::before,.page-hero__media::before{
  content:"";display:block}
.card__media > img,.hero__media > img,.mode__media > img,.page-hero__media > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}

/* Card media (ratio 16:11) */
.card__body{display:flex;flex-direction:column;gap:1rem;flex:1}
.card.has-media{padding:0}
.card.has-media .card__body{padding:clamp(1.5rem,2.6vw,2.2rem)}
.card__media::before{padding-top:68.75%}
.card__media > img{transition:transform .9s var(--ease)}
.card.has-media:hover .card__media > img{transform:scale(1.05)}
.card--invite{background:var(--mist);border-color:rgba(46,110,106,.16);justify-content:center}
.card--invite::before{display:none}

/* Hero split — text + a single quiet image (ratio 4:5) */
.hero--split .hero__inner{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (min-width:960px){
  .hero--split .hero__inner{grid-template-columns:1.05fr .95fr}
}
.hero__media{border-radius:var(--radius);
  box-shadow:0 50px 90px -55px rgba(20,38,42,.7);
  opacity:0;transform:translateY(24px) scale(.985);
  transition:opacity 1.1s var(--ease) .35s,transform 1.1s var(--ease) .35s}
.hero__media::before{padding-top:125%}
.hero.in .hero__media{opacity:1;transform:none}
.hero__media::after{content:"";position:absolute;inset:10px;border:1px solid rgba(248,246,242,.5);
  border-radius:2px;pointer-events:none;z-index:1}
.hero__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:2.4rem 1.4rem 1.2rem;color:var(--white);font-size:var(--step--1);line-height:1.5;
  background:linear-gradient(to top,rgba(20,38,42,.72),transparent)}
.hero__cap .serif-italic{color:var(--mist)}
@media (max-width:959px){
  .hero{min-height:auto;padding-bottom:var(--gap)}
  .hero__media{max-width:520px;margin-inline:auto;width:100%}
  .hero__media::before{padding-top:66.6667%}   /* 3:2 on small screens */
}

/* Mode media (ratio 16:9) */
.mode.has-media{padding:0}
.mode.has-media .mode__body{padding:clamp(1.8rem,3.5vw,3rem);
  display:flex;flex-direction:column;justify-content:space-between;flex:1;gap:1.4rem}
.mode__media::before{padding-top:56.25%}
.mode__media > img{transition:transform 1s var(--ease)}
.mode.has-media:hover .mode__media > img{transform:scale(1.05)}

/* Interior page hero image (ratio 5:4) */
.page-hero--media .wrap{display:grid;gap:clamp(2rem,5vw,4rem);align-items:end}
@media (min-width:900px){.page-hero--media .wrap{grid-template-columns:1.1fr .9fr}}
.page-hero__media{border-radius:var(--radius);
  box-shadow:0 40px 80px -55px rgba(20,38,42,.6)}
.page-hero__media::before{padding-top:80%}
@media (max-width:899px){.page-hero__media::before{padding-top:62.5%}}  /* 16:10 */

/* =====================================================================
   The rail — a row you push with a thumb
   The ground behind the cards shifts to whichever card you are on:
   Lab White = actives, Mist = hydration, Clay = daily topicals,
   Ink = night. That mapping is the label system, not decoration.
   ===================================================================== */
.carousel{position:relative;border-radius:var(--radius);
  padding-block:clamp(1.4rem,3vw,2.4rem);
  background:var(--white);color:var(--ink);
  transition:background-color .8s var(--ease),color .8s var(--ease)}
.carousel[data-ground="mist"]{background:var(--mist)}
.carousel[data-ground="clay"]{background:var(--clay)}
.carousel[data-ground="ink"]{background:var(--ink);color:var(--white)}

.carousel__rail{
  --slide-w:64%;                    /* a peek of the next card signals swipability */
  display:flex;gap:1.1rem;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding-inline:var(--pad);
  scroll-padding-inline:var(--pad); /* must equal padding-inline or snap lands short */
  padding-block:.5rem;              /* room for .card:hover translateY(-4px) */
  /* Centre a set that fits; "safe" reverts to start when it overflows, so
     the first card can never scroll out of reach. */
  justify-content:safe center;
  overscroll-behavior-x:contain;    /* x only — plain `contain` blocks page scroll */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.carousel__rail::-webkit-scrollbar{display:none}
.carousel__rail:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

.carousel__slide{flex:0 0 var(--slide-w);scroll-snap-align:start;display:flex}
.carousel__slide > .card{width:100%}
@media (min-width:520px){.carousel__rail{--slide-w:calc((100% - 1.1rem) / 2)}}
@media (min-width:820px){.carousel__rail{--slide-w:calc((100% - 2.2rem) / 3)}}
@media (min-width:1100px){.carousel__rail{--slide-w:calc((100% - 3.3rem) / 4)}}
@media (min-width:1400px){.carousel__rail{--slide-w:calc((100% - 4.4rem) / 5)}}

/* Products are shot 4:5 — bottles and tubes, never 16:11.
   This must match the padding ratio the build script bakes in. */
.carousel--products .card__media::before,
.carousel--regimen .card__media::before{padding-top:125%}

/* Cards sitting on the Ink ground */
.carousel[data-ground="ink"] .card{background:rgba(248,246,242,.04);border-color:rgba(191,163,122,.28)}
.carousel[data-ground="ink"] .card h3{color:var(--white)}
.carousel[data-ground="ink"] .card p{color:rgba(248,246,242,.72)}
.carousel[data-ground="ink"] .price{color:var(--white)}
.carousel[data-ground="ink"] .btn--ghost{--fg-btn:var(--white);border-color:rgba(248,246,242,.3)}
.carousel[data-ground="ink"] .carousel__dot{background:rgba(248,246,242,.26)}
.carousel[data-ground="ink"] .carousel__prog{background:rgba(248,246,242,.18)}

/* Controls — injected by JS so they are never dead when JS fails */
.carousel__bar{display:flex;align-items:center;gap:1.2rem;
  padding-inline:var(--pad);margin-top:1.6rem}
.carousel__btns{display:flex;gap:.6rem;margin-left:auto}
.carousel__btn{padding:.7em .95em;line-height:1}
.carousel__btn[disabled]{opacity:.3;pointer-events:none}

/* The tittle, repeated — same dot as .eyebrow::before and .btn .dot */
.carousel__dots{display:flex;gap:.55rem}
.carousel__dot{width:6px;height:6px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--line);
  transition:background .4s var(--ease),transform .4s var(--ease)}
.carousel__dot[aria-current="true"]{background:var(--teal);transform:scale(1.6)}
.carousel__dot:focus-visible{outline:2px solid var(--teal);outline-offset:4px}

/* The hairline look, but tracking the finger — .hairline's 1.1s lags visibly */
.carousel__prog{flex:1 1 auto;max-width:200px;height:1px;background:var(--line-soft)}
.carousel__prog i{display:block;height:100%;background:var(--champagne);
  transform:scaleX(0);transform-origin:left;transition:transform .25s linear}

/* The printed step marker, e.g. 01 · Prep. Only on items that carry one. */
.card__step{font-family:var(--display);font-size:var(--step--1);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--champagne)}
.card__step + .card__tag{margin-top:-.6rem}

.link--quiet{font-size:var(--step--1);color:var(--text-soft)}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Section on the surface tint (was an inline style) -------------- */
.section--surface{background:var(--surface);border-block:1px solid var(--line-soft)}

/* ---- Named, not advertised -----------------------------------------
   Treatments we may name but not picture or price. Deliberately a list
   and not cards: nothing to click, nothing that looks for sale. */
.named-block{margin-top:var(--gap);padding-top:2.4rem;border-top:1px solid var(--line-soft)}
.named-block__h{font-family:var(--display);font-size:var(--step-1);font-weight:400;
  letter-spacing:-.01em}
.named-block__lede{margin-top:.6rem;font-size:var(--step--1);max-width:62ch}
.named-list{display:grid;gap:1.6rem;margin-top:2rem}
@media (min-width:720px){.named-list{grid-template-columns:repeat(3,1fr);gap:2.4rem}}
.named h3{font-family:var(--display);font-size:var(--step-0);font-weight:500;
  letter-spacing:.02em;padding-bottom:.5rem;border-bottom:1px solid var(--line-soft)}
.named p{margin-top:.7rem;color:var(--text-soft);font-size:var(--step--1)}

/* A size sits where a price would, but reads as information, not a number */
.price--size{font-weight:400;color:var(--text-soft)}

/* The rails are full-bleed: the .wrap around them is only for the heading */
.section > .cards[data-carousel]{max-width:none;padding-inline:0}

/* ---- Rail cards run smaller than grid cards -------------------------- */
.carousel__slide .card h3{font-size:var(--step-1)}
.carousel__slide .card{gap:.7rem}
.carousel__slide .card.has-media .card__body{padding:clamp(1.1rem,1.8vw,1.5rem)}
.carousel__slide .card p{font-size:var(--step--1)}
.carousel__slide .involves{font-size:var(--step--1)}

/* ---- About / owner --------------------------------------------------- */
.owner{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
@media (min-width:900px){.owner{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
/* Shown whole — no ratio box, no cover-crop. The image sets its own height. */
.owner__media{background:transparent;border-radius:var(--radius);overflow:hidden}
.owner__media > img{display:block;width:100%;height:auto;max-width:100%}
.owner__body h2{margin-top:.4rem}
.owner__body p{color:var(--text-soft);font-size:var(--step-0);margin-top:1rem;max-width:58ch}

.creds{list-style:none;margin-top:2rem;display:grid;gap:.9rem;
  border-top:1px solid var(--line-soft);padding-top:1.6rem}
.creds li{display:grid;gap:.15rem;font-size:var(--step--1)}
@media (min-width:560px){.creds li{grid-template-columns:9.5rem 1fr;gap:1rem;align-items:baseline}}
.creds__k{font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;
  font-size:var(--step--1);color:var(--teal)}

/* ---- Qualifications: the awarding bodies, and the certificate itself ---
   Marks and a photographed document share one frame. Both use contain —
   a logo cropped to a ratio loses the wordmark sitting under it, and a
   certificate cropped loses the name it was issued to. Only the padding
   differs: a mark floats in its tile, a document fills it. */
.quals{list-style:none;margin:clamp(2.8rem,5vw,4.4rem) 0 0;padding:0;
  display:grid;gap:clamp(1rem,2.4vw,1.7rem);grid-template-columns:1fr}
@media (min-width:640px){.quals{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.quals{grid-template-columns:repeat(3,1fr)}}

.qual{display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--radius)}

.qual__media{position:relative;background:var(--white)}
.qual__media::before{content:"";display:block;padding-top:66.67%}
.qual__media > img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;padding:1.2rem}
.qual__media--doc > img{padding:0}
/* Each mark has its own studio ground baked into the file. These two hexes
   are sampled from the sources, not brand tokens: a near-miss token behind
   a logo reads as a seam, exactly as it did behind the product mockups. */
.qual__media--sia {background:#fff}
.qual__media--fkbp{background:#272117}

.qual__body{padding:1.05rem 1.2rem 1.25rem;border-top:1px solid var(--line-soft)}
.qual__k{display:block;font-family:var(--display);font-size:var(--step--1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.qual__body p{margin:.45rem 0 0;font-size:var(--step--1);
  color:var(--text-soft);line-height:1.55}

/* =====================================================================
   Nothing in a rail is ever cropped
   The whole image shrinks to fit its frame. The frame is painted in the
   product's own ground colour, so the letterboxing it leaves is
   invisible against the mockup rather than reading as a grey gap.
   ===================================================================== */
.carousel .card__media > img{object-fit:cover;object-position:center}
.carousel .card__media{background:var(--white)}
.carousel .card[data-ground="mist"] .card__media{background:var(--mist)}
.carousel .card[data-ground="clay"] .card__media{background:var(--clay)}
.carousel .card[data-ground="ink"]  .card__media{background:var(--ink)}

/* Treatment photos carry no ground token; a neutral tint suits them. */
.carousel--treatments .card__media{background:var(--mist)}



/* =====================================================================
   Treatments — a plain collage, three across
   Not a rail: the treatment list is short and worth seeing at once.
   Images keep the aspect the compliance crop left them, and are
   contained rather than covered, so nothing is cut a second time.
   ===================================================================== */
@media (min-width:900px){ .cards--3{grid-template-columns:repeat(3,1fr)} }

.collage .card__media::before{padding-top:88%}
.collage .card__media{background:var(--mist)}
.collage .card__media > img{object-fit:contain}
.collage .card.has-media:hover .card__media > img{transform:none}

/* =====================================================================
   Floating contact — Messenger, Facebook, email
   Fixed, so it rides the whole page. Brand ink rather than each
   platform's own colour: the glyphs carry the recognition and the
   cluster stays quiet next to the work.
   ===================================================================== */
.contact{position:fixed;right:clamp(.85rem,2.4vw,1.6rem);
  bottom:clamp(.85rem,2.4vw,1.6rem);z-index:80;
  display:flex;flex-direction:column;gap:.6rem;align-items:flex-end}

.contact__btn{display:inline-flex;align-items:center;gap:.55rem;
  padding:.62rem;border-radius:999px;
  background:var(--ink);color:var(--white);text-decoration:none;
  box-shadow:0 6px 20px rgba(20,38,42,.2);
  transition:background .4s var(--ease),transform .4s var(--ease),
             box-shadow .4s var(--ease)}
.contact__btn svg{width:22px;height:22px;flex:none;display:block;fill:var(--white)}
.contact__btn .glyph{fill:var(--ink)}          /* the bolt reads as a cut-out */
.contact__btn:hover,.contact__btn:focus-visible{
  background:var(--deep-teal);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(20,38,42,.28)}
.contact__btn:hover .glyph,.contact__btn:focus-visible .glyph{fill:var(--deep-teal)}
.contact__btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* Labels stay collapsed until intent, so the cluster is three small dots
   at rest and never competes with the page. */
.contact__label{font-family:var(--display);font-size:var(--step--1);font-weight:500;
  letter-spacing:.04em;white-space:nowrap;
  max-width:0;overflow:hidden;opacity:0;
  transition:max-width .4s var(--ease),opacity .3s var(--ease),
             margin-right .4s var(--ease)}
.contact__btn:hover .contact__label,
.contact__btn:focus-visible .contact__label{max-width:8rem;opacity:1;margin-right:.25rem}

@media (prefers-reduced-motion:reduce){
  .contact__btn,.contact__label{transition:none!important}
  .contact__btn:hover{transform:none}
}

/* =====================================================================
   Mobile menu — keep it anchored to the viewport
   A backdrop-filter turns an element into the containing block for its
   position:fixed children. The scrolled header has one, which collapsed
   this full-screen menu into the header bar the moment the page moved.
   While the menu is open the filter comes off, and the header is lifted
   above the floating contact cluster so nothing sits on top of it.
   ===================================================================== */
body.nav-open .site-header{
  z-index:100;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.nav-open .contact{opacity:0;pointer-events:none}
.contact{transition:opacity .3s var(--ease)}

/* Give the panel its own layer inside the header, below the toggle. */
@media (max-width:820px){
  .nav{z-index:1}
  .menu-toggle{position:relative}
}