/* Patients First Dentures & Implants, template 5: one motif.
   The implant that is the "1" in F1RST: its crown masks the pictures and tops the closing band,
   its threads fill step by step in "how it works", and the footer builds it large.
   Blue is for small accents only (a pill, links, focus). Fields are black and two dark panel tones. */

:root {
  /* palette, fixed by the brand */
  --ground: #000000;
  --ground-2: #07090C;
  --surface: #0C1116;
  --ink: #EEF2F6;
  --muted: #A9B4C0;
  --lime: #7BD62B;             /* action */
  --on-lime: #07090C;
  --blue: #2A9DF4;             /* small accents only: a pill, a chip, a hover; never a field */
  --on-blue: #000000;          /* 7.2:1 on the accent blue */
  --link: #62B8FF;
  --panel: #11161C;
  --panel-2: #1A2129;

  /* type: Pilcrow Rounded, five steps plus the closing word */
  --face: "Pilcrow Rounded", "Nunito", ui-rounded, system-ui, sans-serif;
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-head: clamp(2rem, 1.1rem + 2.7vw, 3.5rem);
  --step-hero: clamp(2.25rem, 4.7vw, 8rem);

  /* frame: tight margins on small screens; on wide ones the content stays 1600px wide, centred */
  --m: max(clamp(16px, 2.2vw, 32px), calc((100vw - 1600px) / 2));
  --gap: clamp(16px, 1.7vw, 24px);
  --section: clamp(112px, 12vw, 200px);
  --pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
::selection { background: var(--lime); color: var(--on-lime); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nowrap { white-space: nowrap; }

/* ---------- language switch ----------
   Without script both languages show, joined by " / ".
   With script one shows and the other is removed from view and from reading. */
html.lang-en [data-lang="es"],
html.lang-es [data-lang="en"],
html.lang-en .or,
html.lang-es .or { display: none !important; }

/* ---------- shared pieces ---------- */
.h2 {
  font-size: var(--step-head);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h2 > span { display: block; }
.intro { font-size: var(--step-lead); line-height: 1.4; max-width: 34ch; }
.label-line {
  margin-top: 24px;
  font-size: var(--step-lead);
  line-height: 1.3;
  color: var(--link);
}
.post { width: 0.7em; height: 1.26em; flex: none; fill: var(--lime); }

/* a section heading on the left, its sentence and label on the right */
.split-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.split-head .h2 { grid-column: 1 / span 6; }
.split-side { grid-column: 8 / -1; padding-top: 0.4em; }

.link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
}

/* the button is a thread of the implant: a full pill */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35em;
  min-height: 56px;
  padding: 14px 30px;
  border: 0;
  border-radius: var(--pill);
  font-size: var(--step-body);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--lime); color: var(--on-lime); }
.btn-call { background: var(--surface); color: var(--ink); min-height: 48px; padding: 10px 22px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--ink); color: var(--on-lime); }
  .btn-call:hover { background: var(--blue); color: var(--on-blue); }
}

/* ---------- header ---------- */
.announce {
  padding: 10px var(--m);
  background: var(--panel);
  color: var(--ink);
  font-size: var(--step-body);
  line-height: 1.35;
}
.nav {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 44px);
  padding: 14px var(--m);
}
.nav-mark { flex: none; }
.nav-mark img { height: 64px; width: auto; }
.nav-links { display: flex; gap: clamp(16px, 2.4vw, 36px); font-size: var(--step-body); }
.nav-links a { display: inline-block; padding: 10px 0; }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lang-switch { display: flex; background: var(--surface); border-radius: var(--pill); padding: 4px; }
.lang-switch button {
  min-width: 52px; min-height: 40px; padding: 0 14px;
  border: 0; border-radius: var(--pill);
  background: transparent; color: var(--muted);
  font-size: var(--step-small); font-weight: 700;
  cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.lang-switch button:active { transform: scale(0.94); }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--on-lime); }
