/* goldenratiodental.com. "Warm & elegant": ivory, deep navy and gold, with
   Cormorant Garamond headings and Inter text. The proportions come from the
   practice's name: the type scale steps by φ (1.618), spacing follows the
   Fibonacci numbers (8, 13, 21, 34, 55, 89), and the two-column sections split
   61.8 / 38.2. Token names follow services/checklists/engine/styles.css.
   Light only, so the brand colors read the same everywhere. */
:root{
  --bg:#FBF8F2; --surface:#FFFFFF; --surface-2:#F4EEE3; --surface-3:#EADFCB;
  --border:#E6DCCB; --border-strong:#C9B99C;
  --text:#1B2433; --text-muted:#566172; --text-faint:#8A93A1;
  --navy:#14243B; --navy-2:#1E3352; --navy-3:#2B4468;
  --gold:#A8822F;          /* lines and ornaments */
  --gold-text:#85651F;     /* gold text on ivory: 5.2:1 */
  --gold-bright:#C9A55C;   /* the logo's gold; gold on navy */
  --gold-soft:#F3E8CC;
  --accent:var(--navy); --accent-strong:var(--navy-2); --accent-contrast:#FFFFFF; --accent-soft:var(--gold-soft);
  --focus:#2F6FDB;
  --danger:#B3261E; --success:#1E7B45;
  --ph:#FFF1B8; --ph-text:#6B4E00;

  --s1:8px; --s2:13px; --s3:21px; --s4:34px; --s5:55px; --s6:89px; --s7:144px;
  --radius:13px; --radius-lg:21px; --pill:999px;
  --shadow:0 1px 2px rgba(20,36,59,.05), 0 13px 34px rgba(20,36,59,.08);
  --shadow-lg:0 2px 4px rgba(20,36,59,.06), 0 34px 55px rgba(20,36,59,.14);

  --display:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --step-0:17px;
  --step-1:clamp(21px,2.2vw,27.5px);   /* 17 × φ */
  --step-2:clamp(32px,4vw,44.5px);     /* 17 × φ² */
  --step-3:clamp(42px,6.4vw,72px);     /* 17 × φ³ */
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:110px}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:var(--step-0); line-height:1.618; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{max-width:100%; height:auto; display:block}
button,input,textarea,select{font:inherit; color:inherit}
a{color:var(--navy-2); text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}
h1,h2,h3{font-family:var(--display); font-weight:600; color:var(--navy); line-height:1.15; letter-spacing:-.005em; margin:0}
p{margin:0}
.wrap{max-width:1240px; margin:0 auto; padding:0 16px}
@media (min-width:760px){ .wrap{padding:0 var(--s4)} }
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:100; background:#fff; padding:8px 12px; border-radius:6px}
[hidden]{display:none !important}
.icon{width:20px; height:20px; flex:none}
.center{text-align:center}
.muted{color:var(--text-muted)}

/* ---- placeholders (see content.json) */
mark.ph{background:var(--ph); color:var(--ph-text); border-radius:3px; padding:0 .15em; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.ph-block{outline:2px dashed #E3C25A; outline-offset:6px; border-radius:4px}
.preview-banner{background:var(--ph); color:var(--ph-text); font-size:14px; text-align:center; padding:6px 16px}

/* ---- buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 26px; border-radius:var(--pill); border:1.5px solid transparent; font-family:var(--body); font-size:15.5px; font-weight:600; letter-spacing:.01em; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn .icon{width:18px; height:18px}
.btn-lg{min-height:55px; padding:14px 34px; font-size:16.5px}
.btn-block{width:100%}
.btn-primary{background:var(--navy); color:#fff; box-shadow:0 8px 21px rgba(20,36,59,.22)}
.btn-primary:hover{background:var(--navy-2)}
.btn-gold{background:var(--gold-bright); color:var(--navy); box-shadow:0 8px 21px rgba(168,130,47,.25)}
.btn-gold:hover{background:#DDBD74}
.btn-outline{background:transparent; color:var(--navy); border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--navy); background:#fff}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.06)}
.btn[disabled]{opacity:.55; pointer-events:none}
.link-arrow{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--navy); text-decoration:none; border-bottom:1.5px solid var(--gold)}
.link-arrow .icon{width:16px; height:16px; transition:transform .2s}
.link-arrow:hover .icon{transform:translateX(3px)}

/* ---- section headings */
.eyebrow{font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-text); display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s2)}
.eyebrow::before{content:""; width:34px; height:1.5px; background:var(--gold); flex:none}
.section-head h2{font-size:var(--step-2)}
.section-head .lede{margin-top:var(--s3); color:var(--text-muted); font-size:18px; max-width:620px}
.section-head.center{text-align:center; margin:0 auto var(--s5); max-width:720px}
.section-head.center .eyebrow{justify-content:center}
.section-head.center .eyebrow::after{content:""; width:34px; height:1.5px; background:var(--gold)}
.section-head.center .lede{margin-left:auto; margin-right:auto}

