@import "base.css";

/* ==========================================================================
   Baltazar Dental Clinic — home.css
   Structural tokens (defined in base.css):
     --frame   ~26px  bleed margin on hero / contact / footer cards
     --gutter  ~88px  reading margin for all text + inset media
     --radius  24px   corner radius on every card / image
   All three are vw-based clamps so the ratios hold at any viewport width.
   ========================================================================== */

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

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  padding: clamp(24px, 3.2vw, 40px) var(--gutter) 0;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.nav.is-scrolling {
  opacity: 0.3;
}

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
}

.nav-link {
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  color: var(--charcoal);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.nav-link:hover { font-weight: bold;}

/* Kept hidden at every breakpoint on purpose — nav collapses to smaller,
   still-inline links instead of a burger (see TABLET / PHONE below). */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.nav-toggle span {
  width: 22px;
  height: 1px;
  background: var(--white);
}

/* ---------- Hero (framed card: small vertical inset, wide horizontal margin, per PSD source) ---------- */
.hero {
  position: relative;
  margin: var(--frame-y) var(--frame);
  height: calc(100svh - (var(--frame-y) * 2));
  min-height: 545px;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--charcoal);
}

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  object-fit: cover;
  object-position: center 20%;

}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33,33,33,0.15) 0%, rgba(33,33,33,0.15) 45%, rgba(33,33,33,0.88) 100%);
}

/* Static — does not parallax. It's a legibility layer, not a photo, and the
   asset is taller than the frame, so pinning it to the top (rather than
   center) keeps its intended crop always in view instead of drifting to
   reveal whatever is further down the file. */
.hero-layer--contrast {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.hero-content {
  /* sibling of .hero-media, never touched by the parallax transform —
     stays put while the photo behind it drifts */
  position: relative;
  z-index: 3;
  color: var(--white);
  /* text aligns to the global reading margin, minus the card's own frame inset */
  padding: 0 calc(var(--gutter) - var(--frame)) clamp(40px, 6vw, 72px);
  max-width: 760px;
  transform: translateY(clamp(20px, 4vw, 50px));
}

.hero-content h1 {
  font-size: var(--fs-hero);
  line-height: 1.08;
  letter-spacing: 0.005em;
  font-weight: 700;
}

.hero-copy {
  margin-top: 0.2em;
  max-width: 90%;
  width: clamp(310px, 72vw, 760px);
  color: var(--white);
  font-size: var(--fs-body);
}

.hero-actions {
  margin-top: 1.8em;
  display: flex;
  gap: clamp(28px, 3vw, 44px);
  flex-wrap: wrap;
}

/* ---------- Services ---------- */
.services {
  padding: var(--section-y) 0;
}

.services-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(24px, 4vw, 40px);
}

.services-header h2 {
  font-size: var(--fs-h2);
  letter-spacing: 0.01em;
}

.services-header p {
  margin-top: 0.3em;
  color: var(--gray);
  font-size: var(--fs-small);
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 290px) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

/* Tooth graphic: a plain floating image, no card/border/radius — matches reference.
   Drifts vertically via [data-parallax-float] in base.css; the wrapper itself
   stays in normal flow so the grid layout is never affected. */
.services-media {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.services-media img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  top: 0;
}

.services-col {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 28px);
}

.services-col li {
  text-align: center;
}

.services-col li h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
}

.services-col li p {
  margin: 0 auto;
  color: var(--gray);
  font-size: var(--fs-smaller);
  max-width: 34ch;
}

/* ---------- About (image + text share the standard reading-margin container) ---------- */
.about {
  padding: var(--section-y) 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.09fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.about-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3.3 / 4.52;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  max-width: 560px;
  width: 100%;
  justify-self: center;
}

.about-media img {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 150%;
  max-width: none;
  object-fit: cover;
  will-change: transform;
}

/* Two stacked layers — the photo and a gradient/contrast pass over it —
   each parallaxing vertically at its own speed (set via data-parallax-y on
   the <img> itself, see js/main.js). The card itself never moves. */
.about-layer--gradient {
  mix-blend-mode: multiply;
}

.about-content .eyebrow {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: 0.06em;
  margin-bottom: 0.6em;
}

/* Paragraph: sized a step up from --fs-small (was too small next to the
   eyebrow) and no longer capped in ch — it now fills the column edge to
   edge instead of leaving dead space on the right. */
