/* ===== Reset & base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;background:#fff;line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.small{font-size:.92rem;color:#64748b}
.center{text-align:center}
.measure{max-width:68ch}
.container{max-width:1160px;margin-inline:auto;padding-inline:clamp(16px,3vw,28px)}

/* ===== Tokens ===== */
:root{
  --brand:#0e7fa8; --brand-2:#20b2aa;
  --ink:#0f172a; --muted:#475569; --stroke:#e2e8f0;
  --shade:#f8fafc; --glass:rgba(255,255,255,0.82);
  --radius:16px; --shadow:0 10px 28px rgba(2,6,23,.08);
}

/* ===== Header / Nav ===== */
.header{position:sticky;top:0;z-index:50;background:#ffffffcc;backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--stroke)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.brand{display:flex;flex-direction:column;gap:2px}
.brand-line.clinic{font-family:"Carattere",cursive;font-size:clamp(1.6rem,1.2rem + 2.4vw,2.4rem);line-height:1.02;color:#111}
.brand-line.doctor{font-family:"Fanwood Text",serif;font-size:clamp(1rem,.9rem + .6vw,1.25rem)}
.brand-line .cred{opacity:.9;margin-left:.35rem}

.navlinks{display:flex;gap:10px;align-items:center}
.navlinks a{padding:.6rem .75rem;border-radius:999px;font-weight:700;color:#0d2230}
.navlinks a:hover{background:#f0f7fb}
.navlinks a.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 0 0 8px rgba(14,127,168,.08)}
.nav-toggle{display:none}
.hamburger,.hamburger::before,.hamburger::after{content:"";display:block;width:20px;height:2px;background:#0f2432;border-radius:2px;position:relative}
.hamburger::before{position:absolute;top:-6px}
.hamburger::after{position:absolute;top:6px}

@media (max-width:900px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--stroke);border-radius:12px;background:#fff;cursor:pointer}
  .navlinks{position:absolute;top:64px;left:0;right:0;display:flex;flex-direction:column;gap:6px;background:#ffffffea;backdrop-filter:blur(10px);border-bottom:1px solid var(--stroke);transform-origin:top center;transform:scaleY(0);opacity:0;pointer-events:none;padding:10px}
  .navlinks.show{transform:scaleY(1);opacity:1;pointer-events:auto}
}
/* Glass card look to match the page */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.94));
  border: 1px solid rgba(14,127,168,.10);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(2,29,59,.06);
}

/* Mini price layout */
.mini-price{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  align-items: start;
}
@media (max-width: 900px){
  .mini-price{ grid-template-columns: 1fr 1fr; }
  .mini-price .panel:nth-child(n+3){ grid-column: span 2; }
}
@media (max-width: 520px){
  .mini-price{ grid-template-columns: 1fr; }
}

.mini-price .panel{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:12px;
  box-shadow: var(--shadow);
}

.mini-price .input{
  width:100%;
  padding:.6rem .7rem;
  border:1px solid var(--stroke);
  border-radius:10px;
  background:#fff;
}

/* Subtle emphasis for the output */
#mpOut{ letter-spacing:.2px; }

/* ===== Sections & layout ===== */
.section{padding-block: clamp(28px, 6vw, 48px)}
.section.glass{background:var(--glass);border:1px solid #e8f1f7;border-radius:20px;box-shadow:var(--shadow);padding:clamp(18px,2.4vw,30px)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:12px}
.link-more{color:#0e3b52;font-weight:800}
.link-more:hover{text-decoration:underline}

/* ===== Hero ===== */
.home-hero{position:relative;padding: clamp(56px, 10vw, 88px) 1rem 1.5rem;background:radial-gradient(1100px 520px at 10% -10%,#c7f0ff 0,transparent 55%),radial-gradient(900px 520px at 110% 10%,#e6fffb 0,transparent 60%),linear-gradient(#fafeff,#f3f9ff 40%,#eef6ff)}
.home-hero__inner{max-width:1100px;margin:0 auto;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border:1px solid #e6eef6;border-radius:22px;box-shadow:var(--shadow);padding:clamp(22px,3vw,36px);text-align:center}
.home-hero h1{font-weight:800;letter-spacing:-.02em;font-size:clamp(1.9rem,1.2rem + 2.6vw,2.8rem);line-height:1.15}
.home-hero h1 span{background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.home-hero p{color:#475569;margin:.5rem auto 1rem}
.trust-badges{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1rem;justify-content:center;color:#0b3b4d}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.8rem 1.2rem;border-radius:999px;font-weight:900;letter-spacing:.02em;min-height:48px;line-height:1;text-decoration:none}
.btn:hover{transform:translateY(-2px)}
.btn-whatsapp{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 0 0 8px rgba(34,197,94,.08)}
.btn-call{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}
.btn-ghost{background:#fff;border:1.5px solid #e3eef6;color:#073043}

/* ===== Teasers ===== */
.teaser-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2vw,18px)}
.teaser{grid-column:span 3;background:#fff;border:1px solid #e8eef5;border-radius:16px;padding:12px;box-shadow:0 1px 0 #fff inset,0 8px 14px rgba(12,33,48,.05);transition:.25s}
.teaser:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(15,23,32,.12)}
.teaser img{border-radius:12px;border:1px solid #e8eef5;aspect-ratio:4/3;object-fit:cover;margin-bottom:8px}
.teaser h3{margin:.2rem 0 .25rem}
.teaser p{color:#3e5a6b}
@media (max-width:1100px){.teaser{grid-column:span 6}}
@media (max-width:640px){.teaser{grid-column:span 12}}

/* ===== About strip ===== */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(14px,2vw,22px);align-items:center}
.about-text p{color:#475569}
.bullets{margin:.6rem 0 1rem;padding-left:1.2rem}
.bullets li{margin:.25rem 0}
.about-buttons{display:flex;gap:.6rem;flex-wrap:wrap}
.about-photo img{border-radius:16px;border:1px solid #e8eef5;box-shadow:0 1px 0 #fff inset,0 8px 20px rgba(12,33,48,.06)}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}

/* ===== Reviews ===== */
.reviews-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2vw,18px)}
.review-card{grid-column:span 6;background:#fff;border:1px solid #e8eef5;border-radius:14px;padding:14px;box-shadow:0 1px 0 #fff inset,0 8px 14px rgba(12,33,48,.05)}
.stars{color:#f59e0b;font-weight:900;letter-spacing:.08em;margin-bottom:6px}
@media (max-width:900px){.review-card{grid-column:span 12}}

/* ===== Blog preview ===== */
.blog-preview{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2vw,18px)}
.preview-card{grid-column:span 4;background:#fff;border:1px solid #e8eef5;border-radius:16px;display:flex;gap:10px;padding:10px;align-items:center;box-shadow:0 1px 0 #fff inset,0 8px 14px rgba(12,33,48,.05);transition:.2s}
.preview-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(15,23,32,.12)}
.preview-card img{width:96px;height:72px;border-radius:10px;border:1px solid #e8eef5;object-fit:cover;flex:none}
.preview-card h3{margin:0 0 .25rem}
.meta{font-size:.92rem;color:#5f7483}
@media (max-width:900px){.preview-card{grid-column:span 12}}

/* ===== CTA ===== */
.home-cta{background:linear-gradient(180deg,#fdfefe,#fbfeff 32%,#f2fbff),radial-gradient(90% 80% at 50% 0%, #dcfbff 0, transparent 60%);border:1px solid #e5f2f9;border-radius:20px;box-shadow:var(--shadow)}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--stroke);background:#fafafa}
.footer-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,2vw,18px);padding-block:22px}
.footer-grid > *{grid-column:span 6}
.footer h3{margin:0 0 .25rem}
@media (max-width:900px){.footer-grid > *{grid-column:span 12}}

/* ===== Accessibility & motion ===== */
a, button, summary { outline-color: var(--brand); outline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ===== Contact form layout ===== */
.ui-form{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 16px);
  margin-top: 8px;
}

.ui-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.ui-form label.full,
.ui-form .full{ grid-column: 1 / -1; }

.ui-form input,
.ui-form textarea,
.ui-form select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--stroke);
  border-radius:12px;
  font:inherit;
  background:#fff;
  color:var(--ink);
}

.ui-form input:focus,
.ui-form textarea:focus,
.ui-form select:focus{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-color:var(--brand);
}

.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:4px;
}

@media (max-width: 800px){
  .ui-form{ grid-template-columns: 1fr; }
}

/* Map */
.map-wrap{ aspect-ratio: 16 / 9; border:1px solid var(--stroke); border-radius:16px; overflow:hidden; }
.map-wrap iframe{ width:100%; height:100%; border:0; }
/* === A) Skip link should only show on keyboard focus === */
.skip-link{
  position: absolute;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  overflow: hidden; white-space: nowrap;
}
.skip-link:focus{
  clip: auto; clip-path: none;
  height: auto; width: auto;
  left: 12px; top: 12px;
  padding: .5rem .75rem;
  background: #0e7fa8; color: #fff;
  border-radius: .5rem;
  z-index: 10000;
}

/* === B) Make topbar sticky and header sit just below it === */
:root{
  --topbar-h: 44px;      /* adjust if your topbar is taller/shorter */
  --header-h: 70px;      /* approximate nav height */
  --masthead-offset: calc(var(--topbar-h) + var(--header-h));
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
}


/* === C) When jumping to anchors (e.g., #main), don't hide under masthead === */
#main{ scroll-margin-top: var(--masthead-offset); }
:target{ scroll-margin-top: var(--masthead-offset); }

/* Optional: if you don’t like the little live-status dot in the topbar */
.topbar .dot{ display: none; }
/* === Gap between the top blue strip (.topbar) and the navigation bar (.header) === */
:root{
  --topbar-h: 44px;   /* your current topbar height */
  --header-h: 70px;   /* approx header height */
  --mast-gap: 8px;    /* 👈 adjust this for more/less space */
  --masthead-offset: calc(var(--topbar-h) + var(--mast-gap) + var(--header-h));
}

/* Keep topbar sticky and add a small visual separation */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  margin-bottom: var(--mast-gap);              /* creates the visible gap */
  box-shadow: 0 1px 0 rgba(2,29,59,.08);       /* optional, subtle divider */
}

/* Header stays pinned just below the topbar + the gap */
.header{
  position: sticky;
  top: calc(var(--topbar-h) + var(--mast-gap)); /* account for the gap */
  z-index: 999;
  background: #fff;
  box-shadow: 0 1px 0 var(--stroke, #e5eef6);
}

/* Ensure anchor jumps don't hide under the masthead */
#main,
:target{
  scroll-margin-top: var(--masthead-offset);
}
/* --- Journey fixes --- */
.journey-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
@media (max-width:980px){.journey-wrap{grid-template-columns:1fr}}

.timeline{
  /* stop the browser's own "1. 2. 3." so we don't get duplicates */
  list-style:none;
  counter-reset: step;
  position:relative;
  padding-left:28px;
}
.timeline::before{
  content:"";
  position:absolute; left:11px; top:6px; bottom:6px;
  width:2px; background:linear-gradient(#cfefff,#0e7fa8);
}
.tl{position:relative; margin:14px 0}
.tl::before{
  content:"";
  position:absolute; left:-18px; top:.35rem;
  width:12px; height:12px; border-radius:50%;
  background:#0e7fa8; box-shadow:0 0 0 4px #e6f7ff;
}
.tl h3{margin:0 0 6px}

/* add our own 1) 2) 3) before each step title */
.tl{counter-increment: step;}
.tl h3::before{
  content: counter(step) ") ";
  font-weight:700; color:#0d2235; margin-right:2px;
}

/* right column stack & spacing */
.journey-aside{display:flex;flex-direction:column;gap:12px}
/* === Timeline: COIN style === */
.timeline.coin{ --brand:#0e7fa8; --rail:#cfefff; counter-reset: step; }
.timeline.coin::before{ left:13px; } /* rail align for the larger coin */

.timeline.coin .tl{ counter-increment: step; }

/* the numbered coin replaces the old dot */
.timeline.coin .tl::before{
  content: counter(step);
  position:absolute;
  left:-28px;            /* positions coin on the rail */
  top:.15rem;
  width:26px; height:26px;
  border-radius:999px;
  display:grid; place-items:center;
  font:700 13px/1 "Inter",system-ui,-apple-system,Segoe UI,Roboto;
  color:var(--brand);
  background:linear-gradient(180deg,#fff,#f4fbff);
  border:2px solid var(--brand);
  box-shadow:0 2px 10px rgba(14,127,168,.15), 0 0 0 6px #e6f7ff;
}

/* kill any previous “pulse” ring or generic dot */
.timeline.coin .tl::after{ content:none; }

/* hide numeric prefix before h3 used in the other style */
.timeline.coin .tl h3::before{ content:""; margin:0; }

/* responsive tweak so coin stays crisp on small phones */
@media (max-width:520px){
  .timeline.coin .tl::before{ left:-26px; width:24px; height:24px; font-size:12px; }
}
/* === International: Timeline coin spacing overrides === */
#journey .timeline.coin { padding-left: 44px; }   /* pushes content away from the coin */
#journey .timeline.coin .tl { padding-left: 8px; } /* extra breathing room per step */
#journey .timeline.coin .tl h3 { margin-left: 4px; } /* tiny nudge for the title */
/* Responsive Google Map */
.map-wrap{
  position:relative;
  width:100%;
  height:0;
  padding-bottom:56.25%; /* 16:9 */
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--stroke,#e2e8f0);
  box-shadow:0 8px 26px rgba(2,29,59,.06);
}
.map-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
/* =========================
   Responsive Top Bar fixes
   ========================= */
.topbar{
  position: sticky;             /* keep visible while scrolling */
  top: 0;
  z-index: 1000;
  background: #0e7fa8;
  color: #fff;
  /* respect notches / safe areas */
  padding-top: max(6px, env(safe-area-inset-top));
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.topbar .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  flex-wrap: wrap;              /* allow wrap when needed */
}
.topbar .clock{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topbar .tz-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: .92rem;
  line-height: 1.1;
  white-space: nowrap;          /* keep pill on a single line */
}
.topbar .tz-badge .mono{font-variant-numeric: tabular-nums;}

/* Tiny screens: stack rows, shrink pills, center them */
@media (max-width: 480px){
  .topbar .container{
    flex-direction: column;     /* stack the two .clock rows */
    align-items: stretch;
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
    gap: 6px;
  }
  .topbar .clock{
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }
  .topbar .tz-badge{
    flex: 1 1 auto;             /* let pills share the row */
    min-width: 0;               /* enable ellipsis if text is long */
    text-align: center;
    font-size: .84rem;
    padding: 8px 10px;
  }
  /* Optional: hide the little status dot to save space */
  .topbar .dot{ display: none; }
}

/* Slightly larger phones: keep two rows but give more room */
@media (min-width: 481px) and (max-width: 768px){
  .topbar .tz-badge{ font-size: .9rem; padding: 7px 11px; }
}
/* Hide headings for screen-readers only */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* KPI – mobile-first horizontal carousel with snap */
.kpi-section .kpis{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:2px 2px 8px;
  -webkit-overflow-scrolling: touch;
}
.kpi-section .kpi-card{
  scroll-snap-align:start;
  flex:0 0 80%;
  min-width:260px;
  max-width:420px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:10px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(2,29,59,.06);
  box-shadow:0 8px 22px rgba(2,29,59,.06);
  color:#0b1b2a;
  position:relative;
}

/* Icon bubble */
.kpi-section .kpi-icon{
  display:grid; place-items:center;
  width:42px; height:42px;
  border-radius:12px;
  color:#0b1b2a;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(2,29,59,.06);
}

/* Typo */
.kpi-section .kpi-title{
  margin:0 0 2px 0;
  font-weight:800;
  font-size:clamp(18px,3.4vw,22px);
  line-height:1.2;
}
.kpi-section .kpi-sub{
  margin:0;
  font-size:.95rem;
  opacity:.8;
}

/* Link card affordance */
.kpi-section .kpi-card.kpi-map{ text-decoration:none }
.kpi-section .kpi-cta{
  position:absolute; right:12px; bottom:10px;
  font-size:.9rem; font-weight:600; opacity:.8;
}

/* Colorful backgrounds */
.kpi-open{
  background:linear-gradient(135deg,#e8fff2 0%,#d7fff4 100%);
  border-color:#b7f1de;
}
.kpi-reply{
  background:linear-gradient(135deg,#e9f7ff 0%,#d9efff 100%);
  border-color:#bfe3ff;
}
.kpi-map{
  background:linear-gradient(135deg,#f3e9ff 0%,#eadcff 100%);
  border-color:#ddc6ff;
}

/* When closed, tint red a bit */
.kpi-open.is-closed{
  background:linear-gradient(135deg,#ffe9ea 0%,#ffe0e5 100%);
  border-color:#ffd1d8;
}

/* Desktop/tablet: switch to grid 3-up */
@media (min-width: 900px){
  .kpi-section .kpis{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
    overflow:visible;
  }
  .kpi-section .kpi-card{ flex:initial; min-width:0 }
}
/* --- Trust badges (responsive, consistent pills) --- */
.trust-badges{
  list-style: none;
  margin: 12px 0 0;
  padding: 0;

  /* Grid auto-fits nice pills across breakpoints */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;

  /* Center the whole group under the hero text */
  justify-items: stretch;
}

.trust-badges li{
  /* pill look */
  border: 1px solid var(--stroke, #e2e8f0);
  background: #fff;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(2,29,59,.06);
  padding: 10px 14px;

  /* equal height + perfect centering */
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* tidy text */
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--text, #0a1f33);
}

.trust-badges li > span{
  /* prevent awkward breaks on large words, but still wrap on phones */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Slightly larger on big screens */
@media (min-width: 1024px){
  .trust-badges{
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    gap: 14px;
  }
}

/* Comfortable sizing on small phones */
@media (max-width: 420px){
  .trust-badges li{
    padding: 12px 14px;
    font-weight: 600;
  }
}
/* ===== Header/nav hardening ===== */

/* gap below the blue top bar */
.topbar + .header { margin-top: 8px; }

/* keep header above content and sticky */
.header{
  position: sticky; top: 0; z-index: 1000;
  background:#fff; box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

/* layout */
.header .nav{
  display:flex; align-items:center; gap:16px;
  padding-block:10px;
  flex-wrap: nowrap; /* prevent ugly two-row header on desktop */
}

/* brand sizing that scales down a bit on narrower screens */
.brand{ flex: 1 1 auto; min-width: 280px; }
.brand .clinic{ font-size: clamp(20px,2.6vw,32px); line-height:1.1; }
.brand .doctor{ font-size: clamp(13px,1.4vw,16px); }

/* desktop links: single row, no wrap, shrink spacing if needed */
.navlinks{
  display:flex; gap:18px; margin-left:auto;
  white-space: nowrap; /* force single line on desktop */
}
.navlinks a{ padding:8px 12px; border-radius:999px; text-decoration:none; }
.navlinks a.active{ background:#0e7fa8; color:#fff; }

/* Hamburger hidden on desktop */
.nav-toggle{ display:none; }

/* ===== Tablet & Mobile ===== */
@media (max-width: 1080px){
  /* slightly tighter desk/tablet spacing before switching to drawer */
  .navlinks a{ padding:7px 10px; }
  .brand .clinic{ font-size: clamp(20px,2.2vw,28px); }
}

@media (max-width: 980px){
  /* show hamburger; convert links into a drawer */
  .nav-toggle{ 
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:12px; border:1px solid var(--stroke,#e6edf4);
    background:#fff;
  }
  .hamburger,
  .hamburger::before,
  .hamburger::after{
    content:""; display:block; width:20px; height:2px; background:#0d2235;
    border-radius:2px; position:relative; transition:.25s;
  }
  .hamburger::before{ top:-6px; position:relative; }
  .hamburger::after{ top:6px; position:relative; }

  /* drawer hidden by default */
  .navlinks{
    position: fixed;
    left: 12px; right:12px;
    top: calc( var(--topbar-h,0px) + 64px );
    background:#fff; border:1px solid var(--stroke,#e6edf4); border-radius:14px;
    box-shadow: 0 16px 38px rgba(2,29,59,.12);
    display:none; flex-direction:column; gap:8px; padding:12px;
  }
  .navlinks.show{ display:flex; }

  /* animate hamburger to an X when open (optional) */
  .nav-toggle[aria-expanded="true"] .hamburger{ background:transparent; }
  .nav-toggle[aria-expanded="true"] .hamburger::before{ transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .hamburger::after{ transform: translateY(-6px) rotate(-45deg); }

  /* allow wrapping for chip-like behavior inside drawer */
  .navlinks{ white-space: normal; }
  .navlinks a{ padding:10px 12px; border:1px solid var(--stroke,#e6edf4); }
}

/* Optional: ensure hero chips don’t collide with sticky header when using #hash links */
:target{ scroll-margin-top: 90px; }
/* --- Page safety: prevent accidental horizontal scrolling --- */
html, body { max-width: 100%; overflow-x: hidden; }

/* Root cause: the testimonial strip is wider than the viewport */
.carousel { position: relative; width: 100%; overflow: hidden; }

/* (Optional) general media safety */
img, svg, video { max-width: 100%; height: auto; }
/* --- World clock layout + cards --- */
.clock-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.clock-card{
  background:#fff;
  border:1px solid var(--stroke, #e6edf4);
  border-radius:14px;
  padding:12px;
  box-shadow:var(--shadow, 0 10px 30px rgba(2,29,59,.06));
  cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease;
}
.clock-card:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(9,31,59,.08); }
.clock-city{ font-weight:700; margin-bottom:4px; }
.clock-time{ font-size:clamp(20px,3.6vw,28px); letter-spacing:.2px; }
.clock-date{ color:var(--muted, #6b7b8a); font-size:.9rem; margin-top:2px; }
.clock-copied{ color:#2e7d32; font-size:.85rem; margin-top:6px; display:none; }
.clock-card.copied .clock-copied{ display:block; }
/* Grid layout */
.pricing-frame-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:20px;
  margin-top:20px;
}
.pricing-card.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.96));
  border:1px solid rgba(14,127,168,.15);
  border-radius:18px;
  padding:22px;
  box-shadow:0 12px 32px rgba(2,29,59,.08);
  transition:transform .15s ease, box-shadow .25s ease;
}
.pricing-card.glass:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(2,29,59,.12);}
.price-form{display:grid; gap:14px; margin:14px 0;}
.fancy-input{padding:10px 12px; border-radius:10px; border:1px solid #e6edf4; background:#f9fbfd;}
.price-output{display:grid; gap:12px; margin:14px 0;}
.output-box{background:#fff; border:1px solid #e6edf4; border-radius:12px; padding:12px;}
.saving-box{margin-top:12px; padding:14px; border-radius:14px; background:#e6fff2; border:1px solid #c5f5da;}
.accent{color:#0e7fa8;}
.price-table{width:100%; border-collapse:collapse; margin-top:10px; font-size:.9rem;}
.price-table th, .price-table td{border-bottom:1px solid #e6edf4; padding:8px; text-align:left;}
/* ===== Ultra-pro pricing layout ===== */
.section-head--pro{display:flex;align-items:end;justify-content:space-between;gap:12px}
.section-head--pro .section-tag{margin-top:0}

.pro-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
@media (max-width:980px){ .pro-grid{ grid-template-columns:1fr; } }

.card-pro{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.98));
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:20px;
  box-shadow:0 12px 32px rgba(2,29,59,.08);
}
.card-pro__title{font-weight:700; font-size:1.15rem; margin-bottom:6px}

.form-row{
  display:grid;
  grid-template-columns:1fr 230px;
  gap:12px;
  margin:12px 0 6px;
  align-items:end;
}
.form-col{display:flex; flex-direction:column; gap:6px}
.form-col--narrow{max-width:230px}
.label{color:var(--muted); font-size:.85rem}
.input-pro{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:10px;
  background:#f9fbfd;
}
.input-pro:focus{outline:none; border-color:#bcd8ea; box-shadow:0 0 0 3px rgba(14,127,168,.12)}

.output-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:12px 0 6px;
}
@media (max-width:640px){
  .form-row{ grid-template-columns:1fr; }
  .form-col--narrow{max-width:none}
  .output-grid{ grid-template-columns:1fr; }
}

.output-tile{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:12px;
}
.kicker{font-weight:600; letter-spacing:.02em; color:var(--muted)}

.price-xl{font-size:clamp(26px,3.6vw,36px); line-height:1; margin-top:4px}
.price-lg{font-size:clamp(20px,3vw,28px); line-height:1; margin-top:4px}

.saving-banner{
  background:linear-gradient(180deg,#eafff3,#f7fffb);
  border:1px solid #cdeedf;
  border-radius:14px;
  padding:14px;
  margin-top:10px;
}

/* table polish */
.pro-details{margin-top:8px}
.pro-table{font-size:.95rem}
.pro-table th,.pro-table td{padding:10px 8px}
.ta-r{text-align:right}

/* numbers look tight and aligned */
.mono{font-variant-numeric:tabular-nums;}

/* optional: make cards feel “fixed-width” on large screens */
@media (min-width:1200px){
  .card-pro{ padding:24px; }
}
/* ===== Testimonials ===== */
.testimonials{
  text-align:center;
  margin-top:40px;
}
.review-card{
  max-width:720px;
  margin:0 auto;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.98));
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:24px 28px;
  box-shadow:0 12px 32px rgba(2,29,59,.08);
  transition:transform .2s ease, box-shadow .25s ease;
}
.review-card:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(2,29,59,.12);}
.stars{
  color:#f7b500;
  font-size:1.3rem;
  letter-spacing:2px;
  margin-bottom:10px;
}
.review-text{
  font-size:1.15rem;
  font-style:italic;
  line-height:1.5;
  margin-bottom:12px;
}
.review-author{
  font-weight:600;
  color:var(--muted);
}

/* Carousel basics */
.carousel{overflow:hidden; position:relative}
.slides{display:flex; transition:transform .6s ease}
.slide{min-width:100%; padding:10px}

/* Dots */
.dots{display:flex; gap:8px; justify-content:center; margin-top:14px}
.dot{
  width:10px; height:10px; border-radius:50%;
  background:#cfd8e3; cursor:pointer; transition:background .3s
}
.dot.is-active{background:#0e7fa8}
.carousel {
  overflow: hidden;
  position: relative;
}
.slides {
  display: flex;
  transition: transform 0.6s ease;
}
.slide {
  min-width: 100%;
  padding: 10px;
}
/* Layout */
.journey-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .journey-grid { grid-template-columns: 1fr; }
}

/* Timeline */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.timeline .tl {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--stroke, #e6edf4);
}
.timeline .tl:last-child { border-bottom: none; }

.step-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg,#0e7fa8,#31b2ff);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(14,127,168,0.2);
}
.step-body h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink, #0d2235);
}
.step-body p {
  margin: 0;
  color: var(--muted, #6b7b8a);
  font-size: .95rem;
  line-height: 1.45;
}

/* Info boxes */
.info-box {
  background: linear-gradient(180deg,#ffffff,#f9fcff);
  border: 1px solid var(--stroke, #e6edf4);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(9,31,59,0.08);
}
.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.city-grid .card {
  background: linear-gradient(180deg,#ffffff,#f9fcff);
  border: 1px solid var(--stroke, #e6edf4);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(9,31,59,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.city-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(9,31,59,.1);
}

.hotel-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hotel-list li {
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px dashed #dce3ec;
}
.hotel-list li:last-child { border-bottom: none; }
.hotel-list strong {
  display: inline-block;
  font-weight: 700;
  margin-right: 6px;
}
/* Remove unwanted gap between header and hero */
.header {
  margin-bottom: 0;   /* reset spacing */
  padding-bottom: 0;  /* reset spacing */
}

.home-hero.intl-hero,
.intl-hero {
  margin-top: 0 !important;   /* no top gap */
  padding-top: 1 !important;
  border-radius: 1 !important; /* full-bleed edge */
}
/* ===================== */
/* Services Section Grid */
/* ===================== */

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.service-grid > article {
  background: #fff;
  border: 1px solid var(--stroke, #e2e8f0);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-grid > article:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(2, 29, 59, 0.08);
}

.service-grid img {
  width: 100%;
  display: block;       /* removes inline spacing */
  aspect-ratio: 4 / 3;  /* keeps uniform tile height */
  object-fit: cover;    /* crop nicely */
}

.service-grid .pad {
  padding: 10px;
}

/* Desktop: 4 columns */
@media (min-width: 1100px) {
  .service-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
    /* ===== Hero (photo + parallax + soft orbs) ===== */
    .home-hero.premium{
      --grad1:#e6f7ff; --grad2:#f7fbff;
      position:relative; overflow:clip;
      background:
        radial-gradient(1200px 600px at 10% -20%, var(--grad1), transparent 70%),
        radial-gradient(900px 500px at 90% 0%, var(--grad2), transparent 65%);
    }
    .hero-media{
      position:absolute; inset:-12% -8% 0 -8%;
      background:url("/assets/illustrations/comfort.webp") center/cover no-repeat;
      transform: translateY(var(--parY,0px)) scale(1.06);
      opacity:.28; filter:contrast(1.06) saturate(1.06) brightness(1.02);
      will-change: transform;
    }
    .orbs{position:absolute; inset:0; pointer-events:none; filter:blur(34px); opacity:.55}
    .orb{position:absolute; border-radius:999px; transform:translate(-50%,-50%); mix-blend-mode:multiply}
    .o1{left:12%; top:14%; width:240px; height:240px; background:radial-gradient(circle at 30% 30%, #0e7fa8, #63caff 58%, transparent 70%); animation:float 20s ease-in-out infinite}
    .o2{left:88%; top:12%; width:300px; height:300px; background:radial-gradient(circle at 60% 70%, #31b2ff, #a7e2ff 58%, transparent 70%); animation:float 23s ease-in-out infinite}
    .o3{left:10%; top:80%; width:240px; height:240px; background:radial-gradient(circle at 50% 50%, #61d7a2, #d2ffe9 58%, transparent 70%); animation:float 22s ease-in-out infinite}
    @keyframes float{0%,100%{transform:translate(-50%,-50%) translateY(0)} 50%{transform:translate(-50%,-50%) translateY(18px)}}
    .home-hero__inner .kicker{display:inline-block;margin-bottom:6px;padding:6px 10px;border:1px solid var(--stroke,#e2e8f0);border-radius:999px;background:#fff}
    .hero-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

    /* Hero highlight chips */
    .trust-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px;padding:0}
    .trust-badges li{list-style:none;border:1px solid var(--stroke,#e2e8f0);background:#fff;border-radius:999px;padding:6px 10px}
    .trust-badges li span{display:block;text-align:center}