/* Self-hosted Google Fonts (SIL Open Font License): Cormorant Garamond + Commissioner.
   Only the latin, latin-ext and greek subsets the site needs. */
/* greek */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/commissioner-greek-0.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/commissioner-latin-ext-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/commissioner-latin-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/commissioner-greek-0.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/commissioner-latin-ext-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/commissioner-latin-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/commissioner-greek-0.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/commissioner-latin-ext-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/commissioner-latin-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/commissioner-greek-0.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/commissioner-latin-ext-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/commissioner-latin-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/commissioner-greek-0.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/commissioner-latin-ext-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/commissioner-latin-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin-ext-3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin-ext-3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-italic-latin-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   PhysioClinic — Αποσυμπίεση Σπονδυλικής Στήλης
   Aesthetic: "Clinical Editorial" — warm bone paper, deep ink, surgical teal.
   Display: Cormorant Garamond · Body: Commissioner (both Greek-capable)
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* ground */
  --paper:      #F2EEE6;
  --paper-2:    #E8E1D4;
  --paper-3:    #DCD3C2;
  --ink:        #0D191D;
  --ink-2:      #142831;
  --ink-3:      #1D3840;

  /* type */
  --tx:         #16242A;
  --tx-soft:    #4E6067;
  --tx-light:   #EDE6D7;
  --tx-light-s: #A8B8BC;

  /* accents */
  --teal:       #24807A;   /* on paper  */
  --teal-lt:    #62C6BC;   /* on ink    */
  --teal-dim:   rgba(98,198,188,.16);
  --navy:       #2C4A63;
  --clay:       #C05F2C;   /* warning / compressed state */
  --clay-lt:    #E8834A;

  --line:       rgba(22,36,42,.14);
  --line-lt:    rgba(237,230,215,.16);

  /* type scale */
  --f-disp: "Cormorant Garamond", "Palatino Linotype", Georgia, serif;
  --f-body: "Commissioner", "Helvetica Neue", Arial, sans-serif;

  --sp:      clamp(4.5rem, 9vw, 9rem);
  --wrap:    1240px;
  --r:       3px;

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

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* NOT scroll-behavior:smooth — ScrollTrigger scrolls the page itself to measure,
   and smoothing those jumps left the pinned stage stuck over other sections.
   Anchor links get smooth scrolling from main.js instead. */
html{ -webkit-text-size-adjust:100%; scroll-padding-top:78px; }
body{
  margin:0;
  background:var(--paper);
  color:var(--tx);
  font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  font-weight:300;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{ display:block; max-width:100%; }
/* the width/height attributes are kept for CLS, but must not fix the rendered
   height — without this the intrinsic ratio is ignored and images stretch */
img{ height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--ink); color:var(--tx-light); padding:.8rem 1.2rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.sec--ink :focus-visible{ outline-color:var(--teal-lt); }

/* ---------- layout ---------- */
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2.5rem, 860px); }
.sec{ padding-block:var(--sp); position:relative; }
.sec--tight{ padding-block:clamp(3.5rem,6vw,6rem); }

.sec--paper{ background:var(--paper); }
.sec--ink{
  background:var(--ink); color:var(--tx-light);
  background-image:
    radial-gradient(90ch 60ch at 78% -10%, rgba(98,198,188,.10), transparent 62%),
    radial-gradient(70ch 50ch at 6% 108%, rgba(44,74,99,.30), transparent 60%);
}

.grid-2{
  display:grid; gap:clamp(2.5rem,5vw,5.5rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media(min-width:980px){
  .grid-2{ grid-template-columns:1.02fr .98fr; align-items:center; }
  .grid-2--form{ grid-template-columns:1fr 1fr; align-items:start; }
}

/* ---------- type primitives ---------- */
.eyebrow{
  font-size:.688rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal-lt); margin-bottom:1.25rem;
  display:flex; align-items:center; gap:.75rem;
}
.eyebrow::before{
  content:""; width:1.9rem; height:1px; background:currentColor; opacity:.65; flex:none;
}
.eyebrow--ink{ color:var(--teal); }

.h2{
  font-family:var(--f-disp);
  font-size:clamp(2.15rem,1.35rem + 3.4vw,4rem);
  line-height:1.02; letter-spacing:-.015em; font-weight:500;
  text-wrap:balance;
}
.h2 em{ font-style:italic; color:var(--teal); font-weight:400; }
.h2--light{ color:#FBF7EE; }
.h2--light em{ color:var(--teal-lt); }

.sec__head{ max-width:62ch; margin-bottom:clamp(2.75rem,5vw,4.5rem); }
.sec__head--center{ margin-inline:auto; text-align:center; }
.sec__head--center .eyebrow{ justify-content:center; }
.sec__lead{
  margin-top:1.6rem; font-size:1.09rem; line-height:1.72;
  color:var(--tx-light-s); max-width:56ch;
}
.sec__head--center .sec__lead{ margin-inline:auto; }
.sec__lead--ink{ color:var(--tx-soft); }

.prose p{ margin-bottom:1.15rem; max-width:54ch; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ font-weight:600; color:var(--tx); }
.prose--light strong{ color:#FBF7EE; }
.prose--light p{ color:var(--tx-light-s); }
.pull{
  font-family:var(--f-disp); font-size:1.42rem; font-style:italic;
  line-height:1.38; color:var(--teal);
  border-left:2px solid var(--teal); padding-left:1.3rem; margin-top:1.9rem !important;
}

/* ---------- buttons & links ---------- */
.btn{
  --bg:var(--teal); --fg:#FBF9F4;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  background:var(--bg); color:var(--fg);
  font-size:.875rem; font-weight:500; letter-spacing:.035em;
  padding:.82rem 1.5rem; border:1px solid var(--bg); border-radius:var(--r);
  text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
}
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28),transparent 70%);
  transform:translateX(-120%); transition:transform .65s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -12px rgba(13,25,29,.6); }
.btn:hover::after{ transform:translateX(120%); }
.btn--lg{ padding:1.05rem 2rem; font-size:.938rem; }
.btn--sm{ padding:.6rem 1.1rem; font-size:.813rem; }
.btn--full{ width:100%; }
.btn--ghost{
  --bg:transparent; --fg:var(--tx-light);
  border-color:rgba(237,230,215,.38); background:rgba(13,25,29,.35);
}
.btn--ghost:hover{ background:rgba(237,230,215,.09); }

.lnk{
  justify-self:start;   /* underline hugs the text, not the full card width */
  color:var(--teal-lt); text-decoration:none; font-weight:500;
  border-bottom:1px solid transparent; transition:border-color .3s, color .3s;
  align-self:start;
}
.lnk:hover{ border-color:currentColor; }
.lnk--sub{ font-size:.85rem; font-weight:400; color:var(--tx-light-s); }
.sec--paper .lnk{ color:var(--teal); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:fixed; inset:0 0 auto; z-index:900;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  /* near-opaque instead of a backdrop blur, which re-blurred everything
     scrolling underneath it on every frame */
  background:rgba(242,238,230,.97);
  border-bottom-color:var(--line);
  box-shadow:0 1px 30px -14px rgba(13,25,29,.45);
}
.hdr__in{
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
  display:flex; align-items:center; gap:1.2rem;
  height:78px;
}
/* The mark is bright cyan/turquoise on transparent, so it reads over both the
   dark hero and the light stuck header — no inversion needed (the previous
   dark mark did need it). */
