/* Patients First Dentures & Implants — template 7, "the sentence is the layout".
   Type, colour and layout only. The logo is the one image. */

:root {
  /* palette (theme colours only) */
  --black: #000000;
  --ground: #07090C;
  --field-1: #11161C;
  --field-2: #1A2129;
  --lime: #7BD62B;
  --on-lime: #07090C;
  --blue: #2A9DF4;
  --link: #62B8FF;
  --ink: #EEF2F6;
  --muted: #A9B4C0;

  /* frame */
  --gutter: clamp(16px, 4vw, 64px);
  --max: 1600px;
  --cw: min(calc(100vw - 2 * var(--gutter)), var(--max));
  --col-gap: clamp(16px, 2vw, 32px);
  --section: clamp(88px, 8vw, 136px);

  /* type */
  --display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --text: 'EB Garamond', Garamond, Georgia, serif;
  --fs-display: max(calc(var(--cw) / 17.5), 4.6vw);
  --fs-head: clamp(2rem, 1.2rem + 1.8vw, 3.5rem);
  --fs-lead: clamp(1.3125rem, 1.15rem + 0.45vw, 1.625rem);
  --fs-body: clamp(1.1875rem, 1.12rem + 0.2vw, 1.3125rem);
  --fs-es: 1.0625rem;
  --fs-small: 0.875rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
::selection { background: var(--lime); color: var(--on-lime); }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 10;
  background: var(--lime); color: var(--on-lime); padding: 12px 16px; font-weight: 600;
}
.skip:focus { top: 12px; }

/* frame and grid: three shared left edges at columns 1, 5 and 9 */
.wrap { width: var(--cw); margin-inline: auto; }
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

/* the language pair: English first in full ink, Spanish under it, quieter */
.en { color: var(--ink); }
.es { color: var(--muted); font-style: italic; font-size: var(--fs-es); }
p.en + p.es, .en + .es { margin-top: 0.35em; }
span.en, span.es { display: block; }

.label { color: var(--link); font-size: var(--fs-body); line-height: 1.35; }

/* ---------- top ---------- */
.announce { background: var(--field-1); }
.announce__inner { padding-block: 14px; }
.announce .en { font-size: var(--fs-body); line-height: 1.35; }
.announce .es { margin-top: 2px; line-height: 1.35; }

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 18px;
}
.nav__logo { display: block; flex: none; }
.nav__logo img { width: clamp(132px, 12vw, 190px); }
.nav__links { display: flex; align-items: center; gap: clamp(20px, 3vw, 56px); }
.nav__links a { display: block; text-decoration: none; color: var(--ink); line-height: 1.2; transition: color .18s var(--ease-out); }
.nav__links a .es { font-size: var(--fs-es); margin-top: 2px; }
.nav__links a:hover .en, .nav__links a:hover .nav__num { color: var(--link); }
.nav__num { display: block; color: var(--link); font-size: var(--fs-body); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(28px, 3.4vw, 72px); padding-bottom: var(--section); background: var(--black); position: relative; isolation: isolate; overflow: hidden; }
/* a faint lime-to-blue mesh behind the sentence: soft radial light over the black, never a fill */
.hero::before {
  content: ""; position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 58% at 12% 22%, rgba(123, 214, 43, 0.18), rgba(123, 214, 43, 0) 70%),
    radial-gradient(38% 55% at 88% 30%, rgba(42, 157, 244, 0.12), rgba(42, 157, 244, 0) 70%),
    radial-gradient(34% 40% at 55% 95%, rgba(123, 214, 43, 0.06), rgba(123, 214, 43, 0) 70%);
}

.sentence {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--ink);
}
.sentence__line { display: block; white-space: nowrap; }
.nobr-all { white-space: nowrap; }

