/*
 * Homepage composition pass.
 *
 * Every rule is scoped below #top so this file can be loaded after style.css
 * without changing the menu, footer or route templates. The motion module
 * owns the temporary .homepage-motion-active class and all scroll-linked
 * inline values; these rules keep the no-JS and reduced-motion states legible.
 */

#top {
  --homepage-gutter: clamp(1.4rem, 4vw, 4.3rem);
  --homepage-col: calc(8.333vw + 1.6rem);
}

#top .hero {
  height: 100dvh;
  min-height: 38rem;
  isolation: isolate;
}

#top .hero-media {
  z-index: 0;
  isolation: isolate;
}

#top .hero-poster,
#top .hero-film,
#top .intro-film {
  position: absolute;
  inset: 0;
}

#top .hero-poster {
  z-index: 0;
}

#top .hero-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#top .hero-film {
  z-index: 1;
}

#top .intro-film {
  z-index: 2;
}

#top .hero-copy {
  z-index: 4;
  inset: 0;
  padding: 0;
}

#top .hero-copy h1 {
  top: clamp(8rem, 19.2222vh, 12rem);
  left: 50%;
  width: min(43rem, 90vw);
  transform: translateX(-50%);
  font-size: clamp(4.8rem, 6.25vw, 5.625rem);
  line-height: 1.2;
  letter-spacing: -0.125rem;
  text-align: center;
  text-wrap: balance;
}

#top .hero-description {
  bottom: clamp(3.25rem, 7.1vh, 4rem);
  left: 50%;
  width: min(28rem, calc(100% - 3rem));
  max-width: none;
  margin: 0;
  transform: translateX(-50%);
  font-size: 1.125rem;
  line-height: 1.4;
  text-align: center;
}

#top .scroll-cue {
  bottom: clamp(1.4rem, 3vh, 2.2rem);
}

/* The source holds a dark, centred positioning statement before the craft
   frame arrives. Keep its copy in one measured block at every desktop width. */
#top .statement {
  min-height: 85dvh;
  padding-top: clamp(5rem, 8vh, 8rem);
  padding-bottom: clamp(5rem, 8vh, 8rem);
  background: #0c0c0c;
}

#top .statement-heading {
  width: min(100%, 72rem);
}

#top .statement-heading h2 {
  max-width: 17ch;
  font-size: clamp(4rem, 6.4vw, 8rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Approach/craft is a dark stage, so the clipped frame has a continuous field
   to reveal against. The stage, rather than the page background, owns the crop. */
#top .craft-intro {
  position: relative;
  min-height: 100dvh;
  overflow: visible;
  background: #0c0c0c;
}

#top .craft-stage {
  position: relative;
  height: 100dvh;
  min-height: 38rem;
  overflow: hidden;
  background: #0c0c0c;
  isolation: isolate;
}

#top .craft-visual {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  object-fit: cover;
  object-position: center 50%;
  display: block;
  will-change: auto;
}

#top .craft-caption {
  z-index: 2;
  top: 15%;
  right: auto;
  bottom: auto;
  left: 9.4444%;
  width: min(35.5rem, 42vw);
  text-align: left;
  text-shadow: 0 2px 2rem rgba(0, 0, 0, 0.55);
}

#top .craft-caption .eyebrow {
  line-height: 1.5;
}

#top .craft-caption h2 {
  width: min(35.5rem, 42vw);
  max-width: none;
  margin-top: 0;
  font-size: clamp(4.8rem, 6.6667vw, 6rem);
  line-height: 1.2;
  letter-spacing: -0.125rem;
}

/* The supporting copy and CTA sit in the lower-right grid cell in the source. */
#top .craft-support {
  position: absolute;
  z-index: 2;
  right: 9.4444%;
  bottom: 15%;
  width: min(20.5rem, 30vw);
  text-align: left;
  text-shadow: 0 2px 2rem rgba(0, 0, 0, 0.55);
}

#top .craft-support p {
  max-width: 20.5rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.4;
  color: rgba(242, 241, 237, 0.82);
}

#top .craft-support .outline-link {
  margin-top: 2rem;
}

