/* Patients First Dentures & Implants, template 4: the split stage, section by section.
   Each section is its own band; inside a section, its picture can hold still while the section's own words pass.
   One strict type scale and one spacing system, used everywhere:
   H2 > ES heading line > intro > item title > body > ES body > small print. */

/* ---------- tokens ---------- */
:root {
  --ground: #000000;
  --sheet: #07090C;
  --raised: #11161C;           /* the services and promise fields */
  --ink: #EEF2F6;
  --muted: #A9B4C0;
  --action: #7BD62B;
  --action-hover: #93E04F;
  --action-ink: #07090C;
  --accent: #2A9DF4;           /* small accents only */
  --link: #62B8FF;             /* links, label lines, focus */

  --font: "Zilla Slab", Georgia, serif;

  /* type scale: values at 1920 / phone */
  --fs-display: clamp(1.75rem, 4.55vw, 5.5rem);                 /* H1, hero only */
  --fs-h2: clamp(2.125rem, 1.45rem + 1.9vw, 3.5rem);            /* 56 / 34 */
  --fs-h2-es: clamp(1.1875rem, 1rem + 0.45vw, 1.5rem);          /* 24 / 19 */
  --fs-title: clamp(1.1875rem, 1.1rem + 0.25vw, 1.375rem);      /* 22 / 19 */
  --fs-intro: clamp(1.125rem, 1.05rem + 0.2vw, 1.25rem);        /* 20 / 18 */
  --fs-hero-intro: clamp(1.0625rem, 1rem + 0.22vw, 1.25rem);    /* 20 / 17 */
  --fs-body: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);           /* 17 / 16 */
  --fs-ui: 1rem;                                                /* 16: Spanish intro lines, labels, nav */
  --fs-label: clamp(0.9375rem, 0.92rem + 0.05vw, 1rem);         /* 16 / 15 */
  --fs-body-es: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);    /* 15 / 14 */
  --fs-small: clamp(0.8125rem, 0.8rem + 0.05vw, 0.875rem);      /* 13 - 14: small print */

  /* spacing system: values at 1920 / phone */
  --cap: 1800px;                                   /* the page never grows wider than this */
  --pad: clamp(1.25rem, 4.4vw, 5rem);              /* the one pair of page margins */
  --band: clamp(4.5rem, 1.6rem + 5.4vw, 8rem);     /* section padding 128 / 72 */
  --block: clamp(2.25rem, 1.8rem + 1.9vw, 3.5rem); /* heading block to content 56 / 36 */
  --list: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);    /* between items in a list 40 / 28 */
  --card: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);     /* card inner padding 40 / 24 */
  --gap: clamp(2rem, 5vw, 6rem);                   /* between the two halves of a section */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--action); color: var(--action-ink); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
:target { scroll-margin-top: 24px; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- the type roles ---------- */
.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.025em; }
.head, .card-head { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.02em; max-width: 22ch; }
.es-title { margin-top: 8px; font-size: var(--fs-h2-es); line-height: 1.3; font-weight: 400; color: var(--muted); max-width: 32em; }
.label { margin-top: 16px; font-size: var(--fs-label); line-height: 1.45; font-weight: 500; color: var(--link); }

/* Spanish: same face, upright, regular, muted */
.es, .es-d, .es-f { color: var(--muted); font-weight: 400; }

/* section intros: 20px English, 16px Spanish beneath */
.pair { max-width: 60ch; }
.pair p[lang="en"] { font-size: var(--fs-intro); line-height: 1.55; }
.pair p.es { margin-top: 8px; font-size: var(--fs-ui); line-height: 1.55; }
.head-intro { margin-top: 24px; }

/* items: 22px title, 17px body, 15px Spanish body */
.service-list h3, .slip-rows h3, .promises h3, .ready h3, .card-title { font-size: var(--fs-title); line-height: 1.3; font-weight: 600; }
.service-list h3, .slip-rows h3, .promises h3, .ready h3 { margin-bottom: 10px; }
.service-list p, .slip-rows p, .promises p, .ready p { font-size: var(--fs-body); line-height: 1.6; max-width: 62ch; }
.service-list p.es, .slip-rows p.es-d, .slip-rows p.es-f, .promises p.es, .ready p.es { margin-top: 8px; font-size: var(--fs-body-es); line-height: 1.55; }

/* ---------- the frame: every band is capped and centred; fields change from band to band ---------- */
.announce, .band, .footer { max-width: var(--cap); margin-inline: auto; }
.band { position: relative; padding: var(--band) var(--pad); }
.band--raised { background: var(--raised); }
.band--lime { background: var(--action); color: var(--action-ink); }

