/* ============================================================
   MINDOVA — stylesheet
   ------------------------------------------------------------
   01  Design tokens (colours, type, spacing)   ← EDIT COLOURS HERE
   02  Reset & base
   03  Layout helpers
   04  Buttons
   05  Header & navigation
   06  Hero
   07  Marquee
   08  Section furniture (headings, eyebrows)
   09  Steps / Services / Approach / About
   10  FAQ
   11  CTA band & Footer
   12  Animations (reveal, float, marquee…)
   13  Appointment dialog
   14  Responsive
   ============================================================ */


/* ====================== 01 · DESIGN TOKENS ================= */
:root{
  /* --- Brand colours (sampled from the Mindova logo) --- */
  --navy:        #213A74;
  --navy-deep:   #16284F;
  --navy-soft:   #35529A;
  --teal:        #18998D;
  --teal-light:  #35B3A6;
  --teal-wash:   #E6F3F1;

  /* --- Neutrals --- */
  --cream:       #FBF8F3;   /* page background */
  --cream-deep:  #F3EEE4;   /* tinted sections */
  --ink:         #1B2E4F;   /* body text       */
  --muted:       #5F7191;   /* secondary text  */
  --line:        #E4DED1;   /* hairlines       */
  --white:       #FFFFFF;

  /* --- Type --- */
  --font-sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;

  /* --- Shape & depth --- */
  --radius-sm: 12px;
  --radius:    20px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(22, 40, 79, .05);
  --shadow:    0 14px 40px -18px rgba(22, 40, 79, .22);
  --shadow-lg: 0 34px 80px -34px rgba(22, 40, 79, .38);

  /* --- Rhythm --- */
  --container: 1200px;
  --gutter: 24px;
  --section-y: clamp(72px, 9vw, 130px);

  /* --- Motion --- */
  --ease: cubic-bezier(.22, .9, .3, 1);
  --t-fast: .22s;
  --t:      .4s;
  --t-slow: .8s;
}


/* ====================== 02 · RESET & BASE ================== */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.12; letter-spacing:-.02em; color:var(--navy); }
p{ margin:0; }
button{ font:inherit; }

h1{ font-family:var(--font-serif); font-weight:400; font-size:clamp(2.9rem, 6.2vw, 4.6rem); letter-spacing:-.025em; }
h2{ font-family:var(--font-serif); font-weight:400; font-size:clamp(2rem, 3.8vw, 3.1rem); letter-spacing:-.02em; }
h1 em, h2 em{ font-style:italic; color:var(--teal); }
h3{ font-size:1.12rem; font-weight:700; letter-spacing:-.01em; }

::selection{ background:var(--teal); color:#fff; }

.skip-link{
  position:absolute; left:-9999px; top:12px; z-index:999;
  background:var(--navy); color:#fff; padding:10px 18px; border-radius:var(--radius-pill);
}
.skip-link:focus{ left:16px; }

:focus-visible{ outline:2.5px solid var(--teal); outline-offset:3px; border-radius:6px; }


/* ====================== 03 · LAYOUT ======================== */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container-narrow{ max-width:860px; }

.section{ padding-block:var(--section-y); position:relative; }

.section-tint{
  background:
    radial-gradient(900px 420px at 85% -10%, var(--teal-wash), transparent 70%),
    var(--cream-deep);
}


/* ====================== 04 · BUTTONS ======================= */
.btn{
  --btn-bg:var(--navy); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:16px 30px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid transparent; border-radius:var(--radius-pill);
  font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
             background var(--t) var(--ease), color var(--t) var(--ease);
}
.btn::after{                       /* soft sheen that sweeps on hover */
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.28) 45%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .75s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(0); }

.btn-arrow{ transition:transform var(--t) var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(4px); }

.btn-sm{ padding:12px 22px; font-size:.72rem; }
.btn-block{ width:100%; }

.btn-primary{ --btn-bg:var(--navy); }
.btn-primary:hover{ background:var(--navy-soft); }

.btn-ghost{
  --btn-bg:transparent; --btn-fg:var(--navy);
  border-color:transparent; padding-inline:8px; text-transform:none;
  font-size:.95rem; letter-spacing:0; font-weight:600;
}
.btn-ghost:hover{ box-shadow:none; color:var(--teal); }

