/* =====================================================================
   VISAGE CLINIC — responsive.css
   Dedicated compositions for laptop · tablet · mobile
   ===================================================================== */

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1280px) {
  .nav__links { gap: 16px; }
  .nav__link { font-size: .68rem; }
}

@media (max-width: 1180px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .results__grid { grid-auto-rows: minmax(48px, 7.4vw); }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  :root { --nav-h: 68px; }

  .section-head--split { grid-template-columns: 1fr; align-items: start; }
  .section-head__text { justify-self: start; padding-bottom: 0; }

  /* Hero */
  .hero__title { max-width: 12ch; }
  .hero__fallback { right: -6vw; top: 8vh; width: 60vw; }

  /* Intro */
  .intro__sculpture { grid-column: 1 / 7; }
  .intro__panel { grid-column: 7 / 13; }
  .intro__aside { grid-column: 1 / 7; }

  /* Treatments: visual on top, list below, inline details */
  .treatments__layout { grid-template-columns: 1fr; gap: 24px; }
  .treatments__visual { position: relative; top: auto; order: -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
  .treatments__canvas-wrap { max-height: 48vh; }
  .treatments__info { margin-top: 0; }
  .treatments__detail { display: block; max-height: 0; overflow: hidden; transition: max-height .7s var(--ease-out), opacity .5s; opacity: 0; }
  .treatments__detail p { padding: 0 0 22px 60px; color: var(--ink-muted); font-size: .95rem; max-width: 520px; }
  .treatments__item.is-active .treatments__detail { max-height: 220px; opacity: 1; }
  .treatments__info-text { display: none; }

  /* Before / After */
  .ba__grid { grid-template-columns: 1fr; gap: 40px; }
  .ba__head { position: static; }
  .ba__stats { grid-column: 1; }

  /* Technology */
  .tech__grid { grid-template-columns: 1fr 1fr; }
  .tech__visual { height: 64vh; }

  /* About */
  .about__split { grid-template-columns: 1fr; }
  .about__sticky { position: static; height: auto; padding: var(--section-pad) var(--gutter) 0; }
  .about__img { max-height: 72vh; }
  .about__content { padding: clamp(48px, 7vw, 96px) var(--gutter) var(--section-pad); max-width: none; }

  /* Founder / Journal / Footer */
  .founder__grid { grid-template-columns: 1fr; gap: 40px; }
  .founder__media { position: static; }
  .founder__portrait { max-height: 70vh; aspect-ratio: 4 / 4.6; }
  .founder__content { max-width: 720px; }
  .journal__layout { grid-template-columns: 1fr; gap: 48px; }
  .journal__feature-img { max-height: 60vh; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }

  /* Booking dialog */
  .booking__inner { grid-template-columns: 1fr; }
  .booking__side { padding-bottom: 32px; }
  .booking__facts { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  :root { --section-pad: clamp(72px, 16vw, 120px); }
  body { font-size: 1rem; }

  .display-xl { font-size: clamp(3rem, 14vw, 6rem); }
  .display-l { font-size: clamp(2.3rem, 9.5vw, 4.4rem); }

  /* Nav */
  .nav { padding: 12px 16px; }
  .nav.is-scrolled { padding: 10px 14px; }
  .nav__inner { padding: 8px 8px 8px 16px; }
  .nav__logo { font-size: 1.4rem; }

  /* Hero: object above, text below */
  .hero { height: 180vh; }
  .hero__stage { min-height: 600px; align-items: end; }
  .hero__content { padding-bottom: 128px; padding-top: 0; }
  .hero__title { font-size: clamp(2.7rem, 12.5vw, 5rem); max-width: none; }
  .hero__lead { font-size: .98rem; max-width: 380px; margin-top: 20px; }
  .hero__actions { margin-top: 26px; gap: 10px; }
  .hero__fallback { right: auto; left: 50%; top: 10vh; transform: translateX(-50%); width: min(70vw, 340px); }
  .hero__meta { display: none; }
  .hero__scroll { bottom: 32px; }
  .hero__glow--a { width: 120vw; height: 120vw; right: -40vw; top: -40vw; }

  /* Intro */
  .intro__grid { display: block; }
  .intro__title { margin-top: 0; }
  .intro__sculpture { width: 70%; margin-top: 24px; min-height: 0; }
  .intro__panel { margin-top: 40px; margin-bottom: calc(-1 * clamp(56px, 10vw, 100px)); }
  .intro__aside { margin-top: 48px; max-width: none; }

  /* Treatments */
  .treatments { padding-top: calc(var(--section-pad) + 48px); }
  .treatments__visual { grid-template-columns: 1fr; gap: 12px; }
  .treatments__canvas-wrap { width: 72%; max-height: 42vh; }
  .treatments__index { font-size: clamp(5rem, 22vw, 8rem); right: -8%; }
  .treatments__btn { grid-template-columns: 36px 1fr 36px; gap: 12px; }
  .treatments__name { font-size: clamp(1.5rem, 6.8vw, 2.2rem); }
  .treatments__item.is-active .treatments__name, .treatments__btn:hover .treatments__name { transform: translateX(4px); }
  .treatments__detail p { padding-left: 48px; }

  /* Before / After */
  .ba__frame { aspect-ratio: 4 / 5; max-height: none; }
  .ba__stats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .ba__stats strong { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .ba__handle-knob { width: 50px; height: 50px; }

  /* Technology */
  .tech { height: 420vh; }
  .tech__grid { grid-template-columns: 1fr; gap: 0; align-content: start; height: 100%; padding-top: calc(var(--nav-h) + 8px); }
  .tech__visual { height: 36vh; order: -1; }
  .tech__caption { display: none; }
  .tech__title { font-size: clamp(2rem, 9vw, 3.4rem); }
  .tech__steps { margin-top: 16px; }
  .tech__step { padding: 10px 0; grid-template-columns: 32px 1fr; gap: 12px; }
  .tech__step h3 { font-size: 1.25rem; }
  .tech__step p { font-size: .86rem; }
  .tech__step.is-active p { max-height: 120px; }
  .tech__progress { margin-top: 16px; }

  /* Journey: vertical */
  .journey__pin { height: auto; min-height: 0; padding: var(--section-pad) 0 calc(var(--section-pad) - 24px); }
  .journey__track { flex-direction: column; gap: 56px; padding-right: var(--gutter); }
  .journey__panel, .journey__panel--last { width: 100%; min-height: 0; padding-right: 0; }
  .journey__num { font-size: clamp(5rem, 24vw, 9rem); }
  .journey__body { margin-top: 24px; max-width: none; padding-top: 0; }
  .journey__fig { position: relative; right: auto; top: auto; width: 56%; margin: 24px 0 0 auto; aspect-ratio: 4 / 5; }
  .journey__bar { display: none; }

  /* Results: two-column editorial stack */
  .results__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 16px; }
  .results__item { grid-column: auto !important; grid-row: auto !important; }
  .results__item .img-reveal { aspect-ratio: 4 / 5; flex: none; }
  .results__item--1 { grid-column: 1 / 3 !important; }
  .results__item--1 .img-reveal { aspect-ratio: 4 / 4.4; }
  .results__item--2 { margin-top: 24px; }
  .results__item--5 { grid-column: 1 / 3 !important; width: 70%; margin-left: auto; }
  .results__note { grid-column: 1 / 3 !important; grid-row: auto !important; margin-top: 16px; }
  .results__item figcaption { flex-direction: column; gap: 4px; }
  .results__item figcaption span:last-child { text-align: left; }

  /* About */
  .about__block { grid-template-columns: 1fr; gap: 10px; }
  .about__inline { gap: 14px; }
  .about__values { gap: 10px 28px; }
  .about__stats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .about__stats strong { font-size: clamp(1.5rem, 6vw, 2.2rem); }

  /* Founder */
  .founder__portrait { aspect-ratio: 4 / 5; max-height: none; }
  .founder__bio { font-size: 1rem; }

  /* Journal */
  .journal__row a { grid-template-columns: 28px 1fr 40px; gap: 14px; }
  .journal__row-date { display: none; }
  .journal__row-arrow { width: 40px; height: 40px; }

  /* CTA */
  .cta { min-height: 92vh; }
  .cta__title { font-size: clamp(2.8rem, 13vw, 5rem); }
  .cta__visual .blob-fallback { right: -20vw; top: -10vh; bottom: auto; width: 80vw; opacity: .6; }
  .cta__actions { gap: 24px; }

  /* Footer */
  .footer__top { grid-template-columns: 1fr; align-items: start; gap: 36px; }
  .footer__cta { justify-self: start; align-items: flex-start; text-align: left; }
  .footer__bottom { flex-direction: column; gap: 14px; }

  /* Booking dialog */
  .booking { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 20px; }
  .booking__side { min-height: 0; }
  .booking__title { font-size: 2.1rem; }
  .field-row { flex-direction: column; gap: 18px; }
  .booking__actions { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .nav__cta { display: none; }
  .nav__inner { padding: 6px 6px 6px 14px; }
  .btn { padding: .95rem 1.45rem; font-size: .7rem; }
  .btn--lg { padding: 1.15rem 1.8rem; font-size: .74rem; }
  .hero__stage { min-height: 560px; }
  .hero__content { padding-bottom: 104px; }
  .hero__actions .btn { width: 100%; justify-content: space-between; }
  .intro__sculpture { width: 84%; }
  .intro__panel { padding: 28px 22px; }
  .treatments__canvas-wrap { width: 86%; }
  .ba__label { top: 12px; padding: 7px 10px; }
  .ba__label--before { left: 12px; } .ba__label--after { right: 12px; }
  .results__grid { grid-template-columns: 1fr; }
  .results__item--2, .results__item--5 { margin-top: 0; width: 100%; }
  .results__item--3, .results__item--4 { width: 82%; }
  .results__item--4 { margin-left: auto; }
  .about__inline-img--offset { margin-top: 32px; }
  .footer__cols { grid-template-columns: 1fr; }
  .footer__word { margin-top: 8px; }
}

/* Short viewports (landscape phones / small laptops) */
@media (max-height: 640px) and (min-width: 901px) {
  .hero__title { font-size: clamp(2.6rem, 6vw, 5rem); }
  .treatments__canvas-wrap { max-height: 56vh; }
}