.hdr__brand{ display:flex; align-items:center; gap:1.2rem; flex:none; min-width:0; }
.hdr__logo{ flex:none; }
.hdr__logo img{ height:54px; width:auto; }

/* Wide: tagline sits beside the mark behind a hairline rule. */
.hdr__tag{ margin:0; line-height:1.32; }
@media(min-width:1280px){
  .hdr__tag{
    flex:none; max-width:242px;
    padding-left:1rem; border-left:1px solid var(--line-lt);
  }
}

/* Narrow: no room beside the mark, so stack under it rather than hide it.
   The brand column still fits the header's 78px, so nothing grows. */
@media(max-width:1279px){
  .hdr__in{ height:86px; }   /* the stacked logo + tagline needs breathing room */
  .hdr__brand{ flex-direction:column; align-items:flex-start; gap:.2rem; }
  .hdr__logo img{ height:42px; }
  .hdr__tag{ padding-left:0; border-left:0; max-width:none; }
  .hdr__tag b{ font-size:.594rem; letter-spacing:.12em; }
  .hdr__tag span{ font-size:.5625rem; letter-spacing:.07em; }
}
.hdr.is-stuck .hdr__tag{ border-left-color:var(--line); }
.hdr__tag b{
  display:block; font-size:.625rem; font-weight:600; letter-spacing:.15em;
  color:var(--teal-lt); margin-bottom:.14rem;
}
.hdr__tag span{
  display:block; font-size:.5625rem; letter-spacing:.075em; font-weight:400;
  color:var(--tx-light-s);
}
.hdr.is-stuck .hdr__tag b{ color:var(--teal); }
.hdr.is-stuck .hdr__tag span{ color:var(--tx-soft); }

.hdr__nav{ display:none; gap:1.15rem; margin-left:auto; }
@media(min-width:1060px){ .hdr__nav{ display:flex; } }
.hdr__nav a{
  font-size:.844rem; font-weight:400; letter-spacing:.02em; white-space:nowrap;
  text-decoration:none; color:var(--tx-light); position:relative; padding-block:.3rem;
  transition:color .3s;
}
.hdr.is-stuck .hdr__nav a{ color:var(--tx-soft); }
.hdr__nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.hdr__nav a:hover{ color:var(--teal); }
.hdr__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.hdr__act{ display:none; align-items:center; gap:1.25rem; margin-left:auto; }
.hdr__act .btn{ white-space:nowrap; }
@media(min-width:1060px){ .hdr__act{ display:flex; margin-left:2.2rem; } }
.lnk-tel{
  font-family:var(--f-disp); font-size:1.19rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; color:var(--tx-light); white-space:nowrap; transition:color .3s;
}
.hdr.is-stuck .lnk-tel{ color:var(--tx); }
.lnk-tel:hover{ color:var(--teal-lt); }
.hdr.is-stuck .lnk-tel:hover{ color:var(--teal); }

.burger{
  margin-left:auto; width:44px; height:44px; background:none; border:0; cursor:pointer;
  display:grid; place-content:center; gap:5px; padding:0;
}
@media(min-width:1060px){ .burger{ display:none; } }
.burger span{
  display:block; width:22px; height:1.5px; background:var(--tx-light);
  transition:transform .4s var(--ease), opacity .3s, background .4s;
}
.hdr.is-stuck .burger span{ background:var(--tx); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mnav{
  display:grid; overflow:hidden; max-height:0;
  background:var(--ink); transition:max-height .5s var(--ease-io);
}
.mnav.is-open{ max-height:60vh; }
.mnav a{
  padding:1.05rem 1.25rem; text-decoration:none; color:var(--tx-light);
  border-bottom:1px solid var(--line-lt); font-size:1rem;
}
.mnav a:last-child{ color:var(--teal-lt); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:var(--ink); color:var(--tx-light); overflow:hidden;
  padding-block:9rem 6rem;
}
.hero__media{ position:absolute; inset:0; }
.hero__media video{
  width:100%; height:100%; object-fit:cover;
  /* no CSS filter on a playing video: it forces a per-frame GPU pass.
     The darkening it did now lives in the static scrim above. */
  transform:scale(1.06);
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(13,25,29,.38),rgba(13,25,29,.38)),
    linear-gradient(105deg, rgba(13,25,29,.95) 8%, rgba(13,25,29,.72) 46%, rgba(13,25,29,.35) 100%),
    radial-gradient(60ch 50ch at 12% 46%, rgba(36,128,122,.22), transparent 62%),
    linear-gradient(to top, var(--ink) 1%, transparent 26%);
}
.hero__in{ position:relative; width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

.hero__h1{
  font-family:var(--f-disp); font-weight:500;
  font-size:clamp(2.9rem,1.5rem + 6.6vw,7rem);
  line-height:.97; letter-spacing:-.022em;
  color:#FCFAF4; margin-bottom:1.9rem; max-width:16ch;
}
.hero__h1 span{ display:block; }
/* the keyword eyebrow lives inside the H1 for search, but keeps its own look */
.hero__h1 .eyebrow{ display:flex; font-family:var(--f-body); line-height:1.4; max-width:none; }
.hero__h1 em{ font-style:italic; font-weight:400; color:var(--tx-light-s); }
.hero__h1 mark{
  background:none; color:var(--teal-lt); font-style:italic; position:relative;
  padding-inline:.04em;
}
.hero__h1 mark::after{
  content:""; position:absolute; left:0; right:0; bottom:.1em; height:3px;
  background:var(--teal-lt); transform-origin:left; transform:scaleX(0);
  animation:underline 1s var(--ease) 1.35s forwards;
}
@keyframes underline{ to{ transform:scaleX(1); } }

.hero__sub{
  max-width:50ch; font-size:clamp(1.03rem,.98rem + .28vw,1.19rem);
  line-height:1.68; color:var(--tx-light-s); margin-bottom:2.5rem;
}
.hero__sub strong{ color:#FCFAF4; font-weight:500; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.6rem; }

.hero__pills{ display:flex; flex-wrap:wrap; gap:.55rem 1.75rem; }
.hero__pills li{
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-light-s); display:flex; align-items:center; gap:.6rem;
}
.hero__pills li::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--teal-lt); flex:none;
}

.hero__scroll{
  position:absolute; left:50%; bottom:2rem; translate:-50% 0;
  width:1px; height:52px; background:var(--line-lt); overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0; background:var(--teal-lt);
  animation:scrolldot 2.4s var(--ease-io) infinite;
}
@keyframes scrolldot{
  0%{ transform:translateY(-100%); } 55%,100%{ transform:translateY(100%); }
}