.btn-light{ --btn-bg:#fff; --btn-fg:var(--navy); }
.btn-outline-light{
  --btn-bg:transparent; --btn-fg:#fff; border-color:rgba(255,255,255,.4);
}
.btn-outline-light:hover{ background:rgba(255,255,255,.12); }


/* ====================== 05 · HEADER ======================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,248,243,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
             background var(--t) var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px -18px rgba(22,40,79,.35);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:76px;
  transition:min-height var(--t) var(--ease);
}
.site-header.is-stuck .header-inner{ min-height:66px; }

.brand-logo{
  height:40px; width:auto;
  transition:height var(--t) var(--ease);
}
.site-header.is-stuck .brand-logo{ height:34px; }

.nav-desktop{ display:flex; align-items:center; gap:34px; }
.nav-desktop a{
  position:relative; font-size:.95rem; font-weight:600; color:var(--navy);
  padding-block:6px;
  transition:color var(--t) var(--ease);
}
.nav-desktop a::after{            /* animated underline */
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--teal); border-radius:2px;
  transform:scaleX(0); transform-origin:right;
  transition:transform var(--t) var(--ease);
}
.nav-desktop a:hover{ color:var(--teal); }
.nav-desktop a:hover::after{ transform:scaleX(1); transform-origin:left; }

.header-actions{ display:flex; align-items:center; gap:12px; }

.nav-toggle{
  display:none;
  width:44px; height:44px; padding:0;
  background:var(--white); border:1px solid var(--line); border-radius:50%;
  cursor:pointer; position:relative;
}
.nav-toggle span{
  position:absolute; left:13px; width:18px; height:2px; border-radius:2px;
  background:var(--navy);
  transition:transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-toggle span:nth-child(1){ top:16px; }
.nav-toggle span:nth-child(2){ top:21px; }
.nav-toggle span:nth-child(3){ top:26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

.nav-mobile{
  display:none; flex-direction:column; gap:2px;
  padding:8px var(--gutter) 24px;
  border-top:1px solid var(--line);
  background:var(--cream);
  animation:drawerIn .35s var(--ease) both;
}
.nav-mobile a:not(.btn){
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 2px; font-weight:700; color:var(--navy);
  border-bottom:1px solid var(--line);
}
.nav-mobile .btn{ margin-top:18px; }
.nav-mobile[hidden]{ display:none; }
.nav-mobile.is-open{ display:flex; }


/* ====================== 06 · HERO ========================== */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(48px, 7vw, 96px) clamp(60px, 8vw, 110px);
}

.hero-bg{ position:absolute; inset:0; pointer-events:none; }
.hero-bg .blob{
  position:absolute; border-radius:50%; filter:blur(60px);
}
.blob-a{
  width:46vw; height:46vw; max-width:620px; max-height:620px;
  top:-14%; right:-8%;
  background:radial-gradient(circle at 40% 40%, rgba(24,153,141,.20), transparent 68%);
  animation:floatSlow 16s ease-in-out infinite;
}
.blob-b{
  width:38vw; height:38vw; max-width:480px; max-height:480px;
  bottom:4%; left:-16%;
  background:radial-gradient(circle at 60% 40%, rgba(33,58,116,.14), transparent 68%);
  animation:floatSlow 20s ease-in-out infinite reverse;
}
.hero-arc{
  position:absolute; top:-10%; right:-6%; width:min(70vw, 760px); color:var(--teal);
}

.hero-grid{
  position:relative;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px, 5vw, 72px);
  align-items:center;
}

.hero-copy h1{ margin-block:18px 22px; }
.lead{
  max-width:46ch; font-size:1.1rem; color:var(--muted); line-height:1.7;
}
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:34px; }

.hero-trust{
  display:flex; flex-wrap:wrap; gap:14px 32px;
  margin-top:40px; padding-top:28px; border-top:1px solid var(--line);
  font-size:.92rem; color:var(--muted); font-weight:500;
}
.hero-trust li{ display:flex; align-items:center; gap:9px; }
.tick{
  display:grid; place-items:center; flex:0 0 auto;
  width:21px; height:21px; border-radius:50%;
  background:var(--teal-wash); color:var(--teal);
  font-size:.7rem; font-weight:800;
}

/* --- the photo frame (organic shape) --- */
.hero-media{ position:relative; }