.about-content p {
  color: var(--grey-soft);
  max-width: 100%;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.about-content p + p { margin-top: 1.1em; }

/* space-between pins the first stat to the column's left edge and the
   last stat to its right edge — "corner to corner" instead of a loose
   left-hugging cluster. */
.about-stats {
  display: flex;
  
  gap: clamp(16px, 3vw, 36px);
  margin-top: clamp(20px, 3vw, 32px);
}

.stat-num {
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  display: block;
  margin-top: 0.6em;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  max-width: 12ch;
}

/* ---------- How Booking Works — vertical timeline. Circle markers sit
   on a connecting line running down the left; each step's text reads
   horizontally beside its marker. Steps fade+slide in on scroll,
   alternating from left/right (see .how-step nth-child rules), via
   the .is-visible class toggled by an IntersectionObserver in main.js. ---------- */
.how {
  padding: var(--section-y) 0;
}

.how-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(12px, 3vw, 22px);
  align-items: center;
}

.how-header {
  text-align: left;
  max-width: 560px;
  margin: 0 auto clamp(48px, 7vw, 10px);
}

.how-header h2 {
  font-size: var(--fs-h2);
  letter-spacing: 0.01em;
}

.how-header p {
  margin-top: 0.3em;
  color: var(--gray);
  font-size: var(--fs-small);
}

.how-timeline {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 2vw, 10px);
}

.how-timeline::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 27px;
  width: 1px;
  background: var(--line);
}

.how-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.how-step:nth-child(even) {
  transform: translateX(36px);
}

.how-step.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.how-step-marker {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.5s var(--ease) 0.15s, opacity 0.5s ease 0.15s;
}

.how-step.is-visible .how-step-marker {
  transform: scale(1);
  opacity: 1;
}

.how-step-num {
  font-size: var(--fs-h3);
  font-weight: 700;
}

.how-step-content {
  padding: 0;
}

.how-step-content h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
}

.how-step-content p {
  margin: 0.5em 0 0;
  color: var(--gray);
  font-size: var(--fs-smaller);
  max-width: 40ch;
  width: 100%;
  max-width: clamp(250px, 35vw, 500px);
}

.how-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3.3 / 4.5;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  max-width: 560px;
  width: 100%;
  justify-self: center;
}

.how-media img {
  position: absolute;
  top: -9%;
  left: 0;
  width: 100%;
  height: 118%;
  max-width: none;
  object-fit: cover;
  will-change: transform;
}

/* ---------- FAQ ---------- */
.faq {
  padding: var(--section-y) 0;
}

.faq-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(40px, 6vw, 64px);
}

.faq-header h2 {
  font-size: var(--fs-h2);
  letter-spacing: 0.01em;
}

.faq-header p {
  margin-top: 0.3em;
  color: var(--gray);
  font-size: var(--fs-small);
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--card-shadow);
  background: var(--white);
  overflow: hidden;
  /* scroll reveal */
  opacity: 0;
  transform: translateY(50px) scale(0.8);
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.faq-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 24px) clamp(20px, 3vw, 28px);
  text-align: left;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--charcoal);
  cursor: pointer;
}

.faq-icon {
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--charcoal);
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--ease);
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}

.faq-answer-inner {
  overflow: hidden;
}

.faq-answer-inner p {
  padding: 0 clamp(20px, 3vw, 28px) clamp(18px, 2.4vw, 24px);
  color: var(--gray);
  font-size: var(--fs-small);
  max-width: 62ch;
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

/* ---------- Contact (framed card, like hero — inset margin + full radius) ---------- */
.contact {
  margin: var(--section-y) var(--frame);
  overflow: hidden;
  background: none;
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.contact-content {
  /* card carries the small --frame margin only, so text still needs the
     standard reading inset to align with everything else on the page */
  padding: clamp(32px, 5vw, 64px) calc(var(--gutter) - var(--frame));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-content h2 {
  font-size: var(--fs-h2);
  color: var(--charcoal);
}

.contact-content > p {
  margin-top: 1em;
  color: var(--charcoal);
  max-width: 40ch;
}

.contact-links {
  margin-top: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 0.9em;
}

.contact-links img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.contact-links a {
  color: var(--charcoal);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease);
}

.contact-links a i {
  width: 18px;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
  color: var(--charcoal);
}
.contact-links a:hover { border-color: var(--line-soft); text-decoration: underline; }

/* map sits inset within the dark card, own radius, per reference */
.contact-media {
  display: flex;
  padding: clamp(16px, 2.4vw, 28px) clamp(16px, 2.4vw, 28px) clamp(16px, 2.4vw, 28px) 0;
}

.contact-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #333;
  box-shadow: var(--card-shadow);
}

.contact-map iframe {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 60px);
  border: 0;
  /* Black and white map */
  filter: grayscale(1) contrast(1.15) brightness(0.80);
}

