/* ============================================================
   Donfrid Dental — "Calm precision" design system
   Fresh, minimal, mobile-first. Static CSS, no build step.
   ============================================================ */

/* ---- Tokens ---- */
:root{
  /* Palette — matched to the Donfrid Dental logo (navy + champagne) */
  --paper:      #FBFAF7;   /* warm off-white background */
  --enamel:     #FFFFFF;   /* pure white for cards */
  --ink:        #16223B;   /* deep navy — headings & body text (logo navy) */
  --ink-soft:   #59617A;   /* muted navy-grey, secondary text */
  --navy:       #1C3055;   /* primary accent — buttons, links, icons */
  --navy-deep:  #132340;   /* hover / pressed */
  --champagne:  #C7B494;   /* bright champagne — decorative accent (arc) */
  --gold:       #93794E;   /* darkened champagne — legible labels on white */
  --sand:       #F3EDE3;   /* pale warm tint — alternating sections */
  --sand-line:  #E7DECB;   /* hairline on sand */
  --line:       #E9E4DA;   /* hairline on paper */

  /* Type — single bold-sans family, SDB style */
  --serif: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* display alias */
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8rem);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-btn: 14px;

  --shadow: 0 1px 2px rgba(22,32,28,.04), 0 12px 32px -12px rgba(22,32,28,.14);
  --shadow-lg: 0 2px 4px rgba(22,32,28,.05), 0 30px 60px -24px rgba(22,32,28,.22);

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

/* ---- Reset-ish ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
:focus-visible{ outline:2.5px solid var(--navy); outline-offset:3px; border-radius:4px; }

/* ---- Layout helpers ---- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--sand{ background:var(--sand); }

/* ---- Typography ---- */
.display{
  font-family:var(--serif);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.025em;
}
/* Gold pill badge — SDB-style section label */
.eyebrow{
  font-family:var(--sans);
  font-weight:700;
  font-size:.76rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--navy);
  background:var(--champagne);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1rem;
  border-radius:100px;
}
.eyebrow--arrow::after{
  content:"→";
  font-size:.95em;
  font-weight:700;
  opacity:.85;
}
.lead{ color:var(--ink-soft); font-size:clamp(1.05rem,1rem + .5vw,1.28rem); line-height:1.55; }

.section-head{ max-width:46ch; margin:0 auto clamp(2.5rem,5vw,3.75rem); text-align:center; }
.section-head h2{ font-family:var(--serif); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(2rem,1.4rem + 3.2vw,3.4rem); line-height:1.06; margin-top:1.1rem; }
.section-head .lead{ margin-left:auto; margin-right:auto; }