/* ---- logo: the golden rectangle mark + the wordmark */
.logo{display:inline-flex; align-items:center; gap:var(--s2); text-decoration:none; color:var(--navy)}
.logo-mark{height:58px; width:auto; display:block}
.logo-text{display:flex; flex-direction:column; line-height:1}
.logo-name{font-family:var(--display); font-weight:600; font-size:25px; letter-spacing:.01em}
.logo-sub{font-family:var(--body); font-weight:600; font-size:10.5px; letter-spacing:.42em; text-transform:uppercase; color:var(--gold-text); margin-top:5px}
.logo-light{color:#fff}
.logo-light .logo-sub{color:var(--gold-bright)}


/* ---- header */
.site-header{position:sticky; top:0; z-index:30; background:rgba(251,248,242,.92); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex; align-items:center; gap:var(--s3); min-height:89px}
.nav{display:flex; align-items:center; gap:2px; margin-left:auto}
.nav a{color:var(--text); text-decoration:none; font-size:15px; font-weight:500; padding:10px 13px; border-radius:var(--pill)}
.nav a:hover{background:var(--surface-2); color:var(--navy)}
.nav .lang{display:inline-flex; align-items:center; gap:6px; color:var(--gold-text); font-weight:600; margin-left:var(--s1)}
.nav .lang .icon{width:17px; height:17px}
.header-actions{display:flex; align-items:center; gap:var(--s2)}
.header-contact{display:inline-flex; align-items:center; gap:8px; color:var(--navy); font-weight:600; font-size:15px; text-decoration:none; white-space:nowrap}
.header-contact .icon{width:18px; height:18px; color:var(--gold)}
.menu-toggle{display:none; background:none; border:0; padding:8px; cursor:pointer; color:var(--navy); border-radius:8px}
.menu-toggle .icon{width:26px; height:26px}
@media (max-width:1180px){ .header-contact{display:none} }
@media (max-width:960px){
  .site-header .wrap{min-height:72px}
  .menu-toggle{display:inline-flex}
  .header-actions{margin-left:auto}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; background:var(--bg); padding:var(--s1) 16px var(--s3); border-bottom:1px solid var(--border); box-shadow:0 21px 34px rgba(20,36,59,.08)}
  .nav.open{display:flex}
  .nav a{padding:14px 13px; font-size:17px}
  .nav .lang{margin-left:0}
}
@media (max-width:480px){
  .site-header .btn{display:none}
  .logo-mark{height:48px}
  .logo-name{font-size:22px}
}

/* ---- hero: copy on the 61.8%, the arch on the 38.2% */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(60% 70% at 85% 30%, rgba(201,165,92,.18), transparent 70%),
  radial-gradient(40% 50% at 0% 100%, rgba(212,176,98,.10), transparent 70%), var(--bg)}
