/*
  Vale Orthodontics and Cosmetic Dentistry (H9)
  Harmony: COMPLEMENTARY. The base is a deep violet-black (hue 260deg) and the single accent is champagne gold
  (hue 40deg), directly across the wheel. The photo shoot (Filip Rankovic Grobgaard, Copenhagen) is shot in a dark
  clinic with black uniforms and warm skin, so the page is dark by design and the champagne picks up the warmth
  of the faces. Dark violet reads premium and calm; champagne reads precise and celebratory, which is what a
  finished smile is. Ivory is the paper for the one light object on the page: the written estimate.
  60%  --ink       #171320  page background; --ink2 #221C2C raised surfaces; --plum #3A2A4A hairlines and tints
  30%  --ivory     #F2ECE2  headings and body text on dark; the estimate card background
       --mauve     #A899B5  secondary text on dark; --plumtext #5C4A6E secondary text on ivory
  10%  --champagne #D6B372  buttons, markers, the timeline
  Contrast (WCAG): ivory on ink 15.53, ivory on ink2 14.07, mauve on ink 6.86, mauve on ink2 6.21,
  champagne on ink 9.17, champagne on ink2 8.30, champagne on plum 6.55, ink on champagne 9.17 (buttons),
  ink on ivory 15.53, plumtext on ivory 6.72, ivory on plum 11.10.
  Shapes: all square; a 1px champagne hairline is the only frame. Buttons are rectangles.
*/
:root {
  --ink: #171320; --ink2: #221C2C; --plum: #3A2A4A; --ivory: #F2ECE2; --mauve: #A899B5; --plumtext: #5C4A6E; --champagne: #D6B372; --champ-light: #E7CF9C;
  --serif: "Bodoni Moda", "Didot", Georgia, serif; --sans: "Outfit", system-ui, sans-serif;
  --pad: clamp(1.1rem, 5vw, 5rem); --max: 1360px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--ink); color: var(--ivory); font: 300 1.0625rem/1.65 var(--sans); overflow-x: hidden; font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(3rem, 7vw, 6.4rem); font-variation-settings: "opsz" 96; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
p { margin: 0; }
p + p { margin-top: .9em; }
.muted { color: var(--mauve); }
.lede { font-size: 1.15rem; max-width: 32em; color: var(--mauve); font-weight: 300; }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide { display: none !important; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--champagne); color: var(--ink); padding: .6rem 1rem; z-index: 60; }
.skip:focus { top: 1rem; }
.wrap { width: min(100% - 2 * var(--pad), var(--max)); margin-inline: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .8rem 1.7rem; font: 500 .95rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--champ { background: var(--champagne); color: var(--ink); }
.btn--champ:hover { background: var(--champ-light); }
.btn--line { border-color: var(--mauve); color: var(--ivory); }
.btn--line:hover { border-color: var(--ivory); }
.btn--ink { background: var(--ink); color: var(--ivory); }
.btn--ink:hover { background: var(--plum); }
.btn--wide { width: 100%; }
.link { color: var(--champagne); text-decoration: none; border-bottom: 1px solid currentColor; font-weight: 400; }
.link:hover { color: var(--champ-light); }

/* Header */
.top { position: sticky; top: 0; z-index: 30; background: rgba(23, 19, 32, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--plum); }
.top__in { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; }
.logo { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; font: 400 1.6rem/1 var(--serif); margin-right: auto; }
.logo small { font: 400 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mauve); }
.nav { display: flex; gap: clamp(1rem, 2.6vw, 2.4rem); font-size: .95rem; font-weight: 400; }
.nav a { text-decoration: none; padding: .4rem 0; border-bottom: 1px solid transparent; color: var(--mauve); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ivory); border-bottom-color: var(--champagne); }
.top .btn { min-height: 44px; padding-inline: 1.2rem; font-size: .85rem; }
.burger { display: none; min-height: 44px; padding: .5rem .95rem; border: 1px solid var(--mauve); background: transparent; font: 500 .85rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ivory); cursor: pointer; }