/* Smile-arc signature */
.arc{ display:block; color:var(--champagne); }
.arc--divider{ margin:0 auto; width:min(120px,30vw); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.6rem; border-radius:var(--radius-btn);
  font-family:var(--sans); font-weight:700; font-size:.98rem; letter-spacing:.005em;
  border:1.5px solid transparent; transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  will-change:transform;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--primary{ background:var(--navy); color:#fff; }
.btn--primary:hover{ background:var(--navy-deep); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--navy); color:var(--navy); }
.btn--light{ background:#fff; color:var(--navy); }
.btn--light:hover{ background:#f2efe8; }
.btn svg{ width:1.05em; height:1.05em; }

/* ============================================================
   Top bar
   ============================================================ */
.topbar{ background:var(--ink); color:#cdd4e6; font-size:.84rem; letter-spacing:.005em; }
.topbar__inner{ display:flex; align-items:center; justify-content:center; gap:1.5rem; min-height:42px; }
.topbar a{ color:#fff; font-weight:600; }
.topbar a:hover{ color:var(--champagne); }
.topbar__addr{ display:none; color:#9aa4bd; }
@media (min-width:760px){
  .topbar__inner{ justify-content:space-between; }
  .topbar__addr{ display:inline; }
}

/* ============================================================
   Header
   ============================================================ */
.header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.header.is-stuck{ border-bottom-color:var(--line); }
.header__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:72px;
}
.brand{ display:flex; flex-direction:column; align-items:flex-start; gap:.12rem; line-height:1.02; }
.brand__name{ font-family:var(--sans); font-weight:700; font-size:1.22rem; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; }
.brand__sub{ font-family:var(--sans); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:700; }

.nav{ display:none; }
.nav a{ font-weight:500; font-size:.95rem; color:var(--ink-soft); transition:color .25s var(--ease); }
.nav a:hover{ color:var(--navy); }

.header__cta{ display:flex; align-items:center; gap:.55rem; }
.header .btn{ padding:.62rem 1.15rem; font-size:.9rem; }
.header__call{ display:none; }
.header__cta > .btn--primary{ display:none; } /* booking CTA lives in the menu on mobile */

/* Language switch (SR / EN / RU) */
.lang-switch{ display:inline-flex; align-items:center; border:1.5px solid var(--line);
  border-radius:100px; overflow:hidden; }
.lang-switch button{ background:transparent; border:none; padding:.5rem .62rem; font-family:var(--sans);
  font-weight:700; font-size:.72rem; letter-spacing:.06em; line-height:1; color:var(--ink-soft);
  cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); }
.lang-switch button + button{ border-left:1px solid var(--line); }
.lang-switch button.is-active{ background:var(--navy); color:#fff; }
.lang-switch button:not(.is-active):hover{ color:var(--navy); }

/* Hamburger */
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; background:transparent; border:none;
}
.burger span{ height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .35s var(--ease), opacity .25s var(--ease); }
.menu-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-open .burger span:nth-child(2){ opacity:0; }
.menu-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:45;
  background:var(--paper);
  padding:96px var(--gutter) 3rem;
  display:flex; flex-direction:column;
  transform:translateY(-8%); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s var(--ease), transform .5s var(--ease), visibility .4s;
}
.menu-open .drawer{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
.drawer a{ font-family:var(--serif); font-size:1.8rem; font-weight:700; letter-spacing:-.02em; padding:.55rem 0; border-bottom:1px solid var(--line); }
.drawer a:last-of-type{ border-bottom:none; }
.drawer a.drawer__cta{ margin-top:1.5rem; align-self:flex-start; font-family:var(--sans); font-size:1rem;
  font-weight:700; padding:.95rem 1.7rem; border-bottom:none; color:#fff; }
.drawer__foot{ margin-top:auto; padding-top:2rem; display:flex; flex-direction:column; gap:.35rem; color:var(--ink-soft); font-size:.95rem; }
.drawer__foot strong{ color:var(--ink); }

/* ============================================================
   Hero
   ============================================================ */
.hero{ padding-top:clamp(2.5rem,6vw,4.5rem); padding-bottom:var(--section-y); }
.hero__inner{ max-width:860px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero__title{
  font-size:clamp(2.5rem, 1.6rem + 6.5vw, 5rem);
  margin:1.4rem 0 0;
  max-width:16ch;
}
.hero__sub{ margin-top:clamp(1.25rem,3vw,1.75rem); max-width:52ch; }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.1rem 1.6rem; margin-top:2.2rem; }
.hero__cta .btn{ padding:1.05rem 1.9rem; font-size:1.02rem; }
.btn__ico{ display:inline-grid; place-items:center; width:1.55rem; height:1.55rem; border-radius:50%;
  background:rgba(255,255,255,.16); }
.btn__ico svg{ width:.95rem; height:.95rem; }
.rating{ display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; }
.rating__stars{ color:var(--champagne); letter-spacing:.1em; font-size:1.05rem; }
.rating__label{ font-size:.9rem; color:var(--ink-soft); }
.rating__label b{ color:var(--ink); font-weight:700; }

/* Photo-card row */
.hero__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.7rem,2vw,1.1rem);
  margin-top:clamp(2.75rem,6vw,4.5rem); }
.hero__card{ margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--sand); }
.hero__card img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; transition:transform .6s var(--ease); }
.hero__card:hover img{ transform:scale(1.04); }

/* ============================================================
   About + stats
   ============================================================ */
.about__grid{ display:grid; gap:clamp(2rem,5vw,4rem); }
.about__body p + p{ margin-top:1.1rem; }
.about__body{ color:var(--ink-soft); }
.about__body .display{ color:var(--ink); font-size:clamp(1.7rem,1.2rem + 2.4vw,2.7rem); line-height:1.08; margin-bottom:1.4rem; }
.pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem; }
.pill{ font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--navy); background:var(--sand); border:1px solid var(--sand-line);
  padding:.45rem .85rem; border-radius:100px; }

