/* Phone composition: heading, image and controls each have their own space. */
@media (max-width:720px), (max-height:500px) and (pointer:coarse) {
  :root {
    --gutter:clamp(18px,5vw,30px);
    --phone-header:calc(4.5rem + env(safe-area-inset-top,0px));
  }
  html {scroll-padding-top:calc(var(--phone-header) + 16px);-webkit-text-size-adjust:100%}
  .shell {padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
  .header,.has-scrolled .header,.menu-open .header {height:var(--phone-header);padding-top:env(safe-area-inset-top,0px)}
  .header-inner {gap:12px}
  .header .brand {min-width:0;flex-shrink:1}
  .header .brand-name {font-size:1.95rem;line-height:1}
  .header .brand-caption {font-size:.75rem;line-height:1.5;letter-spacing:.08em;margin-top:5px}
  .desktop-nav,.header-cta {display:none}
  .menu-button {display:flex;flex:none;width:46px;height:46px;border-radius:8px}
  .mobile-nav {top:100%;max-height:calc(100svh - var(--phone-header));overflow-y:auto;padding:10px var(--gutter) calc(20px + env(safe-area-inset-bottom,0px))}
  .mobile-nav a,.mobile-nav button {min-height:54px;font-size:1rem}
  .experience,.experience-stage,.cleaning-story,.cleaning-stage {height:100svh;min-height:34rem}
  .experience.scene-enhanced {height:350svh}
  .cleaning-story.cleaning-enhanced {height:300svh}
  .experience-stage,.cleaning-stage {
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
    padding-top:calc(var(--phone-header) + 14px);
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    background:#0b1013;
  }
  .hero-heading,.finish-heading,.cleaning-film-heading {
    position:relative;inset:auto;grid-area:1 / 1;align-self:start;min-width:0;padding-bottom:10px;
  }
  .hero-heading .eyebrow,.finish-heading .eyebrow,.cleaning-film-heading .eyebrow {
    font-size:.75rem;line-height:1.5;letter-spacing:.055em;max-width:none;
  }
  .hero-heading h1,.finish-heading>p:last-child {
    font-size:clamp(2.8rem,12.7vw,4.5rem);line-height:.98;letter-spacing:-.01em;margin-top:9px;
  }
  .hero-heading h1>span {display:block}
  .cleaning-film-heading h3 {font-size:clamp(2.75rem,12vw,4.1rem);line-height:1;margin-top:9px}
  .car-visual,.cleaning-visual {
    position:relative;inset:auto;grid-area:2 / 1;width:100%;height:100%;min-width:0;min-height:0;align-self:stretch;
  }
  .car-visual .scene-poster {object-fit:contain;object-position:center}
  .experience-stage:after,.cleaning-stage:after {background:linear-gradient(180deg,#05080b45,transparent 34%,transparent 75%,#05080b45)}
  .hero-bottom,.cleaning-film-bottom {position:relative;inset:auto;grid-area:3 / 1;padding-top:10px;min-width:0}
  .hero-bottom-top,.cleaning-film-actions {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:12px}
  .scene-copy,.cleaning-film-actions>p {font-size:1rem;line-height:1.45;max-width:none;overflow-wrap:break-word}
  .scene-copy>span,.scene-copy>br {display:none}
  .play-scene,.cleaning-film-actions>.play-scene {flex-direction:row;gap:7px;font-size:.875rem;min-height:46px;padding:4px 0;align-items:center}
  .play-icon,.cleaning-film-actions .play-icon {width:32px;height:32px;flex:none}
  .hero-bottom-lower,.cleaning-film-nav {margin:0;padding-top:9px;gap:0}
  .phase-nav,.cleaning-phases {display:grid;width:100%;gap:5px;grid-template-columns:repeat(5,minmax(0,1fr))}
  .phase-nav {grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,.9fr);gap:3px}
  .cleaning-phases {grid-template-columns:repeat(4,minmax(0,1fr))}
  .phase-nav>button,.cleaning-phases>button {
    justify-content:center;min-width:0;min-height:48px;padding:9px 2px;gap:0;
    font-family:var(--font-display);font-size:1rem;font-weight:600;line-height:1.2;
    border:1px solid #ffffff20;border-radius:6px;background:#ffffff05;color:#d5dedb;white-space:normal;overflow-wrap:anywhere;
  }
  .phase-nav>button[aria-current],.cleaning-phases>button[aria-current] {background:#dcfa8516;border-color:#dcfa8570;color:var(--lime)}
  .phase-nav>button>span,.cleaning-phases>button>span,.scroll-cue {display:none}
  .cleaning-film-nav {flex-direction:column;align-items:stretch}
  .cleaning-film-nav>a {align-self:flex-end;min-height:44px;font-size:.875rem;gap:8px;margin-top:3px}
  .in-cleaning .floating-contact {display:none}
  .floating-contact {right:max(16px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));min-height:48px;border-radius:8px}

  .section-topline {gap:15px;padding-bottom:16px}
  .section-label,.small-label {font-size:.75rem;line-height:1.6;letter-spacing:.05em}
  .small-heading {font-size:.875rem;max-width:150px;line-height:1.45}
  .intro-section {padding-block:42px 48px}
  .intro-grid {grid-template-columns:minmax(0,1fr);gap:20px;padding-top:25px}
  .intro-grid h2 {font-size:clamp(3rem,12vw,4.5rem);line-height:1.02}
  .intro-grid>p {max-width:34ch;font-size:1rem;line-height:1.7;padding:0}
  .services-section {padding-bottom:44px}
  .service-tabs {grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;border:0;margin-block:18px}
  .service-tabs button {justify-content:center;font-size:clamp(1.25rem,5.4vw,1.65rem);min-height:50px;padding:11px 3px;border:1px solid #10111325;border-radius:6px;background:transparent;white-space:normal;overflow-wrap:anywhere}
  .service-tabs button[aria-selected=true] {background:var(--ink);color:var(--lime);border-color:var(--ink)}
  .service-tabs button>span,.service-tabs button>.icon {display:none}
  .service-panel {grid-template-columns:minmax(0,1fr);min-height:0;border-radius:9px}
  .service-visual {min-height:0;height:auto;aspect-ratio:16/11}
  .service-visual>img {object-fit:contain}
  .service-image-tag {font-size:.75rem;left:18px;top:16px;letter-spacing:.045em}
  .service-image-word {font-size:3.8rem;left:18px;bottom:12px}
  .service-content {min-width:0;padding:24px 20px}
  .service-content h3 {font-size:clamp(2.4rem,9.6vw,3.3rem);line-height:1.07;margin-top:15px}
  .service-content>.eyebrow {font-size:.75rem;line-height:1.6}
  .service-description {font-size:1rem;line-height:1.7;margin-top:16px}
  .service-bottom {padding-top:22px}
  .service-price {font-size:2.45rem;margin-bottom:18px}
  .button {font-size:.9375rem;line-height:1.45;min-height:54px;gap:12px;padding:14px 16px;text-align:left}
  .button:hover {transform:none}
  .ppf-inline-guide {grid-template-columns:56px minmax(0,1fr) 18px;gap:12px;margin-top:18px}
  .ppf-inline-guide>img {width:56px;height:56px}
  .ppf-inline-guide>span>span {font-size:.8125rem}
  .extra-services {margin-top:14px}
  .extra-services>button {grid-template-columns:minmax(0,1fr) 22px;column-gap:14px;row-gap:8px;padding:20px 0}
  .extra-number {display:none}
  .extra-name {grid-column:1;grid-row:1;font-size:1rem;line-height:1.5}
  .extra-name small {font-size:.875rem;line-height:1.5;max-width:none;margin-top:3px}
  .extra-price {grid-column:1;grid-row:2;text-align:left;font-size:.9375rem}
  .extra-price small {display:inline;font-size:.8125rem;margin-right:5px}
  .extra-services>button>.icon {grid-column:2;grid-row:1 / 3;align-self:center;width:22px;height:22px}
  .cleaning-section {padding-block:38px}
  .cleaning-heading {grid-template-columns:minmax(0,1fr);gap:20px;margin-block:25px 30px}
  .cleaning-heading h2 {font-size:clamp(3.05rem,12.8vw,4.6rem);line-height:1.02}
  .cleaning-heading>p {font-size:1rem;line-height:1.7;max-width:34ch}
  .cleaning-section .small-label,.cleaning-contact .small-label {display:none}
  .cleaning-story {margin-bottom:30px}
  .cleaning-gallery {grid-template-columns:minmax(0,1fr);gap:28px}
  .cleaning-photo {display:flex;flex-direction:column;position:relative;height:auto;aspect-ratio:auto;border-radius:0;background:transparent}
  .cleaning-photo>img {position:static;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center;border-radius:8px;background:#0b1013}
  .cleaning-interior>img {aspect-ratio:4/3;object-fit:cover}
  .cleaning-photo:after {display:none}
  .cleaning-photo figcaption {position:static;padding-top:14px}
  .cleaning-photo figcaption>span {font-size:.75rem;letter-spacing:.065em}
  .cleaning-photo h3 {font-size:1.95rem;line-height:1.13;margin-top:6px}
  .cleaning-photo-note {font-size:1rem;line-height:1.7;padding-top:24px}
  .cleaning-photo-note>strong {display:block;margin-bottom:4px}
  .cleaning-bottom {flex-direction:column;align-items:stretch;gap:18px;padding-top:24px}
  .cleaning-bottom>p {font-size:1rem;line-height:1.65}
  .cleaning-bottom .button {width:100%;min-width:0}
  .cleaning-contact {padding-block:40px 48px}
  .cleaning-contact-inner {grid-template-columns:minmax(0,1fr);gap:22px;padding-top:24px}
  .cleaning-contact h2 {font-size:clamp(2.85rem,11.7vw,4.3rem);line-height:1.04}
  .cleaning-contact-inner>div {width:100%;max-width:none}
  .cleaning-contact .button {width:100%;font-size:.9375rem;margin-top:20px}
  .footer-compact {padding-block:26px calc(24px + env(safe-area-inset-bottom,0px))}
  .footer-compact .footer-top {gap:12px}
  .footer-compact .brand-name {font-size:1.85rem}
  .footer-compact .back-top {min-height:46px;font-size:.875rem;gap:10px}
  .footer-compact .footer-bottom {flex-direction:column;gap:8px;font-size:.75rem;margin-top:18px;padding-top:16px}
  .footer-compact .footer-bottom>span:last-child {margin:0;max-width:34ch}
  .footer-services {display:none}

  /* Bottom sheets stay inside the visible area when the keyboard opens. */
  dialog,.ppf-guide-dialog,.film-dialog {
    position:fixed;inset:auto 0 var(--dialog-bottom,0px);margin:0 auto;width:100%;max-width:720px;
    max-height:calc(var(--dialog-visible-height,100dvh) - max(8px,env(safe-area-inset-top,0px)));
    border-radius:16px 16px 0 0;scroll-padding-block:64px 24px;
  }
  dialog {overflow-x:hidden;overflow-y:auto}
  .dialog-close {position:sticky;top:12px;right:auto;width:46px;height:46px;margin:12px 14px -58px auto;flex:none;z-index:8}
  .service-dialog[open] {display:block}
  .dialog-photo {height:auto;min-height:0;aspect-ratio:16/10}
  .dialog-photo img {width:100%;height:100%;object-fit:contain}
  .dialog-body {padding:25px 22px calc(24px + env(safe-area-inset-bottom,0px))}
  .dialog-body h2 {font-size:2.55rem;line-height:1.08;overflow-wrap:break-word}
  .dialog-body .eyebrow {font-size:.75rem;padding-right:38px}
  .booking-dialog {padding:22px 20px calc(18px + env(safe-area-inset-bottom,0px))}
  .booking-dialog>.dialog-close {top:0;margin:0 0 -46px auto}
  .booking-top {padding-right:44px}
  .booking-top .service-icon {display:none}
  .booking-top>.eyebrow {font-size:.75rem;line-height:1.5;padding:0}
  .booking-top h2 {font-size:2.35rem;line-height:1.08;margin-top:12px}
  .booking-top>p:last-child {font-size:1rem;line-height:1.6;margin-top:12px}
  #booking-form {margin-top:22px}
  #booking-form>label {font-size:.9375rem;line-height:1.5;margin-top:20px}
  #booking-form input,#booking-form select {font-size:1rem;min-height:54px;border-radius:6px;max-width:100%}
  #vehicle {scroll-margin-block:85px 20px}
  .vehicle-suggestions {position:relative;inset:auto;margin-top:8px;box-shadow:none}
  #vehicle-options {max-height:min(240px,30dvh)}
  #vehicle-options [role="option"] {min-height:64px;padding:12px}
  .vehicle-hint {font-size:.875rem;line-height:1.55}
  .message-preview {overflow-wrap:anywhere;font-size:.875rem;line-height:1.65;padding:15px}
  .whatsapp-action {margin-top:19px;gap:8px}
  .contact-note {font-size:.8125rem;line-height:1.6}
  .copy-button {min-height:48px}
  .guide-header {min-height:68px;padding:11px 18px}
  .guide-header .dialog-close {position:static;margin:0}
  .guide-header .eyebrow {font-size:.75rem;line-height:1.5;letter-spacing:.035em}
  .guide-body {padding:25px 20px calc(24px + env(safe-area-inset-bottom,0px))}
  .guide-opening h2 {font-size:2.35rem;line-height:1.1}
  .guide-protection,.guide-coverage,.guide-finish-panel {grid-template-columns:minmax(0,1fr)}
  .guide-protection figure>img {aspect-ratio:4/3}
  .guide-tabs {gap:5px}
  .guide-tabs button {font-size:.875rem;min-height:54px;padding:10px 4px}
  .guide-end {flex-direction:column;align-items:stretch}
  .guide-end .button {width:100%;max-width:none}
  .film-dialog {padding-top:58px;background:#0b1013}
  .film-dialog>.dialog-close {position:absolute;top:8px;right:12px;margin:0}
  .film-dialog video {object-fit:contain;max-height:calc(var(--dialog-visible-height,100dvh) - 200px)}
  .cleaning-film-dialog>video {aspect-ratio:9/16}
  .film-caption {display:block;padding:18px 20px calc(22px + env(safe-area-inset-bottom,0px))}
  .film-caption h2,.cleaning-film-dialog .film-caption h2 {font-size:1.6rem;line-height:1.2}
  .film-caption p,.cleaning-film-dialog .film-caption p {font-size:.875rem;line-height:1.6;margin-top:7px}
}
@media (max-width:720px) and (max-height:680px) {
  .experience-stage,.cleaning-stage {padding-top:calc(var(--phone-header) + 7px)}
  .hero-heading h1,.finish-heading>p:last-child,.cleaning-film-heading h3 {font-size:2.85rem}
  .cleaning-film-nav>a {display:none}
  .hero-bottom-top,.cleaning-film-actions {margin-bottom:8px}
  .scene-copy,.cleaning-film-actions>p {font-size:.9375rem;line-height:1.4}
}
@media (max-height:500px) and (pointer:coarse) {
  :root {--phone-header:calc(3.375rem + env(safe-area-inset-top,0px))}
  .header .brand-caption {display:none}
  .experience-stage,.cleaning-stage {min-height:0;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);grid-template-rows:minmax(0,1fr) auto;column-gap:16px;padding-top:calc(var(--phone-header) + 10px);padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .hero-heading,.finish-heading,.cleaning-film-heading {grid-area:1 / 1;align-self:center;padding-right:0}
  .hero-heading .eyebrow,.finish-heading .eyebrow,.cleaning-film-heading .eyebrow {display:none}
  .hero-heading h1,.finish-heading>p:last-child,.cleaning-film-heading h3 {font-size:2.35rem;line-height:1.02;margin:0}
  .car-visual,.cleaning-visual {grid-area:1 / 2;max-width:calc((100svh - 174px) * 1.7778);justify-self:center}
  .hero-bottom,.cleaning-film-bottom {grid-area:2 / 1 / 3 / 3;padding-top:4px}
  .hero-bottom-top,.cleaning-film-actions {margin-bottom:4px}
  .scene-copy,.cleaning-film-actions>p {font-size:.875rem;line-height:1.35}
  .phase-nav>button,.cleaning-phases>button {min-height:44px;padding:6px 2px;font-size:1rem}
  .hero-bottom-lower,.cleaning-film-nav {padding-top:5px}
  .cleaning-film-nav>a {display:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:720px), (prefers-reduced-motion:reduce) and (max-height:500px) and (pointer:coarse) {
  .experience.scene-enhanced,.cleaning-story.cleaning-enhanced {height:100svh}
}