html:not(.js) .lang-switch { display: none; }
@media (hover: hover) and (pointer: fine) {
  .lang-switch button[aria-pressed="false"]:hover { color: var(--ink); }
}

/* ---------- hero: the headline across the frame, then the sentence beside the crown ---------- */
.hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  align-items: start;
  padding: clamp(20px, 2.1vw, 40px) var(--m) clamp(96px, 9vw, 160px);
}
.hero-title {
  grid-column: 1 / -1;
  font-size: var(--step-hero);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 13em;
  text-wrap: balance;
}
.hero-title > span { display: block; }
.hero-title > [data-lang="es"] { font-size: 0.92em; }
html:not(.js) .hero-title > [data-lang="es"] { margin-top: 0.3em; color: var(--muted); }
.hero-text { grid-column: 1 / span 6; grid-row: 2; margin-top: clamp(20px, 1.7vw, 32px); }
.hero-lead { max-width: 44ch; font-size: var(--step-lead); line-height: 1.4; }
html:not(.js) .hero-lead + .hero-lead { margin-top: 12px; }
.hero-text .btn { margin-top: 24px; min-height: 58px; padding: 16px 40px; font-size: var(--step-lead); }
.hero-line { margin-top: 14px; font-size: var(--step-body); color: var(--ink); }
/* the crown fills the right column at every desktop width and sits centred against the text column */
.hero-crown { grid-column: 7 / -1; grid-row: 2; align-self: center; margin-top: clamp(20px, 1.7vw, 32px); }
.hero-crown .crown-shape { width: min(100%, 680px); margin-inline: auto; }