.quote{
  border-left:3px solid var(--champagne); padding:.4rem 0 .4rem 1.4rem; margin-top:2rem;
  font-family:var(--serif); font-weight:600; font-size:clamp(1.2rem,1rem + 1vw,1.55rem);
  letter-spacing:-.01em; line-height:1.32; color:var(--ink);
}
.quote cite{ display:block; margin-top:.9rem; font-family:var(--sans); font-style:normal;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:600; }

.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:clamp(2.5rem,5vw,4rem); }
.stat{ background:var(--paper); padding:clamp(1.4rem,3vw,2.2rem) clamp(1.2rem,2.5vw,1.8rem); }
.stat__n{ font-family:var(--serif); font-weight:800; font-size:clamp(2.4rem,1.6rem + 3.5vw,3.6rem); line-height:1; color:var(--navy); letter-spacing:-.03em; }
.stat__l{ margin-top:.5rem; font-size:.86rem; letter-spacing:.03em; color:var(--ink-soft); }

/* ============================================================
   Services
   ============================================================ */
.services__grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--sand-line);
  border:1px solid var(--sand-line); border-radius:var(--radius); overflow:hidden; }
.svc{ background:var(--paper); padding:1.4rem 1.35rem; display:flex; gap:1rem; align-items:flex-start;
  transition:background .3s var(--ease); }
.svc:hover{ background:var(--enamel); }
.svc__ico{ flex:none; width:40px; height:40px; border-radius:11px; background:var(--sand);
  display:grid; place-items:center; color:var(--navy); }
.svc__ico svg{ width:20px; height:20px; }
.svc h3{ font-family:var(--sans); font-weight:600; font-size:1.05rem; letter-spacing:-.01em; }
.svc p{ margin-top:.3rem; font-size:.92rem; color:var(--ink-soft); line-height:1.45; }

/* ============================================================
   Digital Smile Design — before/after
   ============================================================ */
.dsd__grid{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; }
.ba{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:3/4; user-select:none; touch-action:pan-y; background:var(--sand); }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__after{ clip-path:inset(0 0 0 var(--split,50%)); }
.ba__tag{ position:absolute; top:1rem; padding:.3rem .8rem; border-radius:100px; font-size:.72rem;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:rgba(22,32,28,.72); color:#fff; backdrop-filter:blur(4px); }
.ba__tag--l{ left:1rem; } .ba__tag--r{ right:1rem; }
.ba__handle{ position:absolute; top:0; bottom:0; left:var(--split,50%); width:2px; background:#fff;
  transform:translateX(-1px); box-shadow:0 0 0 1px rgba(22,32,28,.12); }
.ba__grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:var(--shadow);
  display:grid; place-items:center; color:var(--navy); }
.ba__grip svg{ width:22px; height:22px; }
.ba__range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.ba__note{ margin-top:.9rem; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); text-align:center; }
.dsd__steps{ display:flex; flex-direction:column; gap:1.1rem; margin-top:1.8rem; }
.dsd__step{ display:flex; gap:.9rem; align-items:baseline; }
.dsd__step b{ font-family:var(--serif); color:var(--navy); font-size:1.05rem; min-width:1.4rem; }

/* ============================================================
   Process — numbered (real sequence)
   ============================================================ */
.steps{ display:grid; gap:1.25rem; grid-template-columns:1fr; counter-reset:step; }
.step{ background:var(--enamel); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.2rem); position:relative; }
.step__n{ font-family:var(--serif); font-size:2.4rem; color:var(--gold); line-height:1; }
.step h3{ font-family:var(--serif); font-weight:700; font-size:1.4rem; letter-spacing:-.01em; margin:.7rem 0 .5rem; }
.step p{ color:var(--ink-soft); font-size:.96rem; }

/* ============================================================
   Why us
   ============================================================ */
.why__grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.why__item{ background:var(--paper); padding:clamp(1.6rem,3vw,2.1rem); }
.why__item .ico{ width:34px; height:34px; color:var(--navy); margin-bottom:1rem; }
.why__item h3{ font-family:var(--sans); font-weight:600; font-size:1.1rem; }
.why__item p{ margin-top:.4rem; color:var(--ink-soft); font-size:.94rem; }