/* ---------- pictures: one treatment everywhere ---------- */
.layer img, .hero-pic img, .contact-photo img, .cta-pic img, .why-strip img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.86);
}

/* ---------- announcement ---------- */
.announce { padding: 14px var(--pad); font-size: var(--fs-body-es); line-height: 1.45; }
.announce .es { margin-top: 2px; font-size: var(--fs-small); }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; background: var(--action); color: var(--action-ink); font-weight: 600; font-size: 1.0625rem; line-height: 1.25; text-decoration: none; text-align: center; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.button:hover { background: var(--action-hover); transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(0.98); }
.button--dark { background: var(--sheet); color: var(--action); }
.button--dark:hover { background: var(--raised); }
.text-link { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: color var(--t-hover) ease; }
.text-link:hover { color: var(--ink); }

/* ---------- 1. hero: a header bar across the top, then two columns on one top line, then the call strip ---------- */
.band--hero { background: var(--ground); padding-top: 0; padding-bottom: clamp(4rem, 2rem + 3.5vw, 6rem); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; }
.brand { display: block; width: clamp(140px, 9vw, 160px); flex: none; }
.brand img { width: 100%; mix-blend-mode: screen; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 32px; font-size: var(--fs-ui); }
.nav-links a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
.nav-links a:hover { text-decoration-color: currentColor; }
.nav-call { color: var(--action); white-space: nowrap; }

/* the hero stage: the words sit on black at the left; a photograph fills the right 55%, full height,
   edge to edge, and melts into the black under the words through a mask */
.hero-stage { position: relative; display: flex; flex-direction: column; min-height: clamp(600px, calc(100svh - 70px), 1300px); }
.hero-stage > .nav, .hero-grid { position: relative; z-index: 1; }
.hero-grid { margin-block: auto; padding-block: clamp(1.5rem, 3vw, 3.5rem); }
.hero-copy { min-width: 0; max-width: min(62%, 1100px); }
.hero-copy .es-title { margin-top: 12px; }
.hero-intro { margin-top: 28px; max-width: 52ch; }
.hero-intro p[lang="en"] { font-size: var(--fs-hero-intro); }
.hero-action { margin-top: 32px; }
.hero-pic { position: absolute; z-index: 0; top: 0; bottom: 0; right: calc(var(--pad) * -1); width: 55%; overflow: hidden; background: var(--ground);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%); mask-image: linear-gradient(to right, transparent 0%, #000 35%); } /* taste-skill-ignore: user override, photo fade */
@media (min-width: 2200px) { .hero-pic { width: 60%; } }
.hero-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: saturate(0.9) brightness(0.82) contrast(1.04); }
/* a soft lime-to-blue glow where the photograph meets the black */
.hero-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.82) 0, rgba(0, 0, 0, 0.55) 110px, transparent 220px), radial-gradient(60% 70% at 18% 60%, rgba(123, 214, 43, 0.16), transparent 70%), radial-gradient(50% 60% at 30% 95%, rgba(42, 157, 244, 0.14), transparent 70%); pointer-events: none; } /* taste-skill-ignore: user override, glow */
.pic-bar { position: absolute; z-index: 1; right: var(--pad); bottom: 28px; padding: 10px 16px; border-radius: 999px; background: rgba(7, 9, 12, 0.82); border: 1px solid rgba(238, 242, 246, 0.14); font-size: var(--fs-body-es); line-height: 1.4; } /* taste-skill-ignore: user override, thin border */

/* the call strip: the call card's six facts laid out across, English with the quiet Spanish beneath */
.callstrip { position: relative; z-index: 1; margin-top: clamp(1.5rem, 2.5vw, 2.5rem); background: var(--raised); padding: var(--card); border-radius: 14px; border: 1px solid rgba(238, 242, 246, 0.09); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8); } /* taste-skill-ignore: user override, card */
.strip-items { margin-top: 20px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 32px; font-size: var(--fs-body); line-height: 1.5; }
.strip-items .es { font-size: var(--fs-body-es); }
.strip-items li:not(.live-row) .es { display: block; margin-top: 4px; }   /* the hours line stays one sentence */
.strip-phone a { font-size: var(--fs-title); font-weight: 600; color: var(--action); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color var(--t-hover) ease; }
.strip-phone a:hover { color: var(--action-hover); }
@media (max-width: 1399.98px) { .strip-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.live-dot { display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.55em; vertical-align: 0.05em; background: var(--muted); opacity: 0.5; }
.live-dot[hidden] { display: none; }
.live-dot[data-open="true"] { background: var(--action); opacity: 1; }

/* ---------- a section's own picture that holds still while the section's words pass ---------- */
.pinned { display: grid; gap: var(--gap); align-items: start; }
.pinned--left { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); margin-top: var(--block); }
.pinned--right { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
.sec-stage { position: sticky; top: 32px; height: min(78vh, 820px); min-height: 420px; overflow: hidden; background: var(--sheet); border-radius: 14px; }
.layer { position: absolute; inset: 0; opacity: 0; z-index: 0; transition: opacity 1200ms var(--ease-soft); }
.layer.was-on { opacity: 1; z-index: 1; transition: none; }
.layer.is-on { opacity: 1; z-index: 2; }

/* ---------- 2. services: heading across the top, the six beside a pinned picture ---------- */
.section-head { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); gap: var(--gap); align-items: end; }
.section-head .head-intro { margin-top: 0; }
.service-list { display: grid; gap: var(--list); }
/* a lime side-line opens every service and every promise */
.service-list > li, .promises > li { border-left: 3px solid var(--action); padding-left: clamp(18px, 1.6vw, 26px); }