.photo-frame{
  position:relative; margin:0; overflow:hidden;
  border-radius:48% 48% 44% 44% / 40% 40% 56% 56%;   /* soft organic silhouette */
  box-shadow:var(--shadow-lg);
  background:var(--teal-wash);
  animation:morph 18s ease-in-out infinite;
}
.photo-frame img{
  width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 22%;
  transform:scale(1.02);
  transition:transform 1.2s var(--ease);
}
.photo-frame:hover img{ transform:scale(1.06); }

/* gentle teal/cream wash so the photograph sits in the palette */
.photo-tint{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(170deg, rgba(251,248,243,.18) 0%, transparent 42%),
    linear-gradient(0deg,   rgba(22,40,79,.16) 0%, transparent 42%),
    radial-gradient(120% 90% at 50% 100%, rgba(24,153,141,.16), transparent 62%);
  mix-blend-mode:multiply; opacity:.75;
}

.photo-frame-alt{
  border-radius:28px 110px 28px 110px;   /* soft leaf shape */
  animation:none;
}
.photo-frame-alt img{ aspect-ratio:4/3; object-position:50% 38%; }
.photo-frame-alt .photo-tint{ opacity:.55; }

/* floating cards */
.float-card{
  position:absolute; left:-6%; bottom:7%;
  width:min(280px, 74%);
  padding:22px 24px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  animation:floatCard 7s ease-in-out infinite;
}
.float-card h3{ font-family:var(--font-serif); font-weight:400; font-size:1.3rem; margin-bottom:8px; }
.float-card p{ font-size:.88rem; color:var(--muted); line-height:1.6; }
.float-dot{
  display:block; width:9px; height:9px; border-radius:50%; background:var(--teal);
  margin-bottom:12px; box-shadow:0 0 0 5px rgba(24,153,141,.16);
  animation:pulse 2.6s ease-in-out infinite;
}

.float-badge{
  position:absolute; top:6%; right:4%;
  width:62px; height:62px; display:grid; place-items:center;
  background:var(--teal); color:#fff; border-radius:50%;
  box-shadow:0 14px 30px -12px rgba(24,153,141,.7);
  animation:floatCard 6s ease-in-out infinite .8s;
}
.float-badge svg{ width:28px; height:28px; }

.float-stat{
  position:absolute; right:-4%; bottom:8%;
  padding:18px 24px; text-align:center;
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow);
  animation:floatCard 7.5s ease-in-out infinite;
}
.float-stat strong{
  display:block; font-family:var(--font-serif); font-weight:400;
  font-size:1.9rem; color:var(--navy); line-height:1;
}
.float-stat span{ font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }


/* ====================== 07 · MARQUEE ======================= */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:var(--white); padding-block:16px;
}
.marquee-track{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:marquee 34s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee span{
  font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--navy); white-space:nowrap;
}
.marquee i{ color:var(--teal); font-style:normal; }


/* ====================== 08 · SECTION FURNITURE ============= */
.eyebrow{
  font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--teal); margin:0;
}
.eyebrow-light{ color:rgba(255,255,255,.75); }

.section-head{ max-width:720px; margin-bottom:clamp(40px, 5vw, 64px); }
.section-head h2{ margin-top:16px; }
.section-sub{ margin-top:18px; color:var(--muted); font-size:1.05rem; max-width:58ch; }


/* ====================== 09 · CONTENT BLOCKS =============== */

/* --- Steps --- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step{
  position:relative; padding:36px 30px 32px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.step:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--teal-light); }
.step-num{
  display:inline-block; margin-bottom:18px;
  font-family:var(--font-serif); font-size:1.6rem; color:var(--teal);
}
.step h3{ margin-bottom:10px; }
.step p{ color:var(--muted); font-size:.96rem; }

/* --- Services --- */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service-card{
  padding:30px 26px 28px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  position:relative; overflow:hidden;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.service-card::before{            /* teal wash that rises on hover */
  content:''; position:absolute; inset:auto 0 0 0; height:0;
  background:linear-gradient(180deg, transparent, rgba(24,153,141,.07));
  transition:height var(--t-slow) var(--ease);
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--teal-light); }
.service-card:hover::before{ height:100%; }
.service-card > *{ position:relative; }