.hero-grid{display:grid; grid-template-columns:1.618fr 1fr; gap:var(--s5); align-items:center; padding-top:var(--s6); padding-bottom:var(--s6)}
.hero h1{font-size:var(--step-3); font-weight:500; line-height:1.05; letter-spacing:-.015em}
.hero .lede{margin-top:var(--s3); font-size:19px; color:var(--text-muted); max-width:560px}
.hero .buttons{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4)}
.trust{list-style:none; margin:var(--s4) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); color:var(--text-muted); font-size:15px}
.trust li{display:flex; align-items:center; gap:8px}
.trust .icon{width:18px; height:18px; color:var(--gold); stroke-width:2.2}
.hero-art{position:relative; justify-self:center; width:100%; max-width:400px}
.arch{position:relative; aspect-ratio:1/1.618; border-radius:var(--pill) var(--pill) var(--radius-lg) var(--radius-lg); background:linear-gradient(160deg, var(--navy-3) 0%, var(--navy) 62%); box-shadow:var(--shadow-lg); overflow:hidden; display:flex; align-items:center; justify-content:center}
.arch::after{content:""; position:absolute; inset:10px; border-radius:inherit; border:1px solid rgba(212,176,98,.35); pointer-events:none}
.arch-spiral{position:absolute; width:78%; opacity:.9}
.arch-mark{position:relative; width:44%; height:auto; filter:drop-shadow(0 8px 21px rgba(0,0,0,.35))}
.arch-spiral svg{width:100%; height:auto; overflow:visible}
.arch-spiral{color:var(--gold-bright)}
.arch-spiral .m-spiral.drawing{transition:stroke-dashoffset 2.6s .3s cubic-bezier(.6,0,.2,1)}
.float-card{position:absolute; display:flex; align-items:center; gap:var(--s2); background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:var(--s2) var(--s3) var(--s2) var(--s2); font-size:14px; line-height:1.35; max-width:260px}
.float-card > .icon{width:38px; height:38px; padding:9px; border-radius:50%; background:var(--gold-soft); color:var(--gold-text)}
.float-card strong{display:block; color:var(--navy); font-size:15px}
.float-card span{color:var(--text-muted)}
.card-a{right:-21px; top:11%}
.card-b{left:-34px; bottom:13%}
.float-card.is-open > .icon{background:#DDF3E5; color:var(--success)}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; padding-top:var(--s5); padding-bottom:var(--s5)}
  .hero-art{max-width:320px; margin-top:var(--s3)}
  .card-a{right:-13px}
  .card-b{left:-13px}
}
@media (max-width:480px){
  .hero .buttons .btn{width:100%}
  .hero-art{max-width:230px}
  .float-card{max-width:220px; font-size:13px}
}

/* ---- services */
.services{padding:var(--s6) 0; background:var(--surface)}
.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
@media (max-width:960px){ .service-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .service-grid{grid-template-columns:1fr} }
.service{position:relative; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s4); transition:transform .25s, box-shadow .25s, border-color .25s}
.service:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--border-strong)}
.service-icon{display:inline-flex; width:55px; height:55px; border-radius:50%; align-items:center; justify-content:center; background:var(--navy); color:var(--gold-bright); margin-bottom:var(--s3)}
.service-icon .icon{width:26px; height:26px}
.service h3{font-size:var(--step-1)}
.service p{margin-top:var(--s1); color:var(--text-muted); font-size:16px}

/* ---- the Golden Ratio approach */
.approach{padding:var(--s6) 0}
.approach-grid{display:grid; grid-template-columns:1fr 1.618fr; gap:var(--s6); align-items:center}
.approach-art{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s4); box-shadow:var(--shadow)}
.approach-art svg{width:100%; height:auto; overflow:visible}
.approach-art{color:var(--gold)}
.approach-art .m-grid{stroke:var(--navy)}
.approach-art .ratio{position:absolute; right:var(--s3); bottom:var(--s2); font-family:var(--display); font-style:italic; font-size:21px; color:var(--gold-text)}
.points{list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:var(--s3)}
.points li{display:grid; grid-template-columns:89px 1fr; gap:var(--s3); align-items:baseline; padding-top:var(--s3); border-top:1px solid var(--border)}
.points .n{font-family:var(--display); font-size:34px; font-weight:500; color:var(--gold-text); line-height:1}
.points h3{font-size:var(--step-1)}
.points p{color:var(--text-muted); margin-top:4px}
@media (max-width:900px){ .approach-grid{grid-template-columns:1fr; gap:var(--s5)} .approach-art{max-width:480px} }
@media (max-width:480px){ .points li{grid-template-columns:55px 1fr; gap:var(--s2)} .points .n{font-size:27px} }

