/* ==========================================================================
   Dental Lager, marketing site
   --------------------------------------------------------------------------
   Every colour below is sampled from the brand artwork in assets/brand/.
   Nothing here is shared with the platform application: this is a separate
   static site and is deliberately not wired into it.
   ========================================================================== */

:root {
  /* Brand, straight out of the teal artwork */
  --navy:        #123B47;   /* scanner corners, wordmark, footer            */
  --teal:        #2E7E96;   /* stripes, tagline, links                      */
  --teal-light:  #3A9EBA;   /* tooth body, highlights                       */
  --wash:        #ECF4F6;   /* chip, section tint                           */
  --plate:       #0C2630;   /* deepest surface                              */

  /* Neutrals, tuned to sit with the teal rather than fight it */
  --ink:         #17323b;
  --body:        #4a636c;
  --muted:       #6f858d;
  --line:        #dde8eb;
  --surface:     #ffffff;

  --maxw: 1180px;
  --prose: 68ch;
  --radius: 4px;

  /* Fluid type. One scale, used everywhere. */
  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.6vw, 4.2rem);

  --section: clamp(76px, 9vw, 148px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--step-0);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: Jost, "Open Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); letter-spacing: -0.028em; }
h2 { font-size: var(--step-3); letter-spacing: -0.022em; }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }

p { margin: 0 0 1.15em; max-width: var(--prose); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }

img, svg { max-width: 100%; height: auto; display: block; }

ul { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: 0.5em; }
li::marker { color: var(--teal-light); }

.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }

/* Eyebrow, the small tracked-out label above a heading. */
.eyebrow {
  font-family: Jost, sans-serif;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 18px;
}

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--body); max-width: 62ch; }

/* ---------- Navigation --------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 24px rgba(18,59,71,0.06); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 78px; }
.nav__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
.nav__logo img { height: 34px; width: 34px; }
.nav__logo span {
  font-family: Jost, sans-serif; font-weight: 600; font-size: 1.16rem;
  color: var(--navy); letter-spacing: -0.01em;
}
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav__links a {
  font-size: 0.95rem; color: var(--body); text-decoration: none; position: relative;
  padding: 6px 0; transition: color 0.2s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--teal); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover { color: var(--navy); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--navy); font-weight: 600; }

/* THE CTA IS A BUTTON, NOT A NAV LINK.
   The three rules above are all more specific than .btn--primary, so the
   button in the nav was inheriting the muted link colour onto its navy
   background: 1.89:1, and on the contact page the aria-current rule painted
   it navy on navy at 1.00:1, i.e. an empty dark box. Restated here at
   matching specificity so the label stays white in every state, and the
   underline that belongs to text links is suppressed on it. */
.nav__links a.btn,
.nav__links a.btn:hover,
.nav__links a.btn[aria-current="page"] { color: #fff; }
.nav__links a.btn::after { content: none; }
/* PADDING, for the same reason as the colour above. ".nav__links a" sets
   "padding: 6px 0" and outranks .btn, so the CTA was rendering with NO
   horizontal padding at all and the label sat hard against both edges.
   Restated here at matching specificity. Vertical is kept below the .btn
   default so the button still sits comfortably inside a 78px nav bar. */
.nav__links a.btn { padding: 12px 24px; }

/* ---------- Language toggle ---------------------------------------------- */
/* Same specificity trap as the CTA above: .nav__links a would otherwise win
   over anything set here, so the selectors are written to match it. The
   CURRENT language is a <span>, not a link, so there is no self-link and no
   collision with the nav's aria-current styling. */
.lang {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  font-family: Jost, sans-serif; line-height: 1;
}
.lang a, .lang span {
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.09em;
  padding: 8px 11px; text-decoration: none; display: block;
}
.lang span { background: var(--wash); color: var(--navy); font-weight: 600; }
.nav__links .lang a { color: var(--muted); padding: 8px 11px; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.nav__links .lang a:hover { color: var(--navy); background: var(--wash); }
.nav__links .lang a::after { content: none; }

.nav__toggle {
  display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius);
  width: 42px; height: 42px; cursor: pointer; color: var(--navy);
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  display: block; width: 17px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle span { margin: 0 auto; position: relative; }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -5.5px; } .nav__toggle span::after { top: 5.5px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(5.5px) rotate(45deg); }
.nav.is-open .nav__toggle span::after { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- Buttons ------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: Jost, sans-serif; font-size: 1rem; font-weight: 500;
  padding: 15px 30px; border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--teal); color: #fff; transform: translateY(-1px); }
.btn--ghost { border-color: var(--line); color: var(--navy); background: transparent; }
.btn--ghost:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-1px); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--wash); transform: translateY(-1px); }
.btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- Sections ----------------------------------------------------- */