/* ============================================================
   Team
   ============================================================ */
.team__grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; max-width:720px; margin-inline:auto; }
.member{ background:var(--enamel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.member__portrait{ aspect-ratio:4/5; background:var(--sand); display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:3rem; color:var(--navy); position:relative; }
.member__portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.member__body{ padding:1.3rem 1.4rem 1.6rem; }
.member__body h3{ font-family:var(--serif); font-weight:700; font-size:1.4rem; letter-spacing:-.01em; }
.member__role{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-top:.3rem; }
.member__body p{ margin-top:.8rem; color:var(--ink-soft); font-size:.93rem; }
.member__lang{ margin-top:.9rem; font-size:.78rem; color:var(--gold); letter-spacing:.06em; }

/* ============================================================
   Testimonials
   ============================================================ */
.reviews__grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
.review{ background:var(--enamel); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.6rem,3vw,2.1rem); display:flex; flex-direction:column; }
.review__stars{ color:var(--navy); letter-spacing:.15em; font-size:.9rem; }
.review p{ font-family:var(--serif); font-weight:500; font-size:1.12rem; line-height:1.45; margin:1rem 0 1.3rem; color:var(--ink); }
.review cite{ margin-top:auto; font-style:normal; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.reviews__cta{ margin-top:2rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:none; border:none; text-align:left; padding:1.3rem 0; font-family:var(--serif); font-weight:700;
  letter-spacing:-.01em; font-size:clamp(1.05rem,1rem + .5vw,1.3rem); color:var(--ink); }
.faq__q .plus{ flex:none; width:24px; height:24px; position:relative; color:var(--navy); }
.faq__q .plus::before,.faq__q .plus::after{ content:""; position:absolute; inset:50% 2px auto 2px; height:2px; background:currentColor; transition:transform .35s var(--ease); }
.faq__q .plus::after{ transform:rotate(90deg); }
.faq__item.open .plus::after{ transform:rotate(0); }
.faq__a{ overflow:hidden; height:0; transition:height .4s var(--ease); }
.faq__a-inner{ padding-bottom:1.4rem; color:var(--ink-soft); max-width:62ch; }

/* ============================================================
   Contact / Book
   ============================================================ */
.contact__grid{ display:grid; gap:clamp(2rem,5vw,3.5rem); }
.contact__title{ font-size:clamp(2.2rem,1.5rem + 4vw,4rem); }
.contact__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.info{ display:grid; gap:1px; background:var(--sand-line); border:1px solid var(--sand-line);
  border-radius:var(--radius); overflow:hidden; }
.info__row{ background:var(--paper); padding:1.15rem 1.3rem; }
.info__row .k{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.info__row .v{ margin-top:.35rem; color:var(--ink); font-weight:500; }
.info__row .v a:hover{ color:var(--navy); }
.info__row .muted{ color:var(--ink-soft); font-weight:400; font-size:.92rem; }

/* ============================================================
   Footer
   ============================================================ */
.footer{ background:#101827; color:#cdd6d0; padding-block:1.6rem; border-top:1px solid rgba(255,255,255,.07); }
.footer a:hover{ color:#fff; }
.footer__bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 1.6rem; }
.footer .brand__name{ color:#fff; font-size:1.1rem; }
.footer__links{ display:flex; flex-wrap:wrap; gap:1.2rem; font-size:.92rem; }
.footer__copy{ font-size:.82rem; color:#8b9a92; }

/* ============================================================
   Booking form
   ============================================================ */
.bookform{ margin-top:2.2rem; padding:clamp(1.4rem,3vw,2rem); background:var(--enamel);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:1rem; }
.bookform__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.bookform__title{ font-family:var(--sans); font-weight:700; font-size:1.15rem; color:var(--ink); }
.bookform__grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:.4rem; font-size:.82rem; font-weight:600;
  letter-spacing:.02em; color:var(--ink-soft); }
.field input, .field textarea{ font:inherit; font-weight:400; letter-spacing:normal; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:10px; padding:.72rem .85rem;
  width:100%; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--navy);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--navy) 14%, transparent); }
.field textarea{ resize:vertical; min-height:84px; }
.bookform .btn{ align-self:flex-start; }
.bookform__note{ font-size:.82rem; color:var(--ink-soft); }
.bookform__ok{ padding:.5rem 0; color:var(--ink); line-height:1.5; }
.bookform__ok strong{ color:var(--navy); }

/* ============================================================
   Map
   ============================================================ */
.map{ margin-top:1.25rem; border-radius:var(--radius); overflow:hidden; border:1px solid var(--sand-line); }
.map iframe{ display:block; width:100%; height:300px; border:0; filter:grayscale(.15); }

/* ============================================================
   Floating WhatsApp button
   ============================================================ */
.fab{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:60; width:56px; height:56px;
  border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.4); transition:transform .3s var(--ease);
  animation:fabIn .4s var(--ease) .7s both; }
.fab svg{ width:32px; height:32px; }
.fab:hover{ transform:scale(1.08); color:#fff; }
@keyframes fabIn{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .fab{ animation:none; } }

/* ============================================================
   Closing CTA band
   ============================================================ */
.cta-band{ position:relative; overflow:hidden; background:var(--navy); color:#fff;
  padding-block:clamp(2.75rem,6vw,4.25rem); }
.cta-band::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'><g fill='none' stroke='%23C7B494' stroke-width='1.2' opacity='0.16'><g transform='translate(42 42)'><path d='M0 0C-8 -14 -8 -24 0 -34C8 -24 8 -14 0 0Z'/><path d='M0 0C-8 -14 -8 -24 0 -34C8 -24 8 -14 0 0Z' transform='rotate(45)'/><path d='M0 0C-8 -14 -8 -24 0 -34C8 -24 8 -14 0 0Z' transform='rotate(90)'/><path d='M0 0C-8 -14 -8 -24 0 -34C8 -24 8 -14 0 0Z' transform='rotate(135)'/><path d='M0 0C-8 -14 -8 -24 0 -34C8 -24 8 -14 0 0Z' transform='rotate(180)'/><path d='M0 0C-8 -14 -8 -24 0 -34C8 -24 8 -14 0 0Z' transform='rotate(225)'/><path d='M0 0C-8 -14 -8 -24 0 -34C8 -24 8 -14 0 0Z' transform='rotate(270)'/><path d='M0 0C-8 -14 -8 -24 0 -34C8 -24 8 -14 0 0Z' transform='rotate(315)'/><circle r='2.5'/></g></g></svg>");
  background-size:84px 84px; }
.cta-band__inner{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:1.3rem; }
.cta-band__title{ font-family:var(--sans); font-weight:800; letter-spacing:-.02em; line-height:1.06;
  font-size:clamp(1.75rem,1.3rem + 2vw,2.5rem); max-width:16ch; }
.cta-band__text{ color:#c4cde0; line-height:1.55; max-width:48ch; }
.cta-band__btn{ flex:none; }
.cta-band__btn .btn__ico{ background:color-mix(in srgb, var(--navy) 14%, transparent); }
@media (min-width:900px){
  .cta-band__inner{ flex-direction:row; align-items:center; gap:2.5rem; }
  .cta-band__title{ flex:0 0 auto; }
  .cta-band__text{ flex:1 1 auto; }
  .cta-band__btn{ margin-left:auto; }
}

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .btn,.svc,.nav a{ transition:none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width:600px){
  .services__grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .why__grid{ grid-template-columns:1fr 1fr; }
  .team__grid{ grid-template-columns:repeat(2,1fr); }
  .reviews__grid{ grid-template-columns:1fr 1fr; }
  .info{ grid-template-columns:1fr 1fr; }
  .header__cta > .btn--primary{ display:inline-flex; }
  .bookform__grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:900px){
  .nav{ display:flex; gap:2rem; }
  .burger{ display:none; }
  .drawer{ display:none; }
  .header__call{ display:inline-flex; }
  .about__grid{ grid-template-columns:1fr 1fr; align-items:start; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .services__grid{ grid-template-columns:repeat(3,1fr); }
  .why__grid{ grid-template-columns:repeat(3,1fr); }
  .contact__grid{ grid-template-columns:1fr 1fr; align-items:start; }
  .footer__grid{ grid-template-columns:1.4fr 1fr; align-items:start; }
}
@media (min-width:900px){
  .about__body{ position:sticky; top:100px; }
}