/* ═══════════════════════════════════════════════════════════
   Dental Oasis — stylesheet
   Mobile-first. No framework, no build step.
   Palette taken from the clinic's own signboard.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Brand */
  --navy:        #0F4C74;
  --navy-deep:   #08304A;
  --navy-soft:   #1C6392;
  --teal:        #1AA7C9;
  --teal-dark:   #10748C;   /* 5.4:1 on white, 4.9:1 on the aqua tint */
  --teal-light:  #6FCFE3;
  --aqua-wash:   #E9F6FA;
  --aqua-tint:   #F4FBFD;
  --sand:        #FBF8F3;
  --wa:          #198644;   /* deepened from WhatsApp green so white label hits 4.6:1 */

  /* Neutrals */
  --ink:         #12232E;
  --ink-2:       #40596A;
  --ink-3:       #55707F;   /* 5.2:1 on white, 4.7:1 on the aqua tint — AA for body copy */
  --line:        #DDE9EF;
  --line-soft:   #EDF4F7;
  --white:       #FFFFFF;

  /* Type */
  --f-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Space & shape */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(8,48,74,.06), 0 2px 8px rgba(8,48,74,.05);
  --shadow:    0 2px 6px rgba(8,48,74,.06), 0 12px 28px -10px rgba(8,48,74,.18);
  --shadow-lg: 0 4px 12px rgba(8,48,74,.08), 0 28px 56px -18px rgba(8,48,74,.28);

  --pad: clamp(1.15rem, 5vw, 2rem);
  --gap: clamp(1rem, 3.5vw, 1.75rem);
  --sec-y: clamp(3.5rem, 10vw, 7rem);
  --max: 1160px;

  --hdr-h: 62px;
  --mbar-h: 62px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + 14px);
}

body{
  margin:0;
  font-family:var(--f-body);
  font-size:clamp(1rem, .97rem + .18vw, 1.0625rem);
  line-height:1.68;
  color:var(--ink-2);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* room for the fixed mobile action bar */
  padding-bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom));
}