/* ---- doctor */
.doctor{padding:var(--s6) 0; background:var(--surface-2)}
.doctor-grid{display:grid; grid-template-columns:1fr 1.618fr; gap:var(--s6); align-items:center}
.portrait{aspect-ratio:1/1.236; border-radius:var(--pill) var(--pill) var(--radius-lg) var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); max-width:420px; width:100%}
.portrait img{width:100%; height:100%; object-fit:cover}
.portrait-empty{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s2); background:linear-gradient(160deg, var(--surface-3), #E1D3B8)}
.monogram{font-family:var(--display); font-size:89px; font-weight:500; color:var(--navy); line-height:1; letter-spacing:.04em}
.portrait-empty .caption{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); font-weight:600}
.bio{margin-top:var(--s3); font-size:18px; color:var(--text)}
.facts{list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:var(--s2)}
.facts li{display:flex; align-items:flex-start; gap:var(--s2)}
.facts .icon{color:var(--gold); margin-top:3px; stroke-width:2.2}
@media (max-width:900px){ .doctor-grid{grid-template-columns:1fr; gap:var(--s5)} .portrait{max-width:320px} }

/* ---- grand-opening specials */
.specials{padding:var(--s6) 0}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); counter-reset:step}
.steps li{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s4)}
.step-n{display:inline-flex; width:44px; height:44px; border-radius:50%; align-items:center; justify-content:center; border:1.5px solid var(--gold); color:var(--gold-text); font-family:var(--display); font-size:22px; font-weight:600; margin-bottom:var(--s3)}
.steps h3{font-size:var(--step-1)}
.steps p{color:var(--text-muted); margin-top:var(--s1); font-size:16px}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }
.questions{margin-top:var(--s4); display:grid; grid-template-columns:1.618fr 1fr; gap:var(--s4); align-items:center; background:var(--navy); color:#E9EDF3; border-radius:var(--radius-lg); padding:var(--s5)}
.questions h3{color:#fff; font-size:var(--step-2)}
.questions p{margin-top:var(--s2); color:#C3CCD9}
.questions-actions{display:flex; justify-content:flex-end}
@media (max-width:860px){ .questions{grid-template-columns:1fr; padding:var(--s4)} .questions-actions{justify-content:flex-start} .questions .btn{width:100%; white-space:normal} }

/* ---- reviews */
.reviews{padding:var(--s6) 0; background:var(--surface)}
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
@media (max-width:860px){ .review-grid{grid-template-columns:1fr} }
.review{margin:0; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3)}
.stars{display:flex; gap:3px; color:var(--gold)}
.stars .icon{width:18px; height:18px; fill:currentColor; stroke:none}
.review blockquote{margin:0; font-family:var(--display); font-size:22px; line-height:1.4; color:var(--navy); flex:1}
.review figcaption{font-weight:600; font-size:15px; color:var(--text-muted)}
.reviews .center{margin-top:var(--s4)}

/* ---- visit */
.visit{padding:var(--s6) 0}
.visit-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:stretch}
.visit-cols{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); margin-top:var(--s4)}
.visit h3{display:flex; align-items:center; gap:var(--s1); font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); margin-bottom:var(--s2)}
.visit h3 .icon{width:18px; height:18px}
.visit-cols p + p{margin-top:var(--s2)}
.visit-cols .full{grid-column:1/-1}
.visit-cols a{font-weight:600; color:var(--navy)}
.visit .big{font-family:var(--display); font-size:var(--step-1); color:var(--navy); font-weight:600}
.opening{display:flex; align-items:center; gap:var(--s1); font-weight:600}
.opening .icon{color:var(--gold)}
.map{min-height:360px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border)}
.map iframe{width:100%; height:100%; min-height:360px; border:0; display:block}
.map-empty{width:100%; height:100%; min-height:360px; display:flex; align-items:center; justify-content:center; background:
  linear-gradient(90deg, rgba(20,36,59,.06) 1px, transparent 1px) 0 0/55px 55px,
  linear-gradient(rgba(20,36,59,.06) 1px, transparent 1px) 0 0/55px 55px,
  linear-gradient(35deg, transparent 46%, rgba(212,176,98,.35) 46%, rgba(212,176,98,.35) 50%, transparent 50%),
  linear-gradient(-60deg, transparent 60%, rgba(255,255,255,.9) 60%, rgba(255,255,255,.9) 64%, transparent 64%),
  var(--surface-2)}
.map-pin{width:55px; height:55px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--navy); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg)}
.map-pin .icon{transform:rotate(45deg); color:var(--gold-bright); width:24px; height:24px}
@media (max-width:900px){ .visit-grid{grid-template-columns:1fr} }
@media (max-width:520px){ .visit-cols{grid-template-columns:1fr} }