/* The source logo strip overlays the lower-left of the image while the frame is
   open. Moving it into .craft-stage keeps it inside the same pinned viewport. */
#top .craft-stage .marque-strip {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 25%;
  width: 65%;
  padding: 0;
  background: transparent;
}

#top .ordinary-car {
  will-change: auto;
}

@media (min-width: 800px) {
  #top.homepage-motion-active .philosophy-desktop,
  body.motion-ready #top .philosophy-desktop {
    display: block;
  }

  #top.homepage-motion-active .philosophy-mobile,
  body.motion-ready #top .philosophy-mobile {
    display: none;
  }

  #top .philosophy-stage {
    height: 100dvh;
  }

  #top .philosophy-card {
    inset: 0 clamp(2rem, 17.7778vw, 16rem);
    grid-template-columns: minmax(0, 1.366fr) minmax(0, 1fr);
    gap: clamp(3rem, 10.5556vw, 9.5rem);
  }

  #top .philosophy-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  #top .philosophy-copy h3 {
    font-size: clamp(4.8rem, 6.6667vw, 6rem);
    line-height: 1.08;
  }
}

@media (max-width: 1200px) and (min-width: 800px) {
  #top .hero-copy h1 {
    width: min(54rem, 88vw);
    font-size: clamp(4.8rem, 6.25vw, 5.625rem);
  }

  #top .craft-caption {
    left: max(2rem, 6vw);
    width: min(31rem, 42vw);
  }

  #top .craft-caption h2 {
    width: min(31rem, 42vw);
  }

  #top .craft-support {
    right: max(2rem, 6vw);
    width: min(20.5rem, 30vw);
  }
}

@media (max-width: 799px) {
  #top .hero {
    height: 100svh;
    min-height: 38rem;
  }

  #top .hero-copy h1 {
    top: 17%;
    left: 50%;
    width: min(20rem, 88vw);
    transform: translateX(-50%);
    font-size: clamp(3.3rem, 16vw, 5.6rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
  }

  #top .hero-copy h1 br {
    display: none;
  }

  #top .hero-description {
    bottom: 8%;
    width: min(20rem, calc(100% - 2.8rem));
    font-size: 0.9rem;
    line-height: 1.42;
  }

  #top .statement {
    min-height: 70svh;
    padding: 5rem 1.4rem;
    text-align: center;
  }

  #top .statement-heading {
    width: 100%;
  }

  #top .statement-heading h2 {
    max-width: 15ch;
    margin-inline: auto;
    font-size: clamp(3.4rem, 14vw, 5.4rem);
    line-height: 1.04;
  }

  #top .craft-intro {
    min-height: 100svh;
    overflow: hidden;
  }

  #top .craft-stage {
    height: 100svh;
    min-height: 38rem;
  }

  #top .craft-visual {
    object-position: center 52%;
    will-change: auto;
  }

  #top .craft-caption {
    top: 14%;
    right: 6%;
    bottom: auto;
    left: 6%;
    width: auto;
    text-align: center;
  }

  #top .craft-caption h2 {
    width: auto;
    max-width: 13ch;
    margin-inline: auto;
    margin-top: 0;
    font-size: clamp(2.8rem, 11vw, 4.2rem);
    line-height: 1.03;
  }

  #top .craft-support {
    right: 6%;
    bottom: 5%;
    left: 6%;
    width: auto;
    text-align: center;
  }

  #top .craft-support p {
    max-width: 24rem;
    margin-inline: auto;
    font-size: 0.95rem;
    line-height: 1.45;
  }

  #top .craft-support .outline-link {
    margin-top: 1.35rem;
  }

  #top .craft-stage .marque-strip {
    right: 0;
    bottom: 31%;
    width: 100%;
  }

  #top .philosophy-desktop {
    display: none;
  }

  #top .philosophy-mobile {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  #top .hero-copy h1,
  #top .hero-description,
  #top .scroll-cue,
  #top .statement-heading,
  #top .craft-caption,
  #top .craft-support,
  #top .ordinary-car {
    opacity: 1;
    visibility: visible;
    filter: none;
  }

  #top .hero-copy h1,
  #top .hero-description {
    transform: translateX(-50%);
  }

  #top .statement-heading,
  #top .craft-caption,
  #top .craft-support,
  #top .ordinary-car {
    transform: none;
  }

  #top .hero-film,
  #top .intro-film {
    display: none;
  }

  #top .craft-visual {
    clip-path: inset(0% 0% 0% 0%);
    transform: none;
  }

  #top .philosophy-desktop {
    display: none;
  }

  #top .philosophy-mobile {
    display: block;
  }
}