/* a gradient divider under every section's label line: lime to blue to nothing */
.label::after { content: ""; display: block; width: clamp(120px, 12vw, 200px); height: 2px; margin-top: 20px; background: linear-gradient(90deg, var(--action), var(--accent) 55%, transparent); } /* taste-skill-ignore: user override, divider */

/* ---------- 3. how it works: printed as a slip, its picture pinned on the right ---------- */
.slip { margin-top: var(--block); background: var(--ink); color: var(--sheet); padding: var(--card) var(--card) calc(var(--card) + 14px); max-width: 40em;
  clip-path: polygon(0 0, 100% 0, 100.000% 100%, 96.429% calc(100% - 14px), 92.857% 100%, 89.286% calc(100% - 14px), 85.714% 100%, 82.143% calc(100% - 14px), 78.571% 100%, 75.000% calc(100% - 14px), 71.429% 100%, 67.857% calc(100% - 14px), 64.286% 100%, 60.714% calc(100% - 14px), 57.143% 100%, 53.571% calc(100% - 14px), 50.000% 100%, 46.429% calc(100% - 14px), 42.857% 100%, 39.286% calc(100% - 14px), 35.714% 100%, 32.143% calc(100% - 14px), 28.571% 100%, 25.000% calc(100% - 14px), 21.429% 100%, 17.857% calc(100% - 14px), 14.286% 100%, 10.714% calc(100% - 14px), 7.143% 100%, 3.571% calc(100% - 14px), 0.000% 100%); }
.slip-rows { display: grid; gap: var(--list); }
.es-d { color: rgba(7, 9, 12, 0.7); }
.slip-final { padding: 24px 28px 28px; background: var(--sheet); color: var(--ink); }
.slip-final h3 { color: var(--action); }

/* ---------- 4. why: heading and intro on top, a wide short strip, then the four in one row ---------- */
.why-head { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); gap: var(--gap); align-items: end; }
.why-strip { margin-top: var(--block); height: clamp(180px, 16vw, 300px); overflow: hidden; background: var(--sheet); border-radius: 14px; }
.why-strip img { object-position: 50% 62%; }
.why-row { margin-top: var(--block); }
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--list) clamp(1.5rem, 3vw, 3rem); }