/* one calm composition: the sentence, its Spanish, the intro and the action on the left; the call card on the right */
.hero__grid { align-items: start; row-gap: 20px; }
.hero__place { grid-column: 1 / span 8; color: var(--muted); font-size: var(--fs-body); line-height: 1.35; }
.hero__main { grid-column: 1 / span 8; }
.sentence-es { margin-top: 18px; font-size: var(--fs-lead); line-height: 1.25; }
.sentence-es.es, .h2-es.es { color: var(--lime); font-style: normal; }
.hero__copy { margin-top: clamp(24px, 2.2vw, 40px); }
.hero__copy .en { max-width: 36em; }
.hero__copy .es { max-width: 42em; margin-top: 8px; }
.hero__copy .btn { margin-top: 28px; }
.hero__card { grid-column: 9 / span 4; grid-row: 2; align-self: start; background: var(--field-1); padding: clamp(24px, 2.2vw, 36px); }
.hero__card, .ready { border-radius: 16px; border: 1px solid rgba(238, 242, 246, 0.12); }

.card__title { font-weight: 500; font-size: var(--fs-body); line-height: 1.3; }
.card__title .es { font-weight: 400; margin-top: 2px; }
.card__phone {
  display: inline-block; margin-top: 18px;
  font-size: var(--fs-lead); font-weight: 500; line-height: 1.2;
  text-decoration: none; color: var(--link);
}
.card__phone:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.card__list { margin-top: 20px; display: grid; gap: 16px; }
.card__list li { line-height: 1.35; }
.card__list .es { margin-top: 2px; }

/* the one button shape: square, lime, two lines */
.btn {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 64px; margin-top: 32px; padding: 12px 28px;
  background: var(--lime); color: var(--on-lime);
  text-decoration: none; line-height: 1.2;
  transition: transform .18s var(--ease-out), background-color .18s var(--ease-out);
}
.btn__en { font-weight: 600; font-size: var(--fs-body); }
.btn__es { font-style: italic; font-size: var(--fs-es); }
.btn:hover { background: var(--ink); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline-color: var(--link); }
.btn--dark { background: var(--on-lime); color: var(--lime); }
.btn--dark:hover { background: var(--field-2); }
.btn--dark:focus-visible { outline-color: var(--on-lime); }

/* ---------- section heads (shared) ---------- */
.h2 {
  font-family: var(--display); font-weight: 400;
  font-size: var(--fs-head); line-height: 0.95; letter-spacing: -0.005em;
  text-transform: uppercase; color: var(--ink);
  text-wrap: balance;
}
.h2-es { margin-top: 12px; font-size: var(--fs-lead); line-height: 1.25; }
.head__titles .label, .why__side .label { margin-top: 24px; }
.head { align-items: start; row-gap: 32px; }
.head__titles { grid-column: 1 / span 7; }
.head__intro { grid-column: 9 / span 4; padding-top: 0.4em; }

/* ---------- services: names at poster scale ---------- */
.services { background: var(--field-1); padding-block: var(--section); }
.poster { margin-top: clamp(56px, 5vw, 88px); display: grid; gap: clamp(32px, 2.6vw, 44px); }
.poster__row { align-items: baseline; }
.poster__name { grid-column: 1 / span 4; }
.poster__text { grid-column: 5 / span 8; }
.poster__text p { max-width: 40em; }
.h3 {
  font-weight: 500; font-size: var(--fs-lead); line-height: 1.2; color: var(--ink);
  transition: color .2s var(--ease-out);
}
.h3-es { margin-top: 4px; font-size: var(--fs-body); line-height: 1.25; }
.poster__row:hover .h3 { color: var(--lime); }

/* ---------- how it works: three steps in view at once ---------- */
.how { background: var(--black); padding-block: var(--section); }
.steps { margin-top: clamp(64px, 6vw, 112px); row-gap: 48px; }
.step { grid-column: span 4; }
.step, .point { border-left: 3px solid var(--lime); padding-left: clamp(16px, 1.4vw, 24px); }
.step:nth-child(1) { grid-column: 1 / span 4; }
.step:nth-child(2) { grid-column: 5 / span 4; }
.step:nth-child(3) { grid-column: 9 / span 4; }
.step__title {
  font-weight: 500; font-size: var(--fs-lead); line-height: 1.2; color: var(--ink);
}
.step__es { margin-top: 6px; margin-bottom: 20px; font-size: var(--fs-lead); line-height: 1.2; }
.step p.en { max-width: 30em; }
.step--last .step__title { color: var(--lime); }