.map-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- Footer: rounded white card + separate square dark bar ---------- */
.footer-card {
  margin: var(--section-y) var(--frame) 0;
  border-radius: var(--radius);
  box-shadow: 0 16px 40px -24px rgba(33, 33, 33, 0.25);
  background: var(--white);
  /* card carries the small --frame margin only, so content needs the
     standard reading inset to align with the rest of the page */
  padding: clamp(36px, 5vw, 64px) calc(var(--gutter) - var(--frame)) clamp(32px, 4vw, 48px);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 56px);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  transform: translateY(clamp(9px, 1.5vw, 18px));
}

.footer-logo {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.footer-logo span {
  display: block;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  width: fit-content;
}

.footer-tagline {
  margin-top: 1.6em;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-col h4 {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 1.2em;
}

.footer-col a {
  font-size: var(--fs-small);
  color: var(--gray);
  padding: 0.35em 0;
}
.footer-col a:hover { color: var(--charcoal); }

.footer-cta {
  text-align: left;
}

.footer-cta p {
  font-size: var(--fs-small);
  color: var(--gray);
  margin: 0 0 1.4em;
}

.footer-cta .footer-cta-link {
  display: inline-block;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--charcoal);
  padding: 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.footer-cta .footer-cta-link:hover {
  border-color: var(--charcoal);
}

/* full-bleed square bar, flush under the rounded card above — the reference
   runs this strip edge-to-edge (no side margin), with only the text inside
   it aligned to the standard reading gutter */
.footer-bar {
  margin: 0;
  background: var(--charcoal);
  padding: 18px var(--gutter);
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  
  color: var(--white-soft);
}

/* ==========================================================================
   RESPONSIVE

   Three breakpoints, cascading from the desktop styles above:
     TABLET LANDSCAPE  893px–1200px  — iPads/tablets in landscape. Desktop's
                        vw-based --gutter/--frame clamps are still huge at
                        these widths (23vw ≈ 235px+ at 1024px), which is what
                        was crushing all page content into a narrow center
                        column — this block just pulls those two tokens down
                        to fixed, reasonable values. Nothing else changes.
     TABLET  max-width: 892px   — phone-to-tablet down to landscape phones
     PHONE   max-width: 790px   — phones

   PHONE is declared after TABLET, so for any width ≤790px both blocks
   technically match and PHONE always wins the properties it repeats —
   this is intentional and is how the two share a var() palette without
   duplicating the parts that don't change.
   ========================================================================== */

/* Prevent horizontal scrolling */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* ==========================================================================
   TABLET LANDSCAPE (893px–1440px) — covers iPad/iPad Pro landscape widths
   ========================================================================== */
@media (min-width: 893px) and (max-width: 1440px) {
  :root {
    --gutter: clamp(40px, 5vw, 72px);
    --frame: clamp(24px, 3vw, 40px);
  }
}

/* ==========================================================================
   TABLET  (≤892px)
   ========================================================================== */
@media (max-width: 892px) {

  :root {
    --frame: 28px;
    --gutter: 32px;
    --radius: 18px;

    --fs-hero: 2.2rem;
    --fs-h2: 1.5rem;
    --fs-h3: 0.9rem;
    --fs-body: 0.82rem;
    --fs-small: 0.72rem;
    --fs-label: 0.5rem;

    --nav-height: 80px;
  }

  /* ---------- Navigation ---------- */
  .nav {
    width: 100%;
    padding: 20px var(--gutter) 0;
  }
  .nav-inner {
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    flex-wrap: nowrap;
  }
  .nav-link {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  /* ---------- Container ---------- */
  .container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* ---------- Hero ---------- */
  .hero {
    margin-left: var(--frame);
    margin-right: var(--frame);
    min-height: 500px;
  }
  .hero img {
    object-fit: cover;
    object-position: center center;
  }
  .hero-content {
    max-width: 680px;
    padding-left: clamp(20px, 3.6vw, 44px);
    padding-right: clamp(24px, 4vw, 48px);
    padding-bottom: 48px;
  }
  .hero-content h1 {
    font-size: var(--fs-hero);
  }
  .hero-copy {
    font-size: var(--fs-body);
  }
  .hero-actions {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .btn {
    font-size: var(--fs-small);
    text-align: left;
  }

  /* ---------- Services ---------- */
  .services {
    padding: 64px 0;
  }
  .services-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }
  .services-media {
    order: -1;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
  }
  .services-col {
    gap: 28px;
  }
  .services-col li {
    text-align: center;
  }
  .services-col li p {
    margin-left: auto;
    margin-right: auto;
    font-size: var(--fs-small);
  }

  /* ---------- About ---------- */
  .about {
    padding: 64px 0;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-media {
    aspect-ratio: 4 / 3;
  }
  .about-content .eyebrow {
    font-size: 1.4rem;
  }
  .about-content p {
    font-size: var(--fs-body);
  }
  .about-stats {
    gap: 28px;
  }
  .stat-num {
    font-size: 2rem;
  }

  /* ---------- How Booking Works ---------- */
  .how {
    padding: 64px 0;
  }
  .how-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .how-media {
    order: -1;
    aspect-ratio: 3.1 / 3.2;
  }
  .how-timeline {
    gap: 36px;
  }
  .how-step {
    gap: 20px;
  }
  .how-step-marker {
    width: 48px;
    height: 48px;
  }
  .how-timeline::before {
    left: 23px;
  }
  .how-step-content p {
    font-size: var(--fs-small);
  }

  /* ---------- FAQ ---------- */
  .faq {
    padding: 64px 0;
  }
  .faq-question {
    font-size: var(--fs-small);
  }
  .faq-answer-inner p {
    font-size: var(--fs-small);
  }

  /* ---------- Contact ---------- */
  .contact {
    margin-left: var(--frame);
    margin-right: var(--frame);
    display: grid;
    grid-template-columns: 1fr;
  }
  .contact-media {
    order: -1;
    width: 100%;
    padding: 18px;
  }
  .contact-map {
    width: 100%;
    height: 220px;
    min-height: 0;
  }
  .contact-content {
    width: 100%;
    padding: 36px calc(var(--gutter) - var(--frame));
  }
  .contact-content h2 {
    font-size: var(--fs-h2);
  }
  .contact-content > p {
    font-size: var(--fs-body);
  }
  .contact-links {
    gap: 12px;
  }
  .contact-links img {
    width: 18px;
    height: 18px;
  }
  .contact-links a {
    font-size: var(--fs-small);
  }

  /* ---------- Footer ---------- */
  .footer-card {
    margin-left: var(--frame);
    margin-right: var(--frame);
  }
  .footer-top {
    grid-template-columns: 1.3fr 0.85fr 0.85fr 1.15fr;
    gap: 16px;
    align-items: start;
  }
  .footer-brand {
    grid-column: auto;
    margin-bottom: 0;
  }
  .footer-cta {
    grid-column: auto;
    text-align: left;
    margin-top: 0;
  }
  .footer-cta p {
    font-size: 0.6rem;
    margin: 0 0 0.8em;
  }
  .footer-cta .footer-cta-link {
    font-size: 0.7rem;
  }
  .footer-logo {
    font-size: 1rem;
  }
  .footer-tagline {
    font-size: 0.75rem;
  }
  .footer-col h4 {
    font-size: 0.65rem;
  }
  .footer-col a {
    font-size: 0.65rem;
  }
  .footer-bar {
    flex-direction: column;
    gap: 8px;
  }
}

/* ==========================================================================
   PHONE  (≤790px)
   ========================================================================== */
@media (max-width: 790px) {

  :root {
    --frame: 14px;
    --gutter: 16px;
    --radius: 12px;

    --fs-hero: 1.55rem;
    --fs-h2: 1.15rem;
    --fs-h3: 0.78rem;
    --fs-body: 0.68rem;
    --fs-small: 0.6rem;
    --fs-label: 0.42rem;
    --fs-micro: 0.3rem;

    --nav-height: 64px;
  }

  /* ---------- Navigation ---------- */
  .nav {
    width: 100%;
    padding: 14px 10px 0;
  }
  .nav-inner {
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    flex-wrap: nowrap;
  }
  .nav-link {
    font-size: 0.63rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding-bottom: 2px;
  }

  /* ---------- Container ---------- */
  .container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* ---------- Hero ---------- */
  .hero {
    width: auto;
    margin: 10px var(--frame);
    min-height: 460px;
    height: calc(100svh - 20px);
  }
  .hero-content {
    width: 100%;
    max-width: 100%;
    padding: 0 var(--gutter) 32px;
  }
  .hero-content h1 {
    font-size: var(--fs-hero);
    line-height: 1.05;
  }
  .hero-copy {
    margin-top: 0.9em;
    font-size: var(--fs-body);
    line-height: 1.4;
    max-width: 42ch;
  }
  .hero img {
    object-position: 70% center;
  }
  .hero-actions {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    margin-top: 1.3em;
  }
  .btn {
    font-size: 0.6rem;
    text-align: left;
    white-space: nowrap;
  }

  /* ---------- Services ---------- */
  .services {
    padding: 48px 0;
  }
  .services-header {
    margin-bottom: 30px;
  }
  .services-header h2 {
    font-size: var(--fs-h2);
  }
  .services-header p {
    font-size: var(--fs-small);
  }
  .services-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }
  .services-media {
    order: -1;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 140px;
    margin: 0 auto;
  }
  .services-col {
    gap: 24px;
  }
  .services-col li {
    text-align: center;
  }
  .services-col li h3 {
    font-size: var(--fs-h3);
  }
  .services-col li p {
    margin-left: auto;
    margin-right: auto;
    font-size: var(--fs-small);
    line-height: 1.4;
  }

  /* ---------- About ---------- */
  .about {
    padding: 48px 0;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about-media {
    aspect-ratio: 3.6 / 4.2;
  }
  .about-content .eyebrow {
    font-size: 1.15rem;
    margin-bottom: 0.5em;
  }
  .about-content p {
    font-size: var(--fs-body);
    line-height: 1.45;
  }
  .about-stats {
    gap: 20px;
    margin-top: 24px;
  }
  .stat-num {
    font-size: 1.6rem;
  }
  .stat-label {
    font-size: var(--fs-label);
  }

  /* ---------- How Booking Works ---------- */
  .how {
    padding: 48px 0;
  }
  .how-media {
    aspect-ratio: 3 / 4.2;
    border-radius: var(--radius);
  }
  .how-header {
    margin-bottom: 30px;
  }
  .how-timeline {
    gap: 28px;
  }
  .how-step {
    gap: 16px;
    transform: translateX(-20px);
  }
  .how-step:nth-child(even) {
    transform: translateX(20px);
  }
  .how-step-marker {
    width: 42px;
    height: 42px;
  }
  .how-step-num {
    font-size: var(--fs-small);
  }
  .how-timeline::before {
    left: 20px;
  }
  .how-step-content {
    padding-top: 6px;
  }
  .how-step-content p {
    font-size: var(--fs-small);
    line-height: 1.4;
  }

  /* ---------- FAQ ---------- */
  .faq {
    padding: 48px 0;
  }
  .faq-header {
    margin-bottom: 26px;
  }
  .faq-question {
    padding: 14px 16px;
    font-size: var(--fs-small);
    gap: 10px;
  }
  .faq-answer-inner p {
    padding: 0 16px 16px;
    font-size: var(--fs-small);
  }

  /* ---------- Contact ---------- */
  .contact {
    width: auto;
    margin: 48px var(--frame);
    display: flex;
    flex-direction: column;
  }
  .contact-media {
    order: -1;
    width: 100%;
    padding: 10px;
  }
  .contact-map {
    width: 100%;
    height: 150px;
    min-height: 0;
    border-radius: 10px;
  }
  .contact-map iframe {
    width: 100%;
    height: 100%;
  }
  .contact-content {
    width: 100%;
    padding: 26px var(--gutter) 28px;
  }
  .contact-content h2 {
    font-size: var(--fs-h2);
  }
  .contact-content > p {
    margin-top: 0.7em;
    font-size: var(--fs-body);
    line-height: 1.4;
  }
  .contact-links {
    margin-top: 18px;
    gap: 10px;
  }
  .contact-links li {
    width: auto;
  }
  .contact-links a {
    gap: 7px;
    font-size: 0.6rem;
  }
  .contact-links img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  /* ---------- Footer ---------- */
  .footer-card {
    margin: 48px var(--frame) 0;
    padding: 28px var(--gutter) 24px;
  }
  .footer-top {
    grid-template-columns: 1.15fr 0.85fr 0.85fr 1.05fr;
    gap: 10px;
    align-items: start;
  }
  .footer-brand {
    grid-column: auto;
    margin: 0;
  }
  .footer-cta {
    grid-column: auto;
    text-align: left;
    margin-top: 0;
  }
  .footer-cta p {
    margin: 0 0 0.5em;
    max-width: none;
    font-size: 0.42rem;
  }
  .footer-cta .footer-cta-link {
    font-size: 0.5rem;
  }
  .footer-logo {
    font-size: 0.72rem;
  }
  .footer-logo span {
    font-size: 0.4rem;
    letter-spacing: 0.08em;
  }
  .footer-tagline {
    margin-top: 1em;
    font-size: 0.5rem;
    line-height: 1.3;
  }
  .footer-col h4 {
    font-size: 0.48rem;
    margin-bottom: 0.6em;
  }
  .footer-col a {
    font-size: 0.48rem;
    padding: 0.15em 0;
  }
  .footer-bar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 12px var(--gutter);
    font-size: 0.4rem;
  }
}

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .how-step,
  .how-step-marker {
    opacity: 1;
    transform: none;
    transition: none;
  }
}