h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  color:var(--navy-deep);
  line-height:1.18;
  letter-spacing:-.021em;
  margin:0 0 .5em;
  font-weight:600;
  text-wrap:balance;
}
h1{ font-size:clamp(2.05rem, 1.35rem + 3.4vw, 3.75rem); font-weight:700; }
h2{ font-size:clamp(1.6rem, 1.15rem + 2.1vw, 2.6rem); }
h3{ font-size:clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
h4{ font-size:1.115rem; margin-bottom:.4em; }
h5{ font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:.9em; }

p{ margin:0 0 1.05em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

a{ color:var(--teal-dark); text-decoration-color:color-mix(in srgb, var(--teal-dark) 35%, transparent); text-underline-offset:.18em; }
a:hover{ text-decoration-color:currentColor; }

img{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }

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

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.i{ width:1.15em; height:1.15em; flex:none; fill:none; }
.i use{ color:inherit; }

.skip-link{
  position:absolute; left:50%; top:-100px; transform:translateX(-50%);
  z-index:200; background:var(--navy); color:#fff; padding:.7rem 1.2rem;
  border-radius:0 0 var(--r-sm) var(--r-sm); text-decoration:none; font-weight:600;
  transition:top .18s;
}
.skip-link:focus{ top:0; }

/* ── Layout ──────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:780px; }

.sec{ padding-block:var(--sec-y); }
.sec--tint{ background:linear-gradient(180deg, var(--aqua-tint), var(--aqua-wash)); }

.sec__head{ max-width:44rem; margin:0 auto clamp(2rem,5vw,3.25rem); text-align:center; }
.sec__lede{ font-size:1.06em; color:var(--ink-3); }
.sec__note{ margin-top:2.25rem; text-align:center; color:var(--ink-3); font-size:.96em; }

.eyebrow{
  font-family:var(--f-display);
  font-size:.775rem; font-weight:600; letter-spacing:.155em; text-transform:uppercase;
  color:var(--teal-dark); margin:0 0 .85em;
}

.sub-h{
  display:flex; align-items:center; gap:1rem;
  margin:clamp(2rem,5vw,3rem) 0 1.5rem;
  font-size:.8rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--teal-dark); font-weight:600;
}
.sub-h::after{ content:''; flex:1; height:1px; background:var(--line); }
.sub-h:first-of-type{ margin-top:0; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--f-display); font-weight:600; font-size:.975rem; line-height:1;
  padding:.9rem 1.4rem; border-radius:100px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--sm{ padding:.62rem 1.05rem; font-size:.88rem; }
.btn--lg{ padding:1.02rem 1.7rem; font-size:1.03rem; }
.btn--block{ width:100%; }

.btn--primary{ background:var(--navy); color:#fff; box-shadow:0 6px 18px -6px rgba(15,76,116,.6); }
.btn--primary:hover{ background:var(--navy-deep); box-shadow:0 12px 26px -8px rgba(15,76,116,.66); }

.btn--wa{ background:var(--wa); color:#fff; box-shadow:0 6px 18px -6px rgba(25,134,68,.55); }
.btn--wa:hover{ background:#14703A; box-shadow:0 12px 26px -8px rgba(25,134,68,.6); }

.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn--ghost:hover{ background:var(--aqua-wash); border-color:var(--teal-light); }

/* ── Topbar ──────────────────────────────────────────────── */
.topbar{ background:var(--navy-deep); color:#CFE6F1; font-size:.78rem; }
.topbar__in{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:34px; text-align:center;
}
.topbar__item{ display:inline-flex; align-items:center; gap:.4em; white-space:nowrap; }
.topbar__item .i{ width:.95em; height:.95em; color:var(--teal-light); }
.topbar__sep{ opacity:.4; }
@media (max-width:479px){
  .topbar__item--hide, .topbar__sep{ display:none; }
}

/* ── Header ──────────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:border-color .2s, box-shadow .2s;
}
.hdr.is-stuck{ border-bottom-color:var(--line); box-shadow:0 4px 20px -12px rgba(8,48,74,.4); }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--hdr-h); }

.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--navy); }
.brand__mark{ width:36px; height:36px; color:var(--teal); flex:none; }
.brand__mark--lg{ width:52px; height:52px; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{ font-family:var(--f-display); font-size:1.18rem; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); }
.brand__name b{ font-weight:700; letter-spacing:-.01em; text-transform:lowercase; font-size:1.28em; color:var(--navy-deep); }
.brand__sub{ font-size:.575rem; letter-spacing:.13em; text-transform:uppercase; color:var(--teal-dark); margin-top:1px; }
@media (max-width:359px){ .brand__sub{ display:none; } }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a:not(.btn){
  font-family:var(--f-display); font-weight:500; font-size:.92rem;
  color:var(--ink-2); text-decoration:none; padding:.5rem .68rem; border-radius:var(--r-sm);
  transition:color .15s, background-color .15s;
}
.nav a:not(.btn):hover{ color:var(--navy); background:var(--aqua-wash); }
.nav a.is-active{ color:var(--navy-deep); font-weight:600; }
.nav__cta{ margin-left:.5rem; }

.burger{
  display:none; width:44px; height:44px; padding:0; margin-right:-8px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ display:block; width:22px; height:2px; background:var(--navy); border-radius:2px; transition:transform .22s, opacity .18s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:919px){
  .burger{ display:flex; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:.15rem;
    background:#fff; border-bottom:1px solid var(--line);
    padding:.6rem var(--pad) 1.15rem;
    box-shadow:var(--shadow);
    clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
    transition:clip-path .28s ease, opacity .2s ease;
  }
  .nav.is-open{ clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; }
  .nav a:not(.btn){ padding:.78rem .5rem; font-size:1rem; border-bottom:1px solid var(--line-soft); border-radius:0; }
  .nav__cta{ margin:.8rem 0 0; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(2.75rem,9vw,5.5rem) clamp(4.5rem,12vw,7rem);
  background:
    radial-gradient(120% 90% at 12% 0%, #FFFFFF 0%, var(--aqua-tint) 42%, var(--aqua-wash) 100%);
}
.hero__bg{ position:absolute; inset:auto 0 -1px 0; z-index:-1; line-height:0; }
.hero__wave{ width:100%; height:clamp(90px,18vw,190px); display:block; fill:rgba(111,207,227,.22); }
.hero__wave--2{ position:absolute; left:0; bottom:0; fill:rgba(26,167,201,.14); }

.hero__in{ display:grid; gap:3rem; align-items:center; }
.hero__copy{ max-width:52rem; }
.hero__h1{ margin-bottom:.5em; }
.hero__h1 em{
  font-style:normal; color:var(--teal-dark);
  position:relative; white-space:nowrap;
}
.hero__h1 em::after{
  content:''; position:absolute; left:-.04em; right:-.04em; bottom:.06em; height:.2em;
  background:linear-gradient(90deg, rgba(111,207,227,.5), rgba(111,207,227,.16));
  border-radius:100px; z-index:-1;
}

/* Hero visual — desktop only; on mobile the CTAs stay above the fold instead. */
.hero__visual{ display:none; }
@media (min-width:920px){
  .hero__in{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(2.5rem,5vw,4.5rem); }
  .hero__visual{ display:block; position:relative; max-width:26rem; margin-inline:auto; width:100%; }
}
.hero__frame{
  border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-lg); border:6px solid rgba(255,255,255,.9);
  transform:rotate(1.4deg);
}
.hero__frame img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }

.hero__tag{
  position:absolute; background:rgba(255,255,255,.95);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:.7rem .95rem;
  backdrop-filter:blur(8px);
}
.hero__tag--top{ top:-1rem; left:-1.5rem; display:grid; gap:.35rem; }
.hero__tag--top b{ font-family:var(--f-display); font-size:.82rem; color:var(--navy-deep); letter-spacing:.01em; }
.hero__tag--btm{ bottom:-1.15rem; right:-1.25rem; display:flex; align-items:center; gap:.7rem; }
.hero__tag--btm .i{ width:1.5em; height:1.5em; color:var(--teal); }
.hero__tag--btm span{ display:flex; flex-direction:column; line-height:1.3; }
.hero__tag--btm b{ font-family:var(--f-display); font-size:.97rem; color:var(--navy-deep); }
.hero__tag--btm small{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-dark); }
.hero__lede{ font-size:clamp(1.02rem,.97rem + .4vw, 1.19rem); color:var(--ink-2); max-width:38rem; }
.hero__lede b{ color:var(--navy-deep); font-weight:600; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem; }
.hero__cta .btn{ flex:1 1 auto; min-width:min(100%, 15rem); }
@media (min-width:520px){ .hero__cta .btn{ flex:0 0 auto; min-width:0; } }

