/* Solina Dental Clinic: the bespoke look. Palette from their logo (navy → cobalt → sky wave, silver tooth)
   and their clinic (warm wood slats, white walls, soft pendant light). Fonts: Fraunces (display) + Inter. */
@font-face { font-family: Fraunces; src: url(/fonts/fraunces-normal-300-700.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: Fraunces; src: url(/fonts/fraunces-italic-300-700.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/inter-400-700.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --navy: #16346f; --cobalt: #2a64c4; --sky: #5aa7ec; --ice: #eaf3fd; --silver: #9aa3ae;
  --wood: #b98d5e; --wood-l: #f3e9dc; --paper: #fbf9f5; --ink: #13203a; --mute: #4d5a70;
  --serif: Fraunces, Georgia, serif; --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wave: linear-gradient(90deg, #1b3a85, #2f6fd0 55%, #5aa7ec);

  --k-ink: var(--ink); --k-paper: #fff; --k-surface: var(--ice); --k-accent: var(--cobalt); --k-accent-2: var(--wood);
  --k-dark: var(--navy); --k-font: var(--sans); --k-display: var(--serif); --k-head-em: var(--cobalt);
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); overflow-x: hidden; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }
h2 em, h1 em { font-style: italic; color: var(--cobalt); }
.eyebrow { font: 600 .74rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--cobalt); margin: 0 0 12px; }
.sec-head { max-width: 760px; margin-bottom: clamp(22px, 4vw, 38px); }
.sec-head h2 { font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1.06; margin: 0; }
.lede { color: var(--mute); font-size: 1.05rem; margin: 14px 0 0; }
.btn-light, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 600 .98rem var(--sans); text-decoration: none; }
.btn-light { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.75); backdrop-filter: blur(6px); }
.btn-light:hover { background: rgba(255,255,255,.26); }
.btn-ghost { color: var(--navy); border: 1.5px solid var(--navy); background: transparent; }
.btn-ghost:hover { background: var(--ice); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
section { scroll-margin-top: 70px; }

/* ---------- hero: the Solina wave ---------- */
.hero { position: relative; min-height: min(92svh, 860px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--navy); }
.hero__stage { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; display: block; opacity: 0; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__slide.is-on { opacity: 1; z-index: 1; }
.hero__slide.is-in { opacity: 1; z-index: 2; clip-path: inset(0 100% 0 0); animation: wipe 1.5s cubic-bezier(.65,.05,.3,1) forwards; }
.hero__slide.is-on img, .hero__slide.is-in img { animation: drift 9s ease-out both; }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes drift { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero__wave { position: absolute; top: -2%; bottom: -2%; left: 0; width: clamp(90px, 14vw, 170px); z-index: 3; transform: translateX(-100%); pointer-events: none; filter: drop-shadow(0 0 24px rgba(20,60,140,.45)); }
.hero__wave svg { width: 100%; height: 100%; display: block; }
.hero__wave.is-go { animation: sweep 1.5s cubic-bezier(.65,.05,.3,1) forwards; }
@keyframes sweep { from { left: 0; transform: translateX(-100%); } to { left: 100%; transform: translateX(-30%); } }
.hero__shade { position: absolute; inset: 0; z-index: 4; background: linear-gradient(180deg, rgba(10,24,56,.35) 0%, rgba(10,24,56,0) 26%, rgba(10,24,56,.25) 48%, rgba(10,24,56,.88) 100%); }
.hero__in { position: relative; z-index: 5; width: 100%; padding-top: 120px; padding-bottom: clamp(30px, 6vw, 64px); }
.hero__kicker { display: inline-flex; align-items: center; gap: 8px; font: 600 .74rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(90,167,236,.3); flex: none; }
.hero h1 { margin: 0; line-height: .92; font-weight: 400; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero__name { display: block; font-style: italic; font-size: clamp(4rem, 17vw, 9.5rem); letter-spacing: -.03em; }
.hero__dc { display: block; font: 600 clamp(.9rem, 2.6vw, 1.25rem)/1.4 var(--sans); letter-spacing: .42em; text-transform: uppercase; margin-top: 8px; padding-left: .2em; }
.hero__dc::after { content: ""; display: block; width: min(320px, 70%); height: 6px; margin-top: 12px; border-radius: 6px 60px 60px 6px; background: var(--wave); transform: skewX(-18deg); transform-origin: left; animation: grow 1.4s .3s cubic-bezier(.65,.05,.3,1) both; }
@keyframes grow { from { transform: skewX(-18deg) scaleX(0); } }
.hero__sub { max-width: 34em; font-size: clamp(1rem, 2.4vw, 1.15rem); margin: 18px 0 0; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.hero__caps { list-style: none; margin: 26px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.hero__caps li { font: 500 .78rem/1.3 var(--sans); padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); transition: .4s; display: none; }
.hero__caps li span { font-weight: 700; margin-right: 6px; color: var(--sky); }
.hero__caps li.is-on { display: inline-block; background: rgba(255,255,255,.92); color: var(--navy); }
@media (min-width: 760px) { .hero__caps li { display: inline-block; } .hero__in { padding-bottom: 72px; } }
@media (prefers-reduced-motion: reduce) { .hero__slide.is-in, .hero__wave.is-go, .hero__slide img, .hero__dc::after { animation-duration: .01s !important; } }

.strip { background: var(--navy); color: #fff; position: relative; }
.strip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--wave); }
.strip__in { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; padding-top: 18px; padding-bottom: 18px; }
.strip p { margin: 0; display: flex; flex-direction: column; font-size: .88rem; }
.strip b { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; }
.strip span { color: #bcd2f0; }
.strip a { color: inherit; text-decoration: none; display: flex; flex-direction: column; }
@media (min-width: 760px) { .strip__in { grid-template-columns: repeat(4, 1fr); } }

/* ---------- reservation card ---------- */
.res-sec { padding: clamp(48px, 8vw, 96px) 0; background: linear-gradient(180deg, var(--paper), var(--ice)); }
.res { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.res > * { min-width: 0; }
@media (min-width: 960px) { .res { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; } .card-wrap { position: sticky; top: 84px; } }
.step { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.step legend { font: 600 1.02rem var(--sans); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 0; }
.step legend small { font-weight: 400; color: var(--mute); font-size: .82rem; }
.step__n { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-grid; place-items: center; font-size: .85rem; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 15px; border-radius: 999px; border: 1.5px solid #c9d6ea; background: #fff; color: var(--ink); font: 500 .92rem var(--sans); cursor: pointer; transition: .2s; }
.chip:hover { border-color: var(--cobalt); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 6px 16px rgba(22,52,111,.25); }
.days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; }
.day { flex: none; width: 62px; min-height: 76px; border-radius: 14px; border: 1.5px solid #c9d6ea; background: #fff; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 500 .74rem var(--sans); scroll-snap-align: start; gap: 1px; }
.day b { font: 500 1.35rem var(--serif); }
.day.is-sun { border-style: dashed; }
.day.is-sun::after { content: "by appt"; font-size: .62rem; color: var(--mute); }
.day[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.day[aria-pressed="true"]::after { color: #bcd2f0; }
.you { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.you label { display: flex; flex-direction: column; gap: 4px; font: 600 .78rem var(--sans); color: var(--mute); grid-column: span 2; }
.you label.sm { grid-column: span 1; }
.you label:nth-child(3), .you label:nth-child(4) { grid-column: span 1; }
.you label:nth-child(3) { grid-column: span 2; }
@media (min-width: 560px) { .you label:nth-child(1) { grid-column: span 1; } .you label:nth-child(3) { grid-column: span 1; } }
.you input { min-height: 46px; border: 1.5px solid #c9d6ea; border-radius: 12px; padding: 0 14px; font: 400 1rem var(--sans); color: var(--ink); background: #fff; width: 100%; box-sizing: border-box; }
.you input:focus { outline: 2px solid var(--cobalt); outline-offset: 1px; }

.card { position: relative; background: #fff; border-radius: 18px; padding: 22px 22px 18px; box-shadow: 0 24px 50px -24px rgba(22,52,111,.4); overflow: hidden; border-top: 6px solid transparent; border-image: var(--wave) 1; }
.card::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 120px; background: radial-gradient(closest-side, rgba(90,167,236,.18), transparent); }
.card__top { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #e3eaf4; }
.card__mark { width: 52px; height: 46px; flex: none; }
.card__clinic { margin: 0; font: 600 1.15rem var(--serif); color: var(--navy); }
.card__addr { margin: 2px 0 0; font: 600 .78rem/1.35 var(--sans); color: #b2392f; }
.card__lines { margin: 12px 0 0; display: grid; gap: 2px; }
.card__lines div { display: grid; grid-template-columns: 96px 1fr; align-items: end; gap: 8px; min-height: 34px; }
.card__lines dt { font: 700 .82rem var(--sans); color: var(--ink); }
.card__lines dt::before { content: "▪ "; color: var(--cobalt); }
.card__lines dd { margin: 0; border-bottom: 1.5px solid #cfdbec; min-height: 26px; font: italic 500 1.05rem/1.4 var(--serif); color: var(--navy); overflow-wrap: anywhere; }
.card__lines dd.is-new { animation: ink .6s ease; }
@keyframes ink { from { color: var(--sky); transform: translateY(3px); } }
.card__foot { margin: 14px 0 0; font-size: .76rem; color: var(--mute); }
.card__stamp { position: absolute; right: 16px; top: 74px; transform: rotate(-12deg) scale(1.6); opacity: 0; border: 2px solid var(--cobalt); color: var(--cobalt); border-radius: 8px; padding: 4px 10px; font: 700 .78rem var(--sans); letter-spacing: .1em; text-transform: uppercase; transition: .35s cubic-bezier(.3,1.6,.5,1); background: rgba(255,255,255,.85); }
.card.is-ready .card__stamp { opacity: 1; transform: rotate(-12deg) scale(1); }
.send { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.send .k-btn, .send .btn-ghost { width: 100%; box-sizing: border-box; min-height: 50px; }
.send .is-off { opacity: .55; }
.send__note { margin: 0; font-size: .86rem; color: var(--mute); text-align: center; }

/* ---------- services ---------- */
.care { padding: clamp(48px, 8vw, 96px) 0; background: #fff; }
.care__grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .care__grid { grid-template-columns: repeat(2, 1fr); } .svc--hi { grid-row: span 2; } }
.svc { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 14px; border-radius: 18px; background: var(--paper); border: 1px solid #ece4d8; align-items: start; }
.svc__pic { border-radius: 60px 14px 14px 14px; overflow: hidden; aspect-ratio: 3 / 4; }
.svc__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc__k { margin: 0; font: 600 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wood); }
.svc__k span { color: var(--cobalt); margin-right: 8px; }
.svc h3 { margin: 4px 0 6px; font-size: 1.3rem; line-height: 1.15; color: var(--navy); }
.svc p { margin: 0; font-size: .94rem; color: var(--mute); }
.svc__go { margin-top: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--ice); border: 0; color: var(--navy); font: 600 .9rem var(--sans); cursor: pointer; }
.svc__go:hover { background: var(--navy); color: #fff; }
.svc--hi { background: var(--navy); border-color: var(--navy); }
.svc--hi h3 { color: #fff; } .svc--hi p { color: #c9d8f0; } .svc--hi .svc__k { color: #e1c49f; } .svc--hi .svc__k span { color: var(--sky); }
@media (min-width: 900px) { .svc--hi { grid-template-columns: 1fr; } .svc--hi .svc__pic { aspect-ratio: 16 / 10; border-radius: 120px 18px 18px 18px; } }
.care__note { margin: 20px 0 0; padding: 14px 18px; border-left: 4px solid var(--cobalt); background: var(--ice); border-radius: 0 12px 12px 0; color: var(--ink); }

/* ---------- dentist ---------- */
.doc-sec { padding: clamp(48px, 8vw, 96px) 0; background: var(--wood-l); background-image: repeating-linear-gradient(90deg, rgba(185,141,94,.10) 0 2px, transparent 2px 26px); }
.doc { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .doc { grid-template-columns: .9fr 1.1fr; gap: 56px; } }
.doc__pics { position: relative; max-width: 420px; }
.doc__main { display: block; padding: 0; border: 0; cursor: zoom-in; border-radius: 200px 200px 24px 24px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(22,52,111,.5); width: 100%; background: none; }
.doc__main img { width: 100%; height: auto; display: block; }
.doc__pics::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1.5px solid var(--cobalt); border-radius: 200px 200px 24px 24px; z-index: -1; }
.doc__plate { margin: -34px 0 0 auto; width: 82%; position: relative; background: #fff; padding: 8px; border-radius: 12px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.35); }
.doc__plate img { width: 100%; height: auto; display: block; border-radius: 6px; }
.doc__plate figcaption { font-size: .74rem; color: var(--mute); padding: 6px 4px 0; }
.doc__copy h2 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; margin: 0; }
.doc__name { font: 600 1.15rem var(--serif); color: var(--navy); margin: 16px 0 0; }
.doc__spec { margin: 2px 0 0; font: 600 .78rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wood); }
.doc__q { margin: 20px 0; padding: 0 0 0 18px; border-left: 4px solid; border-image: var(--wave) 1; font: italic 400 1.18rem/1.5 var(--serif); color: var(--ink); }
.doc__q cite { display: block; margin-top: 8px; font: normal 600 .82rem var(--sans); color: var(--mute); }

/* ---------- gallery ---------- */
.gal { padding: clamp(48px, 8vw, 96px) 0; background: #fff; }
.gal__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; gap: 8px; }
@media (min-width: 900px) { .gal__grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.ph { position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--ice); aspect-ratio: 3 / 4; }
.ph--w { grid-column: span 2; aspect-ratio: 16 / 10; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.ph:hover img { transform: scale(1.04); }
.ph__tag { position: absolute; left: 8px; bottom: 8px; background: rgba(255,255,255,.92); color: var(--navy); font: 600 .74rem var(--sans); padding: 4px 10px; border-radius: 999px; }

/* ---------- visit ---------- */
.visit { padding: clamp(48px, 8vw, 96px) 0; background: var(--paper); }
.visit__grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .visit__grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.visit h2 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; margin: 0; }
.facts { margin: 20px 0 0; display: grid; gap: 10px; }
.facts div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #e7e0d4; }
.facts dt { font: 600 .74rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--wood); padding-top: 3px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts small { color: var(--mute); }
.facts a { color: var(--cobalt); font-weight: 600; }
.map { min-height: 340px; border-radius: 18px; overflow: hidden; border: 1px solid #e3eaf4; }
.map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* ---------- lightbox ---------- */
.lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; margin: 0; }
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: rgba(8,18,40,.92); }
.lb__img { max-width: 92vw; max-height: 74vh; width: auto; height: auto; border-radius: 12px; object-fit: contain; }
.lb__x { position: fixed; top: 12px; right: 12px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: var(--navy); font-size: 1.6rem; cursor: pointer; }
.lb__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--navy); font-size: 1.8rem; cursor: pointer; }
.lb__prev { left: 10px; } .lb__next { right: 10px; }
.lb__cap { position: fixed; bottom: 82px; left: 0; right: 0; text-align: center; color: #dbe7f7; margin: 0; padding: 0 16px; font-size: .9rem; }
.lb__go { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); }

/* kit header brand: the wave under the name */
.k-brand, .k-head__name { font-family: var(--serif); }

/* owner to-dos: only with ?edit */
.todo { display: block; margin: 18px 0 0; padding: 10px 14px; border: 1px dashed #d08a10; background: #fff4d6; color: #7a4600; border-radius: 8px; font-size: .9rem; }
.k-ready .todo { display: none; }