/* Family Dentist Ubud mock-up v2, 30 Oct 2026. Night-first: the hero is the evening; the signature is one day in Ubud scrolled past (sky, sun, clock). Linen / petrol / lamp, Gloock + Figtree. */
@font-face { font-family: "Gloock"; src: url("fonts/gloock.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.ttf") format("truetype"); font-weight: 300 900; font-display: swap; }
:root { --linen:#FCF8F2; --sand:#EFE6D8; --petrol:#1A5D74; --deep:#0E3442; --ink:#0A2630; --pink:#F4BEBB; --lamp:#F7C873; --soft:#46666F; --line:rgba(14,52,66,.15); --gut:clamp(1.1rem,5vw,5rem); --ease:cubic-bezier(.16,1,.3,1); }
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--linen); color:var(--deep); font:400 clamp(1.05rem,.9vw + .8rem,1.2rem)/1.6 "Figtree",system-ui,sans-serif; overflow-x:clip; padding-bottom:4.4rem; }
img { display:block; width:100%; height:auto; }
a { color:inherit; }
h1,h2,h3 { font-family:"Gloock",Georgia,serif; font-weight:400; line-height:1.03; margin:0; text-wrap:balance; }
h2 { font-size:clamp(2.2rem,5.2vw,4.4rem); }
figure { margin:0; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
:focus-visible { outline:3px solid var(--lamp); outline-offset:3px; border-radius:3px; }

.nav { position:absolute; inset:0 0 auto; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:1rem var(--gut); color:#fff; }
.brand { font:400 1.35rem/1 "Gloock",Georgia,serif; text-decoration:none; }
.nav-r { display:flex; align-items:center; gap:.6rem; }
.lang { display:flex; padding:3px; border-radius:99px; background:rgba(10,38,48,.4); backdrop-filter:blur(8px); }
.lang button { all:unset; cursor:pointer; min-width:2.6rem; min-height:2.6rem; display:grid; place-items:center; border-radius:99px; font-size:.85rem; font-weight:600; transition:background .3s,color .3s; }
.lang button:focus-visible { outline:3px solid var(--lamp); }
.lang button[aria-pressed="true"] { background:var(--lamp); color:var(--ink); }
.pill { display:inline-flex; align-items:center; min-height:2.9rem; padding:.4rem 1.2rem; border-radius:99px; background:rgba(10,38,48,.4); backdrop-filter:blur(8px); text-decoration:none; font-weight:600; font-size:.95rem; }
.btn { display:inline-flex; align-items:center; min-height:3.3rem; padding:.8rem 1.7rem; border-radius:99px; background:var(--lamp); color:var(--ink); text-decoration:none; font-weight:700; transition:transform .45s var(--ease),box-shadow .45s var(--ease); box-shadow:0 12px 40px -12px rgba(247,200,115,.7); }
.btn:hover { transform:translateY(-3px); box-shadow:0 18px 50px -12px rgba(247,200,115,.9); } .btn:active { transform:scale(.98); }

/* hero: the evening itself */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; background:var(--ink); overflow:hidden; }
.hero-bg, .hero-bg img { position:absolute; inset:0; width:100%; height:100%; }
.hero-bg img { object-fit:cover; object-position:62% 50%; animation:drift 24s ease-out both; }
@keyframes drift { from { transform:scale(1.07); } to { transform:scale(1); } }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,38,48,.86) 0%,rgba(10,38,48,.55) 42%,rgba(10,38,48,0) 70%),linear-gradient(0deg,rgba(10,38,48,.8) 0%,rgba(10,38,48,0) 40%); }
.hero-txt { position:relative; z-index:2; padding:6rem var(--gut) 1.6rem; max-width:50rem; }
.status { display:inline-flex; align-items:center; gap:.55rem; margin:0 0 1rem; font-weight:600; font-size:.98rem; }
.status i { width:.6rem; height:.6rem; border-radius:50%; background:var(--lamp); }
.status.on i { background:#58d79a; box-shadow:0 0 0 .3rem rgba(88,215,154,.22); }
h1 { font-size:clamp(3rem,8.4vw,7rem); line-height:1; }
h1 span { display:block; } h1 em { display:block; font-style:normal; color:var(--lamp); }
.lead { max-width:30rem; margin:1.1rem 0 1.5rem; color:rgba(255,255,255,.86); }
.hero-txt p:last-child { margin:0; }
.trust { position:relative; z-index:2; list-style:none; margin:0; padding:1.2rem var(--gut) 1.5rem; display:grid; grid-template-columns:repeat(4,auto); justify-content:space-between; gap:.8rem 2rem; border-top:1px solid rgba(255,255,255,.2); }
.trust b { display:block; font:400 clamp(1.7rem,3vw,2.5rem)/1.05 "Gloock",Georgia,serif; color:#fff; }
.trust span { font-size:.88rem; color:rgba(255,255,255,.78); }

/* open now: small live strip under the hero */
.now { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem clamp(1.5rem,4vw,4rem); padding:1.4rem var(--gut); background:var(--sand); }
.now-state { margin:0; display:flex; align-items:center; gap:.6rem; font:400 clamp(1.5rem,2.6vw,2.1rem)/1.1 "Gloock",Georgia,serif; }
.now-state i { flex:none; width:.75rem; height:.75rem; border-radius:50%; background:#c9a24a; }
.now.on .now-state i { background:#2fa86e; box-shadow:0 0 0 .32rem rgba(47,168,110,.2); animation:pulse 2.4s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 .5rem rgba(47,168,110,.08); } }
.now-sub { margin:.15rem 0 0 1.35rem; font-size:.95rem; color:var(--soft); }
.now-hours { list-style:none; margin:0; padding:0; display:flex; gap:clamp(1rem,3vw,2.5rem); font-variant-numeric:tabular-nums; color:var(--soft); }
.now-hours b { display:block; font-size:.85rem; font-weight:600; }
.now-hours li.live { color:var(--deep); font-weight:700; }
.now-cta { display:inline-flex; align-items:center; min-height:3rem; padding:.5rem 1.3rem; border-radius:99px; background:var(--deep); color:#fff; text-decoration:none; font-weight:700; transition:transform .45s var(--ease); }
.now-cta:hover { transform:translateY(-2px); } .now-cta:active { transform:scale(.98); }

/* treatments: uneven photo pair, numbered list */
section.care, section.team, section.ask, section.find { padding:clamp(4.5rem,9vw,8.5rem) var(--gut); max-width:92rem; margin:0 auto; }
.care { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2vw,2rem); }
.care-head { grid-column:1/9; margin-bottom:clamp(1rem,3vw,3rem); }
.ph { overflow:hidden; border-radius:.9rem; background:var(--sand); }
.ph img { height:100%; object-fit:cover; }
.ph.a { grid-column:1/8; aspect-ratio:7/6; } .ph.b { grid-column:8/13; aspect-ratio:1; align-self:end; border-radius:.9rem 45% .9rem .9rem / .9rem 40% .9rem .9rem; }
.treat { grid-column:1/-1; list-style:none; padding:0; margin:clamp(1.5rem,3vw,3rem) 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.2rem,2.5vw,2.5rem); }
.treat li { border-top:2px solid var(--deep); padding-top:.8rem; }
.treat span { color:var(--petrol); font-weight:700; font-size:.92rem; }
.treat h3 { font-size:clamp(1.6rem,2.4vw,2.2rem); margin:.3rem 0 .4rem; } .treat p { margin:0; color:var(--soft); }

.voice { background:var(--petrol); color:#fff; padding:clamp(5rem,10vw,9rem) var(--gut); }
.voice p { margin:0; } .big { font:400 clamp(2.1rem,5.4vw,5rem)/1.08 "Gloock",Georgia,serif; max-width:20ch; }
.med { font:400 clamp(1.5rem,2.8vw,2.4rem)/1.18 "Gloock",Georgia,serif; max-width:26ch; margin:clamp(3rem,6vw,5rem) 0 0 auto !important; }
.who { margin-top:.9rem !important; font-size:.95rem; color:rgba(255,255,255,.8); } .med + .who { max-width:26ch; margin-left:auto !important; }
.med { display:block; } @media (min-width:901px) { .med,.med + .who { width:26ch; } }

.team { display:grid; grid-template-columns:5fr 7fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.ph.c { aspect-ratio:1; border-radius:45% .9rem .9rem .9rem / 40% .9rem .9rem .9rem; }
.docs { list-style:none; padding:0; margin:2rem 0 0; font:400 clamp(1.4rem,2.4vw,2rem)/1.2 "Gloock",Georgia,serif; }
.docs li { padding:.9rem 0; border-top:1px solid var(--line); }

.ask { display:grid; grid-template-columns:5fr 7fr; gap:clamp(2rem,6vw,6rem); padding-top:0 !important; }
.ask h2 { font-size:clamp(2rem,3.6vw,3.2rem); }
details { border-top:1px solid var(--line); } details:last-child { border-bottom:1px solid var(--line); }
summary { cursor:pointer; list-style:none; padding:1.1rem 2.4rem 1.1rem 0; font-weight:600; position:relative; min-height:3rem; }
summary::-webkit-details-marker { display:none; }
summary::after { content:""; position:absolute; right:.4rem; top:1.5rem; width:.65rem; height:.65rem; border-right:2px solid var(--petrol); border-bottom:2px solid var(--petrol); transform:rotate(45deg); transition:transform .4s var(--ease); }
details[open] summary::after { transform:translateY(.2rem) rotate(225deg); }
details p { margin:0 0 1.2rem; color:var(--soft); }

.find { display:grid; grid-template-columns:7fr 5fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
section.find { max-width:none; background:var(--ink); color:#F6EFE5; padding-left:max(var(--gut),calc((100% - 82rem) / 2)); padding-right:max(var(--gut),calc((100% - 82rem) / 2)); }
.addr { font:400 clamp(1.5rem,2.8vw,2.3rem)/1.2 "Gloock",Georgia,serif; margin:1.6rem 0 .6rem; }
.acts { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:1.6rem; } .link { color:var(--lamp); }
.ph.d { aspect-ratio:4/5; }

.foot { padding:1.6rem var(--gut) 2rem; background:var(--ink); color:#A9BEC3; font-size:.88rem; } .mock { margin:0; max-width:44rem; }
.sticky { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.55rem 1rem calc(.55rem + env(safe-area-inset-bottom)); background:var(--ink); color:#fff; font-weight:600; font-size:.98rem; }
.sticky a { display:inline-flex; align-items:center; min-height:2.75rem; padding:.4rem 1.2rem; border-radius:99px; background:var(--lamp); color:var(--ink); text-decoration:none; font-weight:700; }
@media (min-width:901px) { .sticky { display:none; } body { padding-bottom:0; } }
@media (max-width:900px) {
  .nav .pill { display:none; }
  .hero { min-height:calc(100svh - 4.4rem); }
  .hero-bg img { object-position:62% 100%; height:50%; }
  .hero-bg { background:var(--ink); }
  .hero::after { background:linear-gradient(0deg,#0A2630 0%,#0A2630 50%,rgba(10,38,48,.5) 56%,rgba(10,38,48,0) 66%); }
  .hero-txt { padding-top:12rem; }
  .med,.med + .who { margin-left:0 !important; }
  .trust { grid-template-columns:repeat(4,1fr); gap:.5rem; padding-bottom:1.1rem; } .trust span { font-size:.76rem; display:block; line-height:1.25; }
  .care-head { grid-column:1/-1; } .ph.a { grid-column:1/-1; } .ph.b { grid-column:5/13; margin-top:-3.5rem; }
  .treat { grid-template-columns:1fr 1fr; }
  .team,.ask,.find { grid-template-columns:1fr; } .ph.c { max-width:26rem; }
  .ph.d { order:-1; max-width:26rem; }
  .now { grid-template-columns:1fr; gap:.8rem; } .now-cta { display:none; }
}
@media (max-width:520px) { .treat { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .hero-bg img { animation:none; } .btn { transition:none; } .now-state i { animation:none !important; } }