/* Cinematic fieldwork: photography stays real; motion never gates the content. */
:root{--clay:#a8482f;--cinema-ease:cubic-bezier(.22,.68,0,1.01);--wrap:1440px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
[hidden]{display:none!important;}
.masthead .wrap{min-height:80px;padding-block:12px;}
.brand-name{font-size:1.35rem;}
.btn{border-radius:3px;}
.home-cinema .hero::after{background:linear-gradient(0deg,rgba(10,18,38,.88),rgba(10,18,38,.08) 74%),linear-gradient(90deg,rgba(10,18,38,.48),transparent 75%);}
.home-cinema .hero-media{inset:-30px;transform:translate(var(--scene-x,0px),calc(var(--scene-y,0px) + var(--scroll-shift,0px)));transition:transform .8s var(--cinema-ease);}
.hero-scene{position:absolute;inset:0;opacity:0;transition:opacity .75s ease;}
.hero-scene.is-current{opacity:1;}
.home-cinema .hero-media img{height:100%;width:100%;object-fit:cover;object-position:50% 5%;transform:scale(1.015);}
.home-cinema .hero-inner{max-width:none;min-height:0;height:660px;height:min(730px,calc(100svh - 200px));padding:130px 0 42px;display:flex;flex-direction:column;justify-content:flex-end;gap:38px;}
.home-cinema .hero-intro{max-width:550px;}
.home-cinema .hero-promise{font-size:2rem;margin:0;}
.home-cinema .hero .lede{font-size:1.15rem;margin:8px 0 0;max-width:none;}
.home-cinema .hero-actions{margin-top:24px;gap:10px;}
.home-cinema .hero-actions .btn{min-height:48px;padding:13px 20px;}
.home-cinema .hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;}
.home-cinema .hero .hero-title{font-size:7.25rem;line-height:.94;max-width:none;margin:0;flex:none;}
.home-cinema .hero .hero-title span{color:#e1a779;}
.scene-choices{display:flex;gap:12px;align-items:end;}
.scene-choices button{position:relative;isolation:isolate;width:110px;height:92px;background:#17305e;color:#fff;border:1px solid #ffffff66;padding:12px;text-align:left;cursor:pointer;font-family:inherit;font-weight:600;overflow:hidden;transition:transform .3s,border-color .3s;}
.scene-choices button::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0b1730f2,transparent);z-index:-1;}
.scene-choices button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.scene-choices button span{display:block;position:relative;margin-top:40px;font-family:inherit;font-size:.9rem;line-height:1.2;}
.scene-choices button span::after{content:'';position:absolute;bottom:-7px;left:0;height:3px;width:26px;background:transparent;}
.scene-choices button[aria-pressed=true]{border-color:#fff;}
.scene-choices button[aria-pressed=true] span::after{background:#e1a779;}
.scene-choices button:hover{transform:translateY(-5px);border-color:#fff;}
.scene-choices button:focus-visible,.comparison-choices button:focus-visible{outline:3px solid #e1a779;outline-offset:4px;}
.home-cinema .section-head--split{max-width:none;grid-template-columns:1.3fr 1fr;gap:64px;}
.home-cinema .section-head h2{font-size:3.25rem;max-width:17ch;}
.home-cinema .section-head--split .lede{max-width:39ch;justify-self:end;border-left:1px solid var(--line);padding-left:30px;}
.home-cinema .svc-grid{gap:38px 24px;margin-top:38px;}
.home-cinema a.svc-card{border:0;border-radius:0;background:transparent;overflow:visible;transform:none;}
.home-cinema .svc-shot{position:relative;isolation:isolate;aspect-ratio:1.5;border-radius:3px;}
.home-cinema .svc-shot::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0b1730f0,transparent 70%);pointer-events:none;z-index:0;}
.home-cinema .svc-shot img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--cinema-ease);}
.home-cinema .svc-name{position:absolute;bottom:22px;left:22px;right:64px;color:#fff;font-size:1.65rem;line-height:1.15;z-index:1;}
.home-cinema .svc-go{position:absolute;bottom:18px;right:16px;display:grid;place-items:center;width:36px;height:36px;background:var(--clay);border-radius:50%;color:#fff;margin:0;z-index:1;}
.home-cinema .svc-note{font-size:1rem;line-height:1.55;padding-top:14px;}
.home-cinema .svc-card:hover img{transform:scale(1.075);}
.home-cinema .svc-card:hover .svc-shot{box-shadow:0 3px var(--clay);}
.home-cinema .transformation{background:#0e2147;padding:84px 0 56px;}
.home-cinema .transformation>.wrap{max-width:1440px;}
.home-cinema .transformation .split{gap:36px;}
.home-cinema .transformation .split>div:first-child{grid-template-columns:1.2fr 1fr;gap:56px;}
.home-cinema .transformation h2{font-size:3.75rem;max-width:17ch;}
.home-cinema .transformation .split p{font-size:1.1rem;line-height:1.65;margin:0;max-width:43ch;}
.home-cinema .transformation .split p:last-child{grid-column:auto;}
.home-cinema .transformation .ba{aspect-ratio:2.5;max-height:520px;border-radius:2px;}
.home-cinema .comparison-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;}
.comparison-choices{display:flex;gap:8px;}
.comparison-choices button{min-height:48px;padding:12px 20px;background:transparent;color:white;border:1px solid #ffffff80;border-radius:2px;cursor:pointer;font-family:inherit;font-size:1rem;}
.comparison-choices button[aria-pressed=true]{background:white;color:#0e2147;border-color:white;}
.home-cinema .comparison-footer .feature-link{margin:0;color:white;font-size:1rem;}
.home-cinema .terms{gap:70px;}
.home-cinema .terms-head{position:sticky;top:120px;}
.home-cinema .terms-head h2{font-size:3.4rem;}
.home-cinema .terms-row{padding:28px 0;}
.home-cinema .terms-row h3{font-size:1.45rem;}
.home-cinema .section--sand{background:#f0f3ef;}
.home-cinema .step-rule{background:var(--clay);}
.home-cinema .winter-scene{position:relative;isolation:isolate;overflow:hidden;padding:84px 0;min-height:500px;display:grid;align-items:center;}
.home-cinema .winter-scene .split{display:block;}
.home-cinema .winter-scene .split-media{position:absolute;inset:-24px;z-index:-2;}
.home-cinema .winter-scene .split-media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;transform:translateY(var(--winter-shift,0px));}
.home-cinema .winter-scene .split-media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0f1f3feb,#0f1f3f99 45%,#0f1f3f22);}
.home-cinema .winter-scene .wrap{width:100%;}
.home-cinema .winter-scene h2{font-size:4rem;color:white;}
.home-cinema .winter-scene .eyebrow{color:#c7d0e2;}
.home-cinema .winter-scene p{color:white;max-width:48ch;}
.home-cinema .winter-scene .btn{color:white;border-color:#ffffff99;}
.home-cinema .band{background:white;color:var(--ink);}
.home-cinema .band h2{color:var(--ink);font-size:3.4rem;max-width:none;}
.home-cinema .band p{color:var(--body);}
.home-cinema .band .btn--outline-light{color:var(--ink);border-color:var(--line-strong,#8a97ad);}
.inner-cinema .page-head{border-bottom:1px solid var(--line);}
.inner-cinema .page-head h1{font-size:3.6rem;}
.inner-cinema .gal{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.inner-cinema .gal figure{margin:0;}
.inner-cinema .gal .photo-open{border-radius:3px;}
@media(min-width:1500px){.home-cinema .hero .hero-title{font-size:8.5rem;}.scene-choices button{width:132px;height:102px;}.scene-choices button span{margin-top:48px;}}
@media(max-width:1100px){
  .home-cinema .hero .hero-title{font-size:6rem;}.scene-choices button{width:94px;height:80px;padding:10px;}.scene-choices{gap:8px;}.scene-choices button span{margin-top:34px;font-size:.85rem;}
  .home-cinema .hero-inner{height:650px;max-height:none;padding-top:80px;}
  .home-cinema .svc-shot{aspect-ratio:1.65;}.home-cinema .section-head h2{font-size:2.8rem;}
  .home-cinema .transformation h2{font-size:3rem;}.home-cinema .terms{gap:36px;}
}
@media(min-width:761px) and (max-width:900px){
  .home-cinema .hero-bottom{flex-wrap:wrap;gap:22px;}
  .home-cinema .hero-inner{gap:28px;padding-top:50px;}
}
@media(max-width:760px){
  .masthead .wrap{min-height:76px;}.nav{inset:76px 0 0;}
  .home-cinema .hero-inner{height:auto;min-height:550px;padding:60px 0 26px;gap:40px;}
  .home-cinema .hero .hero-title{font-size:4.6rem;line-height:.95;max-width:none;}
  .home-cinema .hero-promise{font-size:1.6rem;max-width:none;}
  .home-cinema .hero .lede{font-size:1rem;max-width:30ch;}
  .home-cinema .hero-intro{max-width:100%;}
  .home-cinema .hero-actions{margin-top:18px;gap:8px;}.home-cinema .hero-actions .btn{padding:12px 14px;font-size:.9rem;}
  .home-cinema .hero-bottom{display:block;}
  .scene-choices{margin-top:24px;gap:10px;}
  /* WCAG 1.4.3: the label sat 10px from the top of a 55px thumbnail, where the
     shade is almost clear, and measured 2.5 to 2.7:1 over Lawns and Winter.
     It now sits at the bottom, on the dark end of the shade. */
  .scene-choices button{width:auto;flex:1;height:55px;padding:10px;display:flex;align-items:flex-end;}
  .scene-choices button span{margin:0;font-size:.85rem;}
  .scene-choices button span::after{bottom:-7px;height:2px;}
  .home-cinema .hero::after{background:linear-gradient(0deg,#0b1730e8,#0b173066 90%);}
  .home-cinema .hero-media img{object-position:55% 50%;}
  .home-cinema .section-head--split{grid-template-columns:1fr;gap:16px;}
  .home-cinema .section-head h2{font-size:2.4rem;max-width:none;}
  .home-cinema .section-head--split .lede{border:0;padding:0;justify-self:start;}
  .home-cinema .svc-grid{gap:30px;margin-top:28px;}
  .home-cinema .svc-shot{aspect-ratio:1.7;}
  .home-cinema .svc-name{font-size:1.65rem;bottom:20px;}
  .home-cinema .transformation{padding-block:54px 40px;}
  .home-cinema .transformation .split>div:first-child{grid-template-columns:1fr;gap:18px;}
  .home-cinema .transformation h2{font-size:2.7rem;}
  .home-cinema .transformation .split p{font-size:1rem;}
  .home-cinema .transformation .ba{aspect-ratio:1.3;}
  .home-cinema .comparison-footer{align-items:start;flex-direction:column;gap:18px;}
  .comparison-choices{width:100%;}.comparison-choices button{flex:1;padding:10px;font-size:.9rem;}
  .home-cinema .terms-head{position:static;}.home-cinema .terms-head h2{font-size:2.6rem;}
  .home-cinema .winter-scene{min-height:480px;padding-block:52px;}
  .home-cinema .winter-scene h2{font-size:3rem;}
  .home-cinema .winter-scene p{font-size:1rem;}
  .home-cinema .winter-scene .split-media::after{background:#0f1f3fb8;}
  .home-cinema .band h2{font-size:2.6rem;}
  .inner-cinema .page-head h1{font-size:2.7rem;}.inner-cinema .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
}
@media(max-width:380px){
  .home-cinema .hero .hero-title{font-size:3.75rem;}.home-cinema .hero-inner{padding-top:36px;gap:28px;}
  .home-cinema .hero-actions .btn{width:auto;}.home-cinema .hero-actions .btn--outline-light{padding-left:0;}
  .home-cinema .hero .hero-title span{font-size:inherit;}.brand-name{font-size:1.1rem;}
  .inner-cinema .gal{grid-template-columns:1fr;}
}
/* Landscape phones: the fixed 650px hero put the headline and buttons below a
   390px-tall screen. Narrower than 760px the call bar covers the buttons but
   carries the same call. */
@media(max-width:1100px) and (max-height:500px) and (orientation:landscape){
  .home-cinema .hero-inner{height:auto;min-height:0;padding-top:16px;padding-bottom:24px;gap:14px;}
  .home-cinema .hero .hero-title{font-size:3.5rem;}
}
@media(min-width:1101px) and (max-height:740px){
  .home-cinema .hero-inner{height:auto;min-height:490px;padding-top:30px;gap:24px;}
  .home-cinema .hero .hero-title{font-size:5.5rem;}
}
@media(prefers-reduced-motion:reduce){
  .hero-scene,.home-cinema .hero-media,.home-cinema .winter-scene img,.home-cinema .svc-shot img,.scene-choices button{transition:none!important;transform:none!important;}
}
.photo-note { font-size:14px; line-height:1.5; margin-top:20px; }
.photo-note a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.viewer-original { display:block; width:fit-content; margin:0 auto 12px; padding:8px; color:#fff; font-size:14px; text-decoration:underline; }

/* Optional scenes sit over real images, never over the words or controls. */
.landscape-stage{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .6s ease;}
.has-webgl-stage .landscape-stage{opacity:1;}
.crew-story{overflow:hidden;padding-bottom:24px;}
.crew-stage{position:relative;width:100%;height:360px;margin-top:32px;overflow:hidden;container-type:size;}
.crew-fallback{position:absolute;inset:0;display:block;overflow:hidden;}
/* Match the still's orthographic projection, not the full screenshot rectangle. */
.crew-fallback img{position:absolute;left:50%;top:50%;display:block;width:min(400cqh,172.55cqw);max-width:none;height:auto;margin:0;transform:translate(-50%,-50%);}
.crew-vignette .crew-fallback img{width:min(400cqh,204.26cqw);}
.crew-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;}
.crew-canvas[hidden]{display:none;}
.has-crew-story .crew-fallback{visibility:hidden;}
.crew-vignette{padding:0;}
.crew-vignette .crew-stage{height:300px;margin-top:0;}
.crew-vignette--winter{background:var(--navy);}
.crew-vignette--winter .crew-stage{height:320px;}
.crew-vignette--inline{margin-block:28px;}
.crew-vignette--compact{margin-top:24px;}
.crew-vignette--compact .crew-stage{height:240px;}
.crew-vignette--project{max-width:1100px;margin:28px auto 0;}
@media(max-width:760px){.crew-vignette .crew-stage{height:260px;margin-top:0;}.crew-vignette--compact .crew-stage{height:230px;}}
.home-cinema .svc-shot.cinema-depth{transform:perspective(1100px) rotateX(var(--shot-rx,0deg)) rotateY(var(--shot-ry,0deg));transition:transform .55s var(--cinema-ease);}
.home-cinema .svc-shot.cinema-depth img{transform:translateY(var(--shot-drift,0px)) scale(1.10);transition:transform .5s var(--cinema-ease);}
.home-cinema .svc-card:hover .svc-shot.cinema-depth img{transform:translateY(var(--shot-drift,0px)) scale(1.15);}
.home-cinema .step-rule{transform:scaleX(var(--rule-scale,1));transform-origin:left;transition:transform .4s ease-out;}
.home-cinema .ba-handle::after{transition:transform .22s ease,box-shadow .22s ease;}
.home-cinema .ba:hover .ba-handle::after,.home-cinema .ba:focus-within .ba-handle::after{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 8px 28px #0005;}
@media(max-width:760px){.crew-stage{height:280px;margin-top:16px;}.home-cinema .svc-card:hover .svc-shot.cinema-depth img{transform:translateY(var(--shot-drift,0px)) scale(1.10);}}
@media(max-width:760px){.crew-fallback img{width:min(231.82cqh,100cqw);}.crew-vignette .crew-fallback img{width:min(195.83cqh,100cqw);}}
@media(prefers-reduced-motion:reduce){
  .landscape-stage,.crew-canvas{display:none!important;}
  .crew-fallback{visibility:visible!important;}
  .home-cinema .svc-shot.cinema-depth,.home-cinema .svc-shot.cinema-depth img,.home-cinema .svc-card:hover .svc-shot.cinema-depth img,.home-cinema .step-rule{transform:none;transition:none;}
}


/* ---- Hero headline ------------------------------------------------------
   The display slot carried the business name at 116px while "Your yard,
   handled." sat at 32px above it, so the largest words on the page were the
   letterhead and the h1 no longer said what the business does. It also read
   promise, then call-to-action, then headline, leaving the buttons floating
   mid-hero attached to nothing, and the <br> inside the name produced the
   string "Mason'sYard Care" with no space in it.
   The promise now holds the display slot and the actions sit under it. The
   name is already in the masthead and the title; it does not need 116px. */
.home-cinema .hero-headline{max-width:760px;}
.home-cinema .hero-headline .hero-actions{margin-top:28px;}
@media(max-width:760px){
  .home-cinema .hero-headline .hero-actions{margin-top:20px;}
}