/* Homepage cinematic treatment. Service pages retain their established layout. */
.homepage { background: var(--warm-stone); }
.homepage .shell { max-width: 1390px; }
.homepage :focus-visible { outline: 3px solid var(--terracotta); outline-offset: 5px; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 20px; background: var(--warm-stone); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.homepage .site-header { box-shadow: none; border-bottom: 1px solid var(--line-on-dark); }
.homepage .logo-mark { width: 220px; height: 67px; }
.homepage .cinematic-hero { min-height: clamp(650px, 81svh, 850px); padding: 72px 0 156px; background: var(--charcoal); isolation: isolate; overflow: hidden; }
.cinematic-media, .cinematic-frame { position: absolute; inset: 0; }
.cinematic-media { z-index: -2; }
.cinematic-frame { margin: 0; opacity: 0; transition: opacity 1.4s ease; overflow: hidden; }
.cinematic-frame.is-active { opacity: 1; }
.cinematic-frame picture { display: block; width: 100%; height: 100%; }
.cinematic-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--scene-position, center); }
.cinematic-hero.is-enhanced .cinematic-frame img { animation: cinematic-pan 8.4s ease-out both; animation-play-state: paused; }
.cinematic-hero.is-enhanced .cinematic-frame.is-active img { animation-play-state: running; }
.cinematic-hero.is-paused .cinematic-frame img { animation-play-state: paused; }
@keyframes cinematic-pan { from { transform: scale(1.035) translateX(.25%); } to { transform: scale(1) translateX(0); } }
.cinematic-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(32,31,29,.86), rgba(32,31,29,.55) 36%, rgba(32,31,29,.02) 80%), linear-gradient(0deg, rgba(32,31,29,.3), transparent 45%); pointer-events: none; }
.homepage .cinematic-content .hero-copy { max-width: 920px; padding: 30px 0; }
.homepage .cinematic-hero h1 { font-size: clamp(3rem, 4.8vw, 4.3rem); line-height: 1.07; letter-spacing: -.035em; }
.cinematic-summary { max-width: 470px; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--warm-stone); line-height: 1.65; margin: 24px 0 0; }
.cinematic-hero .hero-cta { margin-top: 30px; }
.cinematic-hero .btn { background: var(--terracotta-hover); border-color: var(--terracotta); display: inline-flex; align-items: center; gap: 32px; }
.cinematic-hero .btn:hover { background: var(--charcoal); }
.cinematic-rail { position: absolute; bottom: 0; left: 0; right: 0; padding-top: 44px; background: linear-gradient(0deg, rgba(32,31,29,.74), rgba(32,31,29,.3) 65%, transparent); color: var(--warm-stone); }
.cinematic-rail-inner { display: flex; justify-content: space-between; gap: 32px; align-items: end; min-height: 100px; padding-top: 12px; padding-bottom: 30px; }
.cinematic-credit p { margin: 0; font-size: .95rem; line-height: 1.5; text-shadow: 0 1px 8px rgba(32,31,29,.45); }
.cinematic-credit [data-project-location] { display: block; font-size: .8rem; opacity: .85; margin-top: 4px; }
.cinematic-controls { display: flex; align-items: center; gap: 34px; }
.cinematic-controls[hidden] { display: none; }
.cinematic-select, .cinematic-transport { display: flex; align-items: center; gap: 6px; }
.cinematic-controls button { appearance: none; display: inline-flex; align-items: center; justify-content: center; font: inherit; color: inherit; cursor: pointer; background: transparent; border: 0; border-radius: 0; min-width: 44px; min-height: 44px; padding: 0; transition: color .2s ease; }
.cinematic-select button { position: relative; width: 44px; }
.cinematic-select button::after { content: ''; width: 30px; height: 1px; background: rgba(245,241,234,.55); transition: background .2s ease; }
.cinematic-select button[aria-pressed="true"]::after { background: var(--terracotta); height: 2px; }
.cinematic-transport { gap: 5px; }
.cinematic-transport button svg { filter: drop-shadow(0 1px 3px rgba(32,31,29,.5)); }
.cinematic-transport [data-pause] { min-width: 36px; width: 36px; }
.motion-symbol { display: block; width: 7px; height: 11px; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
[data-pause][aria-pressed="true"] .motion-symbol { width: 9px; height: 11px; border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cinematic-controls button:hover { color: var(--terracotta); }
.cinematic-select button:hover::after { background: var(--warm-stone); }
.homepage .intro { padding: clamp(48px, 6vw, 80px) 0; }
.homepage .intro-body { max-width: 920px; margin: 0; }
.homepage .intro-body p { font-size: clamp(1.05rem, 1.6vw, 1.23rem); }
.homepage .intro-body p:last-child { margin-bottom: 0; }
@media (max-width: 1000px) {
  .homepage .nav-links { gap: 20px; }
  .homepage .site-nav { gap: 24px; }
  .cinematic-controls { gap: 16px; }

}
@media (max-width: 760px) {
  .homepage .logo-mark { width: 185px; height: 56px; }
  .homepage .nav-links { display: none; }
  .homepage .cinematic-hero { min-height: 680px; min-height: max(660px, 80svh); padding: 64px 0 182px; }
  .homepage .cinematic-hero h1 { font-size: clamp(2.7rem, 8.3vw, 4rem); }
  .homepage .cinematic-content .hero-copy { max-width: 540px; padding: 20px 0; }
  .cinematic-hero::before { background: linear-gradient(90deg, rgba(32,31,29,.85), rgba(32,31,29,.5)), linear-gradient(0deg, rgba(32,31,29,.35), transparent 60%); }
  .cinematic-frame img { object-position: var(--scene-mobile-position, center); }
  .cinematic-rail-inner { flex-wrap: wrap; gap: 12px; padding-top: 14px; padding-bottom: 22px; }
  .cinematic-credit { width: 100%; gap: 18px; }
  .cinematic-controls { justify-content: space-between; width: 100%; }
  .cinematic-select { flex: 0 1 auto; min-width: 0; }
  .cinematic-select button { width: 36px; min-width: 30px; }
  .cinematic-transport { flex-shrink: 0; }
}
@media (max-width: 480px) {
  .homepage .logo-mark { width: 166px; height: 51px; }
  .homepage .cinematic-hero h1 { font-size: clamp(2.5rem, 9.5vw, 2.85rem); }
  .cinematic-summary { font-size: 1.02rem; max-width: 310px; }
  .cinematic-hero .btn { padding: 13px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .homepage { scroll-behavior: auto; }
  html:has(.homepage) { scroll-behavior: auto; }
  .cinematic-hero.is-enhanced .cinematic-frame img { animation: none; }
  .cinematic-frame, .selected-image img { transition: none; }
}

@media (max-width: 360px) {
  .homepage .logo-mark { width: 145px; height: 45px; }
  .homepage .site-nav .btn { white-space: nowrap; }
}

/* Homepage flow: short introduction, shared portfolio, then service detail. */
.homepage .intro { padding: clamp(38px, 4.5vw, 64px) 0 0; }
.homepage .intro-body { max-width: 960px; }
.homepage .intro-body p { font-size: clamp(1.03rem, 1.4vw, 1.15rem); line-height: 1.7; }
.homepage .portfolio-featured { padding-top: clamp(40px, 5vw, 70px); }
.homepage .portfolio-feature-card .portfolio-card-location { color: var(--ink); }
.homepage-services { border-bottom: 1px solid var(--line-on-dark); }
.homepage-services-heading { max-width: 760px; margin-bottom: 36px; }
.homepage-services-heading h2 { font-size: clamp(2.1rem, 3.6vw, 3.2rem); font-weight: 600; letter-spacing: -.025em; }
.homepage-services-heading p { margin: 18px 0 0; color: var(--warm-stone); font-size: 1.08rem; line-height: 1.7; }
.service-band { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.service-band-item { position: relative; display: block; text-decoration: none; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; min-width: 0; padding: clamp(24px, 2.4vw, 34px) clamp(20px, 2vw, 28px); background: color-mix(in srgb, var(--warm-stone) 72%, var(--muted-clay)); color: var(--ink); }
.service-band-outdoor { background: var(--terracotta-hover); color: var(--warm-stone); }
.service-band-stone { background: var(--warm-stone); color: var(--ink); }
.homepage-services .service-band-item h3 { min-height: 4.6em; margin: 0; color: inherit; font-size: clamp(1.25rem, 1.65vw, 1.55rem); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }
.service-band-item p { margin: 24px 0 0; font-size: 1rem; line-height: 1.65; }
.service-band-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; }
.service-band-footer p { margin: 0; font-size: .96rem; }
.service-band-footer .btn-ghost-link { font-size: .96rem; text-decoration-color: var(--terracotta); }
.homepage .service-band-item:focus-visible { z-index: 2; outline: 3px solid var(--terracotta); outline-offset: 4px; box-shadow: 0 16px 32px rgba(32,31,29,.28); }
.homepage .service-band-outdoor:focus-visible { outline-color: var(--warm-stone); }
@media (hover: hover) and (pointer: fine) {
  .service-band-item:hover { z-index: 1; transform: translateY(-8px) scale(1.015); box-shadow: 0 18px 36px rgba(32,31,29,.3); }
}
@media (prefers-reduced-motion: reduce) {
  .service-band-item { transition: none; }
  .service-band-item:hover { transform: none; }
}
@media (max-width: 1000px) {
  .service-band { grid-template-columns: 1fr; }
  .service-band-item { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; padding: 25px 28px; }
  .homepage-services .service-band-item h3 { min-height: 0; font-size: 1.65rem; }
  .service-band-item h3 br { display: none; }
  .service-band-item p { margin: 0; max-width: 55ch; }
}
@media (max-width: 480px) {
  .homepage-services-heading { margin-bottom: 28px; }
  .service-band-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 20px; padding: 24px 20px; }
  .homepage-services .service-band-item h3 { font-size: 1.4rem; }
  .service-band-item p { font-size: .95rem; }
  .service-band-footer { align-items: start; flex-direction: column; gap: 12px; padding-top: 24px; }
}
@media (max-width: 360px) {
  .service-band-item { display: block; }
  .service-band-item p { margin-top: 14px; }
}

/* Six named services, branded with the existing VA artwork. */
.service-band-mark { width: 34px; height: 23px; margin-bottom: 22px; }
.service-band-outdoor .service-band-mark { --terracotta: var(--warm-stone); --white: var(--warm-stone); }
@media (min-width: 1001px) and (max-width: 1279px) {
  .service-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .homepage-services .service-band-item h3 { min-height: 3.45em; font-size: 1.5rem; }
}
@media (min-width: 361px) and (max-width: 1000px) {
  .service-band-item { row-gap: 14px; }
  .service-band-mark { grid-column: 1; grid-row: 1; margin: 0; }
  .homepage-services .service-band-item h3 { grid-column: 1; grid-row: 2; }
  .service-band-item p { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 360px) { .service-band-mark { margin-bottom: 16px; } }

/* A compact service-area transition before the project enquiry. */
.homepage-area { padding: clamp(48px, 5.5vw, 76px) 0; border-bottom: 1px solid var(--line); }
.homepage .homepage-area .shell { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.homepage-area-mark { margin-bottom: 20px; }
.homepage-area h2 { max-width: 600px; margin: 0; font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; }
.homepage-area-copy p { max-width: 47ch; margin: 20px 0 0; line-height: 1.7; }
.homepage-area .nap { grid-template-columns: 1fr; gap: 20px; border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 clamp(28px, 4vw, 56px); margin: 0; }
.homepage-area .nap dt { font-size: .88rem; letter-spacing: 0; text-transform: none; color: var(--charcoal); margin-bottom: 5px; }
.homepage-area .nap dd { color: var(--ink); font-size: 1.05rem; }
.homepage-area .nap a { text-underline-offset: 5px; text-decoration-color: var(--terracotta); }
.homepage-area .nap a:hover { text-decoration-thickness: 2px; }
@media (max-width: 700px) {
  .homepage .homepage-area .shell { grid-template-columns: 1fr; gap: 32px; }
  .homepage-area .nap { border-left: 0; border-top: 1px solid var(--line); padding: 28px 0 0; }
}

/* Company introduction: an editorial statement between the hero and portfolio. */
.homepage .company-intro { padding: clamp(48px, 6vw, 80px) 0 20px; }
.company-intro .shell { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(32px, 6vw, 86px); }
.company-intro-mark { margin-bottom: 22px; }
.company-intro h2 { font-size: clamp(2rem, 3.3vw, 3rem); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; }
.company-intro h2 span { display: block; margin-top: 18px; font: 400 clamp(1.05rem, 1.4vw, 1.2rem)/1.5 var(--sans); letter-spacing: 0; }
.company-intro-copy > p { margin: 0; max-width: 56ch; font-size: clamp(1.03rem, 1.35vw, 1.15rem); line-height: 1.75; }
.company-intro-copy .company-intro-credentials { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.65; color: var(--charcoal); }
.company-intro-credentials span { display: inline-block; margin: 0 5px; }
@media (max-width: 760px) {
  .company-intro .shell { grid-template-columns: 1fr; gap: 28px; }
  .company-intro-mark { margin-bottom: 18px; }
  .company-intro h2 span { margin-top: 14px; }
  .company-intro-copy .company-intro-credentials { margin-top: 20px; }
}

/* A deeper terracotta keeps the small brand statement readable on warm stone. */
.company-intro h2 span { color: var(--terracotta-hover); }

.homepage .site-footer { border-top: 1px solid var(--line-on-dark); }



.cinematic-hero .hero-phrase { white-space: nowrap; }