.service-ico{
  display:grid; place-items:center; width:48px; height:48px; margin-bottom:18px;
  background:var(--teal-wash); color:var(--teal); border-radius:14px;
  transition:transform var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
.service-ico svg{ width:24px; height:24px; }
.service-card:hover .service-ico{ background:var(--teal); color:#fff; transform:rotate(-6deg) scale(1.06); }

.service-card h3{ margin-bottom:9px; font-size:1.05rem; }
.service-card p{ color:var(--muted); font-size:.93rem; line-height:1.6; }

/* --- Approach pillars --- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:56px; }
.pillar{
  padding:32px 28px; border-radius:var(--radius);
  background:linear-gradient(160deg, var(--teal-wash), var(--white) 70%);
  border:1px solid var(--line);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.pillar:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.pillar h3{ font-size:1.08rem; margin-bottom:10px; }
.pillar p{ color:var(--muted); font-size:.95rem; }

/* --- Modalities --- */
.modalities{
  padding:40px 36px; border-radius:var(--radius-lg);
  background:var(--navy); color:#fff;
  box-shadow:var(--shadow);
}
.modalities-label{
  font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.65); margin-bottom:26px;
}
.modality-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.modality-list li{
  padding:20px 22px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  transition:background var(--t) var(--ease), transform var(--t) var(--ease);
}
.modality-list li:hover{ background:rgba(53,179,166,.22); transform:translateY(-4px); }
.modality-list strong{
  display:block; font-family:var(--font-serif); font-weight:400;
  font-size:1.55rem; color:var(--teal-light); letter-spacing:.02em;
}
.modality-list span{ display:block; margin-top:4px; font-size:.84rem; color:rgba(255,255,255,.72); }

/* --- About --- */
.about-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px, 6vw, 80px); align-items:center;
}
.about-media{ position:relative; }
.about-copy h2{ margin-block:16px 34px; }
.about-list{ display:grid; gap:26px; }
.about-list li{ padding-left:22px; border-left:2px solid var(--teal); }
.about-list h3{ margin-bottom:7px; }
.about-list p{ color:var(--muted); font-size:.97rem; }


/* ====================== 10 · FAQ ========================== */
.faq{ display:grid; gap:12px; }

.faq-item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.faq-item[open]{ border-color:var(--teal-light); box-shadow:var(--shadow-sm); }

.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 26px; cursor:pointer; list-style:none;
  font-weight:700; color:var(--navy); font-size:1.02rem;
  transition:color var(--t) var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--teal); }

.faq-plus{
  position:relative; flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:var(--teal-wash);
  transition:background var(--t) var(--ease), transform var(--t) var(--ease);
}
.faq-plus::before,.faq-plus::after{
  content:''; position:absolute; top:50%; left:50%; background:var(--teal);
  border-radius:2px; transform:translate(-50%,-50%);
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.faq-plus::before{ width:11px; height:2px; }
.faq-plus::after{ width:2px;  height:11px; }
.faq-item[open] .faq-plus{ background:var(--teal); transform:rotate(180deg); }
.faq-item[open] .faq-plus::before{ background:#fff; }
.faq-item[open] .faq-plus::after{ opacity:0; }

.faq-body{ padding:0 26px 24px; }
.faq-body p{ color:var(--muted); font-size:.97rem; max-width:68ch; }
/* slide-down animation is applied by js/main.js */
.faq-item[open] .faq-body{ animation:faqOpen .38s var(--ease) both; }


/* ====================== 11 · CTA & FOOTER ================= */
.cta-band{
  position:relative; overflow:hidden;
  padding-block:clamp(70px, 9vw, 120px);
  background:linear-gradient(140deg, var(--navy) 0%, var(--navy-deep) 60%, #10406B 100%);
  color:#fff; text-align:center;
}
.cta-bg span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;
}
.cta-bg span:nth-child(1){
  width:460px; height:460px; top:-30%; left:-6%;
  background:radial-gradient(circle, rgba(24,153,141,.6), transparent 65%);
  animation:floatSlow 18s ease-in-out infinite;
}
.cta-bg span:nth-child(2){
  width:380px; height:380px; bottom:-34%; right:-4%;
  background:radial-gradient(circle, rgba(53,179,166,.45), transparent 65%);
  animation:floatSlow 22s ease-in-out infinite reverse;
}
.cta-inner{ position:relative; }
.cta-band h2{ color:#fff; margin-block:18px 20px; }
.cta-band h2 em{ color:var(--teal-light); }
.cta-sub{ color:rgba(255,255,255,.78); max-width:52ch; margin-inline:auto; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:38px; }

.site-footer{
  background:var(--cream-deep);
  border-top:1px solid var(--line);
  padding-top:clamp(56px, 7vw, 84px);
}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px;
  padding-bottom:48px;
}
.footer-brand img{ height:44px; width:auto; margin-bottom:18px; }
.footer-brand p{ color:var(--muted); font-size:.95rem; max-width:34ch; }

.footer-col h4{
  font-size:.74rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--navy); margin-bottom:18px;
}
.footer-col a{
  display:block; padding-block:7px; color:var(--muted); font-size:.94rem;
  transition:color var(--t) var(--ease), transform var(--t) var(--ease);
}
.footer-col a:hover{ color:var(--teal); transform:translateX(3px); }
.footer-addr{ margin-top:10px; color:var(--muted); font-size:.94rem; }

.socials{ display:flex; gap:10px; margin-top:20px; }
.socials a{
  display:grid; place-items:center; width:40px; height:40px; padding:0;
  border:1px solid var(--line); border-radius:50%; color:var(--navy); background:var(--white);
  transition:background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
}
.socials a:hover{ background:var(--teal); color:#fff; transform:translateY(-3px); }
.socials svg{ width:19px; height:19px; }

.footer-bottom{
  display:flex; flex-wrap:wrap; gap:14px 40px; align-items:baseline;
  padding-block:24px 32px; border-top:1px solid var(--line);
  font-size:.84rem; color:var(--muted);
}
.footer-note{ max-width:62ch; opacity:.85; }

.to-top{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--navy); color:#fff; border-radius:50%;
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t), background var(--t) var(--ease);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--teal); }


