/* Fonts (8 Nov 2026): the same Outfit and DM Sans files Google Fonts serves, hosted here – no extra connections
   before text can show. Weights as the style guide: Outfit 500/600/700, DM Sans 400/500/700 (variable files). */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmsans-v17-rP2Hp2ywxg089UriCZ2IHSeH.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: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/dmsans-v17-rP2Hp2ywxg089UriCZOIHQ.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: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dmsans-v17-rP2Hp2ywxg089UriCZ2IHSeH.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: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/dmsans-v17-rP2Hp2ywxg089UriCZOIHQ.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: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/dmsans-v17-rP2Hp2ywxg089UriCZ2IHSeH.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: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/dmsans-v17-rP2Hp2ywxg089UriCZOIHQ.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: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/outfit-v15-QGYvz_MVcBeNP4NJuktqQ4E.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: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/outfit-v15-QGYvz_MVcBeNP4NJtEtq.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: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/outfit-v15-QGYvz_MVcBeNP4NJuktqQ4E.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: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/outfit-v15-QGYvz_MVcBeNP4NJtEtq.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: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/outfit-v15-QGYvz_MVcBeNP4NJuktqQ4E.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: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/outfit-v15-QGYvz_MVcBeNP4NJtEtq.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;
}

/* ==========================================================================
   Smile&Stay (working name) — design system
   Clinical clarity (green/blue, Outfit + DM Sans) + Airbnb-style browsing
   ========================================================================== */
:root {
  /* Palette v1 (29 Oct 2026) — see the style guide, section 4 */
  --teal-50: #eefaf8; --teal-100: #d3f2ee; --teal-200: #a3e5dd; --teal-300: #17c6bb; --teal-400: #22b3a8;
  --teal-500: #0fa6a1; --teal-600: #04847f; --teal-700: #046b67; --teal-800: #05504d; --teal-900: #053835;
  /* v1.2: Pantone swaps marked P */
  --blue-50: #eef7fb; --blue-100: #c0e3f0 /* P Quiet Tide */; --blue-200: #96d8de /* P Waterspout */; --blue-300: #5cc3db; --blue-400: #52a2b4 /* P Maui Blue */;
  --blue-500: #0889ad; --blue-600: #0b72a0; --blue-700: #09577b /* P Blue Sapphire */; --blue-800: #024b72; --blue-900: #233658 /* P Estate Blue */;
  --plum-50: #f9f4fb; --plum-100: #f3eaf7; --plum-200: #e3d1ec; --plum-300: #c6a2d6; --plum-400: #a77bbb;
  --plum-500: #9165b1; --plum-600: #7b4fa8; --plum-700: #653f8c; --plum-800: #4d306b; --plum-900: #35214a;
  --sand-50: #fdf8ef; --sand-100: #f8ead2; --sand-200: #f0d6a9; --sand-300: #e8c389; --sand-400: #e0b26b;
  --sand-500: #c99a4f; --sand-600: #a87a32; --sand-700: #85601f; --sand-800: #664813; --sand-900: #47320c;
  --slate-50: #f5f7fa; --slate-100: #edf1ff /* P Brilliant White */; --slate-200: #e4e8ef; --slate-300: #b5cedf /* P Omphalodes */; --slate-400: #8b93a7;
  --slate-500: #677089; --slate-600: #436573 /* P Tapestry */; --slate-700: #3d4760; --slate-800: #2a3150; --slate-900: #1d2340;
  --pt-sea-jet: #54afbc; --pt-6373c: #86d0c5; --pt-aqua-esque: #a3ccd6; --pt-peach-whip: #dbbeb7; /* Pantone accents */
  --leaf-50: #eaf8ef; --leaf-400: #3fbf74; --leaf-700: #1d7a46;
  --red-50: #fdeced; --red-400: #e0565c; --red-700: #c62f35;
  --amber-50: #fff4e0; --amber-400: #ffb539; --amber-700: #9a5d00;
  /* Roles */
  --brand: var(--teal-400); --action: var(--teal-600); --highlight: #0b9a95; /* teal 500 darkened a touch: 3:1 on light grey sections (large text) */
  --uk: var(--plum-600); --hu: var(--blue-700); --tr: var(--sand-700);
  /* Older names, kept so existing rules pick up the new palette */
  --green: var(--teal-400);      /* brand: icons, borders, glows — never small text */
  --green-d: var(--teal-700);    /* teal text */
  --blue: var(--blue-500);
  --blue-d: var(--blue-700);
  --navy: var(--blue-900);
  --ink: var(--slate-900);
  --body: var(--slate-500);
  --muted: var(--slate-500);
  --line: var(--slate-200);
  --smoke: var(--slate-50);
  --smoke2: var(--teal-50);
  --white: #fff;
  --coral: var(--plum-400);      /* coral retired: old UK uses now show plum */
  --gold: var(--sand-400);       /* gold retired: Turkey uses now show sand */
  --r-sm: 12px;
  --r: 20px;
  --r-lg: 28px;
  --shadow-s: 0 1px 2px rgba(5, 56, 99, .06), 0 4px 14px rgba(5, 56, 99, .06);
  --shadow: 0 10px 40px rgba(5, 56, 99, .10);
  --shadow-l: 0 24px 70px rgba(5, 56, 99, .18);
  --glow-blue: 0 10px 30px rgba(8, 137, 173, .35);
  --glow-green: 0 10px 30px rgba(34, 179, 168, .4);
  --container: 1240px;
  --title: "Outfit", system-ui, sans-serif;
  --text: "DM Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 400 16px/1.65 var(--text); color: var(--body); background: var(--white);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: var(--ink); }
h1, h2, h3, h4, h5 { font-family: var(--title); color: var(--navy); margin: 0; line-height: 1.12; letter-spacing: -.02em; }
p { margin: 0; }
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: middle; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
section { position: relative; }
.section { padding: 110px 0; }
.section.tight { padding: 80px 0; }
.bg-smoke { background: var(--smoke); }
.hex-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66 0 50V18L28 2l28 16v32zm0 32L0 82V66l28-16 28 16v16z' fill='none' stroke='%23dfe6f3' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse at 80% 30%, #000 0%, transparent 65%);
          mask-image: radial-gradient(ellipse at 80% 30%, #000 0%, transparent 65%);
}

/* ---------- Eyebrow + section titles ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font: 600 14px/1 var(--title);
  letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); margin-bottom: 18px;
  background: var(--teal-100); border-radius: 999px; padding: 6px 16px 6px 6px;
}
.eyebrow .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; }
.eyebrow .dot .ic { width: 15px; height: 15px; }
.title { font-size: clamp(32px, 4.2vw, 50px); font-weight: 600; }
.title em { font-style: normal; color: var(--highlight); }
.lead { font-size: 18px; max-width: 620px; margin-top: 16px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 50px; flex-wrap: wrap; }
.sec-head.center { flex-direction: column; align-items: center; text-align: center; }
.sec-head.center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--action); --sh: var(--glow-green);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 30px;
  border-radius: 999px; font: 600 15px/1 var(--title); letter-spacing: .02em; text-transform: uppercase;
  color: #fff; background: var(--bg); box-shadow: var(--sh), inset 0 -4px 0 rgba(0, 0, 0, .12);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  position: relative; overflow: hidden; white-space: nowrap;
}
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 55%); pointer-events: none; }
.btn:hover { transform: translateY(-2px); }
.btn.green { --bg: var(--action); --sh: var(--glow-green); }
.btn.white { --bg: #fff; --sh: 0 10px 30px rgba(5, 56, 99, .15); color: var(--navy); }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--navy); }
.btn.ghost::after { display: none; }
.btn.sm { height: 44px; padding: 0 20px; font-size: 13px; }
.btn.block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--title); color: var(--teal-700); }
.link-arrow .ic { transition: transform .25s var(--ease); }
.link-arrow:hover .ic { transform: translateX(4px); }

/* ---------- Top bar + header ---------- */
.topbar { background: var(--blue-900); color: #fff; font-size: 14px; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 44px; gap: 20px; }
.topbar a, .topbar span { display: inline-flex; align-items: center; gap: 8px; }
.topbar .ic { width: 16px; height: 16px; }
.topbar .l, .topbar .r { display: flex; gap: 26px; align-items: center; }
.topbar .disclose { opacity: .95; }

.header { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.6) blur(14px); transition: box-shadow .3s; }
.header.scrolled { box-shadow: 0 6px 30px rgba(5, 56, 99, .08); }
.header .container { display: flex; align-items: center; height: 84px; gap: 30px; }
.logo { display: flex; align-items: center; gap: 12px; font: 700 26px/1 var(--title); color: var(--navy); letter-spacing: -.03em; }
.logo-mark { width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.logo-mark img { width: 44px; height: 44px; display: block; }
.logo .amp { color: var(--green); }
.logo-mark .ic { width: 24px; height: 24px; }
.logo small { display: block; white-space: nowrap; font: 500 11px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--green-d); margin-top: 5px; }
.nav { display: flex; gap: 6px; margin-left: 18px; }
.nav a { white-space: nowrap; padding: 10px 14px; border-radius: 999px; font: 500 15px var(--title); color: var(--navy); text-transform: uppercase; letter-spacing: .02em; transition: background .2s; }
.nav a:hover, .nav a.active { background: var(--smoke); }
.header .tools { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.circle-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--navy); background: #fff; transition: box-shadow .2s, transform .2s; }
.circle-btn:hover { box-shadow: var(--shadow-s); transform: translateY(-1px); }
.cur-toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--smoke); }
.cur-toggle button { white-space: nowrap; padding: 8px 14px; border-radius: 999px; font: 600 13px var(--title); color: var(--muted); }
.cur-toggle button.on { background: #fff; color: var(--navy); box-shadow: var(--shadow-s); }
.burger { display: none; }

/* Mobile nav drawer */
.mnav { position: fixed; inset: 0; overflow: hidden; z-index: 100; background: rgba(5, 56, 99, .45); opacity: 0; pointer-events: none; transition: opacity .3s; }
.mnav.open { opacity: 1; pointer-events: auto; }
.mnav .panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 88vw); background: #fff; padding: 26px; transform: translateX(100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; gap: 8px; }
.mnav.open .panel { transform: none; }
.mnav .panel a { font: 600 22px var(--title); color: var(--navy); padding: 12px 0; border-bottom: 1px solid var(--line); }
.mnav .close { align-self: flex-end; }