/* Hero */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: end; padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(1.5rem, 3vw, 3rem); }
.hero__copy { display: grid; gap: 1.6rem; padding-bottom: clamp(1rem, 3vw, 3rem); }
.hero h1 { max-width: 8em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__media { position: relative; padding: 14px; border: 1px solid var(--champagne); }
.hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero__cap { position: absolute; left: 14px; right: 14px; bottom: 14px; background: linear-gradient(to top, rgba(23, 19, 32, .92), rgba(23, 19, 32, 0)); padding: 3rem 1.2rem 1rem; font-size: .9rem; color: var(--ivory); }

/* Journey strip on home */
.strip { border-top: 1px solid var(--plum); border-bottom: 1px solid var(--plum); padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.strip__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stage { padding: .4rem 1.4rem .4rem 0; display: grid; gap: .3rem; position: relative; }
.stage + .stage { padding-left: 1.4rem; border-left: 1px solid var(--plum); }
.stage__t { font: 400 1.5rem/1 var(--serif); color: var(--champagne); }
.stage b { font-weight: 500; font-size: 1.05rem; }
.stage span { color: var(--mauve); font-size: .92rem; }

/* Treatments on home: three editorial rows */
.rows { padding: clamp(3rem, 7vw, 6rem) 0; display: grid; gap: clamp(2rem, 5vw, 4rem); }
.rows__head { display: grid; gap: .8rem; max-width: 30em; }
.trow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(1.2rem, 3vw, 3rem); align-items: center; padding-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--plum); }
.trow img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.trow:nth-child(odd) img { order: 3; }
.trow__body { display: grid; gap: .8rem; }
.trow__body p { color: var(--mauve); }
.trow__facts { display: grid; gap: .6rem; align-self: start; }
.fact { display: grid; gap: .1rem; border-left: 1px solid var(--champagne); padding-left: 1rem; }
.fact b { font: 400 1.6rem/1 var(--serif); color: var(--champagne); }
.fact span { color: var(--mauve); font-size: .9rem; }

/* Doctors */
.docs { background: var(--ink2); padding: clamp(3rem, 7vw, 6rem) 0; }
.docs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); margin-top: 2.5rem; }
.doc { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: end; }
.doc img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.doc__body { display: grid; gap: .6rem; padding-bottom: .3rem; }
.doc__role { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--champagne); }
.doc__body p { color: var(--mauve); font-size: .97rem; }

/* Quote band */
.quote { padding: clamp(3rem, 7vw, 6rem) 0; text-align: left; }
.quote blockquote { margin: 0; font: italic 400 clamp(1.6rem, 3.2vw, 2.6rem)/1.25 var(--serif); max-width: 22em; }
.quote figcaption { margin-top: 1.2rem; color: var(--mauve); font-size: .95rem; }

/* Practical */
.practical { border-top: 1px solid var(--plum); padding: clamp(2.5rem, 6vw, 5rem) 0; }
.practical__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
.practical h2 { font-size: 1.7rem; }
.hours { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--plum); font-size: .95rem; }
.hours b { font-weight: 400; color: var(--champ-light); }

.foot { border-top: 1px solid var(--plum); padding: 2rem 0; }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .9rem; color: var(--mauve); }

/* Page head */
.page-head { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 4vw, 3rem); display: grid; gap: 1rem; }
.page-head > * { max-width: 32em; }
.page-head h1 { max-width: 9em; }

/* Treatments page */
.tsec { padding: clamp(2rem, 4vw, 3.5rem) 0; border-top: 1px solid var(--plum); display: grid; grid-template-columns: .8fr 1.6fr; gap: clamp(1.2rem, 4vw, 4rem); }
.tsec > div:first-child { display: grid; gap: 1rem; align-content: start; }
.tsec > div:first-child p { color: var(--mauve); max-width: 22em; }
.tsec img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; max-width: 360px; }
.titem { display: grid; grid-template-columns: 1.1fr 1.7fr 200px; gap: 1.2rem; padding: 1.2rem 0; border-top: 1px solid var(--plum); align-items: baseline; }
.titem:first-child { border-top: 0; padding-top: 0; }
.titem h3 { font-size: 1.5rem; }
.titem p { color: var(--mauve); font-size: .95rem; }
.titem__meta { text-align: right; display: grid; gap: .1rem; font-size: .9rem; }
.titem__meta b { font-weight: 400; color: var(--champ-light); font-size: 1rem; }
.titem__meta span { color: var(--mauve); }
.tsec:last-of-type { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* Journey page */
.journey { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding-bottom: clamp(3rem, 6vw, 5rem); }
.controls { display: grid; gap: 1.6rem; }
.controls fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .7rem; }
.controls legend { font: 400 1.35rem/1.1 var(--serif); margin-bottom: .5rem; }
.opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opts label { display: inline-flex; align-items: center; min-height: 46px; padding: .6rem 1.05rem; border: 1px solid var(--plum); font-size: .95rem; cursor: pointer; color: var(--ivory); transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.opts label:hover { border-color: var(--mauve); }
.opts input:checked + label { background: var(--champagne); border-color: var(--champagne); color: var(--ink); font-weight: 500; }
.opts input:focus-visible + label { outline: 2px solid var(--champagne); outline-offset: 3px; }
.timeline { display: grid; gap: 0; margin-top: .5rem; }
.tl { display: grid; grid-template-columns: 110px 1fr; gap: 1.2rem; padding: 1.1rem 0; border-top: 1px solid var(--plum); position: relative; }
.tl::before { content: ""; position: absolute; left: 96px; top: 1.45rem; width: 9px; height: 9px; background: var(--champagne); transform: rotate(45deg); }
.tl__when { font: 400 1.1rem/1.3 var(--serif); color: var(--champagne); }
.tl__body { display: grid; gap: .25rem; }
.tl__body b { font-weight: 500; font-size: 1.05rem; }
.tl__body span { color: var(--mauve); font-size: .95rem; }
.tl--treat .tl__body b::after { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--champagne), var(--plum)); margin-top: .6rem; width: var(--bar, 50%); transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.estimate { position: sticky; top: 100px; background: var(--ivory); color: var(--ink); padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: 1rem; }
.estimate h2 { font-size: 1.6rem; }
.estimate__tag { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--plumtext); }
.estimate__big { font: 400 clamp(2.4rem, 4.5vw, 3.6rem)/1 var(--serif); letter-spacing: -.01em; }
.estimate__rows { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; border-top: 1px solid rgba(23, 19, 32, .15); padding-top: 1rem; }
.estimate__rows li { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.estimate__rows li span:last-child { font-weight: 500; text-align: right; }
.estimate__monthly { background: var(--ink); color: var(--ivory); padding: 1rem 1.1rem; display: grid; gap: .2rem; }
.estimate__monthly small { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--champagne); }
.estimate__monthly b { font: 400 1.9rem/1 var(--serif); }
.estimate__monthly span { color: var(--mauve); font-size: .88rem; }
.estimate__note { font-size: .82rem; color: var(--plumtext); line-height: 1.5; }
.estimate .btn { justify-self: stretch; }