.hero__chips{
  display:flex; flex-wrap:wrap; gap:.5rem .65rem; margin-top:2.1rem;
}
.hero__chips li{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.845rem; font-weight:500; color:var(--navy);
  background:rgba(255,255,255,.78); border:1px solid rgba(26,167,201,.22);
  padding:.44rem .82rem; border-radius:100px;
  backdrop-filter:blur(6px);
}
.hero__chips .i{ width:1em; height:1em; color:var(--teal-dark); }

/* ── Credentials strip ───────────────────────────────────── */
.creds{
  background:var(--navy-deep); color:#D5E8F2;
  padding-block:clamp(1.9rem,5vw,2.6rem);
}
.creds__grid{ display:grid; gap:1.4rem; }
@media (min-width:760px){
  .creds__grid{ grid-template-columns:repeat(3,1fr); gap:2rem; }
  .creds__grid li + li{ border-left:1px solid rgba(255,255,255,.13); padding-left:2rem; }
}
.creds__grid li{ display:grid; grid-template-columns:auto 1fr; column-gap:.9rem; align-items:start; }
.creds__i{ width:26px; height:26px; color:var(--teal-light); grid-row:span 2; margin-top:2px; }
.creds__grid b{ font-family:var(--f-display); font-size:1.02rem; font-weight:600; color:#fff; letter-spacing:-.01em; }
.creds__grid span{ font-size:.885rem; color:#9FC4D8; line-height:1.5; }

/* ── Cards ───────────────────────────────────────────────── */
.cards{ display:grid; gap:var(--gap); }
@media (min-width:600px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .cards{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:600px){ .cards--focus{ grid-template-columns:repeat(2,1fr); } }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.35rem,3.5vw,1.75rem);
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--teal-light); }
.card__i{ width:34px; height:34px; color:var(--teal); margin-bottom:1rem; }
.card h4{ color:var(--navy-deep); }
.card p{ font-size:.945rem; color:var(--ink-3); margin:0; }