/* ---------- 5. contact: the park photograph as a short band, the visit card set across its lower edge ---------- */
.band--photo { background: var(--ground); padding-top: 0; }
.contact-photo { height: clamp(300px, 27vw, 520px); margin-inline: calc(var(--pad) * -1); overflow: hidden; }
.visit-card { position: relative; z-index: 1; width: min(1000px, 100%); margin: calc(-1 * clamp(120px, 11vw, 220px)) auto 0; background: var(--sheet); padding: var(--card); border-radius: 14px; border: 1px solid rgba(238, 242, 246, 0.09); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.85); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; } /* taste-skill-ignore: user override, card */
/* the closing call spans the card: its words on the left, the call button on the right */
.visit-cta { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.visit-facts { margin-top: 24px; display: grid; gap: 10px; font-size: var(--fs-body); }
.visit-facts .es, .hours .es { font-size: var(--fs-body-es); }
.visit-facts a[href^="tel"] { text-decoration-color: rgba(238, 242, 246, 0.4); text-underline-offset: 0.2em; }
.hours { padding: 20px 24px; background: var(--raised); font-size: var(--fs-body); border-radius: 10px; }
.hours-title { font-weight: 600; }
.hours-rows { margin-top: 10px; display: grid; gap: 8px; font-variant-numeric: tabular-nums; }
.hours-rows li { color: var(--muted); transition: color var(--t-hover) ease; }
.hours-rows li.is-today { color: var(--ink); }
.note { margin-top: 14px; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.button--block { display: flex; width: 100%; }

/* ---------- 6. the closing sentence: a compact lime band ---------- */
.band--lime { padding-block: 96px; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--gap); align-items: center; }
.band--lime .es, .band--lime .es-title { color: rgba(7, 9, 12, 0.72); }
.cta-action { margin-top: 32px; }
.cta-pic { position: relative; height: 360px; overflow: hidden; background: var(--sheet); border-radius: 14px; }
.cta-pic img { position: absolute; inset: 0; object-position: 50% 50%; }

/* ---------- 7. footer: plain black; logo, links, address and hours in columns, then the small print ---------- */
.footer { background: var(--ground); }
.footer-top { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; padding: 72px var(--pad) 8px; font-size: var(--fs-ui); line-height: 1.6; }
.footer-logo { width: 140px; mix-blend-mode: screen; }
.footer-links { display: grid; gap: 6px; }
.footer-links a, .footer-contact a { text-decoration: underline; text-decoration-color: rgba(238, 242, 246, 0.35); text-underline-offset: 0.22em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
.footer-links a:hover, .footer-contact a:hover { color: var(--action); text-decoration-color: currentColor; }
.footer-contact p + p { margin-top: 6px; }
.footer-legal { padding: 40px var(--pad) 56px; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); column-gap: var(--gap); row-gap: 18px; align-items: start; font-size: var(--fs-small); line-height: 1.6; }
.copyright { grid-column: 1 / -1; }
.sms { grid-column: 1; }
.sms p { max-width: 75ch; }
.sms p + p { margin-top: 0.6em; }
.credits { grid-column: 2; color: var(--muted); max-width: 75ch; }
.credits a { color: var(--link); text-underline-offset: 0.18em; }

/* ---------- narrow screens: every section stacks heading, content, picture ---------- */
@media (max-width: 1023.98px) {
  .hero-grid, .section-head, .why-head, .pinned--left, .pinned--right, .cta-grid, .visit-card, .visit-cta { grid-template-columns: minmax(0, 1fr); }
  .section-head, .why-head { gap: 24px; }
  .hero-grid { gap: 2.5rem; padding-top: 1.5rem; }
  .hero-stage { min-height: 0; }
  .hero-copy { max-width: none; }
  .hero-pic { position: relative; top: auto; bottom: auto; right: auto; width: auto; margin-inline: calc(var(--pad) * -1); aspect-ratio: 4 / 5; max-height: 72svh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%); mask-image: linear-gradient(to bottom, transparent 0%, #000 22%); } /* taste-skill-ignore: user override, photo fade */
  .pic-bar { right: var(--pad); left: var(--pad); bottom: 20px; border-radius: 14px; }
  .strip-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .nav { padding-block: 20px 4px; gap: 16px; align-items: flex-start; }
  .brand { width: clamp(118px, 30vw, 150px); }
  .nav-links { flex-direction: column; align-items: flex-end; text-align: right; gap: 4px; }
  @media (min-width: 640px) { .nav-links { flex-direction: row; align-items: center; gap: 6px 22px; } .nav { align-items: center; } }

  .pinned { gap: var(--block); }
  .pinned--left .sec-stage { order: 2; }        /* the picture follows the words */
  .sec-stage { position: relative; top: auto; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 639.98px) { .promises { grid-template-columns: minmax(0, 1fr); } }

  .contact-photo { height: 48svh; }
  .visit-card { margin-top: -80px; gap: 28px; }
  .visit-cta { gap: 24px; }

  .band--lime { padding-block: 72px; }
  .cta-pic { margin-top: var(--block); height: 260px; }

  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 56px; }
  .footer-legal { grid-template-columns: minmax(0, 1fr); }
  .sms, .credits { grid-column: 1; }
}
@media (max-width: 520px) {
  .strip-items { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .slip-final { padding: 20px 18px 24px; }
  .button { padding: 12px 22px; }
}

/* ---------- motion: one pop-in system for every component (content stays visible without JavaScript) ----------
   script.js tags each component with data-reveal and adds .is-in once, as it enters the screen, with a 70ms
   stagger between siblings arriving together. Buttons use data-reveal="pop", a slight overshoot. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px) scale(0.96); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal="pop"] { transition-timing-function: var(--ease-out), cubic-bezier(0.34, 1.56, 0.64, 1); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* a section's picture: the incoming one fades in and settles from a soft scale */
  .layer.is-on img { animation: settle 1400ms var(--ease-out) both; }
  .hero-pic img { animation: settle 1800ms var(--ease-out) both; }
  .live-dot[data-open="true"] { animation: beat 2.4s ease-in-out infinite; }
}
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) {
  .layer { transition: none; }
}