#top .craft-visual{clip-path:inset(var(--craft-inset-y,0%) var(--craft-inset-x,0%))}
@media(min-width:1000px){
 #top .philosophy-copy{position:relative;height:28rem;align-self:center}
 #top .philosophy-copy .chapter-counter{position:absolute;top:0;margin:0;line-height:1.2}
 #top .philosophy-copy h3{position:absolute;top:6.25rem;margin:0;line-height:1.2;letter-spacing:-2px}
 #top .philosophy-copy #chapter-description{position:absolute;top:14.125rem;font-size:1.125rem;line-height:1.4;margin:0}
 #top .philosophy-copy .outline-link{position:absolute;bottom:0;min-height:3.375rem;margin:0;padding-inline:2rem}
 #top .philosophy-copy .outline-link b{display:none}
}

/* A short landscape viewport cannot contain the pinned portrait compositions. */
@media(max-height:599px){
 #top .hero{height:100svh;min-height:0}
 #top .hero-copy h1{top:24%;font-size:clamp(2rem,10vh,3.6rem);line-height:1.05;width:80%;max-width:40rem}
 #top .hero-description{bottom:2.75rem;font-size:.8rem;max-width:26rem}
 #top .scroll-cue{bottom:.65rem}
 #top .scroll-cue span{display:none}
 #top .philosophy-desktop,body.motion-ready #top .philosophy-desktop{display:none}
 #top .philosophy-mobile,body.motion-ready #top .philosophy-mobile{display:block}
 #top .craft-stage{height:38rem;min-height:38rem}
 #top .craft-caption{top:12%;bottom:auto;left:6%;width:50%}
 #top .craft-caption h2{font-size:3.5rem;width:auto}
 #top .craft-support{bottom:9%;right:6%;width:40%}
 #top .craft-stage .marque-strip{bottom:12%;width:48%}
}

/* Keep transient image promotion confined to the active cinematic scenes. */
#top.homepage-motion-active .craft-visual{will-change:transform,clip-path}
#top .craft-stage .marque-strip{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#top .craft-support p{color:#f2f1ed;text-shadow:0 1px 12px #000}
@media(min-width:800px) and (max-width:1050px){
 #top .philosophy-card{inset:0 8%;gap:7%;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 #top .philosophy-copy h3{font-size:clamp(3.6rem,7vw,5rem)}
 #top .service-copy h3{font-size:clamp(3rem,5.6vw,4rem)}
}
/* A full-stage shade avoids the visible rectangular edge beneath the heading. */
#top .craft-caption::before{display:none}
#top .craft-stage::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0002,transparent 38%,#0008)}

/* ---------------------------------------------------------------------------
 * Refinement pass (2026-09-23)
 * ------------------------------------------------------------------------- */

/* Section hand-offs dip through the stage colour instead of cutting on a hard
   edge. The layers are inert until the motion module scrubs their opacity. */
#top .stage-dim{position:absolute;inset:0;z-index:6;background:#0c0c0c;opacity:0;pointer-events:none}
#top .hero-dim{z-index:3}

/* Statement: the italic line balances on its own so no word is stranded. */
#top .statement-heading em{display:block;text-wrap:balance}

/* Marques: every logo carries its own optically balanced size. */
#top .marque-track img{width:var(--logo-w,100px);height:var(--logo-h,48px);opacity:.72}
#top .marque-track{gap:4.5rem}
@media(min-width:800px){
 #top .craft-stage .marque-strip{left:9.4444%;width:48%;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
}
@media(max-width:799px){
 #top .marque-track img{width:calc(var(--logo-w,100px)*.78);height:calc(var(--logo-h,48px)*.78)}
 #top .marque-track{gap:2.6rem}
}

/* Services introduction: the stacked serif lines were touching. */
#top .services-intro h2{line-height:1.04}