.card--focus{
  background:linear-gradient(160deg, #fff 0%, var(--aqua-tint) 100%);
  border-color:rgba(26,167,201,.28);
  position:relative; overflow:hidden;
}
.card--focus::before{
  content:''; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg, var(--teal), var(--teal-light));
}
.card--focus .card__i{ color:var(--teal-dark); }

/* ── Doctor ──────────────────────────────────────────────── */
.doc{ display:grid; gap:clamp(2rem,6vw,3.5rem); align-items:start; }
@media (min-width:900px){ .doc{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:4rem; } }

.doc__media{ position:relative; max-width:26rem; margin-inline:auto; width:100%; }
.doc__photo{
  aspect-ratio:4/5; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(155deg, var(--aqua-wash), #D3EDF5 55%, var(--teal-light));
  display:grid; place-items:center; box-shadow:var(--shadow-lg);
}
.doc__photo img{ width:100%; height:100%; object-fit:cover; }

.doc__badge{
  position:absolute; right:-.4rem; bottom:-1.15rem;
  background:#fff; border-radius:var(--r); padding:.8rem 1.15rem;
  box-shadow:var(--shadow); border:1px solid var(--line); text-align:center;
}
.doc__badge b{ display:block; font-family:var(--f-display); font-size:1.06rem; color:var(--navy-deep); letter-spacing:.02em; }
.doc__badge span{ font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--teal-dark); }

.doc__body h2{ margin-bottom:.15em; }
.doc__role{ font-family:var(--f-display); font-weight:500; color:var(--teal-dark); margin-bottom:1.5em; font-size:1.02rem; }
.doc__body b{ color:var(--navy-deep); font-weight:600; }

.quote{
  margin:1.9rem 0; padding:1.2rem 0 1.2rem 1.5rem;
  border-left:3px solid var(--teal-light);
}
.quote p{
  font-family:var(--f-display); font-size:clamp(1.15rem,1rem + .7vw,1.42rem);
  color:var(--navy); font-weight:400; line-height:1.42; margin-bottom:.5em;
}
.quote cite{ font-style:normal; font-size:.83rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }

.doc__pts{ display:grid; gap:.7rem; margin-top:1.5rem; }
.doc__pts li{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; font-size:.955rem; }
.doc__pts .i{ width:1.05em; height:1.05em; color:var(--teal); margin-top:.42em; }

/* ── Steps ───────────────────────────────────────────────── */
.steps{ display:grid; gap:1.15rem; counter-reset:s; max-width:52rem; margin-inline:auto; }
@media (min-width:760px){ .steps{ gap:0; } }

.steps li{
  position:relative; display:grid;
  grid-template-columns:44px 1fr; column-gap:1.1rem; row-gap:.2rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.3rem 1.4rem; box-shadow:var(--shadow-sm);
}
/* the number owns column 1; the heading and copy stack in column 2 */
.steps li > :not(.steps__n){ grid-column:2; }
@media (min-width:760px){
  .steps li{ border:0; box-shadow:none; background:none; padding:0 0 2.2rem 0; border-radius:0; }
  .steps li:not(:last-child)::before{
    content:''; position:absolute; left:21px; top:46px; bottom:-4px; width:2px;
    background:linear-gradient(180deg, var(--teal-light), var(--line));
  }
}
.steps__n{
  display:grid; place-items:center; width:44px; height:44px; flex:none;
  border-radius:50%; background:var(--navy); color:#fff;
  font-family:var(--f-display); font-weight:600; font-size:1.05rem;
  box-shadow:0 4px 12px -4px rgba(15,76,116,.6);
}
.steps h4{ margin:.55rem 0 .15rem; color:var(--navy-deep); }
.steps p{ font-size:.95rem; color:var(--ink-3); margin:0; }

