/* Garage scene: photographic planes on the light theme, for the hero and the closing act.
   Rates and depth rules from premium-upgrade references/layers.md. Planes carry art, never text. */

/* Hero planes, back to front: the service hall and the reception counter the reader stands at.
   Rates in hundreds of px (hero-layers.js): hall -1.2, counter +0.3, so the two photos slide apart
   as the hero scrolls. Solid colour first, so the page reads
   before the art arrives. The white mist of the old hero is gone: it only greyed the photo. */
.hero-layers.garage-scene{background:#eceaf0}
.hero-layers.garage-scene .plane-far{
  inset:-84px -24px;
  background:#dcdbe0 url("garage/hall-v1.webp") 62% 38%/cover no-repeat;
  filter:blur(1.5px) contrast(.9) saturate(.88) brightness(1.03);
}
/* Near: the counter across the whole width, wider than the screen, its base below the bottom
   of the hero so no edge ever shows. Its top surface lands at --counter-top of the hero height
   (the surface is 30.5% down the cutout, and the cutout is .2351 of its width tall).
   Solid from the counter top down, so nothing shows through. */
.hero-layers.garage-scene{--cw:max(1500px,108vw)}
.hero-layers.garage-scene .plane-counter{
  left:50%; width:var(--cw); max-width:none; height:auto; margin-left:calc(var(--cw) / -2);
  top:calc(var(--counter-top,82%) - var(--cw) * .0717);
  filter:drop-shadow(0 -6px 18px rgba(40,36,60,.10));
}
/* Shade only where the copy sits: the start column (right, RTL). */
.garage-scene .scene-shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(46% 50% at 80% 30%,rgba(250,249,252,.94) 0%,rgba(250,249,252,.84) 48%,rgba(250,249,252,.34) 78%,rgba(250,249,252,0) 100%);
}

