.hero{position:relative;overflow:hidden;background:var(--canvas);color:var(--text);color-scheme:light}
.hero .button{justify-content:center;min-height:52px;gap:var(--gap-md);border-radius:var(--radius-button);padding-inline:var(--gap-xl)}
.hero .button-primary:hover{background:var(--text);color:var(--white);border-color:var(--text)}
.hero button:focus-visible,.hero a:focus-visible{outline-color:var(--green)}
.hero-details{margin-top:var(--gap-md);color:var(--green);font-size:var(--caption)}
.hero-stage{position:relative;width:100%;min-height:var(--hero-height);display:flex;align-items:center}
.hero-title{color:var(--white);position:absolute;left:var(--space);top:var(--gap-xl);width:66%;font:650 var(--hero-title)/1.04 var(--font-display);letter-spacing:-.04em;text-transform:uppercase;padding-bottom:0;z-index:2;transform:skew(-4deg);transform-origin:bottom left;pointer-events:none}
.hero-title{transition:opacity var(--scene-reveal-duration) var(--motion-easing)}
.hero.has-scene-title .hero-title,.hero.is-selected .hero-title{opacity:0}
.hero.is-selected .hero-title{transition:none}
.hero-title span{display:block}.hero-title span:nth-child(2){color:var(--accent)}
.hero-copy{position:relative;width:100%;max-width:none;height:var(--hero-height);margin-inline:auto;padding:var(--gap-2xl) var(--space);z-index:3;pointer-events:none}
.hero.is-selected .hero-copy{max-width:var(--content)}
#intro-copy{display:flex;flex-direction:column;align-items:flex-start}
#service-copy{width:38%;height:100%;display:flex;flex-direction:column;justify-content:center}
.hero-copy button,.hero-copy a{pointer-events:auto}
.service-more{display:none}
.hero-copy h2{font-size:var(--service-title);font-weight:800;letter-spacing:-.04em;line-height:1.15;text-wrap:balance}
.hero-description{color:var(--muted);font-size:var(--body);line-height:1.75;margin-top:var(--gap-lg);max-width:440px;text-wrap:pretty}
.hero-intro-actions{display:flex;flex-wrap:wrap;gap:var(--gap-md)}
.hero-intro-actions .button{white-space:nowrap}
.service-offer{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-lg);margin-top:var(--gap-xl);max-width:440px}
.service-cost{display:flex;flex-direction:column;gap:var(--gap-xs)}
.service-cost strong{font-size:var(--price);font-weight:400;line-height:1.15;letter-spacing:-.035em;white-space:nowrap}
.service-cost>span{color:var(--muted);font-size:var(--small)}
.scene-frame{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:linear-gradient(var(--hero-poster-backdrop) 60%,var(--hero-backdrop))}
.scene-poster{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity var(--scene-reveal-duration) var(--motion-easing)}
.scene-poster img{display:block;width:100%;height:100%;object-fit:cover;object-position:70.5% 58%}
.scene-frame.is-ready .scene-poster{opacity:0}
.scene-frame::before{content:"";position:absolute;inset:auto 0 0;height:var(--hero-edge-fade);z-index:4;pointer-events:none;background:linear-gradient(to top,var(--canvas),color-mix(in srgb,var(--canvas) 58%,transparent) 28%,transparent)}
.scene-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:none}
.hero.is-selected .scene-frame::after{z-index:3;background:linear-gradient(90deg,var(--hero-backdrop),color-mix(in srgb,var(--hero-backdrop) 94%,transparent) 17%,transparent 45%)}
#scene{display:block;width:100%;height:100%;position:relative;z-index:1;cursor:grab;touch-action:pan-y;opacity:0;pointer-events:none}
.hero[data-scene-status="ready"] .scene-frame.is-ready #scene[data-ready]{opacity:1;pointer-events:auto}
.hero:not([data-scene-status="ready"]) #scene,.hero:not([data-scene-status="ready"]) .scene-still{visibility:hidden;pointer-events:none}
/* Keep the compositor consuming trial frames, fully covered by the poster. */
.hero[data-scene-status="loading"] #scene{visibility:visible;opacity:1;z-index:0}
.hero[data-scene-status="loading"] .scene-poster{background:linear-gradient(var(--hero-poster-backdrop) 60%,var(--hero-backdrop))}
#scene:active{cursor:grabbing}
.scene-loader{position:absolute;right:var(--gap-lg);bottom:calc(var(--hero-floor-extension) + var(--gap-lg));z-index:5;display:grid;place-items:center;width:var(--scene-spinner-size);height:var(--scene-spinner-size);color:var(--white);pointer-events:none;transition:opacity var(--scene-reveal-duration) var(--motion-easing)}
.scene-spinner{position:relative;display:grid;place-items:center;width:var(--scene-spinner-size);height:var(--scene-spinner-size)}
.scene-spinner::before{content:'';position:absolute;inset:0;border:var(--graphic-line) solid color-mix(in srgb,var(--white) 20%,transparent);border-top-color:var(--accent);border-right-color:var(--accent);border-radius:var(--radius-button);animation:scene-spin var(--scene-spinner-duration) linear infinite}
#loading-value{font-size:calc(var(--caption) * .75);font-weight:700;font-variant-numeric:tabular-nums}
.scene-frame:not(.is-loading) .scene-loader{opacity:0}
.scene-frame:not(.is-loading) .scene-spinner::before{animation:none}
.hero:has(noscript p) .scene-loader{display:none}
.hero:has(noscript p) .scene-poster{filter:none}
@keyframes scene-spin{to{transform:rotate(1turn)}}
.service-dock{position:relative;margin-top:calc(-1 * var(--hero-dock-overlap));padding-top:0;padding-bottom:var(--gap-xl);z-index:4}
.service-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap-sm)}
.service{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:var(--card-height);padding:var(--card-padding);background:var(--surface);border:0;border-radius:var(--radius-inner);transition:background .2s}
.service:hover{background:var(--card-cool)}
.service[aria-pressed="true"]{background:var(--accent)}
.service-label{font-size:var(--card-title);font-weight:800;line-height:1.3;min-height:2.6em;max-width:100%;text-wrap:balance}
.service-summary{display:block;font-size:var(--card-detail);line-height:1.5;color:var(--muted);margin-top:var(--gap-sm);margin-bottom:0}
.service[aria-pressed="true"] .service-label{color:var(--ink)}
.service[aria-pressed="true"] .service-summary{color:var(--green)}
.service:focus-visible{outline-offset:-4px;z-index:1}
@media(min-width:701px){
  #service-explanation{display:contents}
  .hero{--hero-dock-overlap:var(--hero-floor-extension);--hero-edge-fade:var(--hero-floor-extension)}
  .hero-stage{min-height:calc(var(--hero-height) + var(--hero-floor-extension));align-items:flex-start}
  .scene-frame::before{background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--canvas) 10%,transparent) 20%,color-mix(in srgb,var(--canvas) 50%,transparent) 50%,color-mix(in srgb,var(--canvas) 90%,transparent) 80%,var(--canvas))}

  .service:nth-child(-n+5):not([aria-pressed="true"]){background:linear-gradient(to bottom,color-mix(in srgb,var(--surface) var(--hero-service-glass),transparent),var(--surface) var(--hero-floor-extension))}
  .service:nth-child(-n+5):not([aria-pressed="true"]):hover{background:linear-gradient(to bottom,color-mix(in srgb,var(--card-cool) var(--hero-service-glass),transparent),var(--card-cool) var(--hero-floor-extension))}
  .service:nth-child(-n+5):not([aria-pressed="true"]) .service-summary{color:color-mix(in srgb,var(--text) 75%,var(--muted))}
  .hero .button-primary:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
  .hero-copy{color:var(--white)}
  #intro-copy{position:absolute;top:calc(var(--gap-xl) + var(--hero-title)*3.12 + var(--gap-2xl));left:var(--space);right:var(--space)}
  .hero-description,.service-cost>span{color:var(--card-cool)}
  .hero-details{color:var(--accent)}
  .hero-intro-actions .button-outline{background:color-mix(in srgb,var(--white) 8%,transparent);border-color:color-mix(in srgb,var(--white) 28%,transparent);color:var(--white)}
  .hero-intro-actions .button-outline:hover{background:var(--white);border-color:var(--white);color:var(--text)}
  .hero-copy button:focus-visible,.hero-copy a:focus-visible{outline-color:var(--accent)}
}
@media(min-width:701px) and (max-width:1050px){
  .hero{--hero-copy-reserve:332px;--hero-title:clamp(70px,min(10.5vw,calc((var(--hero-height) - var(--hero-copy-reserve)) / 3.12)),110px)}
  #service-copy{width:40%}
  .hero-intro-actions{flex-direction:column;align-items:stretch;width:fit-content}
  .hero-description{font-size:13px;line-height:1.7}
  .service-offer{gap:var(--gap-md)}
  .service-offer .button{padding-inline:var(--gap-md)}
  .service-list{grid-template-columns:repeat(5,240px);overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
}
@media(max-width:700px){
  .hero{--title:clamp(30px,8.4vw,42px);--service-title:clamp(18px,4.8vw,22px);--body:13px;--card-title:13px;--card-detail:13px;--card-height:calc(var(--scroll-control-size) + var(--gap-sm));--service-strip-width:clamp(168px,46vw,208px);--hero-dock-overlap:0px;--hero-edge-fade:clamp(calc(2 * var(--gap-2xl)),24vw,calc(3 * var(--gap-2xl)))}
  .hero{display:flex;flex-direction:column;overflow-anchor:none}
  .hero-stage{display:contents}
  .hero-copy{order:3;height:auto;padding:0 var(--space) var(--gap-xl);width:100%;pointer-events:auto}
  .hero-title{--hero-title:clamp(44px,14.8vw,104px);top:var(--gap-lg);left:var(--space);width:calc(100% - 2 * var(--space));z-index:2}
  #service-copy{width:100%}
  .hero.is-selected .hero-copy{order:3;padding:0 var(--space) var(--gap-xl)}
  #service-copy{display:grid;gap:var(--gap-sm);justify-content:stretch}
  .service-heading{display:flex;align-items:center;gap:var(--gap-md)}
  .service-heading h2{flex:1;text-wrap:pretty}
  .service-more{display:grid;place-items:center;flex:none;width:var(--scroll-control-size);height:var(--scroll-control-size);padding:0;border-radius:var(--radius-button);color:var(--green);background:var(--surface)}
  .service-more[aria-expanded="true"] .ui-icon{transform:rotate(45deg)}
  #service-explanation{grid-row:3;padding-bottom:var(--gap-sm)}
  .hero-description{margin-top:var(--gap-md);line-height:1.65;max-width:none}
  .hero-intro-actions{width:100%;gap:var(--gap-sm)}
  .hero-intro-actions .button{flex:1 1 auto;min-height:48px;padding-inline:var(--gap-lg);font-size:var(--small)}
  .service-offer{margin-top:0;max-width:none}
  .service-cost{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:var(--gap-xs) var(--gap-md)}
  .service-cost strong{font-size:22px}
  .service-cost>span{display:none}
  .service-offer .button{font-size:var(--card-title);min-height:var(--scroll-control-size);padding:var(--gap-sm) var(--gap-lg)}
  .scene-frame{order:1;position:relative;width:100%;height:var(--hero-scene-mobile);inset:auto;margin-top:0}
  .scene-frame::before{height:min(var(--hero-edge-fade),40%);background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--canvas) 2%,transparent) 12%,color-mix(in srgb,var(--canvas) 10%,transparent) 28%,color-mix(in srgb,var(--canvas) 28%,transparent) 44%,color-mix(in srgb,var(--canvas) 55%,transparent) 60%,color-mix(in srgb,var(--canvas) 80%,transparent) 76%,color-mix(in srgb,var(--canvas) 95%,transparent) 90%,var(--canvas) calc(100% - var(--gap-xs)),var(--canvas))}
  /* Keep every selected service at the same compact height. */
  .hero.is-selected .scene-frame{height:var(--scene-mobile);margin-top:0}
  .scene-poster img{object-position:52.5% 64%}
  .scene-frame::after,.hero.is-selected .scene-frame::after{background:none}
  .scene-loader{bottom:var(--gap-xl)}
  .hero.is-selected.is-awaiting-scene .scene-poster img{object-position:52.5% 82%}
  .service-dock{order:2;padding-top:var(--gap-xl);padding-bottom:var(--gap-2xl)}
  /* Cover the fractional edge of the composited scene from outside its clip. */
  .service-dock::before{content:'';position:absolute;inset:calc(-1 * var(--graphic-line)) 0 auto;height:calc(2 * var(--graphic-line));background:var(--canvas);pointer-events:none}
  /* Gutters belong to the scrolling content, so cards can pass both screen edges. */
  .service-list{grid-template-columns:repeat(10,var(--service-strip-width));grid-template-rows:1fr;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;margin-inline:calc(-1 * var(--space));padding-inline:var(--space);scrollbar-width:thin;scrollbar-color:var(--accent) transparent;padding-bottom:var(--gap-xl)}
  .service-list::-webkit-scrollbar{height:var(--gap-xs)}
  .service-list::-webkit-scrollbar-track{background:transparent}
  .service-list::-webkit-scrollbar-thumb{background:var(--accent);border-radius:var(--radius-button)}
  .service{scroll-snap-align:start;flex-direction:row;align-items:center;gap:var(--gap-sm);padding:var(--gap-sm) var(--gap-md);border:var(--line-width) solid var(--line);border-radius:var(--radius-button);background:var(--canvas);transition:background var(--duration),border-color var(--duration)}
  .service:first-child{scroll-margin-left:var(--space)}
  .service::before{content:'';flex:none;width:var(--icon-small);height:var(--icon-small);border:var(--line-width) solid var(--green);border-radius:var(--radius-button)}
  .service:hover,.service:active{border-color:var(--green);background:var(--surface)}
  .service[aria-pressed="true"]{border-color:var(--green);background:var(--accent)}
  .service[aria-pressed="true"]::before{background:var(--green);box-shadow:inset 0 0 0 var(--gap-xs) var(--accent)}
  .service-label{min-height:0;text-wrap:pretty;line-height:1.25}
  .service-summary{display:none}
}
/* Preserve the authored scene framing and compact service text. */
.hero{--body:clamp(14px,1.08vw,16px);--small:clamp(12px,.88vw,14px);--caption:12px}
.hero .text-link{border-bottom:var(--line-width) solid currentColor}