.alert{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;
  margin-top:clamp(2rem,5vw,3rem);
  background:linear-gradient(135deg, #FFF6F3, #FFEDE6);
  border:1px solid #F8CFBE; border-left:4px solid #E2694A;
  border-radius:var(--r); padding:1.25rem 1.4rem;
}
.alert .i{ width:1.4em; height:1.4em; color:#C9502F; margin-top:.15em; }
.alert b{ display:block; font-family:var(--f-display); font-size:1.06rem; color:#8E3418; margin-bottom:.3em; }
.alert p{ font-size:.94rem; color:#7A4536; margin:0; }
.alert a{ color:#B33F1E; font-weight:600; }

/* ── Clinic tour video ───────────────────────────────────── */
.tour{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
@media (min-width:880px){ .tour{ grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(3rem,6vw,5rem); } }

.tour__pts{ display:grid; gap:.7rem; margin-top:1.6rem; }
.tour__pts li{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; font-size:.955rem; }
.tour__pts .i{ width:1.05em; height:1.05em; color:var(--teal); margin-top:.42em; }

.tour__media{ margin:0; justify-self:center; width:100%; max-width:22rem; }

/* Phone-shaped frame — the source clip is portrait, so lean into it. */
.vid{
  position:relative; border-radius:28px; overflow:hidden;
  background:var(--navy-deep); box-shadow:var(--shadow-lg);
  border:6px solid #fff; aspect-ratio:9/16;
}
.vid video{ width:100%; height:100%; object-fit:cover; display:block; }

.vid__play{
  position:absolute; inset:0; margin:auto; width:74px; height:74px;
  display:grid; place-items:center; cursor:pointer;
  border:0; border-radius:50%; padding:0;
  background:rgba(255,255,255,.94); color:var(--navy);
  box-shadow:0 10px 30px -8px rgba(8,48,74,.6);
  transition:transform .2s ease, background-color .2s ease, opacity .25s ease;
}
.vid__play svg{ width:32px; height:32px; margin-left:4px; }
.vid__play:hover{ transform:scale(1.08); background:#fff; }
.vid.is-playing .vid__play{ opacity:0; pointer-events:none; }

.vid__hint{
  position:absolute; left:50%; bottom:1rem; transform:translateX(-50%);
  background:rgba(8,48,74,.72); color:#fff; backdrop-filter:blur(6px);
  font-size:.74rem; font-weight:500; letter-spacing:.04em;
  padding:.35rem .8rem; border-radius:100px; white-space:nowrap;
  transition:opacity .25s ease;
}
.vid.is-playing .vid__hint{ opacity:0; }

/* ── Gallery ─────────────────────────────────────────────── */
/* Columns rather than a grid: the photos are a mix of portrait,
   square and landscape, and cropping them all to one ratio wastes
   the best parts of each. */
/* Two columns, not three: four photos split evenly, and each one
   gets enough width to actually be worth looking at. */
.gal{ columns:1; column-gap:var(--gap); max-width:66rem; margin-inline:auto; }
@media (min-width:640px){ .gal{ columns:2; } }

.gal figure{
  margin:0 0 var(--gap); break-inside:avoid; -webkit-column-break-inside:avoid;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
  background:#fff; position:relative;
}
.gal img{ width:100%; height:auto; display:block; transition:transform .5s ease; }
.gal figure:hover img{ transform:scale(1.04); }
.gal figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.4rem .95rem .8rem;
  background:linear-gradient(180deg, transparent, rgba(8,48,74,.82));
  color:#fff; font-size:.85rem; font-weight:500; line-height:1.4;
}

/* ── Booking ─────────────────────────────────────────────── */
.sec--book{
  background:
    radial-gradient(90% 70% at 85% 0%, rgba(26,167,201,.16), transparent 60%),
    var(--navy-deep);
  color:#CFE3EE;
}
.sec--book h2, .sec--book .eyebrow{ color:#fff; }
.sec--book .eyebrow{ color:var(--teal-light); }

.book{ display:grid; gap:clamp(2rem,5vw,3.5rem); }
@media (min-width:900px){ .book{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:4rem; align-items:start; } }

.book__direct{ display:grid; gap:.75rem; margin-top:2rem; }
.dline{
  display:flex; align-items:center; gap:.95rem;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r); padding:.95rem 1.15rem;
  text-decoration:none; color:#fff;
  transition:background-color .18s, border-color .18s, transform .18s;
}
.dline:hover{ background:rgba(255,255,255,.13); border-color:rgba(111,207,227,.5); transform:translateY(-2px); }
.dline .i{ width:1.35em; height:1.35em; color:var(--teal-light); }
.dline--wa .i{ color:#5FD98C; }
.dline span{ display:flex; flex-direction:column; line-height:1.35; }
.dline b{ font-family:var(--f-display); font-size:1.05rem; letter-spacing:.01em; }
.dline small{ font-size:.79rem; color:#93B6C9; }

.form{
  background:#fff; border-radius:var(--r-xl); padding:clamp(1.4rem,4vw,2.1rem);
  box-shadow:var(--shadow-lg); display:grid; gap:1.05rem;
}
.field{ display:grid; gap:.4rem; }
.field--row{ display:grid; gap:1.05rem; }
@media (min-width:440px){ .field--row{ grid-template-columns:1fr 1fr; } }
.field--row > div{ display:grid; gap:.4rem; }

.form label{
  font-family:var(--f-display); font-size:.87rem; font-weight:600;
  color:var(--navy-deep); letter-spacing:.005em;
}
.form label span{ color:#D1573A; }

.form input, .form select, .form textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--aqua-tint); border:1.5px solid var(--line);
  border-radius:var(--r-sm); padding:.78rem .9rem;
  transition:border-color .15s, background-color .15s, box-shadow .15s;
  -webkit-appearance:none; appearance:none;
}
.form textarea{ resize:vertical; min-height:5.2rem; }
.form ::placeholder{ color:var(--ink-3); opacity:1; }
.form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2340596A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:12px;
  padding-right:2.6rem;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; background:#fff; border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(26,167,201,.16);
}
.form input[aria-invalid="true"]{ border-color:#D1573A; background:#FFF7F5; }

.err{ font-size:.82rem; color:#C0492A; margin:0; min-height:0; }
.err:empty{ display:none; }

.form__note{ font-size:.82rem; color:var(--ink-3); text-align:center; margin:0; }
.form__status{ font-size:.9rem; color:var(--wa); font-weight:600; text-align:center; margin:0; }
.form__status:empty{ display:none; }

/* ── FAQ ─────────────────────────────────────────────────── */
.acc{ display:grid; gap:.7rem; }
.acc details{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.acc details[open]{ border-color:var(--teal-light); box-shadow:var(--shadow); }
.acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 1.25rem; cursor:pointer; list-style:none;
  font-family:var(--f-display); font-weight:600; font-size:1.01rem;
  color:var(--navy-deep); line-height:1.4;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{
  content:''; flex:none; width:20px; height:20px;
  background:currentColor; color:var(--teal-dark);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s ease;
}
.acc details[open] summary::after{ transform:rotate(135deg); }
.acc summary:hover{ background:var(--aqua-tint); }
.acc details > div{ padding:0 1.25rem 1.25rem; }
.acc details p{ font-size:.955rem; color:var(--ink-3); margin:0; }

/* ── Location ────────────────────────────────────────────── */
.loc{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
@media (min-width:880px){ .loc{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:4rem; } }

.loc__list{ display:grid; gap:1.4rem; margin-top:1.9rem; }
.loc__list li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.loc__list .i{ width:1.3em; height:1.3em; color:var(--teal); margin-top:.25em; }
.loc__list b{ display:block; font-family:var(--f-display); font-size:.79rem; letter-spacing:.11em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:.3em; }
.loc__list p{ margin:0 0 .35em; color:var(--navy-deep); font-weight:500; }
.loc__list a{ font-weight:500; }
.link{ font-family:var(--f-display); font-weight:600; font-size:.9rem; text-decoration:none; }
.link:hover{ text-decoration:underline; }

.closed-note{
  display:inline-block; margin-top:.15rem !important;
  font-size:.86rem; font-weight:600; color:#A8452A;
}

.pill{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.78rem; font-weight:600; padding:.28rem .7rem; border-radius:100px;
  background:#E4F7EC; color:#1A7A42; border:1px solid #B9E7CC;
}
.pill::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill.is-closed{ background:#FBEDE9; color:#A8452A; border-color:#F2CFC3; }

.loc__photo{ margin:0; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); background:#fff; }
.loc__photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.loc__photo figcaption{ padding:.85rem 1.15rem; font-size:.87rem; color:var(--ink-3); text-align:center; }
.loc__photo b{ color:var(--navy); }

/* ── Footer ──────────────────────────────────────────────── */
.ftr{ background:var(--navy-deep); color:#9FC0D2; padding-top:clamp(3rem,7vw,4.5rem); font-size:.92rem; }
.ftr__in{ display:grid; gap:2.5rem; padding-bottom:2.5rem; }
@media (min-width:820px){ .ftr__in{ grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:4rem; } }

.ftr__brand .brand__mark{ color:var(--teal-light); margin-bottom:.9rem; }
.ftr__name{
  font-family:var(--f-display); font-size:1.35rem; font-weight:400;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; margin:0 0 .3rem;
}
.ftr__name b{ font-weight:700; text-transform:lowercase; letter-spacing:-.01em; font-size:1.22em; }
.ftr__tag{ font-size:.87rem; line-height:1.7; margin:0; }
.ftr__tag em{ color:var(--teal-light); font-style:normal; letter-spacing:.03em; }

.ftr__nav{ display:grid; gap:2rem; }
@media (min-width:520px){ .ftr__nav{ grid-template-columns:repeat(3,1fr); gap:1.5rem; } }
.ftr__nav h5{ color:var(--teal-light); }
.ftr__nav a{ display:block; color:#9FC0D2; text-decoration:none; padding:.3rem 0; transition:color .15s; }
.ftr__nav a:hover{ color:#fff; }

.ftr__base{
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:1.5rem 2rem; font-size:.8rem; color:#7EA3B8;
}
.ftr__base p{ margin:0 0 .5em; }
.ftr__dis{ font-size:.75rem; color:#86A9BE; max-width:60rem; }

/* ── Mobile action bar ───────────────────────────────────── */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 24px -14px rgba(8,48,74,.5);
}
.mbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:var(--mbar-h); text-decoration:none;
  font-family:var(--f-display); font-size:.715rem; font-weight:600; letter-spacing:.02em;
  color:var(--navy); position:relative;
}
.mbar a + a::before{ content:''; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--line); }
.mbar .i{ width:1.32em; height:1.32em; color:var(--teal-dark); }
.mbar a:nth-child(2) .i{ color:var(--wa); }
.mbar__cta{ background:var(--navy); color:#fff !important; }
.mbar__cta .i{ color:#fff !important; }
.mbar__cta::before{ display:none !important; }

@media (min-width:920px){
  .mbar{ display:none; }
  body{ padding-bottom:0; }
}

/* ── Reveal animation ────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

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

/* ── Print ───────────────────────────────────────────────── */
@media print{
  .topbar,.hdr,.mbar,.hero__bg,.form,.btn{ display:none !important; }
  body{ padding:0; color:#000; }
  .sec{ padding-block:1rem; break-inside:avoid; }
  .reveal{ opacity:1; transform:none; }
}