/* The headline: three short sentences, one per line, the last one (the loss) in the missed call red. */
.hero .hero-title{font-size:clamp(3rem,5.6vw,5.5rem); font-weight:800; line-height:.98; letter-spacing:-.035em; max-width:none}
.hero .hero-title > span{display:block}
.hero .hero-title .hero-punch{color:#B8340B}
.hero .hero-copy .lede{font-size:clamp(1.15rem,1.4vw,1.35rem); color:#3a3556}

/* The hero is the evening: the same counter after closing, the phone ringing with nobody there.
   White copy on a dark shade; the form stays a white card. */
.hero.is-evening{background:#15121f}
.hero.is-evening .hero-layers.garage-scene{background:#15121f}
.hero.is-evening .hero-layers.garage-scene .plane-far{background:#241f38 url("garage/hall-evening-v1.webp") 40% 42%/cover no-repeat; filter:blur(1.5px) saturate(.95)}
.hero.is-evening .garage-scene .scene-shade{background:radial-gradient(50% 58% at 80% 34%,rgba(14,11,26,.8) 0%,rgba(14,11,26,.62) 50%,rgba(14,11,26,.18) 82%,rgba(14,11,26,0) 100%)}
.hero.is-evening .hero-layers.garage-scene .hero-floor{background:linear-gradient(to bottom,rgba(21,18,31,0),rgba(21,18,31,.8) 70%,#15121f)}
.hero.is-evening .hero-title{color:#fff}
.hero.is-evening .hero-title .hero-punch{color:#FF8A5C}
.hero.is-evening .hero-copy .lede{color:rgba(255,255,255,.88)}
.hero.is-evening .hero-copy > .label{color:#CDB9FB}
.hero.is-evening .form-after{color:var(--dim)}
/* Floor: a short fade to the next section's ground, above every plane. */
.hero-layers.garage-scene .hero-floor{height:120px; background:linear-gradient(to bottom,rgba(247,244,255,0),rgba(247,244,255,.85) 70%,#f7f4ff)}
.hero .form-after{margin:10px 0 0; color:var(--dim); font-size:.95rem; text-align:center}
/* The menu button is gone, so the header keeps its one call to action on the narrowest phones too
   (premium-header.css hid it under 360px to make room for the menu). Large a11y text still hides it. */
@media (max-width:360px){
  html:not(.a11y-fs1):not(.a11y-fs2):not(.a11y-fs3) .premium-header .header-side > .btn{display:inline-flex}
}

/* Closing act: the same garage by day, busy, with the counter in front.
   Same planes and rates as the hero: hall -1.2, counter +0.3. The counter is anchored to the
   bottom by how much of it shows (--cv, in counter widths: the monitors, the top and a strip
   of the front), and the copy keeps that much room below it, so the two never overlap. */
.garage-close{position:relative; overflow:hidden; contain:paint; color:var(--ink); --cw:max(1400px,104vw); --cv:.125}
/* theme-light.css's .sec:nth-of-type(even) outranks a single class, so the ground needs the id. */
section#cta-end.garage-close{background:#eceaf0; padding-block:0}
.garage-close .close-scene{position:absolute; inset:0; pointer-events:none}
.garage-close .plane{position:absolute; pointer-events:none; will-change:transform; transition:opacity .6s ease-out}
.garage-close .close-far{inset:-84px -24px; background:#dcdbe0 url("garage/hall-v1.webp") 58% 40%/cover no-repeat; filter:blur(2px) contrast(.92) saturate(.9)}
.garage-close .close-counter{
  left:50%; width:var(--cw); max-width:none; height:auto; margin-left:calc(var(--cw) / -2);
  bottom:calc(var(--cw) * (var(--cv) - .2351));
  filter:drop-shadow(0 -6px 18px rgba(40,36,60,.10));
}
/* A light veil over the whole photo, and the copy on its own frosted card, instead of a fog. */
.garage-close .close-shade{position:absolute; inset:0; background:rgba(247,244,255,.22)}
.garage-close .close-floor{position:absolute; left:0; right:0; top:0; height:90px; background:linear-gradient(#fff,rgba(255,255,255,0))}
.garage-close .container{position:relative; z-index:1}
.garage-close .close-card{
  max-width:760px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  margin-block:clamp(88px,9vw,140px) calc(var(--cw) * var(--cv) + clamp(40px,4vw,64px));
  padding:clamp(28px,3.4vw,48px) clamp(22px,4vw,56px);
  background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(12px) saturate(1.1); backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid rgba(255,255,255,.9); border-radius:28px;
  box-shadow:0 2px 4px rgba(30,26,51,.05), 0 30px 70px -24px rgba(40,24,90,.3);
}
.garage-close h2{color:var(--ink); font-size:clamp(2.1rem,3.6vw,3.4rem); font-weight:800; letter-spacing:-.03em}
.garage-close .lede{color:#2e2a45; font-weight:500; max-width:52ch}

/* Page rhythm: no hairlines between sections. Each one starts on the ground of the one above
   and blends into its own over 180px, so the page reads as one surface. */
main > section.sec{border-top:0}
section#day{background:#f7f4ff}
section#calls{background:linear-gradient(#f7f4ff,#fff 180px)}
section#meeting.mt-sec{background:linear-gradient(#fff,#f7f4ff 180px)}
section#faq.fm-sec{background:linear-gradient(#f7f4ff,#fff 180px)}
/* The meeting and FAQ atmospheres paint their own flat ground over the blend, and the meeting
   one carries the lavender glow, which this page does without. */
#meeting .mt-atmo, #faq .fm-atmo{background:transparent}
#meeting .mt-plane-far, #meeting .mt-plane-photo{display:none}
/* The call cards finish stacking with the list still beside them, then the section ends. */
#calls .stack{padding-bottom:26vh}
section#calls{padding-bottom:clamp(56px,7vw,96px)}
section#meeting{padding-top:clamp(64px,8vw,112px)}

/* The accessibility button: smaller and tucked into the corner, so it covers less of the copy. */
body .a11y-btn{inset-inline-end:14px; inset-block-end:14px; width:44px; height:44px; box-shadow:0 0 0 2px #fff, 0 4px 14px rgba(40,15,95,.3)}
body .a11y-btn svg{width:24px; height:24px}
@media (max-width:767px){
  body .a11y-btn{inset-inline-end:10px; inset-block-end:10px; width:44px; height:44px}
  body .a11y-btn svg{width:24px; height:24px}
}

@media (max-width:900px){
  /* Phones and tablets in portrait: the evening hall is the background of the whole hero, in its
     portrait crop, darkening towards the form. The copy sits on it in white. The counter needs a
     wide screen to read as a counter, so here the hall plane is the only one that moves. */
  .hero:has(.garage-scene){padding-top:clamp(160px,44vw,330px)}
  .hero.is-evening:has(.garage-scene){background:#15121f}
  /* The wide evening hall, its ceiling (the top 44%) lifted out of view, so the lifts, the cars
     and the lit windows fill the open strip above the headline and stay behind it. */
  .hero.is-evening .hero-layers.garage-scene .plane-far{inset:-60px -16px auto; height:calc(100% + 120px); background:#15121f url("garage/hall-evening-v1.webp") no-repeat; background-size:auto var(--hall-h); background-position:58% calc(var(--hall-h) * -.44); filter:brightness(1.12) saturate(1.05)}
  .hero-layers.garage-scene{--hall-h:clamp(680px,175vw,1200px)}
  /* The photo ends 56% down its height (the ceiling is cut above); it fades out before that edge. */
  .hero.is-evening .hero-layers.garage-scene .plane-far{
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--hall-h) * .56 - 200px),transparent calc(var(--hall-h) * .56 - 12px));
    mask-image:linear-gradient(to bottom,#000 0,#000 calc(var(--hall-h) * .56 - 200px),transparent calc(var(--hall-h) * .56 - 12px))}
  .hero.is-evening .hero-copy > .label{color:#E4DAFF; text-shadow:0 1px 10px rgba(10,8,20,.7)}
  .hero-layers.garage-scene .plane-counter, .hero-layers.garage-scene .hero-floor{display:none}
  .hero.is-evening .garage-scene .scene-shade{background:linear-gradient(to bottom,rgba(21,18,31,0) 0,rgba(21,18,31,.18) 14%,rgba(21,18,31,.42) 26%,rgba(21,18,31,.62) 36%,rgba(21,18,31,.9) 46%,#15121f 54%)}
  .hero.is-evening .hero-title, .hero.is-evening .hero-copy .lede{text-shadow:0 2px 18px rgba(10,8,20,.6)}
  .hero .hero-title{font-size:clamp(2.3rem,9.4vw,3.1rem)}
  .hero .hero-copy .lede{font-size:1.05rem}
  /* Tablets in portrait: the form keeps a readable width instead of spanning the screen. */
  .hero .hero-form{width:100%; max-width:620px}
  .garage-close{--cw:max(560px,160vw); --cv:.17}
  .garage-close .close-far{background-position:56% 58%}
  .garage-close .close-card{margin-block:72px calc(var(--cw) * var(--cv) + 32px)}
}
@media (prefers-reduced-motion:reduce){ .garage-close .plane{transform:none !important} }
html.a11y-nomotion .garage-close .plane{transform:none !important}