/* Two exact still frames keep hazard flashes on the browser compositor. */
.scene-still{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.scene-frame.is-cached .scene-still{display:block}
.scene-frame:not(.is-ready) .scene-still{visibility:hidden}
.scene-still[data-lights="on"]{will-change:opacity}
@media(prefers-reduced-motion:reduce){.scene-poster,.scene-loader,.hero-title{transition:none}.scene-spinner::before{animation:none}}

.service-swipe{position:absolute;top:calc(-.5 * var(--swipe-icon-size));right:var(--space);width:var(--swipe-icon-size);height:var(--swipe-icon-size);color:var(--muted);pointer-events:none;z-index:1}
@media(max-width:700px){.service-swipe{top:auto;bottom:var(--gap-sm)}}
.service-swipe .ui-icon{width:100%;height:100%;animation:service-swipe var(--swipe-duration) var(--motion-easing) infinite;animation-play-state:paused}
.service-swipe.is-visible .ui-icon{animation-play-state:running}
@keyframes service-swipe{0%,15%,100%{transform:translateX(0);opacity:.65}35%,60%{transform:translateX(calc(-1 * var(--swipe-distance)));opacity:1}80%{transform:translateX(0);opacity:.65}}

/* While loading only the copy changes; keep the authored intro framing. */


/* Keep the heading as responsive HTML; a transparent car render preserves its
   occlusion without baking text into an image that can be cropped on resize. */
.scene-foreground{position:absolute;inset:0;z-index:3;pointer-events:none;transition:opacity var(--scene-reveal-duration) var(--motion-easing)}
.scene-foreground img{display:block;width:100%;height:100%;object-fit:cover;object-position:70.5% 58%}
.hero.is-selected .scene-foreground,.scene-frame.is-ready .scene-foreground{opacity:0}
.hero.is-selected .scene-foreground{transition:none}
.hero:not(.has-scene-title) .hero-title{text-shadow:0 0 var(--gap-md) color-mix(in srgb,var(--white) 22%,transparent)}
@media(max-width:700px){.scene-foreground img{object-position:52.5% 64%}}

@media(max-width:700px) and (max-height:500px){.hero.is-selected .scene-poster img{object-fit:contain}}