/* Services list, static state (no JS, paused, reduced motion): rows alternate. */
#top .service-track{display:flex;flex-direction:column}
#top .service-hud{display:none}
@media(min-width:800px){
 #top .service-row-reverse .service-copy{order:1}
 #top .service-row-reverse figure{order:2}
 #top .service-row+.service-row{border-top:1px solid rgba(242,241,237,.08)}
}

/* Services, desktop motion: one pinned stage with a horizontal track. */
@media(min-width:800px){
 #top.homepage-motion-active .service-list{position:relative;height:100dvh;min-height:38rem;overflow:hidden;background:#0c0c0c}
 #top.homepage-motion-active .service-track{flex-direction:row;align-items:center;gap:7vw;height:100%;width:max-content;padding:0 9.5vw;will-change:transform}
 #top.homepage-motion-active .service-row{flex:0 0 min(62vw,70rem);height:min(72vh,46rem);min-height:0;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:4.5vw;padding:0;background:transparent;border:0}
 #top.homepage-motion-active .service-row-reverse figure{order:1}
 #top.homepage-motion-active .service-row-reverse .service-copy{order:2}
 #top.homepage-motion-active .service-row figure{position:relative;height:100%;min-height:0;overflow:hidden;align-self:stretch;background:#141414}
 #top.homepage-motion-active .service-row figure img{position:absolute;inset:0 -8%;width:116%;height:100%;max-width:none;object-fit:cover}
 #top.homepage-motion-active .service-copy{align-self:center;padding:0}
 #top.homepage-motion-active .service-copy h3{font-size:clamp(3.6rem,4.9vw,6.4rem);line-height:1.02;margin:1.6rem 0 1.8rem}
 #top.homepage-motion-active .service-hud{display:flex;position:absolute;z-index:2;left:9.5vw;bottom:clamp(1.6rem,4.5vh,3rem);align-items:center;gap:1rem;font-family:var(--serif);font-size:1.15rem;letter-spacing:.02em;color:rgba(242,241,237,.72)}
 #top.homepage-motion-active .service-hud-bar{position:relative;width:9rem;height:1px;background:rgba(242,241,237,.2)}
 #top.homepage-motion-active .service-hud-bar i{position:absolute;inset:0;background:var(--cream);transform:scaleX(0);transform-origin:left}
}
@media(min-width:800px) and (max-width:1100px){
 #top.homepage-motion-active .service-row{flex-basis:80vw;gap:5vw}
 #top.homepage-motion-active .service-track{gap:6vw;padding:0 7vw}
 #top.homepage-motion-active .service-copy h3{font-size:clamp(3.2rem,6.4vw,4.6rem)}
 #top.homepage-motion-active .service-copy .outline-link{gap:1.6rem;white-space:nowrap}
 #top.homepage-motion-active .service-hud{left:7vw}
}
@media(min-width:800px) and (orientation:portrait){
 #top.homepage-motion-active .service-row{height:min(56vh,46rem)}
}

/* Ordinary Ends Here: one screen, heading in the upper third, cars resting
   below it. The type no longer sits across the car roofs. */
#top .ordinary{height:100svh;min-height:40rem;padding-top:0;align-items:flex-start}
#top .ordinary-text{padding-top:max(6.5rem,12vh)}
#top .ordinary-text .eyebrow{margin-bottom:1.6rem}
#top .ordinary-text h2{font-size:clamp(4.4rem,8vw,9.2rem);line-height:.98;transform-origin:50% 0}
#top .ordinary-cars{height:62%;bottom:-17%}
#top .ordinary::before{content:'';position:absolute;inset:auto 0 0;height:45%;z-index:2;pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.35))}
@media(max-width:799px){
 #top .ordinary{min-height:38rem}
 #top .ordinary-text{padding-top:max(6rem,14vh)}
 #top .ordinary-text h2{font-size:clamp(3.4rem,16vw,5.4rem)}
 #top .ordinary-cars{height:50%;width:132%;bottom:-6%}
}
@media(max-height:599px){#top .ordinary{height:auto;min-height:36rem}}
#top .ordinary-cars{height:70%;bottom:-22%}