/* ---------- trust strip ---------- */
.strip{ background:var(--ink-2); color:var(--tx-light); border-block:1px solid var(--line-lt); }
.strip__in{
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.stat{
  padding:2.1rem 1.2rem; text-align:center;
  border-right:1px solid var(--line-lt);
}
.stat:last-child{ border-right:0; }
/* below the 5-across breakpoint, lock to a clean 2-up so the dividers stay honest */
@media(max-width:860px){
  .strip__in{ grid-template-columns:1fr 1fr; }
  .stat{ padding:1.5rem .7rem; border-bottom:1px solid var(--line-lt); }
  .stat:nth-child(2n){ border-right:0; }
  .stat:last-child{ grid-column:1 / -1; border-bottom:0; }
  .stat:nth-last-child(2){ border-bottom:0; }
}
.stat b{
  display:block; font-family:var(--f-disp); font-weight:600;
  font-size:clamp(1.85rem,1.3rem + 1.7vw,2.85rem); line-height:1;
  color:#FBF7EE; letter-spacing:-.01em; margin-bottom:.5rem;
}
.stat .star{ color:var(--teal-lt); font-style:normal; font-size:.72em; margin-left:.1em; }
.stat span{
  font-size:.719rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--tx-light-s); line-height:1.45; display:block;
}

/* ==========================================================================
   SCROLL-LINKED FRAME SEQUENCE  (GSAP ScrollTrigger, Apple-style scrub)
   150 JPEG frames drawn to a canvas, frame index mapped to scroll progress.
   ========================================================================== */
.seq{ background:var(--ink); color:var(--tx-light); position:relative; }

.seq__stage{
  position:relative; overflow:hidden;
  height:100svh; min-height:580px;
  display:flex; align-items:flex-end;
  background:var(--ink);   /* opaque: nothing can show through while pinned */
}
/* vignette — closes the section in on itself so it reads as its own chapter */
.seq__stage::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(120% 85% at 50% 50%, transparent 52%, rgba(6,12,14,.55) 100%);
}
@media(hover:none) and (pointer:coarse){
  .seq__stage::after{ display:none; }   /* the scrim already gives depth here */
}

/* Framed panel rather than full bleed — inset from the stage with soft corners
   so the footage reads as a deliberate figure, not raw video behind the text. */
.seq__media{
  position:absolute;
  top:clamp(.7rem,2.4vw,1.1rem); right:0;
  bottom:clamp(.7rem,2.4vw,1.1rem); left:0;
  z-index:0; overflow:hidden; background:var(--ink);
  border:1px solid rgba(237,230,215,.10);
  border-radius:clamp(10px,2.2vw,18px);
}
.seq__canvas{ width:100%; height:100%; display:block; transform:translateZ(0); }

/* scrim so the copy stays legible over the frames */
.seq__media::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(to top,
    var(--ink) 2%, rgba(13,25,29,.93) 30%, rgba(13,25,29,.60) 52%,
    rgba(13,25,29,.14) 74%, transparent 90%);
}

/* ---- loading state ---- */
.seq__load{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:3;
  display:grid; gap:.85rem; justify-items:center; width:min(78%,260px);
  transition:opacity .5s var(--ease), visibility .5s;
}
.seq__load.is-done{ opacity:0; visibility:hidden; }
.seq__bar{
  display:block; width:100%; height:2px; background:rgba(237,230,215,.18);
  border-radius:2px; overflow:hidden;
}
.seq__bar i{
  display:block; height:100%; width:0%; background:var(--teal-lt);
  transition:width .25s linear;
}
.seq__msg{
  font-size:.688rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tx-light-s);
}

/* ---- copy ---- */
.seq__in{
  position:relative; z-index:2; height:100%;
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(2.5rem,7vh,4.5rem);
}
.seq__copy{ position:relative; z-index:2; }
/* the sticky call bar owns the bottom ~52px below 1060px — clear it */
@media(max-width:1059px){
  .seq__in{ padding-bottom:clamp(5rem,12vh,7rem); }
}
/* All steps share one grid cell, so the block is as tall as the TALLEST step
   and no step can overflow upward into the eyebrow the way bottom-anchored
   absolute positioning allowed. */
.seq__steps{ display:grid; }
.seq__step{
  grid-area:1 / 1; align-self:end; max-width:34ch;
  opacity:0; visibility:hidden;
}
.seq__step.is-on{ opacity:1; visibility:visible; }
.seq__step .h2{ margin-bottom:1.1rem; }
.seq__step p{ color:var(--tx-light-s); line-height:1.7; }
.seq__step strong{ color:#FBF7EE; font-weight:500; }

.seq__hint{
  display:flex; align-items:center; gap:.7rem; margin-top:1.6rem;
  font-size:.688rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tx-light-s); transition:opacity .5s var(--ease);
}
.seq__hint span{
  width:1.9rem; height:1px; background:var(--teal-lt); transform-origin:left;
  animation:seqHint 2.2s var(--ease-io) infinite;
}
@keyframes seqHint{ 0%,100%{ transform:scaleX(.35); } 50%{ transform:scaleX(1); } }
.seq.is-ended .seq__hint{ opacity:0; }

/* ---- wide: figure on the right, copy on the left ---- */
@media(min-width:980px){
  .seq__stage{ align-items:center; }
  /* Width derives from the height at the footage's own 9:16, so the panel
     matches the frames exactly and nothing is letterboxed. */
  /* copy and panel are columns of ONE grid inside the wrap — previously the
     panel was pinned to the viewport edge and drifted away from the text on
     wide screens. Width derives from height at the footage's own 9:16. */
  .seq__in{
    display:grid; grid-template-columns:minmax(18rem,31rem) auto;
    justify-content:center; align-items:center;
    gap:clamp(2rem,3.5vw,4rem);
    flex-direction:row;
  }
  .seq__media{
    position:relative; inset:auto;
    aspect-ratio:9 / 16; height:min(80svh,760px); width:auto;
    align-self:center;
  }
  /* copy sits beside the panel here, not over it — so no scrim */
  .seq__media::after{ background:none; }
  .seq__in{ padding-bottom:0; }
  .seq__step{ max-width:none; }   /* the grid column sets the measure here */
}

/* ---- isolation: while the sequence is pinned the header drops its light bar
   and blends into the section, so nothing cuts across the frame ---- */
body.seq-on .hdr.is-stuck{
  background:transparent; backdrop-filter:none;
  border-bottom-color:transparent; box-shadow:none;
}
body.seq-on .hdr.is-stuck .hdr__nav a,
body.seq-on .hdr.is-stuck .lnk-tel{ color:var(--tx-light); }
body.seq-on .hdr.is-stuck .hdr__tag b{ color:var(--teal-lt); }
body.seq-on .hdr.is-stuck .hdr__tag span{ color:var(--tx-light-s); }
body.seq-on .hdr.is-stuck .burger span{ background:var(--tx-light); }

/* ---- reduced motion / no-JS: no pin, no scrub, everything readable ---- */
.seq.is-static .seq__stage{ height:auto; min-height:0; padding-block:var(--sp); display:block; }
.seq.is-static .seq__media{ position:relative; inset:auto; left:auto;
  aspect-ratio:9/16; max-height:70svh; width:100%; margin-bottom:2.5rem; }