/* ---------- why: heading at the side, statement wide ---------- */
.why { background: var(--field-2); padding-block: var(--section); }
.why__side { grid-column: 1 / span 4; align-self: start; position: sticky; top: 32px; }
.why__main { grid-column: 5 / span 8; }
.statement { font-size: var(--fs-lead); line-height: 1.3; color: var(--ink); max-width: 30em; }
.statement-es { margin-top: 12px; font-size: var(--fs-lead); line-height: 1.3; max-width: 32em; }
.points {
  margin-top: clamp(56px, 5vw, 96px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--col-gap); row-gap: clamp(40px, 4vw, 64px);
}
.point__title { font-weight: 500; font-size: var(--fs-lead); line-height: 1.2; color: var(--ink); }
.point__es { margin-top: 4px; margin-bottom: 14px; }
.point p.en { max-width: 30em; }

/* ---------- contact: one field, details left, the one card right ---------- */
.contact { background: var(--black); padding-block: var(--section); }
.contact__body { margin-top: clamp(40px, 3.4vw, 64px); align-items: start; row-gap: 48px; }
.details { grid-column: 1 / span 7; display: grid; gap: clamp(24px, 2vw, 32px); }
.detail { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: baseline; }
.detail__label { line-height: 1.35; font-size: 1rem; }
.detail__label .es { margin-top: 2px; font-size: 1rem; }
.detail__value { grid-column: 2; min-width: 0; }
.detail__note .note.en { font-size: var(--fs-lead); line-height: 1.3; }
.ready { grid-column: 9 / span 4; background: var(--field-1); padding: clamp(24px, 2.2vw, 36px); }
.ready__es { margin-top: 4px; margin-bottom: 16px; }
.ready .btn { margin-top: 24px; }
.display {
  display: block;
  font-weight: 500; font-size: var(--fs-lead); line-height: 1.3; color: var(--ink);
}
.display-link {
  font-weight: 500; font-size: var(--fs-lead); line-height: 1.3;
  color: var(--link); text-decoration: none;
}
.display-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
@media (min-width: 641px) { .nobr { white-space: nowrap; } }
.text-link { display: inline-block; margin-top: 8px; font-size: var(--fs-body); line-height: 1.3; }
.text-link .en, .text-link .es { display: inline; }
.text-link .es { margin-left: 0.4em; }
.text-link .en { color: var(--link); }
.text-link .es { color: var(--link); }

.hours { display: grid; gap: 14px; }
.hours__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--col-gap); align-items: baseline; position: relative; }
.hours__row dt .es, .hours__row dd .es { display: block; margin-top: 2px; font-size: var(--fs-es); }
.hours__row.is-today::before {
  content: ""; position: absolute; left: -18px; top: 0.7em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--link);
}

.ready__h { font-weight: 500; font-size: var(--fs-lead); line-height: 1.2; }

/* ---------- final call: lime field ---------- */
.cta { background: var(--lime); color: var(--on-lime); padding-block: var(--section); }
.cta__h {
  font-family: var(--display); font-weight: 400;
  font-size: var(--fs-head); line-height: 0.95; letter-spacing: -0.005em;
  text-transform: uppercase; color: var(--on-lime);
  text-wrap: balance;
}
.cta__row { margin-top: clamp(32px, 3vw, 56px); align-items: end; row-gap: 32px; }
.cta__copy { grid-column: 1 / span 7; }
.cta__es { font-style: italic; font-size: var(--fs-lead); line-height: 1.25; color: var(--on-lime); }
.cta__line { margin-top: 28px; font-size: var(--fs-body); line-height: 1.4; color: var(--on-lime); max-width: 34em; }
.cta__line--es { margin-top: 4px; font-style: italic; font-size: var(--fs-es); color: var(--field-1); }
.cta .btn { grid-column: 9 / span 4; justify-self: end; margin-top: 0; }

