/* V7 homepage story (package C01–C11). Scoped to #home; showroom, vehicle and contact keep
   their own styles. Typography per package §Typography: Cormorant Garamond 500 sentences,
   Manrope 500 brand title and UI.
   Fonts: both SIL OFL 1.1, self-hosted as latin subsets in /fonts (Fontsource 5.3.0 builds; licences in
   fonts/licenses.json). local() stays first, so an installed face costs no request; swap keeps text visible.
   A gateway without .woff2 (before Stage A, PR #50) leaves the files out and the faces fall back as below. */
@font-face{font-family:'FM Cormorant';font-style:normal;font-weight:500;font-display:swap;src:local('Cormorant Garamond Medium'),local('CormorantGaramond-Medium'),url(/fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'FM Manrope';font-style:normal;font-weight:400;font-display:swap;src:local('Manrope Regular'),local('Manrope-Regular'),url(/fonts/manrope-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'FM Manrope';font-style:normal;font-weight:500;font-display:swap;src:local('Manrope Medium'),local('Manrope-Medium'),url(/fonts/manrope-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'FM Manrope';font-style:normal;font-weight:600;font-display:swap;src:local('Manrope SemiBold'),local('Manrope-SemiBold'),url(/fonts/manrope-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Where the OFL files are not served (or not yet loaded), visitors get system fallbacks. Each fallback is
   size-adjusted to Cormorant/Manrope's measured advance widths on the package copy, so line
   breaks and the copy field hold (Tech QA c7936d3b): Georgia/Gelasio 88.6%, Times/Liberation
   Serif 97.2%, DejaVu Serif 76.4%, Arial/Liberation Sans 92.3%, DejaVu Sans 92.4%. */
@font-face{font-family:'FM Serif Georgia';src:local('Georgia'),local('Gelasio Regular'),local('Gelasio-Regular');size-adjust:88.6%}
@font-face{font-family:'FM Serif Times';src:local('Times New Roman'),local('Liberation Serif');size-adjust:97.2%}
@font-face{font-family:'FM Serif DejaVu';src:local('DejaVu Serif');size-adjust:76.4%}
@font-face{font-family:'FM Sans Arial';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:92.3%}
@font-face{font-family:'FM Sans DejaVu';src:local('DejaVu Sans');size-adjust:92.4%}

#home{--fm-serif:'FM Cormorant','FM Serif Georgia','FM Serif Times','FM Serif DejaVu',Georgia,serif;--fm-sans:'FM Manrope','FM Sans Arial','FM Sans DejaVu',Arial,sans-serif;--fm-charcoal:#0d0f10;--fm-ink:#f5f0e7;--fm-margin:7%}
#home .story-stage{background:var(--fm-charcoal)}

/* Layers: state is class-driven; transitions.js animates. No decorative drift (package: pause stops all drift; no raw-photo zoom). */
#home .story-layer{transition:none;background:var(--fm-charcoal)}
#home .story-layer img{animation:none}
#home .story-layer video{opacity:0;transition:opacity 500ms ease}
#home .story-layer.has-video video{opacity:1}
/* Living hold: the plate takes over from the clip on the same frame, no crossfade. */
#home .story-layer.is-held video{opacity:0;transition:none}
#home .story-layer img,#home .story-layer video{transform-origin:50% 50%}
#home .story-veil{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none}

/* C09/C10: the real dealership footage stays upright in a portrait window on desktop. */
/* At 16:10 a full-height 9:16 frame is only ~28% of the width, so the window takes the package's
   lower bound (38%) between header and controls and trims sky/road, never the sign or cars. */
/* Top edge leaves the nav clear air at every desktop size (C R1). */
/* Desktop window: 38% wide (C R1) but never wider than 0.82 × its height, the upright trim C accepted at
   1440x900, so short desktops (1280x620, 1366x640) keep a portrait window instead of a landscape crop. */
#home .story-layer[data-frame=window]{inset:112px 8% 120px auto;width:min(38%,calc((100svh - 232px) * .82));background:#15181a}
#home .story-layer[data-frame=window] img,#home .story-layer[data-frame=window] video{object-position:50% 46%}
#home .story-stage[data-layout=window] .story-shade{background:linear-gradient(90deg,rgba(13,15,16,.55),transparent 45%)}
/* In a window the whole frame is the media, so its placeholder marks the frame itself. */
#home .story-layer[data-frame=window] .story-placeholder i{left:0;top:0;width:100%;height:100%}

/* Plate framing (S03): the whole clip, never cropped into the horse, sits right of the copy on its
   own extended plate (field). Desktop: horse within 52–95% of the width, centred at 53% height, at
   most 78% tall. Phone/portrait: a band centred between the header and the copy, 28 px above it.
   The clip's edges feather into the field, which continues the plate's own colours outwards. */
#home .story-media{container-type:size}
#home .story-subject{position:absolute;visibility:hidden;pointer-events:none}
#home .story-layer[data-frame=plate]{--pa:var(--dpa);--sx:var(--dsx);--sy:var(--dsy);--sw:var(--dsw);--sh:var(--dsh);--field:var(--dfield);
  --pv:min(calc(43cqw / var(--sw)),calc(78cqh / (var(--sh) * var(--pa))));
  --pl:calc(95cqw - (var(--sx) + var(--sw)) * var(--pv));
  --pt:calc(53cqh - (var(--sy) + var(--sh) / 2) * var(--pa) * var(--pv));
  background:#494a4b var(--field) no-repeat;background-size:calc(3 * var(--pv)) calc(3.4 * var(--pa) * var(--pv));
  background-position:calc(var(--pl) - var(--pv)) calc(var(--pt) - 1.2 * var(--pa) * var(--pv))}
#home .story-layer[data-frame=plate] img,#home .story-layer[data-frame=plate] video{inset:auto;left:var(--pl);top:var(--pt);width:var(--pv);height:calc(var(--pa) * var(--pv));object-fit:fill;
  --fade:linear-gradient(90deg,transparent,#000 calc(var(--sx) * 80%),#000 calc(100% - (1 - var(--sx) - var(--sw)) * 80%),transparent),linear-gradient(transparent,#000 calc(var(--sy) * 80%),#000 calc(100% - (1 - var(--sy) - var(--sh)) * 80%),transparent);
  -webkit-mask-image:var(--fade);-webkit-mask-composite:source-in;mask-image:var(--fade);mask-composite:intersect}
#home .story-layer[data-frame=plate] .story-subject{left:calc(var(--pl) + var(--sx) * var(--pv));top:calc(var(--pt) + var(--sy) * var(--pa) * var(--pv));width:calc(var(--sw) * var(--pv));height:calc(var(--sh) * var(--pa) * var(--pv))}

/* Composed full frames (B's units, 16:9 desktop / 9:16 phone): an explicit cover box, anchored at the
   unit's focus and optionally zoomed about it, so the subject marker follows the frame. Defaults are
   S01's, the server-rendered first layer, until JS sets the unit's own desktop and mobile vars. */
#home .story-layer[data-comp]{--pa:.5625;--sx:var(--dsx,.71);--sy:var(--dsy,.77);--sw:var(--dsw,.09);--sh:var(--dsh,.14);--fx:var(--dfx,1);--fy:var(--dfy,.5);--z:var(--dz,1);
  --bw:calc(max(100cqw,100cqh / var(--pa)) * var(--z));--bh:calc(var(--bw) * var(--pa));
  --bl:calc((100cqw - var(--bw)) * var(--fx));--bt:calc((100cqh - var(--bh)) * var(--fy));background:#141817}
#home .story-layer[data-comp] img,#home .story-layer[data-comp] video{inset:auto;left:var(--bl);top:var(--bt);width:var(--bw);height:var(--bh);object-fit:fill}
#home .story-layer[data-comp] .story-subject{left:calc(var(--bl) + var(--sx) * var(--bw));top:calc(var(--bt) + var(--sy) * var(--bh));width:calc(var(--sw) * var(--bw));height:calc(var(--sh) * var(--bh))}
/* Grid (desktop, S12): the frame's edges are stage colour, so it sits inside the stage with the
   subject's right edge on the header's right edge (93%), as C asked for C11. */
@media(min-width:701px) and (min-aspect-ratio:801/1000){
 #home .story-layer[data-comp][data-grid]{--bl:calc(93cqw - (var(--sx) + var(--sw)) * var(--bw))}
}
/* C04 entry clip: the poster (the loop's first frame) waits underneath until the clip ends on it. */
#home .story-layer.is-entry img{opacity:0}
#home .story-layer.is-entry video{transition:none}

/* Copy placement per chapter (chapters.js copyAt), where the frame's subject asks for it. */
@media(min-width:701px) and (min-aspect-ratio:801/1000){
 #home .story-stage[data-copy-desktop=low] .story-copy{top:auto;bottom:max(16svh,128px);transform:none}
 #home .story-stage[data-copy-desktop=high] .story-copy{top:max(17svh,120px);transform:none}
 /* The lineup fills the lower half (C08), so the skip link follows the copy instead (C I1 at 07219bb). */
 #home .story-stage[data-copy-desktop=high] .story-skip{top:var(--fm-copy-end,320px);bottom:auto;left:var(--fm-margin);right:auto}
 #home .story-stage[data-copy-desktop=narrow] .story-copy{width:min(25vw,520px)}
}
/* Short desktops (≤760 px tall, e.g. 1280x620): the subject reaches the skip link's corner. On a plate
   frame (C03) the link follows the copy, clear of the horse; the plate itself is unchanged (C03 lock).
   With high copy (C08) the lineup rises to the copy, so the link moves to the copy's top line, right. */
@media(min-width:701px) and (min-aspect-ratio:801/1000) and (max-height:760px){
 #home .story-stage:has(.story-layer.is-current[data-frame=plate]) .story-skip{top:var(--fm-copy-end,420px);bottom:auto;left:var(--fm-margin);right:auto}
 #home .story-stage[data-copy-desktop=high] .story-skip{top:var(--fm-copy-top,120px);bottom:auto;left:auto;right:var(--fm-margin)}
 /* The plate centres 2% lower here, so the horse keeps air under the nav; the five package viewports are
    taller than 760 px, so C03's locked placement there is untouched. */
 #home .story-layer[data-frame=plate]{--pt:calc(55cqh - (var(--sy) + var(--sh) / 2) * var(--pa) * var(--pv))}
}

/* Review placeholders for pending S-units (never in a release candidate). */
#home .story-placeholder{position:absolute;inset:0;background:radial-gradient(120% 90% at 70% 45%,#1c2023 0%,#121416 60%,#0d0f10 100%)}
#home .story-placeholder i{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);display:block;border:1px dashed rgba(245,240,231,.22);border-radius:2px}
#home .story-placeholder span{position:absolute;left:12px;bottom:10px;font:500 12px/1.3 var(--fm-sans);letter-spacing:.04em;color:rgba(245,240,231,.62)}
#home .story-layer[data-kind=failed] .story-placeholder span{color:rgba(245,240,231,.8)}

/* Copy field: left 35–42% on desktop, clear of the subject; fully readable at rest. */
#home .story-copy{left:var(--fm-margin);top:50%;width:min(42vw,820px);transform:translateY(-50%);margin-top:0!important;opacity:1}
#home .story-stage[data-layout=window] .story-copy{width:min(38vw,640px)}
#home :is(#home-title,#home-title-next){font-family:var(--fm-serif);font-weight:500;font-size:clamp(40px,4.45vw,88px);line-height:1.06;letter-spacing:-.01em;text-wrap:balance;max-width:none;color:var(--fm-ink)}
#home .story-copy[data-copy=brand] :is(#home-title,#home-title-next),#home .story-copy[data-copy=resolution] :is(#home-title,#home-title-next){font-family:var(--fm-sans);font-weight:500;font-size:clamp(40px,4.8vw,80px);line-height:1.1;letter-spacing:.06em}
#home :is(#story-subtitle,#story-subtitle-next){font-family:var(--fm-serif);font-weight:500;font-size:clamp(28px,2.8vw,46px);line-height:1.12;letter-spacing:-.01em;margin-top:20px}
#home :is(#story-collection,#story-collection-next){font:500 15px/1.3 var(--fm-sans);letter-spacing:.04em;text-transform:none;min-height:44px;margin-top:28px;gap:40px}
#home .story-controls{font:500 14px/1 var(--fm-sans);letter-spacing:.02em}
#home #story-count{font-size:12px}
#home #story-pause{font-size:14px;min-width:120px}
#home .story-skip{font:500 14px/1.2 var(--fm-sans);letter-spacing:.02em;min-height:44px;display:inline-flex;align-items:center}
#home .story-scroll,#home #scroll-hint{font:500 12px/1.2 var(--fm-sans);letter-spacing:.12em}

@media(max-width:700px),(max-aspect-ratio:4/5){
 #home{--fm-margin:24px}
 #home .story-copy,#home .story-copy[data-copy]{left:var(--fm-margin);right:var(--fm-margin);width:auto;top:auto;bottom:calc(150px + env(safe-area-inset-bottom));transform:none}
 #home .story-stage[data-layout=window] .story-copy{top:calc(96px + env(safe-area-inset-top));bottom:auto;width:auto}
 /* Phones and portrait tablets (C R2/R3): an upright window between the headline and the controls,
    9:15 (a 6% sky/road trim of the 9:16 source) and centred, never a landscape cover crop. */
 #home .story-layer[data-frame=window]{--wt:max(176px,var(--fm-copy-end,176px));--wb:156px;--ww:min(calc(100vw - 2 * var(--fm-margin)),calc((100svh - var(--wt) - var(--wb)) * 9 / 15));
   inset:var(--wt) auto var(--wb) calc(50% - var(--ww) / 2);width:var(--ww)}
 #home .story-stage[data-layout=window] .story-shade{background:none}
 #home .story-layer[data-comp]{--pa:1.77778;--sx:var(--msx,.28);--sy:var(--msy,.75);--sw:var(--msw,.44);--sh:var(--msh,.22);--fx:var(--mfx,.5);--fy:var(--mfy,1);--z:var(--mz,1);
   /* Lift: the frame rises until the subject's foot (H01's hooves) is 24 px above the controls row
      (C, 6346b90); the top of the frame (sky, behind the copy) gives way, never the subject. */
   --row:calc(max(22px,env(safe-area-inset-bottom)) + 44px + 24px);
   --lift:max(0px,calc((100cqh - var(--bh)) * var(--fy) + (var(--sy) + var(--sh)) * var(--bh) - 100cqh + var(--row)));
   --bt:calc((100cqh - var(--bh)) * var(--fy) - var(--lift))}
 /* Soft bottom shade under the subject: it starts at the subject's foot, so it never darkens the legs,
    and runs to stage colour where the lifted frame ends; the controls sit on it (C, 6346b90). */
 #home .story-layer[data-comp]:not([data-band])::before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;
   top:calc(var(--bt) + (var(--sy) + var(--sh)) * var(--bh));
   background:linear-gradient(180deg,rgba(20,24,23,0) 0,rgba(20,24,23,.72) calc((1 - var(--sy) - var(--sh)) * var(--bh) * .6),#141817 calc((1 - var(--sy) - var(--sh)) * var(--bh)))}
 /* Band: a composed frame on stage colour (S12) sits between the header and the copy, as large as
    cover allows; the stage-colour edges continue into the layer, so no edge shows. */
 #home .story-layer[data-comp][data-band]{--band:calc(var(--fm-copy-top,560px) - 124px);
   --bw:min(max(100cqw,100cqh / var(--pa)),calc(var(--band) / (var(--sh) * var(--pa))));
   --bt:calc(88px + (var(--band) - var(--sh) * var(--bh)) / 2 - var(--sy) * var(--bh))}
 /* Copy at the top where the phone frame's subject sits low (C01, C02, C08); the shade follows it. */
 #home .story-stage[data-copy-mobile=top] .story-copy{top:calc(96px + env(safe-area-inset-top));bottom:auto}
 /* With the copy at the top, the skip link follows it, clear of the low subject (C I1 at 07219bb). */
 #home .story-stage[data-copy-mobile=top] .story-skip{top:var(--fm-copy-end,200px);bottom:auto;left:var(--fm-margin);right:auto}
 #home .story-stage[data-copy-mobile=top] .story-shade{background:linear-gradient(180deg,rgba(5,9,10,.78) 0%,rgba(5,9,10,.4) 26%,transparent 46%)}
 #home .story-layer[data-frame=plate]{--pa:var(--mpa);--sx:var(--msx);--sy:var(--msy);--sw:var(--msw);--sh:var(--msh);--field:var(--mfield);--band:calc(var(--fm-copy-top,560px) - 104px);
   --pv:min(calc((100cqw - 2 * var(--fm-margin)) / var(--sw)),calc(var(--band) / (var(--sh) * var(--pa))));
   --pl:calc(50cqw - (var(--sx) + var(--sw) / 2) * var(--pv));
   --pt:calc(76px + var(--band) / 2 - (var(--sy) + var(--sh) / 2) * var(--pa) * var(--pv))}
 #home .story-placeholder i{left:var(--mx);top:var(--my);width:var(--mw);height:var(--mh)}
 #home :is(#home-title,#home-title-next){font-size:clamp(32px,10vw,46px)}
 #home .story-copy[data-copy=brand] :is(#home-title,#home-title-next),#home .story-copy[data-copy=resolution] :is(#home-title,#home-title-next){font-size:clamp(34px,10vw,42px)}
 #home :is(#story-subtitle,#story-subtitle-next){font-size:clamp(24px,7.4vw,32px)}
 #home .story-controls{left:16px;gap:4px}
 #home #story-pause{font-size:13px;min-width:104px}
 #home .story-skip{right:var(--fm-margin);bottom:96px;font-size:13px}
 #home #scroll-hint{left:var(--fm-margin);bottom:104px}
}
@media(min-width:600px) and (max-aspect-ratio:4/5){#home{--fm-margin:48px}#home .story-controls{left:32px}}
/* Portrait tablets keep the base 36 px controls offset; the lift clears that row. */
@media(min-width:701px) and (max-aspect-ratio:4/5){#home .story-layer[data-comp]{--row:calc(max(36px,env(safe-area-inset-bottom)) + 44px + 24px)}}
@media(max-width:700px) and (max-height:620px){#home .story-copy,#home .story-copy[data-copy]{bottom:calc(118px + env(safe-area-inset-bottom))}#home .story-skip{bottom:72px}#home #scroll-hint{bottom:80px}#home .story-layer[data-frame=window]{--wb:132px}}
@media(max-width:340px){#home{--fm-margin:20px}#home :is(#home-title,#home-title-next){font-size:32px}
 /* 320 (C re-review of dd5ad3a): strict 9:15 leaves a 144 px window, so trade aspect for width as on
    desktop (sky/road trim only: 0.78, up to 0.82 when that is what reaches ~216 px) and sit 24 px under the headline's actual last line. */
 #home .story-layer[data-frame=window]{--wt:calc(var(--fm-copy-end,196px) + 1px);--wh:calc(100svh - var(--wt) - var(--wb));
   --ww:min(calc(100vw - 2 * var(--fm-margin)),max(calc(var(--wh) * .78),min(calc(var(--wh) * .82),216px)))}
 #home .story-stage[data-layout=window] .story-copy,#home .story-stage[data-copy-mobile=top] .story-copy{top:calc(80px + env(safe-area-inset-top))}}
@media(max-height:550px) and (min-width:701px){#home :is(#home-title,#home-title-next){font-size:44px}#home .story-copy[data-copy=brand] :is(#home-title,#home-title-next){font-size:48px}}
@media(prefers-reduced-motion:reduce){#home .story-layer video{display:none}}

/* C11 carries the one primary CTA; the skip link would point to the same place (C R5). */
#home .story-copy[data-copy=resolution] ~ .story-skip{display:none}

/* Working review media: always labelled on screen. */
#home .story-layer[data-review]::after{content:attr(data-review);position:absolute;left:12px;bottom:10px;z-index:1;padding:4px 8px;background:rgba(13,15,16,.72);font:500 12px/1.3 var(--fm-sans);letter-spacing:.04em;color:rgba(245,240,231,.85)}
/* In a window the label sits on the sky band, clear of the sign and the lineup. */
#home .story-layer[data-frame=window][data-review]::after{top:8px;bottom:auto;left:8px;right:8px;font-size:11px}
/* Header controls on the homepage: 44 px touch targets (Tech QA finding). */
.horsepower-home .site-header nav a,.horsepower-home .site-header #contact-open{min-height:44px;min-width:44px;display:inline-flex!important;align-items:center;justify-content:center}
/* With scripting on, the story has its enhanced scroll length from first paint, so the lazy dealership
   photos below it stay out of range and don't compete with the S01 poster on a slow phone link (LCP);
   it also removes the height jump when living-story.js enhances. Without scripting, the 100svh fallback stays. */
@media(scripting:enabled){.living-story:not(.is-enhanced){height:1100svh}}
@media(scripting:enabled) and (max-width:700px){.living-story:not(.is-enhanced){height:990svh}}

/* Visual recovery: one coherent, authentic collection fills the closing resolution. */
#home .story-stage[data-chapter=C11] .story-copy{max-width:780px}
#home .story-stage[data-chapter=C11] :is(#home-title,#home-title-next){font-size:clamp(34px,4.2vw,66px);white-space:nowrap}
#home .story-stage[data-chapter=C11] :is(#story-subtitle,#story-subtitle-next){margin-top:12px}
#home .story-stage[data-chapter=C11] :is(#story-collection,#story-collection-next){margin-top:18px}
@media(max-width:700px),(max-aspect-ratio:4/5){
 #home .story-stage[data-chapter=C11] :is(#home-title,#home-title-next){font-size:clamp(25px,6.7vw,42px);letter-spacing:.035em}
 #home .story-stage[data-chapter=C11] :is(#story-subtitle,#story-subtitle-next){font-size:28px}
}