.seq.is-static .seq__media::after{ background:linear-gradient(to top, rgba(13,25,29,.5), transparent 45%); }
.seq.is-static .seq__steps{ min-height:0; display:grid; gap:2.75rem; }
.seq.is-static .seq__step{ position:relative; inset:auto; opacity:1; visibility:visible; max-width:60ch; }
.seq.is-static .seq__hint{ display:none; }
@media(min-width:980px){
  .seq.is-static .seq__media{ width:min(420px,45%); float:right; margin:0 0 2rem 3rem; }
}

/* ==========================================================================
   HOW IT WORKS (dark)
   ========================================================================== */
.doc{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); grid-template-columns:1fr; }
@media(min-width:980px){ .doc{ grid-template-columns:.92fr 1.08fr; align-items:start; } }

.doc__vid{
  position:relative; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line-lt); background:var(--ink-2);
  aspect-ratio:4/5;
}
@media(max-width:979px){ .doc__vid{ aspect-ratio:16/10; } }
.doc__vid video{
  width:100%; height:100%; object-fit:cover;
}
.doc__tag{
  position:absolute; left:1rem; bottom:1rem;
  background:rgba(13,25,29,.9);
  border:1px solid var(--line-lt); border-radius:2px;
  padding:.45rem .75rem; font-size:.688rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal-lt);
}