/* ---------- footer ---------- */
.foot { background: var(--black); padding-top: clamp(72px, 7vw, 128px); padding-bottom: 48px; }
.foot__top { align-items: start; row-gap: 40px; }
.foot__brand { grid-column: 1 / span 3; }
.foot__brand img { width: min(100%, 280px); }
.foot__info { grid-column: 5 / span 4; line-height: 1.45; }
.foot__info p + p { margin-top: 8px; }
.foot__links { grid-column: 9 / span 4; display: grid; gap: 10px; line-height: 1.35; }
.foot__legal { margin-top: clamp(56px, 5vw, 88px); }
.legal { grid-column: 5 / span 8; max-width: 92ch; font-size: var(--fs-small); line-height: 1.55; color: var(--muted); }
.legal p + p { margin-top: 12px; }

/* ---------- pop-in on scroll (transform + opacity only) ---------- */
.js [data-pop] {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-pop="small"] { transition-timing-function: var(--ease-out), var(--ease-pop); }
.js [data-pop].is-in { opacity: 1; transform: none; }
/* once arrived, controls answer at hover speed */
.js .btn[data-pop].is-done { transition: transform .18s var(--ease-out), background-color .18s var(--ease-out); transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-pop] { opacity: 1; transform: none; transition: none; }
  .btn, .h3, .nav__links a { transition: none; }
}

/* very wide screens: the capped frame keeps the sentence at poster share of the screen */
@media (min-width: 2200px) {
  .hero__place, .hero__main { grid-column: 1 / span 9; }
  .hero__card { grid-column: 10 / span 3; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .hero__place, .hero__main { grid-column: 1 / span 7; }
  .hero__card { grid-column: 8 / span 5; }
}

@media (max-width: 999px) {
  :root { --fs-display: calc(var(--cw) / 9.2); }
  .hero__place, .hero__main, .hero__card { grid-column: 1 / -1; }
  .hero__card { grid-row: auto; margin-top: 28px; }
  .details, .ready { grid-column: 1 / -1; }
  .head__titles { grid-column: 1 / -1; }
  .head__intro { grid-column: 1 / span 9; padding-top: 0; }
  .poster__name { grid-column: 1 / -1; }
  .poster__text { grid-column: 1 / span 9; margin-top: 14px; }
  .step:nth-child(n) { grid-column: 1 / -1; }
  .steps { row-gap: 56px; }
  .step p.en, .step p.es { max-width: 36em; }
  .why__side { grid-column: 1 / -1; position: static; }
  .why__main { grid-column: 1 / -1; margin-top: 48px; }
  .hours__row.is-today::before { left: auto; right: 0; }
  .cta__copy { grid-column: 1 / -1; }
  .cta .btn { grid-column: 1 / -1; justify-self: start; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__info { grid-column: 1 / span 6; }
  .foot__links { grid-column: 7 / span 6; }
  .legal { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .nav { flex-wrap: wrap; row-gap: 14px; }
  .nav__links { width: 100%; justify-content: space-between; gap: 16px; }
  .head__intro, .poster__text { grid-column: 1 / -1; }
  .points { grid-template-columns: 1fr; }
  .hours__row { grid-template-columns: 1fr; row-gap: 6px; }
  .detail { grid-template-columns: 1fr; row-gap: 6px; }
  .detail__value { grid-column: 1; }
  .ready .btn, .cta .btn { width: 100%; }
  .foot__info, .foot__links { grid-column: 1 / -1; }
  .h3-es, .h2-es, .sentence-es { font-size: 1.3125rem; }
}