/* ---- hours tables (visit, footer, booking) */
.hours{border-collapse:collapse; width:100%; font-size:15.5px}
.hours th{text-align:left; font-weight:500; padding:5px 13px 5px 0; white-space:nowrap}
.hours td{text-align:right; color:var(--text-muted); padding:5px 0; white-space:nowrap}
.hours tr.today th,.hours tr.today td{color:var(--navy); font-weight:700}
.hours tr.today th::after{content:" •"; color:var(--gold)}

/* ---- call to action */
.cta{padding:0 0 var(--s6)}
.cta-inner{position:relative; overflow:hidden; background:radial-gradient(80% 120% at 100% 0%, var(--navy-3), var(--navy) 60%); color:#fff; border-radius:var(--radius-lg); padding:var(--s6) var(--s5); text-align:center}
.cta-mark{position:absolute; right:5%; top:50%; height:130%; width:auto; transform:translateY(-50%) rotate(-8deg); opacity:.09; pointer-events:none}
.cta h2{position:relative; color:#fff; font-size:var(--step-2); font-weight:500; max-width:640px; margin:0 auto}
.cta p{position:relative; color:#C3CCD9; margin:var(--s3) auto 0; max-width:520px; font-size:18px}
.cta .buttons{position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2); margin-top:var(--s4)}
.cta mark.ph{background:#4A4320; color:#FFE9A3}
@media (max-width:600px){ .cta-inner{padding:var(--s5) var(--s3)} .cta .btn{width:100%} .cta-mark{right:-20%} }

/* ---- footer */
.footer{background:var(--navy); color:#C3CCD9; font-size:15.5px}
.footer .cols{display:grid; grid-template-columns:1.618fr 1fr 1fr 1.2fr; gap:var(--s4); padding-top:var(--s6); padding-bottom:var(--s5)}
.footer h2{font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:var(--s2)}
.footer a{color:#fff; text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer p + p{margin-top:var(--s2)}
.footer-brand p{margin-top:var(--s3); max-width:300px}
.footer .links{display:grid; gap:var(--s1)}
.footer .hours th{color:#fff}
.footer .hours td{color:#C3CCD9}
.footer .hours tr.today th,.footer .hours tr.today td{color:var(--gold-bright)}
.footer mark.ph{background:#4A4320; color:#FFE9A3}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); font-size:14px}
.footer-bottom .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2); padding-top:var(--s3); padding-bottom:var(--s3)}
.footer-bottom .legal{display:flex; flex-wrap:wrap; gap:var(--s3)}
.footer-bottom a{color:#C3CCD9}
@media (max-width:960px){ .footer .cols{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footer .cols{grid-template-columns:1fr} }

/* ---- phone bar: Call / Book / Directions */
.mobile-bar{display:none}
@media (max-width:760px){
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .mobile-bar{display:grid; grid-template-columns:1fr 1.618fr 1fr; gap:var(--s1); position:fixed; left:0; right:0; bottom:0; z-index:40; padding:var(--s1) var(--s1) calc(var(--s1) + env(safe-area-inset-bottom)); background:rgba(251,248,242,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--border)}
  .mobile-bar a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:52px; border-radius:var(--radius); color:var(--navy); text-decoration:none; font-size:12.5px; font-weight:600}
  .mobile-bar a .icon{width:20px; height:20px}
  .mobile-bar a.primary{flex-direction:row; gap:8px; background:var(--navy); color:#fff; font-size:15px}
}

/* ---- booking page */
.page-hero{padding:var(--s6) 0 var(--s5); background:radial-gradient(50% 90% at 90% 0%, rgba(212,176,98,.18), transparent 70%), var(--bg)}
.page-hero h1{font-size:var(--step-3); font-weight:500}
.page-hero .lede{margin-top:var(--s3); font-size:19px; color:var(--text-muted); max-width:640px}
.booking{padding:0 0 var(--s6)}
.booking-grid{display:grid; grid-template-columns:1.618fr 1fr; gap:var(--s4); align-items:start}
@media (max-width:900px){ .booking-grid{grid-template-columns:1fr} }
.form-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:var(--s5)}
@media (max-width:600px){ .form-card{padding:var(--s4) var(--s3)} }
.privacy{display:flex; gap:var(--s2); align-items:flex-start; background:var(--gold-soft); color:#5E4A1A; border-radius:var(--radius); padding:var(--s2) var(--s3); font-size:15px; margin-bottom:var(--s4)}
.privacy .icon{color:var(--gold-text); margin-top:2px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
.form-grid .full{grid-column:1/-1}
@media (max-width:600px){ .form-grid{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:var(--s1); min-width:0; margin:0; padding:0; border:0}
.field label,.field legend{font-weight:600; font-size:15.5px; color:var(--navy); padding:0}
.req{color:var(--danger); margin-left:3px}
.opt{font-weight:400; color:var(--text-muted)}
.field input:not([type="radio"]),.field select,.field textarea{width:100%; min-height:52px; padding:13px 16px; border:1.5px solid var(--border-strong); border-radius:var(--radius); background:#fff; font-size:16.5px; transition:border-color .2s, box-shadow .2s}
.field textarea{resize:vertical; min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 4px rgba(47,111,219,.18)}
.field [aria-invalid="true"]{border-color:var(--danger) !important}
.choices{display:flex; flex-wrap:wrap; gap:var(--s1); margin-top:4px}
.choices label{position:relative; font-weight:500; color:var(--text)}
.choices input{position:absolute; opacity:0; width:1px; height:1px}
.choices span{display:inline-flex; align-items:center; min-height:46px; padding:10px 21px; border:1.5px solid var(--border-strong); border-radius:var(--pill); background:#fff; cursor:pointer; transition:background .2s, border-color .2s, color .2s}
.choices input:checked + span{background:var(--navy); border-color:var(--navy); color:#fff}
.choices input:focus-visible + span{outline:3px solid var(--focus); outline-offset:2px}
.choice[aria-invalid="true"] span{border-color:var(--danger)}
.consent{display:flex; gap:var(--s2); align-items:flex-start; background:var(--surface-2); border-radius:var(--radius); padding:var(--s2) var(--s3); font-size:15.5px; cursor:pointer}
.consent input{width:22px; height:22px; margin:1px 0 0; flex:none; accent-color:var(--navy)}
.field-error{font-size:14px; color:var(--danger)}
.field-error:empty{display:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
#contact-form .btn-block{margin-top:var(--s4)}
.form-status{margin-top:var(--s3); padding:var(--s2) var(--s3); border-radius:var(--radius); font-size:15.5px}
.form-status:empty{display:none}
.form-status.ok{background:#E3F4E9; color:var(--success); border:1px solid #A8D9B9}
.form-status.error{background:#FBE9E7; color:var(--danger); border:1px solid #EBB4AE}
.booking-side{display:grid; gap:var(--s3)}
.side-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s4)}
.side-card h2{display:flex; align-items:center; gap:var(--s1); font-size:var(--step-1); margin-bottom:var(--s2)}
.side-card h3{font-family:var(--body); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); margin:var(--s3) 0 var(--s1)}
.side-card p{margin-top:var(--s1)}
.side-card p a,.side-card .addr{display:flex; align-items:flex-start; gap:var(--s1); color:var(--navy); text-decoration:none; font-weight:500}
.side-card .icon{color:var(--gold); margin-top:2px}
.side-card.dark{background:var(--navy); border-color:var(--navy); color:#C3CCD9}
.side-card.dark h2{color:#fff}
.side-card.dark h2 .icon{color:var(--gold-bright)}
.side-card.dark .btn{margin-top:var(--s3); white-space:normal}
.side-card .addr a{color:var(--navy)}
.side-card .link-arrow{margin-top:var(--s1)}

/* ---- 404 */
.not-found{padding:var(--s6) 0; text-align:center}
.nf-mark{height:144px; width:auto; margin:0 auto var(--s4)}
.not-found h1{font-size:var(--step-2)}
.not-found .lede{margin-top:var(--s2); color:var(--text-muted)}
.not-found .buttons{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2); margin:var(--s4) 0}

/* Scroll-in effect. Off for people who ask for less motion, and when
   JavaScript doesn't run. */
.js .reveal:not(.in){opacity:0; transform:translateY(21px)}
.reveal{transition:opacity .7s ease, transform .7s ease}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .js .reveal:not(.in){opacity:1; transform:none}
}