/* Homepage adaptation of the supplied scroll-expansion media component. */
.expansion-hero {
  --expand-progress: 0;
  --reveal-progress: 1;
  --film-start-width: clamp(300px, 38vw, 520px);
  --film-start-height: clamp(240px, 40svh, 380px);
  --film-end-height: calc(100svh - 114px);
  position: relative;
  background: var(--chalk);
}
.expansion-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.expansion-opening { position:relative; height:max(540px, calc(100svh - 74px)); }
.expansion-hero.is-expansion-ready:not(.is-expansion-static) { height: calc(max(540px, 100svh - 74px) + 110svh); }
.is-expansion-ready:not(.is-expansion-static) .expansion-stage { position: sticky; top: 74px; height:max(540px, calc(100svh - 74px)); }
.expansion-kicker {
  position: absolute;
  inset: 28px var(--gut) auto;
  text-align: center;
  font-size: .95rem;
  font-weight: 500;
  opacity: clamp(0, calc(1 - var(--expand-progress) * 2), 1);
}
/* One H1 carries the service phrase and the slogan; both children keep their own absolute placement. */
.expansion-heading { margin: 0; }
.expansion-heading .expansion-kicker { display: block; font-family: var(--sans); font-weight: 500; color: var(--forest); text-transform: none; letter-spacing: normal; line-height: 1.55; text-wrap: pretty; }
.expansion-title {
  position: absolute;
  z-index: 2;
  inset: 88px var(--gut) auto;
  display: flex;
  justify-content: center;
  gap: .25em;
  font-size: clamp(3.2rem, 7.4vw, 7.5rem);
  line-height: 1.12;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: clamp(0, calc(1 - var(--expand-progress) * 1.65), 1);
}
.expansion-title span:first-child { transform: translateX(calc(var(--expand-progress) * -28vw)); }
.expansion-title span:last-child { color: var(--forest); transform: translateX(calc(var(--expand-progress) * 28vw)); }
.expansion-media {
  position: absolute;
  left: 50%;
  top: calc(62% - var(--expand-progress) * 12%);
  width: calc(var(--film-start-width) + (100% - var(--gut) * 2 - var(--film-start-width)) * var(--expand-progress));
  height: calc(var(--film-start-height) + (var(--film-end-height) - var(--film-start-height)) * var(--expand-progress));
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: calc(24px - var(--expand-progress) * 12px);
  background: var(--sand);
}
.expansion-media video { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.expansion-media .hero-film-toggle { right: 12px; bottom: 12px; }
.expansion-cue {
  position: absolute;
  left: var(--gut);
  bottom: 30px;
  display: none;
  align-items: center;
  gap: .65rem;
  font-size: .8125rem;
  opacity: clamp(0, calc(1 - var(--expand-progress) * 3), 1);
}
.is-expansion-ready:not(.is-expansion-static) .expansion-cue { display: flex; }
.expansion-cue span { font-size: 1.2rem; }
.expansion-actions { position:absolute; z-index:3; bottom:20px; left:50%; transform:translateX(-50%); width:calc(100% - var(--gut) * 2); container-type:inline-size; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.expansion-actions > .btn:first-child { justify-self:end; transform:translateX(calc(-1 * var(--expand-progress) * max(0px,50cqw - 100% - .3rem - clamp(16px,3vw,36px)))) translateY(calc(var(--expand-progress) * -24px)); }
.expansion-actions > .btn:last-child { justify-self:start; transform:translateX(calc(var(--expand-progress) * max(0px,50cqw - 100% - .3rem - clamp(16px,3vw,36px)))) translateY(calc(var(--expand-progress) * -24px)); }
.expansion-actions > .btn { transition:background .15s,color .15s; }
.expansion-actions .btn:not(.btn-fill) { background:var(--forest); color:#fff; border:1px solid var(--forest); }
.expansion-actions .btn:not(.btn-fill):hover { background:#00713e; color:#fff; }
.expansion-summary { padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.expansion-summary .sub { max-width: 64ch; margin-inline: auto; text-align: center; }
.is-expansion-static { --expand-progress: 0 !important; --reveal-progress:1 !important; }
.is-expansion-static .expansion-cue { display: none; }

/* The second scene is ordinary linked content before scroll enhancement. */
.expansion-reveal {
  --reveal-progress:inherit;
  position:relative;
  z-index:4;
  margin:0 var(--gut);
  padding:clamp(1.5rem,3.5vh,2.5rem) clamp(1.25rem,4vw,3.5rem);
  border-radius:20px;
  background:var(--forest);
  color:var(--chalk);
  display:flex;
  flex-direction:column;
  gap:clamp(1.3rem,3vh,2rem);
  align-items:center;
  scroll-margin-top:90px;
}
.reveal-copy { position:relative; z-index:2; text-align:center; }
.reveal-eyebrow { font-size:.8rem; margin-bottom:.65rem; }
.reveal-copy h2 { color:var(--chalk); font-size:clamp(2.7rem,min(5.4vw,8svh),5.5rem); line-height:1.12; letter-spacing:-.02em; }
.reveal-copy h2 em { color:var(--apricot); }
.reveal-copy h2:focus { outline:none; }
.reveal-gallery { width:min(100%,1050px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,5vw,4.5rem); align-items:center; perspective:1400px; margin:auto 0; }
.reveal-project { --direction:-1; --delay:0; --card-progress:clamp(0,calc((var(--reveal-progress) - var(--delay)) * 1.15),1); display:block; min-width:0; overflow:hidden; border-radius:10px; background:var(--chalk); color:var(--forest); box-shadow:0 28px 55px rgba(0,0,0,.22); text-decoration:none; transform:rotate(-3deg); transition:box-shadow .2s; }
.reveal-project-restaurant { --direction:1; --delay:.1; transform:rotate(3deg); }
.reveal-browser { height:26px; display:flex; align-items:center; gap:4px; padding:0 12px; background:#ebe9df; font-size:9px; }
.reveal-browser span { width:4px; height:4px; border-radius:50%; background:#708473; }
.reveal-browser b { font-weight:500; margin:auto; opacity:.85; }.reveal-browser i{font-style:normal}
.reveal-project img { display:block; width:100%; height:auto; aspect-ratio:1.8; object-fit:cover; object-position:top; }
.reveal-caption { display:flex; align-items:center; justify-content:space-between; padding:13px 17px; gap:1rem; }
.reveal-caption strong { display:block; font-size:1.05rem; font-weight:600; }.reveal-caption small { display:block; font-size:.72rem; margin-top:3px; }
.reveal-arrow { font-size:1.4rem; transition:transform .2s; }
.reveal-project:hover .reveal-arrow { transform:translate(3px,-3px); }
.reveal-project:hover { box-shadow:0 30px 65px rgba(0,0,0,.32); }
.reveal-project:focus-visible { outline:3px solid var(--apricot); outline-offset:6px; }
.reveal-footer { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:min(100%,1050px); position:relative; z-index:2; }
.reveal-footer > span { font-size:.8rem; line-height:1.5; }
.reveal-all-work { display:inline-flex; align-items:center; gap:.4em; min-height:32px; color:var(--chalk); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.reveal-all-work:hover { color:var(--apricot); }
.reveal-footer a:focus-visible { outline:2px solid var(--chalk); outline-offset:4px; }

.is-expansion-ready:not(.is-expansion-static) .expansion-reveal {
  position:absolute; inset:12px var(--gut) 18px; margin:0;
  background:transparent; visibility:hidden;
  opacity:clamp(0,calc(var(--reveal-progress) * 4),1);
}
.is-expansion-ready:not(.is-expansion-static) .expansion-reveal::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--forest); border-radius:inherit; opacity:clamp(0,calc(var(--reveal-progress) * 1.8),1); }
.is-expansion-ready:not(.is-expansion-static).is-reveal-visible .expansion-reveal { visibility:visible; }
.is-expansion-ready:not(.is-expansion-static) .reveal-copy { opacity:var(--reveal-progress); transform:translateY(calc((1 - var(--reveal-progress)) * 30px)); }
.is-expansion-ready:not(.is-expansion-static) .reveal-project { opacity:var(--card-progress); transform:translateX(calc((1 - var(--card-progress)) * var(--direction) * -40%)) translateY(calc((1 - var(--card-progress)) * 130px)) rotateY(calc((1 - var(--card-progress)) * var(--direction) * -28deg)) rotate(calc(var(--card-progress) * var(--direction) * 3deg)); }
.is-expansion-ready:not(.is-expansion-static) .reveal-footer { opacity:clamp(0,calc((var(--reveal-progress) - .55) * 3),1); }
.is-expansion-ready:not(.is-expansion-static).is-reveal-visible .expansion-actions { opacity:0; visibility:hidden; }

@media (max-width: 860px) {
  .expansion-hero { --film-start-width: min(76vw, 380px); --film-start-height: clamp(250px, 38svh, 350px); --film-end-height: min(65svh, 520px); }
  .expansion-opening { height: max(540px, calc(100svh - 74px)); }
  .is-expansion-ready:not(.is-expansion-static) .expansion-stage { height: max(540px, calc(100svh - 74px)); }
  .expansion-hero.is-expansion-ready:not(.is-expansion-static) { height: calc(max(540px, 100svh - 74px) + 90svh); }
  .expansion-title { top: 70px; flex-direction: column; gap: .04em; font-size: clamp(3.35rem, 12vw, 5.9rem); }
  .expansion-media { top: calc(61% - var(--expand-progress) * 7%); }
  .expansion-kicker { top: 24px; font-size: .875rem; }
  .expansion-cue { left: 50%; bottom: 92px; transform: translateX(-50%); white-space: nowrap; }
  .expansion-actions { bottom: 22px; width: calc(100% - var(--gut) * 2); justify-content: center; }
  .expansion-actions .btn { padding: 13px 18px; font-size: .9rem; }
  .expansion-summary .sub { text-align: left; font-size: 1.1rem; }
  .expansion-reveal { padding:24px 22px; gap:16px; }
  .reveal-copy h2 { font-size:clamp(2.5rem,8vw,4rem); }
  .reveal-eyebrow { font-size:.7rem; }
  .reveal-gallery { width:min(100%,280px); grid-template-columns:1fr; gap:20px; }
  .reveal-project { transform:rotate(-2deg); }.reveal-project-restaurant { transform:rotate(2deg); }
  .reveal-project img { aspect-ratio:1.8; }
  .reveal-browser { height:20px; font-size:8px; }
  .reveal-caption { padding:9px 12px; }.reveal-caption strong{font-size:.9rem}.reveal-caption small{font-size:.65rem}
  .reveal-footer { gap:12px; }.reveal-footer > span{font-size:.65rem}.reveal-footer .btn{font-size:.8rem;padding:12px}
}
@media (min-width: 861px) {
  .is-expansion-ready:not(.is-expansion-static) .reveal-gallery { max-width:clamp(520px,calc((100svh - 480px) * 3.6 + 70px),1050px); }
}
@media (max-height: 620px) and (min-width: 861px) {
  .expansion-hero { --film-end-height: 530px; }
}
@media (prefers-reduced-motion: reduce) {
  .expansion-hero { --expand-progress: 0 !important; }
  .expansion-title span { transform: none; }
  .expansion-cue { display: none !important; }
  .reveal-project, .reveal-project-restaurant { transform:none; }
}

/* Compact phones keep the scroll sequence, with side-by-side project previews. */
@media (max-width:860px) and (max-height:699px) {
  .expansion-hero { --film-start-height:clamp(160px,32svh,220px); --film-end-height:calc(100svh - 110px); }
  .expansion-opening,.is-expansion-ready:not(.is-expansion-static) .expansion-stage { height:max(440px,calc(100svh - 74px)); }
  .expansion-hero.is-expansion-ready:not(.is-expansion-static) { height:calc(max(440px,100svh - 74px) + 90svh); }
  .expansion-title { top:52px; font-size:clamp(2.3rem,9vw,3.5rem); }
  .expansion-kicker { top:18px; font-size:.75rem; }
  .expansion-media { top:calc(62% - var(--expand-progress) * 10%); }
  .expansion-cue { bottom:77px; font-size:.75rem; }
  .expansion-actions { bottom:14px; }
  .expansion-reveal { padding:22px 16px; }
  .reveal-copy h2 { font-size:clamp(2rem,7vw,2.8rem); }
  .reveal-gallery { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .reveal-browser { padding:0 5px; font-size:6px; gap:2px; }
  .reveal-caption { padding:8px; gap:4px; }.reveal-caption strong{font-size:.72rem}.reveal-caption small{font-size:.56rem}.reveal-arrow{font-size:1rem}
}
.is-expansion-ready:not(.is-expansion-static) .expansion-opening { opacity:calc(1 - var(--reveal-progress)); }
@media (max-width:430px) and (max-height:699px) {
  .reveal-gallery { grid-template-columns:1fr; gap:18px; }
  .reveal-project { display:grid; grid-template-columns:55% 45%; align-items:stretch; }
  .reveal-browser { grid-column:1 / -1; font-size:8px; padding-inline:10px; }
  .reveal-caption { align-items:center; padding:10px; }.reveal-caption strong{font-size:.85rem}.reveal-caption small{font-size:.65rem}
}

/* Offer clarity: preserve the existing reveal; give the opening copy its own space. */
.expansion-opening {height:max(640px,calc(100svh - 74px))}
.is-expansion-ready:not(.is-expansion-static) .expansion-stage {height:max(640px,calc(100svh - 74px))}
.expansion-hero.is-expansion-ready:not(.is-expansion-static) {height:calc(max(640px,100svh - 74px) + 110svh)}
.expansion-description {position:absolute;top:185px;left:50%;transform:translateX(-50%);width:min(680px,calc(100% - 40px));text-align:center;font-size:1.08rem;line-height:1.6;opacity:clamp(0,calc(1 - var(--expand-progress) * 3),1)}
.expansion-hero {--film-start-height:190px}
.expansion-media {top:calc(59% - var(--expand-progress) * 11%)}
.expansion-actions {bottom:100px}
.expansion-cost {position:absolute;bottom:24px;left:20px;right:20px;text-align:center;font-size:.88rem;line-height:1.8;opacity:clamp(0,calc(1 - var(--expand-progress) * 3),1)}
.expansion-cost a {text-decoration:underline;text-underline-offset:3px}
.expansion-cue {display:none!important}
@media(max-width:860px){
.expansion-opening,.is-expansion-ready:not(.is-expansion-static) .expansion-stage{height:740px}
.expansion-hero.is-expansion-ready:not(.is-expansion-static){height:calc(740px + 90svh)}
.expansion-description{top:240px;font-size:1rem;width:calc(100% - 44px)}
.expansion-media{top:calc(60% - var(--expand-progress) * 9%)}
.expansion-actions{bottom:115px;display:flex;flex-wrap:wrap}.expansion-actions .btn{font-size:.82rem;padding:13px 15px}
.expansion-cost{bottom:32px;font-size:.82rem}
}

@media(min-width:861px){.expansion-title{top:65px;font-size:clamp(3.2rem,6.7vw,6.5rem)}}
@media(max-width:860px){.expansion-description{top:220px}.expansion-media{top:58%}}
@media(max-width:860px){.expansion-title{top:70px;font-size:clamp(2.8rem,12vw,3.6rem)}}

/* Desktop opening: show the complete 16:9 film rather than a shallow crop. */
@media (min-width:861px) {
  .expansion-hero {
    --film-start-height:clamp(240px,calc(100svh - 560px),440px);
    --film-start-width:calc(var(--film-start-height) * 16 / 9);
  }
  .expansion-opening,
  .is-expansion-ready:not(.is-expansion-static) .expansion-stage {height:max(690px,calc(100svh - 74px))}
  .expansion-hero.is-expansion-ready:not(.is-expansion-static) {height:calc(max(690px,100svh - 74px) + 110svh)}
  .expansion-media {top:calc(50% + 30px - var(--expand-progress) * 30px)}
}