.doc__list{ display:grid; gap:0; counter-reset:d; }
.doc__list li{
  counter-increment:d; padding:1.7rem 0 1.7rem 4.2rem; position:relative;
  border-bottom:1px solid var(--line-lt);
}
.doc__list li:first-child{ padding-top:0; }
.doc__list li:last-child{ border-bottom:0; padding-bottom:0; }
.doc__list li::before{
  content:"0" counter(d);
  position:absolute; left:0; top:1.75rem;
  font-family:var(--f-disp); font-size:1.5rem; font-weight:600;
  color:var(--teal-lt); opacity:.55; letter-spacing:.02em;
}
.doc__list li:first-child::before{ top:0; }
.doc__list h3{
  font-family:var(--f-disp); font-size:1.63rem; font-weight:600;
  color:#FBF7EE; margin-bottom:.5rem; letter-spacing:-.005em;
}
.doc__list p{ color:var(--tx-light-s); max-width:52ch; }
.doc__list em{ color:var(--teal-lt); font-style:italic; }
.doc__list strong{ color:#FBF7EE; font-weight:500; }

/* ==========================================================================
   PROTOCOL STEPS
   ========================================================================== */
/* Six cards (5 steps + CTA). Min 330px caps the grid at 3 columns inside the
   1240px wrap, so the count always fills whole rows (3+3, 2+2+2, 1 col).
   Each card draws its own hairline ring and the container is transparent, so
   if a row is ever short, the empty cells show the section, not a grey slab. */
.steps{
  display:grid; gap:1px; background:transparent;
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
}
.step{
  background:var(--paper); padding:2.4rem 1.9rem; position:relative; transition:background .4s;
  box-shadow:0 0 0 1px var(--line);
}
.step:hover{ background:var(--paper-2); }
.step__n{
  font-family:var(--f-disp); font-size:3.1rem; font-weight:600; line-height:1;
  color:var(--teal); opacity:.28; display:block; margin-bottom:1rem;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.step:hover .step__n{ opacity:.6; transform:translateY(-3px); }
.step h3{
  font-family:var(--f-disp); font-size:1.5rem; font-weight:600;
  margin-bottom:.65rem; letter-spacing:-.005em;
}
.step p{ font-size:.938rem; color:var(--tx-soft); line-height:1.65; }

.step--cta{
  background:var(--ink); color:var(--tx-light);
  display:flex; flex-direction:column; justify-content:center; gap:1rem;
  background-image:radial-gradient(70% 90% at 100% 0%, rgba(98,198,188,.16), transparent 66%);
}
.step--cta:hover{ background:var(--ink); }
.step--cta h3{ color:#FBF7EE; }
.step--cta p{ color:var(--tx-light-s); }
/* full width + nowrap: the label is a phone number, so it must never break
   across lines, and stretching gives it room in the narrowest grid column */
.step--cta .btn{
  align-self:stretch; white-space:nowrap;
  padding-inline:1rem;   /* full-width and centred, so wide side padding only
                            steals room from the number */
}
.step__alt{ font-size:.813rem; color:var(--tx-light-s); margin-top:-.35rem; }
.step__alt a{ color:var(--teal-lt); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s; }
.step__alt a:hover{ border-color:currentColor; }

/* ==========================================================================
   D.O.C. REEL — straight after «Πώς λειτουργεί» on the same ink, so it reads as
   that section's footage. Native 9:16 phone clips in a scroll-snap row.
   ========================================================================== */
.reel{ padding-top:0; }
.reel__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.reel__nav{ display:flex; gap:.5rem; flex:none; }
.reel__btn{
  width:46px; height:46px; display:grid; place-content:center; cursor:pointer;
  border-radius:50%; border:1px solid var(--line-lt); background:transparent; color:var(--tx-light);
  transition:border-color .3s, color .3s, opacity .3s;
}
.reel__btn:hover{ border-color:var(--teal-lt); color:var(--teal-lt); }
.reel__btn:disabled{ opacity:.3; cursor:default; border-color:var(--line-lt); color:var(--tx-light); }
@media(max-width:599px){ .reel__nav{ display:none; } }

.reel__track{
  display:grid; grid-auto-flow:column; gap:clamp(.75rem,1.5vw,1.1rem);
  grid-auto-columns:min(72%,250px);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:.25rem;
}
.reel__track::-webkit-scrollbar{ display:none; }
.reel__track:focus-visible{ outline:2px solid var(--teal-lt); outline-offset:4px; }
@media(min-width:600px){ .reel__track{ grid-auto-columns:calc((100% - 2 * 1rem) / 3); } }
@media(min-width:1000px){ .reel__track{ grid-auto-columns:calc((100% - 3 * 1.1rem) / 4); } }
.reel__it{ margin:0; scroll-snap-align:start; }
.reel__v{
  position:relative; aspect-ratio:9 / 16; overflow:hidden; background:var(--ink-2);
  border-radius:calc(var(--r) * 5); border:1px solid var(--line-lt);
}
.reel__v video{ width:100%; height:100%; object-fit:cover; cursor:pointer; }
/* same play badge as the machine cards */
.reel__v::after{
  content:""; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:56px; height:56px; border-radius:50%; z-index:2; pointer-events:none;
  border:1px solid rgba(237,230,215,.55);
  background:rgba(13,25,29,.72)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'%3E%3Cpath d='M19 11 0 22V0z' fill='%23EDE6D7'/%3E%3C/svg%3E")
    calc(50% + 2px) 50%/17px no-repeat;
  transition:opacity .45s var(--ease);
}
.reel__v.is-playing::after{ opacity:0; }
.reel__it figcaption{ display:grid; gap:.15rem; padding:.85rem .15rem 0; }
.reel__it b{ font-family:var(--f-disp); font-size:1.3rem; font-weight:600; color:#FBF7EE; line-height:1.15; }
.reel__it span{ font-size:.844rem; color:var(--tx-light-s); line-height:1.5; }

/* ==========================================================================
   BEFORE / AFTER — an ink card on paper, straight after the protocol (it picks
   up step 01's MRI). The illustration is an original schematic, drawn in the
   site palette: clay for the compressed state, teal for the decompressed one.
   ========================================================================== */
.ba{ padding-top:0; }
.ba__card{
  display:grid; gap:clamp(2rem,4vw,4rem); grid-template-columns:1fr; align-items:center;
  padding:clamp(1.75rem,4.5vw,4rem); border-radius:calc(var(--r) * 3);
  color:var(--tx-light); background:var(--ink);
  background-image:
    radial-gradient(70ch 50ch at 0% 0%, rgba(98,198,188,.14), transparent 60%),
    radial-gradient(60ch 50ch at 100% 100%, rgba(44,74,99,.35), transparent 60%);
}
@media(min-width:980px){ .ba__card{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); } }
.ba__tx > .h2{ margin-bottom:1.4rem; }
.ba__steps{ display:grid; gap:0; margin-top:1.8rem; counter-reset:ba; border-top:1px solid var(--line-lt); }
.ba__steps li{
  counter-increment:ba; display:grid; grid-template-columns:2.4rem 1fr; column-gap:.4rem;
  padding:.8rem 0; border-bottom:1px solid var(--line-lt);
}
.ba__steps li::before{
  content:"0" counter(ba); grid-row:span 2;
  font-family:var(--f-disp); font-size:1.3rem; line-height:1.2; color:var(--teal-lt);
}
.ba__steps b{ font-weight:600; color:#FBF7EE; font-size:.95rem; }
.ba__steps span{ font-size:.844rem; color:var(--tx-light-s); }
/* the source image is small (364px), so the white frame is capped near its
   native size instead of stretching it soft across the column */
.ba__fig{
  margin:0 auto; width:100%; max-width:460px; padding:clamp(.9rem,2vw,1.25rem);
  border-radius:calc(var(--r) * 5); background:#fff;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.ba__img{ width:100%; border-radius:calc(var(--r) * 3); }
.ba__fig figcaption{
  margin-top:.8rem; text-align:center; font-size:.75rem; color:var(--tx-soft); font-style:italic;
}

/* ==========================================================================
   PERSONAL CARE — deep teal band, echoes the logo; sits between the paper
   protocol and the ink conditions so it reads as its own moment
   ========================================================================== */
.solo{
  color:var(--tx-light);
  background:#0F3633;
  background-image:
    radial-gradient(80ch 60ch at 88% -5%, rgba(98,198,188,.24), transparent 60%),
    linear-gradient(160deg, #144A46 0%, #0C2C2A 100%);
}
.solo__tx > .h2{ margin-bottom:1.4rem; }
/* Text only. On desktop the copy splits into two columns so the band doesn't
   read as one narrow strip: heading + review quote left, body + facts right.
   On phones it is a single column in reading order. */
@media(min-width:980px){
  .solo__tx{
    display:grid; align-items:start;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    grid-template-areas: "eye prose" "h2 prose" "quote facts";
    column-gap:clamp(2.5rem,6vw,6rem); row-gap:0;
  }
  .solo__tx > .eyebrow{ grid-area:eye; }
  .solo__tx > .h2{ grid-area:h2; }
  .solo__tx > .prose{ grid-area:prose; padding-top:.35rem; }
  .solo__tx > .solo__facts{ grid-area:facts; }
  .solo__tx > .solo__q{ grid-area:quote; align-self:end; margin-bottom:.2rem; }
}

.solo__facts{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; margin-top:2rem;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r); overflow:hidden;
}
.solo__facts li{ background:#0F3633; padding:1.1rem 1rem; display:grid; gap:.3rem; align-content:start; }
.solo__facts b{
  font-family:var(--f-disp); font-weight:600; line-height:1; color:#FBF7EE;
  font-size:clamp(1.45rem,1.15rem + 1vw,2rem); white-space:nowrap;
}
.solo__facts span{ font-size:.78rem; line-height:1.4; color:var(--tx-light-s); }
@media(max-width:420px){ .solo__facts li{ padding:.95rem .7rem; } }

.solo__q{ margin:1.75rem 0 0; padding-left:1.1rem; border-left:2px solid var(--teal-lt); }
.solo__q p{ font-family:var(--f-disp); font-style:italic; font-size:1.3rem; line-height:1.4; color:#FBF7EE; }
.solo__q cite{ display:block; margin-top:.4rem; font-style:normal; font-size:.78rem; letter-spacing:.06em; color:var(--tx-light-s); }

/* ==========================================================================
   CONDITIONS
   ========================================================================== */
/* The grid lines used to be the container background showing through 1px
   gaps — which also painted every UNFILLED cell in the last row as a grey
   slab. Each item now draws its own hairline ring instead, so empty cells
   simply show the section behind them at any column count. */
.conds{
  display:grid; gap:1px; background:transparent;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.conds li{
  background:var(--ink); padding:1.55rem 1.4rem;
  box-shadow:0 0 0 1px var(--line-lt);
  display:grid; gap:.3rem; position:relative; overflow:hidden;
  transition:background .45s var(--ease);
}
.conds li::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--teal-lt); transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--ease);
}
.conds li:hover{ background:var(--ink-3); }
.conds li:hover::before{ transform:scaleY(1); transform-origin:top; }
.conds b{
  font-family:var(--f-disp); font-size:1.31rem; font-weight:600; color:#FBF7EE;
  letter-spacing:-.005em;
}
.conds span{ font-size:.813rem; color:var(--tx-light-s); letter-spacing:.01em; }

.disclaim{
  margin-top:2rem; font-size:.844rem; font-style:italic; color:var(--tx-light-s);
  max-width:70ch; padding-left:1.1rem; border-left:1px solid var(--line-lt);
}

/* ==========================================================================
   MACHINES
   ========================================================================== */
/* Nine equal cards. 3x3 on desktop; 2-up on tablet with the odd ninth card
   centred at the same size; one column on phones. */
.machines{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media(min-width:600px) and (max-width:899px){
  .machines{ grid-template-columns:repeat(2,1fr); }
  .machines > .mach:last-child:nth-child(odd){ grid-column:1 / -1; justify-self:center; width:calc(50% - .75rem); }
}
@media(min-width:900px){ .machines{ grid-template-columns:repeat(3,1fr); } }
.mach{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--paper-2); display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.mach:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -26px rgba(13,25,29,.5); }

/* Nearly every clip is 9:16 phone footage. A 16/10 window cropped away about
   two thirds of each frame; 4/5 roughly doubles what survives while keeping
   the cards a workable height. */
.mach__v{ aspect-ratio:4/5; background:var(--ink-2); overflow:hidden; position:relative; }

/* play badge — visible whenever a clip isn't running, which on iOS Low Power
   Mode is always, since autoplay is blocked there. Makes the still read as a
   deliberate tappable poster instead of a video that failed. */
.mach__v::after,
.doc__vid::after{
  content:""; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:56px; height:56px; border-radius:50%; z-index:2; pointer-events:none;
  border:1px solid rgba(237,230,215,.55);
  background:rgba(13,25,29,.72)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'%3E%3Cpath d='M19 11 0 22V0z' fill='%23EDE6D7'/%3E%3C/svg%3E")
    center/17px no-repeat;
  background-position:calc(50% + 2px) 50%;
  opacity:1; transition:opacity .45s var(--ease);
}
.mach__v.is-playing::after,
.doc__vid.is-playing::after{ opacity:0; }
.mach__v video, .doc__vid video{ cursor:pointer; }
.mach__v video{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.mach:hover .mach__v video{ transform:scale(1.05); }
/* Product cut-out of the machine, straddling the seam between clip and text.
   Most clips show the treatment, not the device, so this is where visitors see
   the machine itself. The label gets right padding so it never runs under it. */
.mach__b{ position:relative; }
.mach__png{
  position:absolute; right:1rem; top:0; translate:0 -64%; z-index:3; pointer-events:none;
  width:clamp(92px,30%,124px); height:auto; max-height:124px; object-fit:contain;
  filter:drop-shadow(0 10px 14px rgba(13,25,29,.35));
  transition:transform .45s var(--ease);
}
.mach__k{ padding-right:clamp(100px,32%,136px); }
.mach:hover .mach__png{ transform:translateY(-3px); }
.mach__b{ padding:1.5rem 1.4rem 1.7rem; display:grid; gap:.5rem; align-content:start; }
.mach__k{
  font-size:.688rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal); font-weight:600;
}
.mach h3{ font-family:var(--f-disp); font-size:1.63rem; font-weight:600; letter-spacing:-.005em; }
.mach p{ font-size:.906rem; color:var(--tx-soft); line-height:1.62; }

/* ==========================================================================
   THERAPIST
   ========================================================================== */
/* Bento: one grid of tiles, text and photos mixed. 4 columns on desktop,
   2 below that. Photos fill their tile (object-fit) so any crop works. */
.bento{
  display:grid; gap:clamp(.6rem,1.2vw,1rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:
    "intro intro" "team certs" "team certs" "treat treat"
    "stat1 stat2" "scrubs wall" "creds creds";
}
@media(min-width:980px){
  .bento{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:minmax(190px,auto);
    grid-template-areas:
      "intro intro team  certs"
      "intro intro team  certs"
      "treat treat stat1 certs"
      "treat treat stat2 scrubs"
      "creds creds wall  scrubs";
  }
}
.bt{
  position:relative; overflow:hidden; margin:0;
  border-radius:calc(var(--r) * 5); border:1px solid var(--line-lt);
  background:var(--ink-2);
}
.bt--intro{ grid-area:intro; padding:clamp(1.5rem,3vw,2.75rem); }
.bt--intro .h2{ margin-top:-.2rem; }
.bt--team{ grid-area:team; } .bt--certs{ grid-area:certs; } .bt--treat{ grid-area:treat; }
.bt--scrubs{ grid-area:scrubs; } .bt--wall{ grid-area:wall; }
.bt--stat{ grid-area:stat1; } .bt--stat2{ grid-area:stat2; }
.bt--creds{ grid-area:creds; padding:clamp(1.4rem,2.5vw,2rem); }

.bt--ph{ min-height:150px; background:var(--ink-3); }
.bt--ph img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease);
}
.bt--ph:hover img{ transform:scale(1.04); }
/* faces sit in different places in each photo */
.bt--team img{ object-position:52% 50%; }
.bt--certs img{ object-position:center 42%; }
.bt--treat img{ object-position:55% 30%; }
.bt--scrubs img{ object-position:0% 30%; }
.bt--wall img{ object-position:0% 35%; }
/* below desktop the rows have no fixed height, so photo tiles carry a ratio */
@media(max-width:979px){
  .bt--team, .bt--certs{ aspect-ratio:9 / 16; }
  .bt--treat{ aspect-ratio:4 / 3; }
  .bt--scrubs, .bt--wall{ aspect-ratio:3 / 4; }
}
.bt--ph figcaption{
  position:absolute; left:.7rem; bottom:.7rem; right:.7rem; width:max-content; max-width:calc(100% - 1.4rem);
  padding:.35rem .7rem; border-radius:999px; line-height:1.3;
  font-size:.75rem; color:#FBF7EE; background:rgba(13,25,29,.78);
}

.bt--stat{
  display:grid; align-content:end; gap:.2rem; padding:clamp(1.2rem,2vw,1.6rem);
  background:linear-gradient(150deg,#164A46,#0E2E2C);
}
.bt--stat2{ background:var(--ink-3); }
.bt--stat b{
  font-family:var(--f-disp); font-weight:500; line-height:1;
  font-size:clamp(2.4rem,1.6rem + 2.4vw,3.6rem); color:var(--teal-lt);
}
.bt--stat span{ font-size:.875rem; color:var(--tx-light-s); }
.bt__k{
  font-size:.688rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal-lt); margin-bottom:.4rem;
}
.bt--creds .creds{ margin-top:0; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

.bio__title{
  font-family:var(--f-disp); font-size:1.25rem; font-style:italic;
  color:var(--teal-lt); margin:.9rem 0 1.6rem;
}
.creds{
  display:grid; gap:0; margin-top:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.creds li{
  padding:1.05rem 0; border-top:1px solid var(--line-lt); display:grid; gap:.15rem;
  padding-right:1.5rem;
}
.creds b{ font-size:.938rem; font-weight:500; color:#FBF7EE; }
.creds span{ font-size:.844rem; color:var(--tx-light-s); }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
/* masonry so the varied real-world review lengths pack without ragged gaps */
.revs{ columns:3; column-gap:1.5rem; }
@media(max-width:1040px){ .revs{ columns:2; } }
@media(max-width:660px){  .revs{ columns:1; } }

.rev{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  display:block; margin:0 0 1.5rem;
  padding:2rem 1.7rem 1.6rem; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--r);
  position:relative; overflow:hidden;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.rev::before{
  content:"\201C";                    /* decorative quote mark */
  position:absolute; top:-.32em; right:.18em;
  font-family:var(--f-disp); font-size:7rem; line-height:1; font-weight:600;
  color:var(--teal); opacity:.10; pointer-events:none;
}
.rev:hover{ background:#F7F4ED; border-color:rgba(36,128,122,.4); }

.rev__stars{
  color:var(--teal); letter-spacing:.2em; font-size:.875rem; margin-bottom:.9rem;
}
.rev blockquote{ margin:0 0 1.25rem; }
.rev blockquote p{
  font-size:.938rem; line-height:1.72; color:var(--tx); position:relative;
}
/* the three strongest accounts carry more weight typographically */
.rev--big blockquote p{
  font-family:var(--f-disp); font-size:1.19rem; font-style:italic; line-height:1.55;
}

.rev figcaption{
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:.15rem .75rem; border-top:1px solid var(--line); padding-top:1rem;
}
.rev figcaption b{
  grid-row:span 2; width:34px; height:34px; border-radius:50%;
  display:grid; place-content:center;
  background:var(--teal); color:var(--paper);
  font-family:var(--f-disp); font-size:1.06rem; font-weight:600; letter-spacing:.01em;
}
.rev figcaption span{
  grid-column:2; font-size:.781rem; color:var(--tx-soft); letter-spacing:.02em;
  align-self:center;
}

.revs__more{ margin-top:1rem; text-align:center; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.5rem 3rem 1.5rem 0; position:relative;
  font-family:var(--f-disp); font-size:clamp(1.25rem,1.1rem + .5vw,1.56rem);
  font-weight:600; letter-spacing:-.005em; transition:color .3s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--teal); }
.faq summary::after{
  content:""; position:absolute; right:.35rem; top:50%; width:13px; height:13px;
  translate:0 -50%;
  background:
    linear-gradient(var(--teal),var(--teal)) center/13px 1.5px no-repeat,
    linear-gradient(var(--teal),var(--teal)) center/1.5px 13px no-repeat;
  transition:transform .4s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq details p{
  padding:0 3rem 1.7rem 0; color:var(--tx-soft); max-width:70ch;
  animation:fadeUp .45s var(--ease) both;
}
.faq details strong{ color:var(--tx); font-weight:600; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(-6px); } }

/* ==========================================================================
   OTHER WEBSITES — browser-window cards with a live screenshot of each site
   ========================================================================== */
.sites{ background:var(--paper-2); }
.sites__grid{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media(min-width:700px){ .sites__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.site{
  display:flex; flex-direction:column; text-decoration:none; color:var(--tx);
  background:var(--paper); border:1px solid var(--line); border-radius:calc(var(--r) * 4);
  overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.site:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -28px rgba(13,25,29,.55); }
.site__win{ background:#fff; border-bottom:1px solid var(--line); }
.site__bar{
  display:flex; align-items:center; gap:.3rem; padding:.5rem .7rem;
  background:#E4DED2; border-bottom:1px solid var(--line);
}
.site__bar i{ width:8px; height:8px; border-radius:50%; background:#C9C1B2; }
.site__bar em{
  flex:1; margin-left:.5rem; padding:.15rem .6rem; border-radius:999px; background:var(--paper);
  font-style:normal; font-size:.7rem; color:var(--tx-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.site__win img{ width:100%; aspect-ratio:8 / 5; object-fit:cover; object-position:top; transition:transform .9s var(--ease); }
.site:hover .site__win img{ transform:scale(1.03); }
.site__win{ overflow:hidden; }
.site__b{ padding:1.3rem 1.3rem 1.5rem; display:grid; gap:.45rem; }
.site__b h3{ font-family:var(--f-disp); font-size:1.55rem; font-weight:600; }
.site__b p{ font-size:.906rem; color:var(--tx-soft); line-height:1.6; }
.site__go{ margin-top:.35rem; font-size:.875rem; font-weight:600; color:var(--teal); }

/* ==========================================================================
   SOCIAL BARS — big, labelled, with the handle, instead of bare icons
   ========================================================================== */
.soc{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.soc__a{
  display:flex; align-items:center; gap:.85rem; min-height:60px; padding:.65rem .9rem .65rem .7rem;
  text-decoration:none; color:var(--tx-light);
  border:1px solid var(--line-lt); border-radius:calc(var(--r) * 4);
  background:rgba(255,255,255,.03);
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.soc__a:hover{ border-color:var(--teal-lt); background:rgba(98,198,188,.08); transform:translateY(-2px); }
.soc__i{
  flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-content:center; color:#fff;
}
.soc--fb .soc__i{ background:#1877F2; }
.soc--ig .soc__i{ background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%); }
.soc--tt .soc__i{ background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.soc__t{ display:grid; min-width:0; line-height:1.3; }
.soc__t small{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-light-s); }
.soc__t b{ font-size:.95rem; font-weight:600; color:#FBF7EE; overflow-wrap:anywhere; }
.soc__go{ margin-left:auto; color:var(--teal-lt); transition:transform .3s var(--ease); }
.soc__a:hover .soc__go{ transform:translateX(3px); }
.ct__soc{ margin-top:2rem; }
.ct__soc-h{
  font-size:.688rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal-lt); margin-bottom:.8rem;
}
.ft__brand .soc{ margin-top:1.4rem; grid-template-columns:1fr; max-width:420px; }

/* ==========================================================================
   CONTACT + FORM
   ========================================================================== */
.ct__grid{
  display:grid; gap:1px; margin-top:2.75rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.ct__card{
  box-shadow:0 0 0 1px var(--line-lt);
  background:var(--ink); padding:1.6rem 1.4rem; display:grid; gap:.45rem; align-content:start;
}
.ct__card--wide{ grid-column:1 / -1; }
.ct__card h3{
  font-family:var(--f-disp); font-size:1.44rem; font-weight:600; color:#FBF7EE;
  margin-bottom:.2rem;
}
.ct__card h3 i{ font-size:.6em; font-style:italic; color:var(--tx-light-s); font-weight:400; }
.ct__card p{ font-size:.906rem; color:var(--tx-light-s); line-height:1.55; }
.ct__card p i{ font-style:italic; opacity:.75; font-size:.9em; }

.fw{
  background:var(--paper); color:var(--tx); border-radius:var(--r);
  padding:clamp(1.75rem,3.5vw,2.75rem);
  box-shadow:0 32px 70px -34px rgba(0,0,0,.75);
}
.frm{ display:grid; gap:1.15rem; }
.frm__h{
  font-family:var(--f-disp); font-size:1.75rem; font-weight:600;
  padding-bottom:1.15rem; border-bottom:1px solid var(--line); margin-bottom:.35rem;
}
.hp{ position:absolute; left:-9999px; }

.f{ display:grid; gap:.42rem; }
.f-row{ display:grid; gap:1.15rem; grid-template-columns:1fr; }
@media(min-width:520px){ .f-row{ grid-template-columns:1fr 1fr; } }
.f label{
  font-size:.75rem; letter-spacing:.11em; text-transform:uppercase;
  font-weight:600; color:var(--tx-soft);
}
.f label i{ color:var(--clay); font-style:normal; }
.f input,.f select,.f textarea{
  width:100%; padding:.78rem .9rem; font-size:.938rem; font-weight:300;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.f textarea{ resize:vertical; min-height:104px; font-family:inherit; }
.f select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234E6067' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.4rem;
}
.f input::placeholder,.f textarea::placeholder{ color:rgba(78,96,103,.62); }
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none; border-color:var(--teal); background:#FBF9F4;
  box-shadow:0 0 0 3px rgba(36,128,122,.12);
}
.f--chk{
  grid-template-columns:auto 1fr; align-items:start; gap:.7rem;
  padding:.9rem 1rem; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r);
}
.f--chk input{ width:17px; height:17px; margin-top:.18rem; accent-color:var(--teal); }
.f--chk label{
  text-transform:none; letter-spacing:0; font-size:.813rem; font-weight:400;
  line-height:1.5; cursor:pointer;
}
.frm__note{ font-size:.844rem; color:var(--tx-soft); text-align:center; }
.frm__note a{ color:var(--teal); font-weight:600; text-decoration:none; }
.frm__note a:hover{ text-decoration:underline; }

.frm__msg{ display:none; padding:.9rem 1rem; border-radius:var(--r); font-size:.906rem; }
.frm__msg.is-ok{ display:block; background:rgba(36,128,122,.12); border:1px solid var(--teal); color:var(--teal); }
.frm__msg.is-err{ display:block; background:rgba(192,95,44,.1); border:1px solid var(--clay); color:var(--clay); }
.frm.is-sent .f,.frm.is-sent .btn,.frm.is-sent .frm__note{ display:none; }

/* Viber / WhatsApp: each in its own app colour, so they read at a glance */
.msgbtns{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.5rem; }
.msgbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  flex:1 1 7.5rem; padding:.62rem .9rem; border-radius:var(--r);
  font-size:.844rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  color:#fff; text-decoration:none;
  transition:transform .3s var(--ease), filter .3s, box-shadow .3s var(--ease);
}
.msgbtn:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 10px 22px -12px rgba(0,0,0,.7); }
.msgbtn--vb{ background:#7360F2; }
.msgbtn--wa{ background:#1FA855; }   /* WhatsApp green, a shade deeper for white text */

/* ==========================================================================
   MAP — inside the contact section
   Desktop: under the contact cards, beside the form (which spans both rows).
   Mobile: plain DOM order, so it comes AFTER the form and never pushes the
   form further down the page.
   ========================================================================== */
@media(min-width:980px){
  .grid-2--form{ row-gap:1.75rem; }
  .grid-2--form .fw{ grid-column:2; grid-row:1 / span 2; }
  .grid-2--form .ct__map{ grid-column:1; grid-row:2; }
}
.ct__map{
  border:1px solid var(--line-lt); border-radius:var(--r);
  overflow:hidden; background:var(--ink-2);
}
/* The Google embed takes a few seconds to come up, so a static picture of the
   same spot (OSM tiles, built once) shows instantly underneath. The live map
   fades in over it once it has actually finished loading. */
.ct__mapframe{ line-height:0; position:relative; background:#E6E2DA; }
.ct__mapframe iframe{
  position:relative; z-index:1;
  width:100%; height:clamp(220px,24vw,300px); border:0; display:block;
  opacity:0; transition:opacity .5s var(--ease);
}
.ct__mapframe.is-live iframe{ opacity:1; }
.ct__mapstatic{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.ct__mapattr{
  position:absolute; right:0; bottom:0; z-index:0; line-height:1.4;
  padding:.1rem .4rem; font-size:.625rem; color:#333; background:rgba(255,255,255,.75);
}
.ct__mapbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:.9rem 1rem; flex-wrap:wrap; padding:1rem 1.2rem;
  border-top:1px solid var(--line-lt);
}
.ct__mapbar p{ display:grid; gap:.1rem; }
.ct__mapbar b{ font-family:var(--f-disp); font-size:1.19rem; font-weight:600; color:#FBF7EE; }
.ct__mapbar span{ font-size:.844rem; color:var(--tx-light-s); }
.ct__gbp{ white-space:nowrap; }

/* the location select is gone, so the surviving field takes the whole row */
.f-row > .f:only-child{ grid-column:1 / -1; }

/* ==========================================================================
   FOOTER + CALL BAR
   ========================================================================== */
.ft{ background:var(--ink-2); color:var(--tx-light-s); padding-top:clamp(3rem,5vw,4.5rem); }
.ft__in{
  display:grid; gap:2.75rem; grid-template-columns:1fr;
  padding-bottom:2.75rem; border-bottom:1px solid var(--line-lt);
}
@media(min-width:860px){ .ft__in{ grid-template-columns:1fr 1.35fr; } }
.ft__brand img{ height:60px; width:auto; margin-bottom:.9rem; }
.ft__tag{ margin:0 0 1.15rem; line-height:1.42; }
.ft__tag b{
  display:block; font-size:.688rem; font-weight:600; letter-spacing:.15em;
  color:var(--teal-lt); margin-bottom:.15rem;
}
.ft__tag span{
  display:block; font-size:.625rem; letter-spacing:.1em; color:var(--tx-light-s);
}
.ft__brand p{ font-size:.906rem; line-height:1.6; max-width:40ch; }
.ft__nav{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.ft__nav h4{
  font-size:.688rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-lt); margin-bottom:1rem; font-weight:600;
}
.ft__nav a{
  display:block; font-size:.875rem; text-decoration:none; padding-block:.34rem;
  transition:color .3s;
}
.ft__nav a:hover{ color:#FBF7EE; }

.ft__legal{
  padding-block:1.6rem; display:flex; flex-wrap:wrap; gap:.5rem 2rem;
  justify-content:space-between; font-size:.781rem;
}
.ft__disc{ max-width:52ch; color:var(--tx-light-s); }

.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:800;
  display:grid; grid-template-columns:repeat(3, 54px) minmax(0, 1fr); gap:1px;
  background:var(--line-lt);
  transform:translateY(110%); transition:transform .45s var(--ease);
  box-shadow:0 -8px 30px -12px rgba(0,0,0,.5);
}
.callbar.is-on{ transform:none; }
@media(min-width:1060px){ .callbar{ display:none; } }
.callbar a{
  padding:1rem 1.2rem; text-decoration:none; font-size:.875rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:.5rem; letter-spacing:.03em;
}
.callbar__ico{ padding:0 !important; min-height:52px; }
.callbar__tel{ background:var(--ink); color:var(--tx-light); }
.callbar__vb{ background:#7360F2; color:#fff; }
.callbar__wa{ background:#1FA855; color:#fff; }
.callbar__cta{ background:var(--teal); color:#FBF9F4; padding-inline:.6rem !important; white-space:nowrap; }
@media(max-width:340px){ .callbar .callbar__cta{ font-size:.8rem; letter-spacing:.01em; } }
body{ padding-bottom:0; }
@media(max-width:1059px){ .ft__legal{ padding-bottom:4.5rem; } }

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */
.rv,[data-rv]{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease) var(--d,0ms), transform .85s var(--ease) var(--d,0ms);
}
.rv{ animation:none; }
.rv.is-in,[data-rv].is-in{ opacity:1; transform:none; }

/* hero children reveal on load rather than on scroll */
.hero .rv{ opacity:0; animation:heroIn .95s var(--ease) var(--d,0ms) forwards; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

/* On narrow screens every grid collapses to a single column, which turns the
   per-item stagger (up to 600ms in the conditions list) into a slow ragged
   cascade. Drop the delay, shorten the travel, and let each row settle fast.
   The hero keeps its choreography — it is one composition, not a list. */
@media(max-width:760px){
  [data-rv]{
    --d:0ms !important;
    transform:translateY(14px);
    transition-duration:.5s;
  }
}

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rv,[data-rv]{ opacity:1 !important; transform:none !important; }
  .hero__media video{ display:none; }
}