/* ====================== 13 · APPOINTMENT DIALOG =========== */
body.appointment-open{ overflow:hidden; }

.appointment-modal{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center; padding:24px;
}
.appointment-modal[hidden]{ display:none; }
.appointment-backdrop{
  position:absolute; inset:0;
  background:rgba(12,27,57,.68);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:appointmentFadeIn var(--t) var(--ease) both;
}
.appointment-dialog{
  position:relative; z-index:1; width:min(100%, 620px); max-height:calc(100vh - 48px);
  overflow-y:auto; padding:clamp(30px, 5vw, 48px);
  background:var(--cream); border:1px solid rgba(255,255,255,.55); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  animation:appointmentDialogIn var(--t) var(--ease) both;
}
.appointment-close{
  position:absolute; top:18px; right:18px;
  display:grid; place-items:center; width:40px; height:40px; padding:0;
  border:1px solid var(--line); border-radius:50%; background:var(--white); color:var(--navy);
  font-size:1.65rem; line-height:1; cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.appointment-close:hover{ background:var(--navy); color:#fff; transform:rotate(5deg); }
.appointment-dialog .eyebrow{ margin-bottom:10px; }
.appointment-dialog h2{ padding-right:36px; font-size:clamp(2rem, 6vw, 2.7rem); }
.appointment-intro{ margin-top:14px; color:var(--muted); font-size:.95rem; }
#appointmentForm{ display:grid; gap:17px; margin-top:28px; }
.appointment-field{ display:grid; gap:7px; }
.appointment-field label,.appointment-choice-field legend{ color:var(--navy); font-size:.83rem; font-weight:700; }
.appointment-field input{
  width:100%; min-height:50px; padding:12px 15px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); color:var(--ink);
  font:inherit; font-size:.96rem;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.appointment-field input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(24,153,141,.14); }
.appointment-field input[aria-invalid="true"]{ border-color:#B94343; }
.appointment-choice-field{ min-width:0; margin:0; padding:0; border:0; }
.appointment-choice-field legend{ margin-bottom:7px; padding:0; }
.appointment-options{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.appointment-options-two{ grid-template-columns:repeat(2,1fr); }
.appointment-options label{ position:relative; cursor:pointer; }
.appointment-options input{
  position:absolute; width:1px; height:1px; min-height:0; padding:0; opacity:0; pointer-events:none;
}
.appointment-options span{
  display:flex; align-items:center; justify-content:center; min-height:46px; padding:9px 12px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); color:var(--muted);
  font-size:.82rem; font-weight:700; text-align:center;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.appointment-options input:checked + span{ border-color:var(--teal); background:var(--teal-wash); color:var(--navy); }
.appointment-options input:focus-visible + span{ outline:2.5px solid var(--teal); outline-offset:2px; }
.appointment-choice-field[aria-invalid="true"] .appointment-options span{ border-color:#B94343; }
.appointment-field-error{ min-height:1em; color:#A63333; font-size:.76rem; line-height:1.25; }
.appointment-status{ display:none; padding:11px 13px; border-radius:var(--radius-sm); background:#FBEAEA; color:#8D2929; font-size:.84rem; line-height:1.45; }
.appointment-status.is-visible{ display:block; }
.appointment-submit{ margin-top:2px; }
.appointment-submit:disabled{ cursor:wait; opacity:.75; transform:none; }
.appointment-spinner{
  display:none; width:17px; height:17px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%;
  animation:appointmentSpin .7s linear infinite;
}
.appointment-submit.is-loading .appointment-spinner{ display:block; }
.appointment-success{ text-align:center; padding-block:18px 4px; }
.appointment-success[hidden]{ display:none; }
.appointment-success-icon{
  display:grid; place-items:center; width:64px; height:64px; margin:0 auto 22px;
  border-radius:50%; background:var(--teal-wash); color:var(--teal); font-size:1.8rem; font-weight:800;
}
.appointment-success h2{ padding:0; }
.appointment-success p{ margin:18px 0 28px; color:var(--muted); }

@keyframes appointmentFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes appointmentDialogIn{ from{ opacity:0; transform:translateY(20px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes appointmentSpin{ to{ transform:rotate(360deg); } }


/* ====================== 12 · ANIMATIONS =================== */

/* Scroll-reveal — the .is-in class is added by js/main.js.
   Everything is scoped to .js (set by a tiny inline script in index.html)
   so that with JavaScript off the content is simply visible. */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:calc(var(--d, 0) * 90ms);
}
.reveal.is-in{ opacity:1; transform:none; }

.reveal-media{
  opacity:0; transform:translateY(34px) scale(.97);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal-media.is-in{ opacity:1; transform:none; }

@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

@keyframes floatSlow{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%    { transform:translate(-18px, 22px) scale(1.06); }
}

@keyframes floatCard{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-12px); }
}

@keyframes morph{
  0%,100%{ border-radius:48% 48% 44% 44% / 40% 40% 56% 56%; }
  33%    { border-radius:44% 52% 48% 46% / 44% 38% 58% 52%; }
  66%    { border-radius:52% 44% 42% 50% / 36% 44% 54% 58%; }
}

@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 5px rgba(24,153,141,.16); }
  50%    { box-shadow:0 0 0 10px rgba(24,153,141,.05); }
}

@keyframes faqOpen{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:none; }
}

@keyframes drawerIn{
  from{ opacity:0; transform:translateY(-10px); }
  to  { opacity:1; transform:none; }
}

/* Respect the visitor's motion preference */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal,.reveal-media{ opacity:1; transform:none; }
}


/* ====================== 14 · RESPONSIVE =================== */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; gap:56px; }
  .hero-media{ max-width:520px; margin-inline:auto; width:100%; }
  .hero-arc{ display:none; }
  .services-grid,.steps,.pillars,.modality-list{ grid-template-columns:repeat(2,1fr); }
  .about-grid{ grid-template-columns:1fr; }
  .about-media{ max-width:480px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
}

@media (max-width:860px){
  .nav-desktop{ display:none; }
  .nav-toggle{ display:block; }
  .header-actions .btn-sm{ display:none; }
}

@media (max-width:640px){
  :root{ --gutter:18px; }
  body{ font-size:16px; }
  .steps,.services-grid,.pillars,.modality-list{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-trust{ flex-direction:column; gap:12px; }
  .hero-cta .btn{ width:100%; }
  .float-card{ left:0; bottom:-18px; width:88%; }
  .float-badge{ width:52px; height:52px; }
  .float-stat{ right:0; bottom:-14px; }
  .modalities{ padding:30px 22px; }
  .faq-item summary{ padding:18px 20px; font-size:.97rem; }
  .faq-body{ padding:0 20px 20px; }
  .cta-actions .btn{ width:100%; }
  .appointment-modal{ align-items:end; padding:10px; }
  .appointment-dialog{ width:100%; max-height:calc(100vh - 20px); padding:32px 22px 26px; border-radius:24px; }
  .appointment-close{ top:14px; right:14px; }
}