/* Consultation page */
.consult { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding-bottom: clamp(3rem, 6vw, 5rem); }
.form { display: grid; gap: 1.1rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field label, .field > span { font-size: .9rem; font-weight: 400; color: var(--mauve); }
.field input, .field select, .field textarea { font: 300 1rem/1.4 var(--sans); color: var(--ivory); padding: .8rem .9rem; border: 1px solid var(--plum); background: var(--ink2); width: 100%; min-height: 50px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--champagne); outline-offset: 1px; border-color: var(--champagne); }
.field select option { color: var(--ivory); background: var(--ink2); }
.field small { color: var(--mauve); font-size: .85rem; }
.note { font-size: .88rem; color: var(--mauve); }
.success { display: grid; gap: .8rem; background: var(--ink2); border: 1px solid var(--champagne); padding: 2rem; }
.success[hidden] { display: none; }
.success h2 { font-size: 2rem; }
.aside { display: grid; gap: 1.5rem; }
.aside img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.aside__box { border-top: 1px solid var(--champagne); padding-top: 1.2rem; display: grid; gap: .5rem; }
.aside__box h2 { font-size: 1.5rem; }
.aside__box a.tel { font: 400 1.8rem/1.1 var(--serif); text-decoration: none; color: var(--champ-light); }
.aside__box ol { margin: .3rem 0 0; padding-left: 1.2rem; color: var(--mauve); display: grid; gap: .3rem; font-size: .95rem; }

@media (prefers-reduced-motion: no-preference) {
  .hero__media { opacity: 0; transform: translateY(16px); animation: settle .9s cubic-bezier(.2, .7, .2, 1) .1s forwards; }
  .hero__copy > * { opacity: 0; transform: translateY(10px); animation: settle .7s cubic-bezier(.2, .7, .2, 1) forwards; }
  .hero__copy > :nth-child(2) { animation-delay: .12s; } .hero__copy > :nth-child(3) { animation-delay: .24s; }
  @keyframes settle { to { opacity: 1; transform: none; } }
}

@media (max-width: 1000px) {
  .strip__in { grid-template-columns: 1fr 1fr; gap: 1rem 0; }
  .stage:nth-child(3) { border-left: 0; padding-left: 0; }
  .trow { grid-template-columns: 1fr 1fr; }
  .trow img { grid-row: span 2; }
  .trow:nth-child(odd) img { order: 0; }
  .docs__grid, .journey, .consult { grid-template-columns: 1fr; }
  .estimate { position: static; }
  .practical__grid { grid-template-columns: 1fr; }
  .tsec { grid-template-columns: 1fr; }
  .tsec img { display: none; }
}
@media (max-width: 800px) {
  .nav, .top .btn--champ { display: none; }
  .burger { display: inline-flex; }
  .top.is-open .nav { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-bottom: 1px solid var(--plum); padding: 1rem var(--pad) 1.4rem; gap: .3rem; font-size: 1.1rem; }
  .top.is-open .nav a { padding: .7rem 0; }
  .hero { grid-template-columns: 1fr; }
  .hero__media img { aspect-ratio: 4 / 4.2; }
  .strip__in { grid-template-columns: 1fr; }
  .stage + .stage { border-left: 0; padding-left: 0; border-top: 1px solid var(--plum); padding-top: 1rem; }
  .trow { grid-template-columns: 1fr; }
  .trow img { grid-row: auto; max-width: 320px; }
  .doc { grid-template-columns: 1fr; }
  .doc img { max-width: 260px; }
  .titem { grid-template-columns: 1fr; gap: .4rem; }
  .titem__meta { text-align: left; }
  .row { grid-template-columns: 1fr; }
  .tl { grid-template-columns: 1fr; gap: .3rem; }
  .tl::before { display: none; }
}