.section { padding-block: var(--section); }
.section--tint { background: var(--wash); }
.section--tight { padding-block: clamp(56px, 6vw, 96px); }
.section__head { max-width: 60ch; margin-bottom: clamp(44px, 5vw, 76px); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Hero --------------------------------------------------------- */

.hero { padding-block: clamp(64px, 8vw, 128px) var(--section); position: relative; overflow: hidden; }
.hero::before {
  /* A single soft wash. No gradient mesh, no blobs. */
  content: ""; position: absolute; inset: -30% 40% 40% -20%; z-index: -1;
  background: radial-gradient(closest-side, rgba(58,158,186,0.11), transparent 72%);
  pointer-events: none;
}
/* THE LOCKUP IS THE HERO, the headline sits under it.
   max-width caps it at the column so a narrow phone cannot be made to scroll
   sideways by the clamp's own minimum. */
.hero__lockup {
  width: clamp(320px, 46vw, 600px);
  max-width: 100%;
  margin-bottom: clamp(30px, 3.4vw, 46px);
}
/* Deliberately NOT --step-4. The headline is set below the scale's top step so
   it reads as the sentence under the mark rather than a second logo competing
   with the first. */
.hero h1 {
  font-size: clamp(1.75rem, 1.15rem + 1.95vw, 2.7rem);
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin-bottom: 24px;
}
.hero .lede { margin-bottom: 40px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__note { margin-top: 30px; font-size: var(--step--1); color: var(--muted); max-width: 52ch; }

/* ---------- Cards / grids ------------------------------------------------ */

.grid { display: grid; gap: clamp(18px, 2vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(26px, 3vw, 38px);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover { border-color: #c3d9de; transform: translateY(-2px); box-shadow: 0 14px 44px rgba(18,59,71,0.07); }
.card h3 { margin-bottom: 12px; }
.card p { font-size: 0.985rem; }
.card__icon { width: 40px; height: 40px; margin-bottom: 20px; color: var(--teal); }
.card__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; }

.section--tint .card { background: var(--surface); border-color: #d9e7eb; }

/* ---------- Feature blocks ----------------------------------------------- */

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.feature + .feature { margin-top: clamp(72px, 8vw, 128px); }
.feature:nth-child(even) .feature__media { order: -1; }
.feature__body h2 { font-size: var(--step-2); }
.feature__list { list-style: none; padding: 0; margin: 26px 0 0; }
.feature__list li {
  position: relative; padding-left: 28px; margin-bottom: 13px;
  font-size: 0.985rem; max-width: 54ch;
}
.feature__list li::before {
  content: ""; position: absolute; left: 4px; top: 0.66em; width: 9px; height: 9px;
  border-radius: 50%; border: 1.5px solid var(--teal-light);
}

/* ---------- Honest visual (never a fake dashboard) ----------------------- */

.visual {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--wash);
  padding: clamp(28px, 4vw, 52px); display: grid; place-items: center; min-height: 260px;
}
.visual svg { width: 100%; max-width: 380px; overflow: visible; }
.visual--plain { background: var(--surface); }

/* ---------- Steps -------------------------------------------------------- */

.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 3vw, 46px);
  padding-block: clamp(34px, 4vw, 52px); border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n {
  counter-increment: step; font-family: Jost, sans-serif; font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 300; color: var(--teal-light); line-height: 1; min-width: 2.2ch;
  font-variant-numeric: tabular-nums;
}
.step__n::before { content: counter(step); }
.step h3 { margin-bottom: 10px; }
.step p { font-size: 0.99rem; }

/* ---------- Callout / honesty band --------------------------------------- */

.callout {
  border-left: 2px solid var(--teal-light); padding: 6px 0 6px 26px;
  color: var(--body); max-width: 64ch;
}
.callout strong { color: var(--navy); font-weight: 600; }

.notlist { list-style: none; padding: 0; margin: 0; }
.notlist li { position: relative; padding-left: 30px; margin-bottom: 14px; max-width: 60ch; }
.notlist li::before {
  content: ""; position: absolute; left: 6px; top: 0.72em; width: 12px; height: 1.5px;
  background: var(--muted);
}

/* ---------- Definition rows ---------------------------------------------- */

.defs { display: grid; gap: 0; margin: 0; }
.def { display: grid; grid-template-columns: minmax(min(150px, 100%), 250px) 1fr; gap: clamp(18px, 3vw, 48px);
       padding-block: 26px; border-top: 1px solid var(--line); align-items: start; }
.def:last-child { border-bottom: 1px solid var(--line); }
.def dt { font-family: Jost, sans-serif; font-weight: 500; color: var(--navy); font-size: 1.06rem; }
.def dd { margin: 0; font-size: 0.985rem; }

/* ---------- CTA band ----------------------------------------------------- */

.cta { background: var(--navy); color: #cfe0e5; }
.cta h2 { color: #fff; }
.cta p { color: #b9d0d7; }
.cta__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; }
.cta__text { max-width: 46ch; }

/* ---------- Form --------------------------------------------------------- */

.form { display: grid; gap: 20px; max-width: 560px; }
.field { display: grid; gap: 8px; }
.field label { font-family: Jost, sans-serif; font-size: 0.95rem; font-weight: 500; color: var(--navy); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(46,126,150,0.12);
}
.field textarea { resize: vertical; min-height: 140px; }
.form__note { font-size: var(--step--1); color: var(--muted); max-width: 52ch; }

/* ---------- Footer ------------------------------------------------------- */

.footer { background: var(--plate); color: #93aab2; padding-block: clamp(60px, 7vw, 96px) 40px; }
.footer a { color: #cfe0e5; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* min() inside minmax so a track may shrink below its nominal minimum when
   the screen is narrower than it. Without it these columns hold 240px + 150px
   + gaps open on a 375px phone and the whole page scrolls sideways. */
.footer__top { display: grid;
               grid-template-columns: minmax(min(240px, 100%), 1.4fr) repeat(auto-fit, minmax(min(150px, 100%), 1fr));
               gap: clamp(34px, 5vw, 72px); padding-bottom: 48px; }
.footer__brand img { width: 190px; margin-bottom: 20px; }
.footer__brand p { font-size: 0.94rem; color: #8ba3ab; max-width: 34ch; }
.footer h4 { font-family: Jost, sans-serif; font-size: 0.82rem; letter-spacing: 0.16em;
             text-transform: uppercase; color: #6f8b95; font-weight: 500; margin: 0 0 18px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 11px; font-size: 0.95rem; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.09); padding-top: 28px;
                  display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between;
                  font-size: 0.87rem; color: #6f8b95; }

/* ---------- Scroll reveal ------------------------------------------------ */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.62s var(--ease), transform 0.62s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ---------- Hero lockup animation ---------------------------------------- */

.lockup-anim .lk-brackets,
.lockup-anim .lk-tooth,
.lockup-anim .lk-stripes,
.lockup-anim .lk-word,
.lockup-anim .lk-tag { opacity: 0; }

.lockup-anim.is-lit .lk-brackets {
  animation: lockOn 0.72s var(--ease) 0.1s forwards;
  transform-box: fill-box; transform-origin: center;
}
.lockup-anim.is-lit .lk-tooth  { animation: riseIn 0.66s var(--ease) 0.42s forwards;
                                 transform-box: fill-box; transform-origin: center bottom; }
.lockup-anim.is-lit .lk-stripes{ animation: fadeIn 0.7s var(--ease) 0.68s forwards; }
.lockup-anim.is-lit .lk-word   { animation: riseIn 0.6s var(--ease) 0.74s forwards;
                                 transform-box: fill-box; transform-origin: left center; }
.lockup-anim.is-lit .lk-tag    { animation: fadeIn 0.6s var(--ease) 0.92s forwards; }

@keyframes lockOn  { from { opacity: 0; transform: scale(1.16); } to { opacity: 1; transform: scale(1); } }
@keyframes riseIn  { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 34px; }
  .feature:nth-child(even) .feature__media { order: 0; }
  .cta__in { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 760px) {
  .nav__toggle { display: grid; place-items: center; }
  .nav__links {
    position: fixed; inset: 78px 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 10px 0 22px; transform: translateY(-8px); opacity: 0;
    pointer-events: none; transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
    max-height: calc(100dvh - 78px); overflow-y: auto;
  }
  .nav.is-open .nav__links { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding: 15px clamp(20px, 5vw, 40px); border-bottom: 1px solid var(--line); }
  .nav__links a::after { display: none; }
  .nav__links .btn { margin: 16px clamp(20px, 5vw, 40px) 0; }
  /* The toggle sits at the TOP of the open panel: choosing a language before
     reading the menu is the point of it. Reset the stacked-link padding and
     border the panel gives every anchor. */
  .nav__links .lang { order: -1; align-self: flex-start; margin: 6px clamp(20px, 5vw, 40px) 10px; }
  .nav__links .lang a { padding: 9px 13px; border-bottom: 0; }
  .lang span { padding: 9px 13px; }
  .def { grid-template-columns: 1fr; gap: 8px; }
  .step { grid-template-columns: 1fr; gap: 12px; }
  /* Stacked explicitly rather than left to auto-fit. repeat(auto-fit, ...)
     always emits at least one track, so beside the fixed brand column it
     forced 240px + 150px + gap into a 335px phone and scrolled the whole
     page sideways. */
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .lockup-anim .lk-brackets, .lockup-anim .lk-tooth, .lockup-anim .lk-stripes,
  .lockup-anim .lk-word, .lockup-anim .lk-tag { opacity: 1; animation: none !important; }
  .btn:hover, .card:hover { transform: none; }
  * { transition-duration: 0.01ms !important; }
}

@media print {
  .nav, .cta, .footer__bottom { display: none; }
}