/* ---------- HERO ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(1200px 600px at 85% 20%, #3fc1c9 0%, transparent 60%), linear-gradient(120deg, var(--blue-900) 0%, #0889ad 45%, #12a9c4 100%);
  padding: 80px 0 150px;
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66 0 50V18L28 2l28 16v32zm0 32L0 82V66l28-16 28 16v16z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%); mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
}
.hero::after { content: ""; position: absolute; left: -10%; top: -30%; width: 55%; height: 160%; background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent); transform: skewX(-18deg); }
.hero .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero-tag { display: inline-flex; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; border-radius: 999px; background: rgba(5, 56, 99, .25); font: 500 14px var(--title); letter-spacing: .06em; text-transform: uppercase; }
.hero-tag b { background: var(--action); color: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 600; }
.hero h1 { color: #fff; font-size: clamp(42px, 6.2vw, 82px); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; margin: 26px 0 22px; text-transform: uppercase; }
.hero h1 .boxed { position: relative; display: inline-block; padding: 0 .14em; }
.hero h1 .boxed::before { content: ""; position: absolute; inset: .06em -.02em .02em; border: 2px solid rgba(255, 255, 255, .85); }
.hero h1 .boxed i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
.hero h1 .boxed i:nth-child(1) { left: -8px; top: 0; } .hero h1 .boxed i:nth-child(2) { right: -8px; top: 0; }
.hero h1 .boxed i:nth-child(3) { left: -8px; bottom: -4px; } .hero h1 .boxed i:nth-child(4) { right: -8px; bottom: -4px; }
.hero p.sub { font-size: 19px; max-width: 540px; color: rgba(255, 255, 255, .88); }
.hero .ctas { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.hero-proof { display: flex; gap: 22px; margin-top: 38px; align-items: center; flex-wrap: wrap; font-size: 14px; color: rgba(255, 255, 255, .9); }
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof .ic { color: var(--green); width: 18px; height: 18px; }

.hero-visual { position: relative; height: 600px; }
.hero-photo { position: absolute; right: 0; top: 0; width: 88%; height: 100%; border-radius: 300px 300px 40px 40px; overflow: hidden; box-shadow: var(--shadow-l); border: 6px solid rgba(255, 255, 255, .18); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.float-card { position: absolute; background: #fff; color: var(--navy); border-radius: 20px; box-shadow: var(--shadow-l); padding: 16px 18px; animation: bob 6s ease-in-out infinite; }
.float-card .k { font: 500 12px var(--text); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.float-card .v { font: 700 22px/1.1 var(--title); }
.fc-price { left: -4%; top: 16%; width: 250px; }
.fc-price .row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.fc-price s { color: var(--uk); font: 600 15px var(--title); }
.fc-price .save { margin-top: 10px; display: inline-flex; padding: 5px 10px; border-radius: 999px; background: rgba(34, 179, 168, .12); color: var(--green-d); font: 600 13px var(--title); }
.fc-flight { right: -2%; bottom: 20%; display: flex; gap: 12px; align-items: center; animation-delay: -2s; }
.fc-flight .ib { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--smoke2); color: var(--blue); }
.fc-stay { left: 6%; bottom: 6%; display: flex; gap: 10px; align-items: center; animation-delay: -4s; }
.fc-stay .avs { display: flex; }
.fc-stay .avs span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; margin-left: -10px; display: grid; place-items: center; color: #fff; }
.fc-stay .avs span:first-child { margin-left: 0; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Airbnb-style search pill ---------- */
.search-wrap { position: relative; z-index: 5; margin-top: -48px; }
.search-pill {
  display: grid; grid-template-columns: 1.2fr 1.2fr 1fr auto; align-items: center; background: #fff; border-radius: 999px;
  box-shadow: 0 16px 50px rgba(5, 56, 99, .16), 0 1px 0 rgba(5, 56, 99, .04); padding: 8px; border: 1px solid var(--line);
}
.sp-field { position: relative; padding: 12px 26px; border-radius: 999px; cursor: pointer; transition: background .2s; }
.sp-field:hover { background: var(--smoke); }
.sp-field + .sp-field::before { content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: var(--line); }
.sp-field label { display: block; font: 600 13px var(--title); color: var(--navy); letter-spacing: .02em; }
.sp-field select, .sp-field input { width: 100%; border: 0; background: transparent; padding: 2px 0 0; font-size: 15px; color: var(--body); outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
.sp-go { height: 64px; padding: 0 30px 0 26px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; color: #fff; font: 600 16px var(--title); background: var(--action); box-shadow: var(--glow-green); transition: transform .2s; }
.sp-go:hover { transform: scale(1.03); }

/* ---------- Category strip (Airbnb) ---------- */
.cats { display: flex; gap: 34px; overflow-x: auto; padding: 34px 4px 10px; scrollbar-width: none; justify-content: space-between; }
.cats::-webkit-scrollbar { display: none; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 76px; padding-bottom: 12px; color: var(--muted); font: 500 13px var(--title); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap; }
.cat .ic { width: 28px; height: 28px; stroke-width: 1.5; }
.cat:hover { color: var(--navy); border-color: var(--line); }
.cat.on { color: var(--navy); border-color: var(--navy); }
.cats-sep { width: 1px; background: var(--line); flex: none; margin: 6px 0 16px; }

/* ---------- Features row ---------- */
.feat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 60px 0; border-bottom: 1px solid var(--line); }
.feat { display: flex; gap: 16px; }
.feat .fi { width: 58px; height: 58px; border-radius: 18px; flex: none; display: grid; place-items: center; background: var(--smoke2); color: var(--blue); }
.feat .fi.g { background: rgba(34, 179, 168, .12); color: var(--green-d); }
.feat .fi .ic { width: 28px; height: 28px; }
.feat h4 { font-size: 20px; margin-bottom: 4px; }
.feat p { font-size: 15px; }

/* ---------- Savings calculator ---------- */
.calc { display: grid; grid-template-columns: 420px 1fr; gap: 0; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line); }
.calc-in { padding: 38px; background: var(--navy); color: #c7cde0; position: relative; overflow: hidden; }
.calc-in::after { content: ""; position: absolute; width: 380px; height: 380px; right: -170px; bottom: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(8, 137, 173, .55), transparent 70%); }
.calc-in h3 { color: #fff; font-size: 26px; margin-bottom: 6px; }
.calc-in .muted { font-size: 14px; margin-bottom: 24px; }
.tchips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; z-index: 1; }
.tchip { text-align: left; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fff; transition: background .2s, border-color .2s, transform .2s; }
.tchip:hover { transform: translateY(-2px); }
.tchip .ic { width: 22px; height: 22px; color: var(--green); }
.tchip b { display: block; font: 600 14px/1.25 var(--title); margin-top: 8px; }
.tchip small { font-size: 12px; color: #c3cad9; }
.tchip.on { background: var(--action); border-color: var(--action); box-shadow: var(--glow-green); }
.tchip.on .ic { color: #fff; }
.tchip.on small { color: #fff; }
.qty { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); position: relative; z-index: 1; color: #fff; }
.qty .stepper { display: flex; align-items: center; gap: 14px; }
.qty .stepper button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 20px; line-height: 1; }
.qty .stepper b { font: 700 20px var(--title); min-width: 26px; text-align: center; }
.calc-out { padding: 44px; display: flex; flex-direction: column; }
.saving-big { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.saving-big .num { font: 700 clamp(48px, 6vw, 76px)/1 var(--title); color: var(--green-d); letter-spacing: -.04em; }
.saving-big .lbl { font: 500 16px var(--title); color: var(--navy); padding-bottom: 10px; }
.saving-big .pct { display: inline-flex; padding: 8px 14px; border-radius: 999px; background: rgba(34, 179, 168, .12); color: var(--green-d); font: 700 16px var(--title); margin-bottom: 10px; }
.bars { margin-top: 36px; display: grid; gap: 22px; }
.bar-row .bl { display: flex; justify-content: space-between; font: 600 15px var(--title); color: var(--navy); margin-bottom: 8px; }
.bar-row .bl span:last-child { font-size: 18px; }
.bar { height: 22px; border-radius: 999px; background: var(--smoke); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; transition: width .9s var(--ease); }
.bar .uk { background: linear-gradient(90deg, var(--plum-200), var(--plum-400)); border-radius: 999px; }
.bar .t { background: linear-gradient(90deg, var(--blue-400), var(--blue-700)); }
.bar .tr { background: #9fb8ff; }
.bar .ht { background: #c8d6ff; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.calc-note { margin-top: auto; padding-top: 26px; font-size: 13px; color: var(--muted); }
.calc-cta { display: flex; gap: 14px; align-items: center; margin-top: 26px; flex-wrap: wrap; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: s; position: relative; }
.steps::before { content: ""; position: absolute; top: 46px; left: 12%; right: 12%; border-top: 2px dashed #cfd8ea; }
.step { text-align: center; position: relative; padding: 0 8px; }
.step .bub { width: 92px; height: 92px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow); position: relative; color: var(--blue); }
.step .bub .ic { width: 36px; height: 36px; stroke-width: 1.5; }
.step .bub::after { counter-increment: s; content: counter(s, decimal-leading-zero); position: absolute; top: -4px; right: -4px; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; font: 700 13px/34px var(--title); box-shadow: var(--glow-green); }
.step h4 { font-size: 21px; margin-bottom: 8px; }
.step p { font-size: 15px; }

/* ---------- Airbnb listing cards ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 24px; }
.lcard { cursor: pointer; min-width: 0; }
.lcard .media { position: relative; aspect-ratio: 20 / 19; border-radius: var(--r); overflow: hidden; background: var(--smoke); }
.lcard .track { display: flex; height: 100%; transition: transform .45s var(--ease); }
.lcard .track img { width: 100%; height: 100%; flex: none; object-fit: cover; }
.lcard .heart { position: absolute; top: 14px; right: 14px; color: #fff; z-index: 2; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
.lcard .heart .ic { width: 26px; height: 26px; fill: rgba(0, 0, 0, .35); stroke-width: 2; }
.lcard .heart.on .ic { fill: var(--red-400); color: #fff; }
.lcard .badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: #fff; color: var(--navy); border-radius: 999px; padding: 6px 12px; font: 600 12.5px var(--title); box-shadow: var(--shadow-s); }
.lcard .nav-b { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; color: var(--navy); opacity: 0; transition: opacity .2s; z-index: 2; box-shadow: var(--shadow-s); }
.lcard .nav-b .ic { width: 16px; height: 16px; }
.lcard .nav-b.l { left: 10px; } .lcard .nav-b.r { right: 10px; }
.lcard:hover .nav-b { opacity: 1; }
.lcard .dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 5px; justify-content: center; z-index: 2; }
.lcard .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6); transition: background .2s, transform .2s; }
.lcard .dots i.on { background: #fff; transform: scale(1.15); }
.lcard .meta { padding-top: 12px; }
.lcard .r1 { display: flex; justify-content: space-between; gap: 10px; }
.lcard h4 { font: 600 16px/1.3 var(--title); color: var(--navy); letter-spacing: -.01em; }
.lcard .city { font-size: 14px; color: var(--body); display: flex; align-items: center; gap: 4px; flex: none; }
.lcard .city .ic { width: 14px; height: 14px; }
.lcard .tags { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.lcard .price { margin-top: 6px; font-size: 15px; color: var(--navy); }
.lcard .price b { font-weight: 700; }
.lcard .price u { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Concierge bento ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 20px; }
.bx { position: relative; border-radius: var(--r-lg); overflow: hidden; color: #fff; isolation: isolate; }
.bx img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.bx:hover img { transform: scale(1.06); }
.bx::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 56, 99, 0) 30%, rgba(5, 56, 99, .82) 100%); }
.bx .in { position: absolute; left: 24px; right: 24px; bottom: 22px; }
.bx .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); backdrop-filter: blur(10px); font: 600 12.5px var(--title); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.bx .chip .ic { width: 15px; height: 15px; }
.bx h3 { color: #fff; font-size: 24px; }
.bx p { font-size: 14.5px; color: rgba(255, 255, 255, .85); margin-top: 6px; max-width: 420px; }
.bx.big { grid-column: span 2; grid-row: span 2; }
.bx.big h3 { font-size: 34px; }
.bx.wide { grid-column: span 2; }
.bx.solid { background: linear-gradient(135deg, var(--green), #22b3a8); }
.bx.solid::before { display: none; }
.bx.solid .in { top: 26px; bottom: auto; }
.bx.solid ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; font-size: 15px; }
.bx.solid li { display: flex; gap: 8px; align-items: center; }
.bx.solid li .ic { width: 18px; height: 18px; }

/* ---------- Package timeline (sample trip) ---------- */
.trip { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.trip-img { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-l); }
.trip-img img { width: 100%; height: 100%; object-fit: cover; }
.trip-img .tag { position: absolute; left: 20px; bottom: 20px; right: 20px; background: rgba(255, 255, 255, .95); border-radius: 18px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.trip-img .tag b { font: 700 24px var(--title); color: var(--navy); }
.days { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 4px; }
.day { display: grid; grid-template-columns: 70px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.day .d { font: 700 13px var(--title); color: var(--blue); text-transform: uppercase; letter-spacing: .08em; padding-top: 3px; }
.day h5 { font-size: 18px; margin-bottom: 2px; }
.day p { font-size: 15px; }
.day .ics { display: flex; gap: 6px; margin-top: 8px; }
.day .ics span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--smoke); color: var(--navy); }
.day .ics .ic { width: 14px; height: 14px; }

/* ---------- Destinations ---------- */
.dests { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 240px 240px; gap: 20px; }
.dest { position: relative; border-radius: var(--r-lg); overflow: hidden; color: #fff; isolation: isolate; }
.dest:first-child { grid-row: span 2; }
.dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.dest:hover img { transform: scale(1.05); }
.dest::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 56, 99, .05), rgba(5, 56, 99, .8)); }
.dest .in { position: absolute; left: 22px; right: 22px; bottom: 20px; }
.dest h3 { color: #fff; font-size: 28px; }
.dest:first-child h3 { font-size: 44px; }
.dest .sub { font-size: 14px; opacity: .9; }
.dest .pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.dest .pills span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); backdrop-filter: blur(8px); font: 600 12.5px var(--title); display: inline-flex; gap: 6px; align-items: center; }
.dest .pills .ic { width: 14px; height: 14px; }
.dest .st { position: absolute; top: 18px; left: 18px; padding: 7px 13px; border-radius: 999px; font: 600 12.5px var(--title); background: #fff; color: var(--navy); }
.dest .st.live { background: var(--action); color: #fff; }

/* ---------- Trust / about ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.about-imgs { position: relative; height: 560px; }
.about-imgs .a1 { position: absolute; left: 0; top: 0; width: 72%; height: 82%; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.about-imgs .a2 { position: absolute; right: 0; bottom: 0; width: 52%; height: 52%; border-radius: var(--r-lg); overflow: hidden; border: 8px solid #fff; box-shadow: var(--shadow-l); }
.about-imgs img { width: 100%; height: 100%; object-fit: cover; }
.about-imgs .exp { position: absolute; left: 30px; bottom: 30px; background: var(--blue); color: #fff; border-radius: 22px; padding: 20px 22px; box-shadow: var(--glow-blue); }
.about-imgs .exp b { display: block; font: 700 40px/1 var(--title); }
.about-imgs .exp span { font-size: 14px; opacity: .9; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 30px 0; }
.checks div { display: flex; gap: 10px; align-items: flex-start; color: var(--navy); font: 500 16px var(--title); }
.checks .ic { color: var(--green-d); width: 22px; height: 22px; margin-top: 1px; }
.model { padding: 22px 24px; border-radius: var(--r); background: var(--smoke2); border-left: 4px solid var(--blue); font-size: 15px; }
.model b { color: var(--navy); }

/* ---------- Counters ---------- */
.counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: linear-gradient(120deg, var(--blue-900), var(--blue)); border-radius: var(--r-lg); padding: 50px 40px; color: #fff; position: relative; overflow: hidden; }
.counters::before { content: ""; position: absolute; inset: 0; opacity: .14; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66 0 50V18L28 2l28 16v32zm0 32L0 82V66l28-16 28 16v16z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E"); }
.counter { text-align: center; position: relative; }
.counter + .counter::before { content: ""; position: absolute; left: -10px; top: 15%; height: 70%; width: 1px; background: rgba(255, 255, 255, .25); }
.counter b { display: block; font: 700 54px/1 var(--title); letter-spacing: -.03em; }
.counter span { font-size: 15px; opacity: .9; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; }
.qa { border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-bottom: 14px; transition: box-shadow .25s, border-color .25s; }
.qa[open] { box-shadow: var(--shadow); border-color: transparent; }
.qa summary { list-style: none; cursor: pointer; padding: 22px 26px; font: 600 18px var(--title); color: var(--navy); display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--smoke); transition: transform .3s, background .3s, color .3s; font-size: 20px; line-height: 1; }
.qa[open] summary .pm { transform: rotate(45deg); background: var(--action); color: #fff; }
.qa .a { padding: 0 26px 24px; font-size: 16px; }

/* ---------- Enquiry / CTA ---------- */
.cta-band { position: relative; border-radius: 36px; overflow: hidden; background: var(--navy); color: #fff; display: grid; grid-template-columns: 1fr 1fr; isolation: isolate; }
.cta-band .copy { padding: 60px; }
.cta-band .copy h2 { color: #fff; font-size: clamp(32px, 3.6vw, 46px); }
.cta-band .copy p { color: #c7cde0; margin-top: 14px; }
.cta-band .copy ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.cta-band .copy li { display: flex; gap: 10px; align-items: center; }
.cta-band .copy li .ic { color: var(--green); }
.cta-band .bgimg { position: absolute; inset: 0; z-index: -2; opacity: .25; }
.cta-band .bgimg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--navy) 35%, rgba(5, 56, 99, .7)); }
.form-card { background: #fff; color: var(--body); margin: 28px; border-radius: 26px; padding: 34px; box-shadow: var(--shadow-l); }
.form-card h3 { font-size: 26px; margin-bottom: 4px; }
.form-card .hint { font-size: 14px; margin-bottom: 20px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fgrid .full { grid-column: 1 / -1; }
.fld { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 9px 14px 8px; transition: border-color .2s, box-shadow .2s; background: #fff; }
.fld:focus-within { border-color: var(--action); box-shadow: 0 0 0 4px rgba(4, 132, 127, .14); }
.fld label { display: block; font: 600 11.5px var(--title); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fld input, .fld select, .fld textarea { width: 100%; border: 0; outline: 0; padding: 2px 0; background: transparent; font-size: 15px; resize: vertical; }
.consent { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; margin: 14px 0 18px; align-items: flex-start; }
.consent input { margin-top: 3px; accent-color: var(--action); width: 16px; height: 16px; flex: none; }
.form-ok { display: none; text-align: center; padding: 30px 10px; }
.form-ok .big { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: rgba(34, 179, 168, .12); color: var(--green-d); }
.form-ok .big .ic { width: 36px; height: 36px; }
.sent .form-ok { display: block; } .sent form { display: none; }

/* ---------- Partner band ---------- */
/* clinic partner strip: same edges as the content above (heading left, button right like the header's Free quotes) */
.partner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 34px 0; border-top: 1px solid var(--line, #e3e9ee); flex-wrap: wrap; }
.partner h3 { font-size: 28px; }
.partner p { margin-top: 6px; max-width: 620px; }

/* ---------- Footer ---------- */
.footer { background: #03253f; color: #a6aec6; padding: 80px 0 0; margin-top: 110px; }
.footer .logo { color: #fff; }
.fcols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; }
.footer h5 { color: #fff; font-size: 18px; margin-bottom: 18px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 15px; }
.footer a:hover { color: #fff; }
.footer .contact li { display: flex; gap: 10px; align-items: center; }
.footer .contact .ic { color: var(--green); }
.fbottom { border-top: 1px solid rgba(255, 255, 255, .08); padding: 22px 0 26px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; }
.fbottom .disc { max-width: 760px; }

/* ---------- Floating WhatsApp ---------- */
.wa { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--teal-600); box-shadow: none; transition: transform .2s; }
.wa:hover { transform: scale(1.06); }
.wa .ic { width: 30px; height: 30px; }

/* ---------- Drawer (clinic details) ---------- */
.drawer { position: fixed; inset: 0; overflow: hidden; z-index: 120; background: rgba(5, 56, 99, .5); opacity: 0; pointer-events: none; transition: opacity .3s; }
.drawer.open { opacity: 1; pointer-events: auto; }
.drawer .sheet { position: absolute; right: 0; top: 0; bottom: 0; width: min(560px, 100%); background: #fff; overflow-y: auto; transform: translateX(100%); transition: transform .4s var(--ease); }
.drawer.open .sheet { transform: none; }
.drawer .gal { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 150px 150px; gap: 6px; }
.drawer .gal img { width: 100%; height: 100%; object-fit: cover; }
.drawer .gal img:first-child { grid-row: span 2; }
.drawer .x { position: absolute; top: 16px; left: 16px; z-index: 2; background: #fff; }
.drawer .body { padding: 28px; }
.drawer h2 { font-size: 30px; }
.drawer .loc { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.drawer .hl { display: grid; gap: 16px; padding: 22px 0; margin: 22px 0; border-block: 1px solid var(--line); }
.drawer .hl div { display: flex; gap: 14px; align-items: flex-start; }
.drawer .hl .ic { width: 26px; height: 26px; color: var(--navy); margin-top: 2px; }
.drawer .hl b { display: block; color: var(--navy); font: 600 16px var(--title); }
.drawer .hl span { font-size: 14px; }
.ptable { width: 100%; border-collapse: collapse; font-size: 15px; }
.ptable td { padding: 12px 0; border-bottom: 1px solid var(--line); }
.ptable td:last-child { text-align: right; color: var(--navy); font-weight: 700; }
.ptable s { color: var(--muted); font-weight: 400; margin-right: 8px; }
.drawer .note { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.drawer .stick { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--line); padding: 16px 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.drawer .stick .p { font-size: 14px; } .drawer .stick .p b { font: 700 20px var(--title); color: var(--navy); }

/* ---------- Clinics page ---------- */
.page-hero { background: linear-gradient(120deg, var(--blue-900), var(--blue)); color: #fff; padding: 56px 0 90px; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; opacity: .15; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66 0 50V18L28 2l28 16v32zm0 32L0 82V66l28-16 28 16v16z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E"); }
.page-hero h1 { color: #fff; font-size: clamp(36px, 5vw, 60px); position: relative; }
.page-hero p { position: relative; max-width: 640px; margin-top: 12px; color: rgba(255, 255, 255, .88); font-size: 18px; }
.crumbs { font-size: 14px; opacity: .85; margin-bottom: 14px; position: relative; }
.toolbar { position: sticky; top: 84px; z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.toolbar .container { display: flex; align-items: center; gap: 18px; }
.toolbar .cats { flex: 1; padding-top: 18px; padding-bottom: 0; justify-content: flex-start; gap: 30px; }
.fbtn { display: inline-flex; gap: 8px; align-items: center; height: 48px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line); font: 600 14px var(--title); color: var(--navy); background: #fff; flex: none; }
.fbtn .count { min-width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; display: none; place-items: center; }
.fbtn.has .count { display: grid; }
.citybar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 22px 0 6px; }
.pill { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); font: 500 14px var(--title); color: var(--navy); background: #fff; transition: all .2s; display: inline-flex; align-items: center; gap: 8px; }
.pill:hover { border-color: var(--navy); }
.pill.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.pill .n { opacity: .6; font-weight: 400; }
.sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sort select { border: 1px solid var(--line); border-radius: 999px; height: 40px; padding: 0 14px; background: #fff; }
.listing { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 30px; padding-top: 20px; }
.listing > * { min-width: 0; }
.listing .cards { grid-template-columns: repeat(2, 1fr); }
.listing .count-line { font: 600 16px var(--title); color: var(--navy); margin-bottom: 18px; }
.mapbox { position: sticky; top: 176px; height: calc(100vh - 200px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-s); }
#map { width: 100%; height: 100%; }
.price-pin { background: #fff; color: var(--navy); border-radius: 999px; padding: 6px 12px; font: 700 14px var(--title); box-shadow: 0 2px 10px rgba(0, 0, 0, .2); white-space: nowrap; transform: translate(-50%, -50%); display: inline-block; transition: transform .2s, background .2s, color .2s; }
.price-pin:hover, .price-pin.on { background: var(--navy); color: #fff; transform: translate(-50%, -50%) scale(1.08); }
.leaflet-div-icon { background: none !important; border: 0 !important; }
.empty { padding: 60px 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r); }
.filters-pop { position: fixed; inset: 0; z-index: 110; background: rgba(5, 56, 99, .5); display: none; align-items: center; justify-content: center; padding: 20px; }
.filters-pop.open { display: flex; }
.filters-pop .box { background: #fff; border-radius: 26px; width: min(560px, 100%); max-height: 86vh; overflow: auto; box-shadow: var(--shadow-l); }
.filters-pop header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--line); font: 600 18px var(--title); color: var(--navy); }
.filters-pop .fsec { padding: 22px 24px; border-bottom: 1px solid var(--line); }
.filters-pop .fsec h5 { font-size: 18px; margin-bottom: 14px; }
.chk { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 16px; color: var(--navy); cursor: pointer; }
.chk input { width: 22px; height: 22px; accent-color: var(--navy); }
.filters-pop footer { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; }
.filters-pop footer button.clear { text-decoration: underline; font-weight: 600; color: var(--navy); }
.mobile-map-btn { display: none; }

/* ---------- Reveal animation ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } .float-card { animation: none; } html { scroll-behavior: auto; } }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: grid; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .calc { grid-template-columns: 1fr; }
  .listing { grid-template-columns: 1fr; }
  .mapbox { display: none; }
  .mapbox.show { display: block; position: fixed; inset: 84px 0 0 0; height: auto; z-index: 90; border-radius: 0; }
  .mobile-map-btn { display: inline-flex; position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 95; height: 50px; padding: 0 22px; border-radius: 999px; background: var(--navy); color: #fff; align-items: center; gap: 8px; font: 600 15px var(--title); box-shadow: var(--shadow-l); }
  .listing .cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .topbar .disclose, .header .tools .btn { display: none; }
  .burger { display: grid; }
  .hero { padding: 50px 0 130px; }
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { height: 460px; }
  .search-pill { grid-template-columns: 1fr 1fr; border-radius: 28px; }
  .sp-field:nth-child(3)::before { display: none; }
  .sp-go { grid-column: 1 / -1; justify-content: center; height: 56px; }
  .feat-row { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 46px; }
  .steps::before { display: none; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bx.big { grid-column: span 2; }
  .trip, .about, .faq, .cta-band { grid-template-columns: 1fr; }
  .dests { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 220px 220px; }
  .dest:first-child { grid-column: span 2; grid-row: auto; }
  .counters { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .counter:nth-child(3)::before { display: none; }
  .fcols { grid-template-columns: 1fr 1fr; }
  .cards, .listing .cards { grid-template-columns: repeat(2, 1fr); }
  .toolbar { top: 84px; }
}
@media (max-width: 640px) {
  .section { padding: 76px 0; }
  .container { padding: 0 16px; }
  .topbar .l a:nth-child(2) { display: none; }
  .header .container { height: 70px; gap: 12px; }
  .cur-toggle button { padding: 7px 10px; }
  .logo { font-size: 21px; } .logo-mark { width: 38px; height: 38px; }
  .logo small { display: none; }
  .circle-btn { width: 42px; height: 42px; }
  .hero h1 { font-size: 40px; }
  .hero-visual { height: 400px; }
  .fc-price { width: 210px; left: 0; top: 6%; }
  .fc-flight { right: 0; bottom: 26%; }
  .search-pill { grid-template-columns: 1fr; }
  .sp-field + .sp-field::before { left: 22px; right: 22px; top: 0; width: auto; height: 1px; }
  .feat-row, .steps, .counters, .fcols { grid-template-columns: 1fr; }
  .counter + .counter::before { display: none; }
  .cards, .listing .cards { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 230px; }
  .bx.big, .bx.wide { grid-column: auto; grid-row: auto; }
  .bx.big { grid-row: span 1; }
  .bx.big h3 { font-size: 26px; }
  .dests { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 220px; }
  .dest:first-child { grid-column: auto; }
  .dest:first-child h3 { font-size: 32px; }
  .calc-in, .calc-out { padding: 26px; }
  .cta-band .copy { padding: 34px 26px 0; }
  .form-card { margin: 18px; padding: 24px; }
  .fgrid { grid-template-columns: 1fr; }
  .partner { padding: 28px 0; }
  .about-imgs { height: 420px; }
  .checks { grid-template-columns: 1fr; }
  .toolbar { top: 70px; }
  .mapbox.show { inset: 70px 0 0 0; }
  .sort { margin-left: 0; width: 100%; }
}

/* vision */
.vision { padding: 110px 0 90px; text-align: center; }
.vision-in { max-width: 860px; margin: 0 auto; }
.vision-mark { width: 84px; height: 84px; margin: 0 auto 18px; display: block; }
.vision-q { font: 600 clamp(26px, 3.4vw, 40px)/1.28 var(--title); color: var(--navy); letter-spacing: -.02em; margin: 0; }
.vision-q em { font-style: normal; background: linear-gradient(90deg, var(--blue), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vision-tag { margin: 26px 0 0; font: 600 14px var(--title); letter-spacing: .22em; text-transform: uppercase; color: #8aa3b8; }


/* Category strip: stronger icons */
.cat { color: #4a5468; }
.cat .ic { width: 30px; height: 30px; stroke-width: 2; color: var(--navy); }

/* ---------- Currency menu (GBP default; EUR / USD / CHF / HUF) ---------- */
.cur-menu { position: relative; }
.cur-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px 0 14px; border-radius: 999px; background: var(--smoke); font: 600 13px var(--title); color: var(--navy); transition: box-shadow .2s, background .2s; }
.cur-btn:hover, .cur-menu.open .cur-btn { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow-s); }
.cur-btn .cur-sym { min-width: 12px; text-align: center; color: var(--green-d); }
.cur-btn .ic { width: 14px; height: 14px; color: var(--muted); transition: transform .2s; }
.cur-menu.open .cur-btn .ic { transform: rotate(180deg); }
.cur-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 90; min-width: 230px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-l); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; }
.cur-menu.open .cur-list { opacity: 1; visibility: visible; transform: none; }
.cur-list li { display: grid; grid-template-columns: 34px 42px 1fr; align-items: center; gap: 4px; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--body); outline: none; }
.cur-list li span { font: 600 14px var(--title); color: var(--green-d); text-align: center; }
.cur-list li b { font: 600 14px var(--title); color: var(--navy); }
.cur-list li small { font-size: 13px; color: var(--muted); }
.cur-list li:hover, .cur-list li:focus { background: var(--smoke); }
.cur-list li[aria-selected="true"] { background: var(--smoke2); }
.cur-list li[aria-selected="true"] small::after { content: " ✓"; color: var(--green-d); font-weight: 700; }
@media (max-width: 640px) { .cur-btn { height: 40px; padding: 0 10px 0 12px; } .cur-list { right: -50px; } }
/* Why Smile & Stay: 12 points, compact two columns */
.checks.checks-12 { gap: 10px 22px; margin: 24px 0 26px; }
.checks.checks-12 div { font-size: 15px; line-height: 1.3; }
.checks.checks-12 .ic { width: 20px; height: 20px; }
/* Contact pop-up (assets/js/contact.js) – opened by any [data-contact] link */
.ct-dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 40px 40px 32px; border: 0; border-radius: var(--r-lg); background: #fff; color: var(--ink); box-shadow: var(--shadow-l); overflow: auto; }
.ct-dlg::backdrop { background: rgba(35, 54, 88, .55); backdrop-filter: blur(3px); }
.ct-dlg[open] { animation: ct-in .3s var(--ease); }
@keyframes ct-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
html.ct-lock { overflow: hidden; }
.ct-x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--slate-500); transition: background .2s, color .2s; }
.ct-x:hover { background: var(--slate-100); color: var(--navy); }
.ct-x svg { width: 20px; height: 20px; }
.ct-form { display: flex; flex-direction: column; }
.ct-form[hidden], .ct-done[hidden], .ct-err[hidden] { display: none; }
.ct-h { margin: 0 32px 24px 0; font: 700 22px/1.25 var(--title); letter-spacing: .02em; text-transform: uppercase; color: var(--navy); }
.ct-l { margin: 16px 0 8px; font: 600 15px var(--title); color: var(--teal-700); }
.ct-l:first-of-type { margin-top: 0; }
.ct-l small { margin-left: 6px; font: 400 13px var(--text); color: var(--slate-500); }
.ct-in, .ct-tel { width: 100%; border: 1px solid var(--slate-200); border-radius: var(--r-sm); background: #fff; box-shadow: var(--shadow-s); transition: border-color .2s, box-shadow .2s; }
.ct-in { padding: 14px 16px; font-size: 16px; }
textarea.ct-in { resize: vertical; min-height: 128px; line-height: 1.5; }
.ct-in::placeholder, .ct-tel input::placeholder { color: var(--slate-400); }
.ct-in:focus, .ct-tel:focus-within { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(34, 179, 168, .18); }
.ct-in[aria-invalid] { border-color: var(--plum-600); }
.ct-tel { display: flex; align-items: stretch; }
.ct-tel select { flex: none; padding: 0 12px 0 14px; border: 0; border-right: 1px solid var(--slate-200); background: transparent; font-size: 15px; cursor: pointer; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.ct-tel select:focus { outline: 0; }
.ct-tel input { flex: 1; min-width: 0; padding: 14px 16px; border: 0; background: transparent; font-size: 16px; outline: 0; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ct-err { margin: 16px 0 0; padding: 10px 14px; border-radius: var(--r-sm); background: var(--plum-50); color: var(--plum-700); font-size: 14px; }
.ct-send { margin-top: 24px; width: 100%; padding: 16px; border-radius: 999px; background: var(--action); color: #fff; font: 600 17px var(--title); box-shadow: var(--glow-green); transition: transform .2s var(--ease), background .2s; }
.ct-send:hover { background: var(--teal-700); transform: translateY(-1px); }
.ct-send:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.ct-send:disabled { opacity: .7; cursor: progress; transform: none; }
.ct-note { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--slate-500); }
.ct-note a { color: var(--teal-700); text-decoration: underline; }
.ct-done { text-align: center; padding: 16px 0 0; }
.ct-done .ct-h { margin: 16px 0 8px; }
.ct-done p { color: var(--slate-500); }
.ct-ok { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--teal-50); color: var(--brand); }
.ct-ok svg { width: 34px; height: 34px; }
@media (max-width: 560px) { .ct-dlg { padding: 32px 20px 24px; } .ct-h { font-size: 19px; } }
/* Our vision – a dark statement band styled like the stats band (navy-to-blue gradient, hex pattern, white text):
   mark + eyebrow + tagline left, the statement right, one phrase in teal 200. Dark bands break up the long page
   (style guide 6: up to two besides the hero, separated by a light section). */
.vision { padding: 72px 0; text-align: left; }
.vision-in { position: relative; overflow: hidden; isolation: isolate; max-width: none; margin: 0; display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 48px; align-items: center; padding: 56px 48px; border-radius: var(--r-lg); background: linear-gradient(120deg, var(--blue-900), var(--blue)); color: #fff; }
.vision-in::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .14; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66 0 50V18L28 2l28 16v32zm0 32L0 82V66l28-16 28 16v16z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E"); }
.vision-l { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-right: 48px; border-right: 1px solid rgba(255, 255, 255, .25); }
.vision-mark { width: 72px; height: 72px; margin: 0; }
.vision .eyebrow { margin: 0; background: rgba(255, 255, 255, .12); color: #fff; }
.vision .eyebrow .dot { background: var(--brand); color: #fff; }
.vision-tag { margin: 0; white-space: nowrap; font: 600 13px var(--title); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.vision-q { margin: 0; font: 600 clamp(24px, 2.6vw, 36px)/1.3 var(--title); letter-spacing: -.015em; color: #fff; }
.vision-q em { font-style: normal; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--teal-200); }
@media (max-width: 900px) {
  .vision-in { grid-template-columns: 1fr; gap: 24px; padding: 40px 24px; }
  .vision-l { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 0 0 24px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .25); }
  .vision-mark { width: 48px; height: 48px; }
  .vision-tag { flex-basis: 100%; }
}
@media (max-width: 560px) { .vision-in { padding: 32px 20px; border-radius: var(--r); } .vision-q { font-size: 22px; } }
/* stats band = the page's one dark call-to-action band: quote button under the figures */
.counters-cta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 32px; margin-top: 8px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .2); position: relative; text-align: center; }
.counters-cta p { margin: 0; font-size: 16px; color: rgba(255, 255, 255, .92); }
/* Every page hero is the same height as the home-page hero (527px) – content centred in it; the clinic pages'
   video heroes already match. Phones keep the same minimum so inner pages stay consistent. */
.page-hero:not(.chero-v) { box-sizing: border-box; min-height: 527px; display: flex; flex-direction: column; justify-content: center; padding-top: 48px; padding-bottom: 56px; }
.page-hero:not(.chero-v) > .container { width: 100%; }

/* quick tooltips ([data-tip]): show almost at once on hover or keyboard focus, instead of the browser's slow title tooltip */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; z-index: 40; left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%); padding: 7px 11px; border-radius: 8px; background: var(--navy, #233658); color: #fff; font: 500 13px/1.2 var(--text); white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s, transform .12s, visibility 0s .12s; box-shadow: 0 8px 20px -8px rgba(5, 56, 99, .45); }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity .12s .05s, transform .12s .05s, visibility 0s .05s; }
/* tiles in a row (guide bar, carousel rail on tablets and phones): tooltip underneath */
.gd-tr [data-tip]::after { left: 50%; top: calc(100% + 8px); transform: translate(-50%, -4px); }
.gd-tr [data-tip]:hover::after, .gd-tr [data-tip]:focus-visible::after { transform: translate(-50%, 0); }
.gd-soc .gd-tr > :last-child[data-tip]::after { left: auto; right: 0; transform: translate(0, -4px); }
.gd-soc .gd-tr > :last-child[data-tip]:hover::after { transform: none; }
@media (max-width: 980px) { .txk-rail [data-tip]::after { left: 50%; top: calc(100% + 8px); transform: translate(-50%, -4px); } .txk-rail [data-tip]:hover::after, .txk-rail [data-tip]:focus-visible::after { transform: translate(-50%, 0); } }
@media (hover: none) { [data-tip]::after { display: none; } }
.txk-rail { position: relative; z-index: 6; } .gd-tiles { position: relative; z-index: 6; }
.footer .logo small { color: var(--teal-200); } /* tagline on the dark footer: light teal, 9:1 on navy (style guide: light logo on dark backgrounds) */

/* Every page: the same gap between the hero banner and where the page starts (as on the home page) */
:root { --hero-gap: 28px; }
@media (max-width: 960px) { :root { --hero-gap: 16px; } }
@media (max-width: 560px) { :root { --hero-gap: 12px; } }
.page-hero + section, .page-hero + .section, .page-hero + div, .page-hero + nav + section, .hero + section.section { padding-top: var(--hero-gap) !important; margin-top: 0 !important; }
.page-hero + .container > .rq-wrap:first-child, .page-hero + div .rq-wrap { margin-top: 0 !important; }
/* counters strip: text on the left, Free quotes on the right – same edges as the rest of the site */
.counters-cta { justify-content: space-between; text-align: left; }
@media (max-width: 640px) { .counters-cta { justify-content: flex-start; } }
/* in-page links (e.g. hero "Compare treatment options" → cost & savings) land below the sticky header, smoothly */
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (max-width: 960px) { html { scroll-padding-top: 64px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#cost-savings { scroll-margin-top: 20px; } /* hero button lands on the Cost & savings heading */
/* no sideways page scroll on any device (carousels and wide tables scroll inside their own box) */
html, body { overflow-x: clip; }

/* stats band, Nov 2026: both countries' figures, an icon tile per figure, left-aligned like the vision band;
   one sub-line each (country chips: Hungary blue, Turkey sand) and the Free quotes pill on the right */
.counters.cn2 { gap: 0; padding: 44px 44px 36px; background: linear-gradient(120deg, var(--blue-900), var(--blue)); isolation: isolate; }
.counters.cn2::before { z-index: -1; opacity: .12; -webkit-mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.35)); mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.35)); }
.cn2 .counter { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 28px; text-align: left; }
.cn2 .counter:first-child { padding-left: 0; }
.cn2 .counter + .counter::before { left: 0; top: 6px; height: calc(100% - 12px); background: rgba(255, 255, 255, .18); }
.cn-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px; background: rgba(255, 255, 255, .12); color: var(--teal-200); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.cn-ic .ic { width: 19px; height: 19px; }
.cn2 .counter b { font-size: clamp(40px, 4vw, 52px); }
.cn2 .counter > span:not(.cn-ic) { font: 600 16px/1.35 var(--title); opacity: 1; color: #fff; }
.cn2 .counter small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.cn2 .counter small > span { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; white-space: nowrap; }
.cn-f { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.cn-f.hu { background: var(--blue-200, #a9c8ff); } .cn-f.tr { background: var(--sand-200, #f0d6ad); }
.cn2 .counters-cta { margin-top: 32px; padding-top: 26px; border-top-color: rgba(255, 255, 255, .18); }
.cn2 .counters-cta p { max-width: 720px; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.cn2 .counters-cta p b { color: #fff; font-weight: 600; }
@media (max-width: 1100px) and (min-width: 561px) {
  .counters.cn2 { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .cn2 .counter:nth-child(3) { padding-left: 0; } .cn2 .counter:nth-child(3)::before { display: none; }
}
@media (max-width: 560px) {
  .counters.cn2 { grid-template-columns: 1fr 1fr; gap: 26px 0; padding: 30px 20px 26px; border-radius: var(--r); }
  .cn2 .counter { padding: 0 0 0 14px; } .cn2 .counter:nth-child(odd) { padding-left: 0; }
  .cn2 .counter:nth-child(3)::before { display: none; } .cn2 .counter + .counter::before { display: block; }
  .cn2 .counter:nth-child(odd)::before { display: none !important; }
  .cn-ic { width: 34px; height: 34px; margin-bottom: 8px; }
  .cn2 .counter b { font-size: 36px; }
  .cn2 .counter > span:not(.cn-ic) { font-size: 14.5px; }
  .cn2 .counter small { flex-direction: column; align-items: flex-start; font-size: 12px; }
  .cn2 .counters-cta { margin-top: 24px; padding-top: 20px; } .cn2 .counters-cta .fq-btn { width: 100%; }
}

/* Clinics pages: the usual section head (eyebrow, title, lead) above the search, and the list + map on the same
   left and right edges as the rest of the page (1192px content width) */
.cs-sec .cl-head { align-items: flex-end; margin: 6px 0 22px; }
.cs-sec .cl-head .title { font-size: clamp(28px, 3vw, 42px); }
.cs-sec .cl-head .lead { max-width: 400px; font-size: 14.5px; }
@media (min-width: 901px) {
  body .container:has(> .listing) { max-width: var(--container, 1240px) !important; padding-left: 24px !important; padding-right: 24px !important; }
  .listing:not(.map-full) { max-width: 1192px; margin-left: auto; margin-right: auto; padding-top: 32px; }
}
@media (min-width: 1100px) {
  body .listing:not(.map-full) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important; column-gap: 40px !important; }
  body .listing:not(.map-full) #cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) { .cs-sec .cl-head { margin-bottom: 14px; gap: 10px; } }
/* clinics pages: search box starts on the left edge under the heading; hero stats card ends on the right edge */
.cs-sec .cl-head + [data-clinic-search] .cs { max-width: 760px; margin-left: 0; }
@media (min-width: 901px) { .page-hero.chero .chero-stats { right: max(24px, calc(50% - 596px)) !important; } }

/* Standard photo hero (same as Flights): set the photo with --ph (and --phm on phones) on the section */
.page-hero.ph-std{display:flex!important;flex-direction:column!important;justify-content:flex-end!important;align-items:stretch!important;min-height:527px;padding-bottom:56px!important;background:#0d2a45 var(--ph) var(--php,center 40%)/cover no-repeat}
.page-hero.ph-std::before{opacity:0!important}
.page-hero.ph-std::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(9,30,52,.7) 0%,rgba(9,30,52,.35) 40%,transparent 62%),linear-gradient(90deg,rgba(9,30,52,.65) 0%,rgba(9,30,52,.3) 45%,transparent 65%);pointer-events:none}
.page-hero.ph-std .container{position:relative;z-index:1;width:100%}
.page-hero.ph-std p{max-width:520px}
@media (max-width:760px){.page-hero.ph-std{min-height:420px;padding-bottom:40px!important;background-image:var(--phm,var(--ph))}.page-hero.ph-std::after{background:linear-gradient(0deg,rgba(9,30,52,.9) 0%,rgba(9,30,52,.55) 50%,rgba(9,30,52,.15) 100%)}}

/* Page speed (8 Nov 2026): main.js swaps #chrome-top for the top bar + header after the page has drawn.
   Holding their exact height (and colours) here stops the whole page jumping down when they arrive. */
#chrome-top { display: block; height: 101px; background: linear-gradient(var(--blue-900) 35px, #fff 35px); }
@media (max-width: 760px) { #chrome-top { height: 93px; } }
@media (max-width: 640px) { #chrome-top { height: 91px; background: linear-gradient(var(--blue-900) 33px, #fff 33px); } }