/* the tooth crown that masks the pictures */
.crown-shape {
  position: relative;
  aspect-ratio: 100 / 72;
  clip-path: url(#crown-clip);
  background: var(--panel-2);
  overflow: hidden;
}
.crown-shape img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.fade-set img { opacity: 0; transition: opacity 1600ms ease; }
.fade-set img.is-on { opacity: 1; }
html:not(.js) .fade-set img:first-child { opacity: 1; }

/* ---------- call card: the last thing on the first screen ---------- */
.call {
  margin-top: 24px;
  padding: 18px 22px 20px;
  background: var(--panel);
}
.collar {
  display: inline-block;
  padding: 8px 20px;
  border-radius: var(--pill);
  background: var(--blue);
  color: var(--on-blue);
  font-size: var(--step-body);
  font-weight: 700;
  line-height: 1.2;
}
.call-list {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px var(--gap);
  font-size: var(--step-body);
  line-height: 1.35;
}
.call-list a { font-weight: 700; }
/* the live hours line: lime while the office is open */
.thread-hours:not(.is-closed) { color: var(--lime); }

/* ---------- sections: one block each, told apart by space and by the field ----------
   hero black · services panel · steps black · promise panel · contact black · closing band · footer panel */
.section { padding: var(--section) var(--m) 0; }
.services { background: var(--panel); padding-bottom: var(--section); }
.how { padding-bottom: var(--section); }
.why { background: var(--panel); padding-bottom: var(--section); }

/* services: six specimens on tiles of one size */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px var(--gap);
  margin-top: 64px;
}
.tile { min-width: 0; }
.tile-field {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.t-light .tile-field { background: var(--ink); }
.t-panel .tile-field { background: var(--panel-2); }
.t-lime .tile-field { background: var(--lime); }
/* every specimen sits whole and centred, the same size inside its tile */
.tile-field > img, .tile-field > svg {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto;
  max-width: 78%; max-height: 74%;
}
.tile-field img {
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 900ms var(--ease-soft);
}
.tile-field img.screen { mix-blend-mode: screen; max-width: 84%; filter: contrast(1.55) brightness(0.95); }
.tile-field img.engraving { max-width: 84%; filter: grayscale(1) brightness(1.62) contrast(1.45); }
.tile-field img.lift-1 { filter: brightness(1.34) contrast(1.06); }
.tile-field img.lift-2 { filter: brightness(1.12) contrast(1.04); }
.tile-field > .tile-implant { height: 74%; fill: var(--lime); }
.tile h3 { margin-top: 20px; font-size: var(--step-lead); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.tile p { margin-top: 8px; line-height: 1.5; max-width: 40ch; }
html:not(.js) .tile p + p { margin-top: 6px; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile-field img { transform: scale(1.04); }
}

/* how it works: three steps side by side, dark to lime; the implant's threads fill step by step */
.stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 64px;
}
.stage {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 44px) 0;
  color: var(--ink);
}
.s1 { background: var(--panel-2); }
.s2 { background: #222A33; }
.s3 { background: var(--lime); color: var(--on-lime); }
.stage-name {
  font-size: var(--step-lead); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
}
.stage-name > span:not(.or) { display: block; }
.stage-body { margin-top: 14px; line-height: 1.5; max-width: 34ch; }
html:not(.js) .stage-body p + p { margin-top: 10px; }
.stage-implant {
  align-self: flex-end;
  height: clamp(150px, 12vw, 200px); width: auto;
  margin-top: auto;
  padding-top: 32px;
  margin-bottom: -40px;
  box-sizing: content-box;
}
.stage-implant .on { fill: var(--lime); }
.stage-implant .off { fill: rgba(238, 242, 246, 0.26); }
.s3 .stage-implant .on { fill: var(--on-lime); }
.s3 .stage-implant .off { fill: rgba(7, 9, 12, 0.22); }

/* why: a panel field; the promise and the crown on the left, the four reasons on the right.
   The crown is cropped by the field's bottom edge. */
.why { overflow: hidden; }
.why-panel {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--gap);
}
.why-left { grid-column: 1 / span 6; grid-row: 1; }
.why-left .intro { margin-top: 24px; max-width: 30ch; }
.why-crown { grid-column: 1 / span 6; grid-row: 2; align-self: end; margin-top: 56px; }
.why-crown .crown-shape { width: min(36vw, 560px); }
.why-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  transform: scale(1.18); transform-origin: 50% 30%;
}
.why-points { grid-column: 8 / -1; grid-row: 1 / span 2; display: grid; gap: 44px; align-content: start; padding-top: 0.4em; }
.why-points h3 { font-size: var(--step-lead); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.why-points p { margin-top: 8px; line-height: 1.5; max-width: 40ch; }
html:not(.js) .why-points p + p { margin-top: 6px; }

/* contact: one section on one field; the details on the left, the call card on the right */
.contact { padding-bottom: var(--section); }
.contact-body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  align-items: start;
  margin-top: 56px;
}
.rows { grid-column: 1 / span 7; display: grid; gap: 22px; }
.row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  column-gap: var(--gap);
  align-items: baseline;
}
.row-key { grid-column: 1; font-size: 1rem; color: var(--muted); }
.row-val {
  grid-column: 2;
  font-size: clamp(1.25rem, 1rem + 0.5vw, 1.625rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.row:first-child .row-val { font-size: clamp(1.5rem, 1.1rem + 0.8vw, 2rem); }
.row-val a { text-decoration-thickness: 0.05em; }
.go { display: inline-flex; align-items: center; gap: 0.35em; text-decoration: none; }
.go-text { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.05em; text-underline-offset: 0.18em; transition: text-decoration-color var(--t-hover) ease; }
.go-dot {
  display: grid; place-items: center;
  width: 0.95em; height: 0.95em; flex: none;
  border-radius: 50%;
  background: var(--lime); color: var(--on-lime);
  transition: transform var(--t-ui) var(--ease-out);
}
.go-dot svg { width: 52%; height: 52%; }
@media (hover: hover) and (pointer: fine) {
  .go:hover .go-text { text-decoration-color: currentColor; }
  .go:hover .go-dot { transform: translate(4px, -4px); }
}
.go:active .go-dot { transform: scale(0.94); }
.hours { display: grid; gap: 6px; justify-items: start; }
.day { display: inline-flex; align-items: center; gap: 0.4em; transition: color var(--t-ui) ease; }
/* the live thing, kept quiet: a small implant marker that lights for today */
.day .post { width: 0.5em; height: 0.9em; fill: var(--panel-2); }
.day.is-today .post { fill: var(--blue); }
.day.is-today.is-open { color: var(--lime); }
.day.is-today.is-open .post { fill: var(--lime); }
.note { font-size: inherit; line-height: 1.35; max-width: 52ch; color: var(--ink); }
.row-note { min-height: 0; }

.ready {
  grid-column: 9 / -1;
  padding: clamp(28px, 2.6vw, 40px);
  background: var(--panel-2);
}
.ready-title { font-size: var(--step-lead); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.ready-title > span:not(.or) { display: block; }
html:not(.js) .ready-title .or { display: none; }
.ready-body { margin-top: 14px; }
.ready-body p { line-height: 1.5; max-width: 40ch; }
html:not(.js) .ready-body p + p { margin-top: 10px; }
.ready-body .btn { margin-top: 24px; }

/* closing band: the crown's top edge, the action set at display size */
.cta { padding: clamp(40px, 4vw, 72px) var(--m) 0; }
.cta-band {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(64px, 7vw, 104px) clamp(20px, 4vw, 56px) clamp(40px, 4vw, 64px);
  background: var(--lime);
  color: var(--on-lime);
  border-radius: clamp(72px, 11vw, 200px) clamp(72px, 11vw, 200px) 0 0 / clamp(56px, 7vw, 120px) clamp(56px, 7vw, 120px) 0 0;
  transition: background-color 120ms linear, color 120ms linear;
}
/* the dip between the crown's cusps */
.cta-band::before {
  content: "";
  position: absolute; top: -1px; left: 50%;
  width: 26%; height: clamp(18px, 2.4vw, 36px);
  transform: translateX(-50%);
  background: var(--ground);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.cta-top { position: relative; z-index: 1; max-width: 56rem; }
.cta-top .h2 { max-width: 15em; }
.cta-lead { margin-top: 20px; font-size: var(--step-lead); line-height: 1.4; max-width: 36ch; }
.cta-link {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.5em;
  margin-top: 36px;
  min-height: 60px;
  padding: 16px 36px;
  border-radius: var(--pill);
  background: var(--ground-2);
  color: var(--lime);
  font-size: var(--step-lead);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.cta-link:active { transform: scale(0.97); }
.cta-word { display: inline; }
.cta-arrow { width: 0.9em; height: auto; flex: none; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cta-link:hover { background: var(--ink); color: var(--on-lime); }
  .cta-link:hover .cta-arrow { transform: translate(3px, -3px); }
}

/* ---------- footer: the implant, built large, then the small print ---------- */
.foot { margin-top: var(--section); }
.foot-mark { background: var(--panel); padding: 28px var(--m); }
.foot-mark svg { width: auto; height: 56px; max-width: 100%; }
.m-crown { fill: var(--lime); }
.m-collar { fill: var(--muted); }
.m-threads rect { fill: var(--lime); }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: 32px;
  padding: 64px var(--m) 0;
  align-items: start;
}
.foot-brand { grid-column: 1 / span 4; }
.foot-brand img { width: 130px; height: auto; }
.foot-links { grid-column: 5 / span 3; display: grid; gap: 10px; }
.foot-links a { display: inline-block; padding: 4px 0; }
.foot-contact { grid-column: 8 / -1; display: grid; gap: 8px; }
.foot-sms { padding: 56px var(--m) 0; display: grid; gap: 10px; }
.foot-sms p { max-width: 75ch; color: var(--muted); font-size: var(--step-small); line-height: 1.55; }
.foot-last {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 16px;
  padding: 32px var(--m) 48px;
}
.copy { grid-column: 1 / span 4; font-size: var(--step-small); }
.credits { grid-column: 5 / -1; font-size: var(--step-small); line-height: 1.55; color: var(--muted); }
.credits a { color: var(--link); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }

/* ---------- motion: one pop-in for every component, once, as it enters the screen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    --d: calc(var(--i, 0) * 75ms);
    opacity: 0;
    translate: 0 24px;
    scale: 0.96;
    transition: opacity 600ms var(--ease-out) var(--d), translate 600ms var(--ease-out) var(--d), scale 600ms var(--ease-out) var(--d);
  }
  /* small items (the pill, the buttons) land with a slight overshoot */
  .js [data-reveal][data-pop] {
    transition: opacity 600ms var(--ease-out) var(--d), translate 600ms var(--ease-pop) var(--d), scale 600ms var(--ease-pop) var(--d);
  }
  .js .btn[data-reveal], .js .cta-link[data-reveal] {
    transition: opacity 600ms var(--ease-out) var(--d), translate 600ms var(--ease-pop) var(--d), scale 600ms var(--ease-pop) var(--d),
      transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
  }
  .js [data-reveal].is-in { opacity: 1; translate: none; scale: none; }

  /* the signature: the town's light shifting inside the crown */
  .js .fade-set img.is-on { animation: slow-scale 9s var(--ease-soft) both; }
  /* the live thing: while the office is open, today's implant marker keeps seating itself */
  .day.is-today.is-open .post { animation: seat 2.4s var(--ease-in-out) infinite; }
}
@keyframes slow-scale { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes seat { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-0.12em); } }


/* ---------- premium layer (the user's call: glow, rounded cards with a lime top line, soft shadows) ---------- */
.hero { position: relative; isolation: isolate; overflow-x: clip; }
.crown-shape img { object-position: 38% 40%; }
/* the glow is drawn from the crown itself, so it stays centred behind it at every width */
.hero-crown { position: relative; }
.hero-crown::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 920px; height: 920px;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(123, 214, 43, 0.25) 0%, rgba(123, 214, 43, 0.17) 50%, rgba(42, 157, 244, 0.12) 74%, rgba(42, 157, 244, 0) 100%); /* taste-skill-ignore: premium pass, user override */
}
@media (max-width: 1023px) {
  .hero-crown::before { width: 640px; height: 640px; }
}
.call, .stage, .ready {
  border-radius: 16px;
  border: 1px solid rgba(238, 242, 246, 0.08); /* taste-skill-ignore: premium pass, user override */
  border-top: 3px solid var(--lime);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); /* taste-skill-ignore: premium pass, user override */
}
.s3 { border-color: rgba(7, 9, 12, 0.12); border-top-color: var(--on-lime); }
.tile-field { border-radius: 16px; border: 1px solid rgba(238, 242, 246, 0.08); } /* taste-skill-ignore: premium pass, user override */
.why-points li { padding-left: 20px; border-left: 3px solid var(--lime); }
/* the implant icons glow softly */
.post, .tile-field > .tile-implant, .stage-implant { filter: drop-shadow(0 0 12px rgba(123, 214, 43, 0.5)); } /* taste-skill-ignore: premium pass, user override */
.s3 .stage-implant { filter: none; }
.day .post { filter: none; }
.day.is-today .post { filter: drop-shadow(0 0 10px rgba(123, 214, 43, 0.55)); } /* taste-skill-ignore: premium pass, user override */

/* ---------- short desktop windows (1366x768, 1920x900 with browser chrome): the whole first screen fits ---------- */
@media (min-width: 1024px) and (max-height: 820px) {
  .announce { padding-top: 6px; padding-bottom: 6px; }
  .nav { padding-top: 8px; padding-bottom: 8px; }
  .nav-mark img { height: 52px; }
  .hero-lead { font-size: var(--step-body); line-height: 1.45; }
  .hero-text .btn { margin-top: 18px; min-height: 52px; padding: 12px 32px; }
  .hero-line { margin-top: 10px; }
  .call { margin-top: 16px; padding: 14px 18px 16px; }
  .call-list { margin-top: 10px; gap: 4px var(--gap); }
}

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .hero-title { font-size: clamp(1.6rem, 8.2vw, 4rem); }
  .hero-text { grid-column: 1 / -1; }
  .hero-crown { grid-column: 1 / -1; grid-row: 3; }
  .hero-crown { align-self: start; }
  .hero-crown .crown-shape { width: min(100%, 520px); margin-inline: auto; }




  .split-head .h2, .split-side { grid-column: 1 / -1; }
  .split-side { margin-top: 24px; padding-top: 0; }
  .split-side .intro { max-width: 52ch; }
  .tiles { grid-template-columns: repeat(2, 1fr); }

  .stages { grid-template-columns: 1fr; }
  .stage { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: start; }
  .stage-name, .stage-body { grid-column: 1; }
  .stage-body { padding-bottom: 32px; }
  .stage-implant { grid-column: 2; grid-row: 1 / span 2; align-self: end; height: 150px; padding-top: 0; margin-bottom: -32px; }

  .why-panel { grid-template-columns: 1fr; grid-template-rows: auto; }
  .why-left .intro { max-width: 52ch; }
  .why-points p { max-width: 60ch; }
  .why-left, .why-points, .why-crown { grid-column: 1; grid-row: auto; }
  .why-points { margin-top: 48px; padding-bottom: 0; order: 2; }
  .why-crown { justify-self: center; order: 3; }
  .why-crown .crown-shape { width: min(86vw, 560px); }

  .rows, .ready { grid-column: 1 / -1; }
  .ready { margin-top: 48px; }


  .foot-brand { grid-column: 1 / -1; }
  .foot-links { grid-column: 1 / span 6; }
  .foot-contact { grid-column: 7 / -1; }
  .copy, .credits { grid-column: 1 / -1; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  :root { --section: 76px; }
  .nav { flex-wrap: wrap; row-gap: 6px; column-gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .nav-mark img { height: 48px; }
  .nav-end { display: contents; }
  .btn-call { order: 2; margin-left: auto; padding: 10px 16px; font-size: var(--step-small); }
  .nav-links { order: 3; flex: 1 1 calc(100% - 132px); gap: 22px; }
  .lang-switch { order: 4; }
  .announce { font-size: var(--step-small); }

  .hero-title { font-size: clamp(1.5rem, 8.2vw, 2.25rem); letter-spacing: -0.05em; }
  .hero-title > [data-lang="es"] { font-size: 0.88em; }
  .hero-text .btn { width: 100%; }
  .hero-crown .crown-shape { width: min(100%, 520px); }

  .call-list { grid-template-columns: 1fr; gap: 8px; }
  .call { padding: 20px 18px; }

  .tiles { grid-template-columns: 1fr; gap: 40px; }
  .tile-field { aspect-ratio: 16 / 10; }

  .stages { gap: 10px; }
  .stage { padding: 24px 18px 0; column-gap: 12px; }
  .stage-implant { height: 104px; margin-bottom: -24px; }


  .why-points { gap: 32px; }

  .row { grid-template-columns: 1fr; row-gap: 4px; }
  .row-key, .row-val { grid-column: 1; }
  .row-key:empty { display: none; }
  .row-val { font-size: 1.25rem; }
  .row:first-child .row-val { font-size: 1.5rem; }

  .cta-band { padding-top: 72px; }
  .cta-link { width: 100%; justify-content: center; }

  .foot-links, .foot-contact { grid-column: 1 / -1; }
}