/* Original overlapping composition, with warm cream in place of charcoal. */
:root { --header-height: 100px; --hero-height: 100svh; --hero-video-gap: 16px; --hero-video-top: calc(var(--header-height) + var(--hero-video-gap)); --hero-ink: #202b27; --hero-paper: #f2eee5; --hero-title: #41c5ad; }
html { scroll-padding-top: calc(var(--header-height) + 20px); }
.header { position: fixed; inset: 0 0 auto; height: var(--header-height); padding-top: 24px; z-index: 40; color: #fff; background: #161918; border-color: #ffffff1a; transition: color .25s ease, background-color .3s ease, border-color .3s ease; }
.header::before { content: ''; position: absolute; inset: 0 0 -36px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #161918b3, #16191866 calc(100% - 36px), transparent); opacity: 0; transition: opacity .3s ease; }
.header.is-over-hero:not(.menu-is-open) { background: transparent; border-color: transparent; }
.header.is-over-hero:not(.menu-is-open)::before { opacity: 1; }
.header.is-over-paper:not(.menu-is-open) { color: var(--hero-ink); background: transparent; }
.header.is-over-paper:not(.menu-is-open)::before { background: linear-gradient(180deg, #f2eee5e6, #f2eee580 calc(100% - 36px), transparent); opacity: 1; }
.header .brand-wordmark::after { background: currentColor; }
.header .navigation > a:not(.nav-contact)::after { background: currentColor; }
.header .nav-contact { color: #10392f; background: #41c5ad; border-color: #41c5ad; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.header .nav-contact:hover { color: #10392f; background: #67d2be; border-color: #67d2be; }
.header .nav-contact:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; box-shadow: 0 0 0 6px #f2eee5; }
.navigation { font-size: 13px; }

/* Static reading order is also the no-JavaScript/reduced-motion layout. */
.film-scene { height: auto; background: var(--hero-paper); color: var(--hero-ink); }
.film-stage { position: relative; top: 0; height: auto; isolation: isolate; }
.film-frame { left: 35%; width: 42%; top: var(--hero-video-top); height: calc(var(--hero-height) - var(--hero-video-top)); background: var(--hero-ink); }
.film-frame > video { transform-origin: 55% 48%; }
.film-poster { position: absolute; inset: 0; display: block; }
.film-poster img { width: 100%; height: 100%; object-fit: cover; transform-origin: 55% 48%; }
#opening-video { position: absolute; inset: 0; opacity: 0; }
#opening-video.is-ready { opacity: 1; }
.film-frame > .film-finish { display: none; position: absolute; inset: 0; object-position: center; transform-origin: 50% 54%; opacity: var(--finish-opacity, 0); transition: opacity .18s linear; }
.film-shade { background: linear-gradient(0deg, #0009, #0003 28%, transparent 60%); opacity: var(--hero-shade-opacity, 1); }

.opening { position: relative; z-index: 3; min-height: var(--hero-height); padding: 120px var(--gutter) clamp(38px, 6svh, 72px); display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; pointer-events: none; }
.headline-layout h1 { font-size: clamp(72px, 13.1vw, 235px); line-height: .88; letter-spacing: -.06em; font-weight: 550; color: var(--hero-title); text-shadow: 0 1px 1px #10392f24; }
.headline-layout h1 > span + span { margin-top: 6px; }
.headline-layout h1 > span { overflow: visible; padding-bottom: .14em; margin-bottom: -.14em; }
.headline-layout h1 > span > span { display: block; }
.hero-word { position: relative; }
.hero-solid { display: block; }
.hero-outline { display: none; position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 1px var(--hero-title); pointer-events: none; }
.film-headline { position: relative; z-index: 2; padding: 44px var(--gutter); margin: 0; color: var(--forest); background: var(--paper); font-size: clamp(36px, 6.8vw, 116px); line-height: 1.04; letter-spacing: -.045em; font-weight: 500; pointer-events: none; }
.film-headline > span { display: block; }
.film-headline > span > span { display: block; }
.scrub-stage { top: var(--header-height); height: calc(100svh - var(--header-height)); }

/* Scroll clears the first statement before introducing the next. */
.has-scroll-motion .film-scene { height: calc(285svh + var(--hero-height)); isolation: isolate; z-index: 0; }
.has-scroll-motion .film-stage { position: sticky; top: 0; height: var(--hero-height); }
/* Every following section must cover the extended hero, including on tall viewports. */
.has-scroll-motion .film-scene ~ section { position: relative; z-index: 1; }
.has-scroll-motion .intro { margin-top: calc(-1 * var(--hero-height)); }
.has-scroll-motion .film-frame { top: var(--hero-video-top); height: calc(100% - var(--hero-video-top)); }
.has-scroll-motion .film-finish { display: block; }
.has-scroll-motion .opening { position: absolute; inset: 0; min-height: 0; opacity: var(--hero-intro-opacity, 1); }
.has-scroll-motion .film-headline { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(46px, 8svh, 100px); padding: 0; color: #fff; background: none; text-shadow: 0 2px 18px #0003; }
.has-scroll-motion .film-headline > span { overflow: clip; padding-bottom: .14em; margin-bottom: -.14em; }
.has-scroll-motion .story-idea > span { opacity: var(--idea-opacity, 0); transform: translate3d(0, var(--idea-rise, 112%), 0); }
.has-scroll-motion .story-detail { margin-top: .06em; font-size: 1.08em; }
.has-scroll-motion .story-detail > span { opacity: var(--detail-opacity, 0); transform: translate3d(0, var(--detail-rise, 112%), 0); }


/* A stepped cream edge echoes the offset opening frame. The title leads;
   the lower copy column leaves the finished film visible a little longer. */
.intro { --intro-step: clamp(80px, 8vw, 144px); --intro-cut: 58%; isolation: isolate; }
#intro-heading em { color: #41c5ad; }
.has-scroll-motion .intro { background: transparent; }
.has-scroll-motion .intro::before,
.has-scroll-motion .intro::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  background: #f2eee5;
}
.has-scroll-motion .intro::before { inset: var(--intro-step) 0 0; }
.has-scroll-motion .intro::after { inset: 0 auto auto 0; width: var(--intro-cut); height: var(--intro-step); }
.has-scroll-motion .intro-summary { padding-top: calc(var(--intro-step) + 2px); }

/* Each photograph follows its own text column, continuing the stepped rhythm. */
.intro-column { display: flex; flex-direction: column; gap: clamp(36px, 4vw, 64px); min-width: 0; }
.intro-column > figure { margin: 0; min-width: 0; overflow: hidden; width: 100%; }
.intro-column > .intro-image-detail { width: 78%; align-self: flex-start; }
.intro-column img { height: 100%; object-fit: cover; }

/* Let the wording arrive quietly, then remain still for reading. No text masks. */
@media (prefers-reduced-motion: no-preference) {
  .intro.has-text-entrance #intro-heading > span,
  .intro.has-text-entrance .intro-summary {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity .8s ease, transform .85s cubic-bezier(.22, 1, .36, 1);
  }
  .intro.has-text-entrance #intro-heading > span:nth-child(2) { transition-delay: .07s; }
  .intro.has-text-entrance #intro-heading > span:nth-child(3) { transition-delay: .14s; }
  .intro.has-text-entrance .intro-summary { transition-delay: .1s; }
  .intro.has-text-entrance #intro-heading > .text-has-arrived,
  .intro.has-text-entrance .intro-summary.text-has-arrived,
  .intro.has-text-entrance .intro-summary:focus-within { opacity: 1; transform: none; }

  /* The frames stay aligned; the photographs gently open and settle inside them. */
  .intro.has-image-entrance .intro-column > figure {
    opacity: 0;
    clip-path: inset(0 0 14% 0);
    transition: opacity .9s ease, clip-path 1.15s cubic-bezier(.22, 1, .36, 1);
  }
  .intro.has-image-entrance .intro-column img {
    transform: translate3d(0, 10px, 0) scale(1.035);
    transition: transform 1.25s cubic-bezier(.22, 1, .36, 1);
  }
  .intro.has-image-entrance .intro-column > .intro-image-detail,
  .intro.has-image-entrance .intro-image-detail img { transition-delay: .16s; }
  .intro.has-image-entrance .intro-column > .image-has-arrived { opacity: 1; clip-path: inset(0); }
  .intro.has-image-entrance .image-has-arrived img { transform: none; }
}
@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
  .intro.has-image-entrance .intro-column > figure:not(.image-has-arrived) { clip-path: inset(0 0 8% 0); }
  .intro.has-image-entrance .intro-column > figure:not(.image-has-arrived) img { transform: scale(1.02); }
}
@media (max-width: 1000px) {
  .intro { --intro-step: 56px; --intro-cut: 78%; }
  .intro-header { grid-template-columns: minmax(0, 9fr) minmax(0, 4fr); gap: 36px clamp(16px, 3vw, 48px); }
  .intro-column { display: contents; }
  .intro-title { grid-column: 1 / -1; grid-row: 1; }
  .intro-summary { grid-column: 1 / -1; grid-row: 2; }
  .intro-column > .intro-image-site { grid-column: 1; grid-row: 3; }
  .intro-column > .intro-image-detail { grid-column: 2; grid-row: 3; width: 100%; align-self: start; }
  .has-scroll-motion .intro-summary { padding-top: 0; }
}
@media (max-width: 680px) {
  .intro { --intro-step: 36px; }
  .intro-header { gap: 28px 12px; }
  .intro.has-text-entrance #intro-heading > span:not(.text-has-arrived),
  .intro.has-text-entrance .intro-summary:not(.text-has-arrived):not(:focus-within) { transform: translate3d(0, 14px, 0); }
}

/* A short drawing-to-solid entrance, followed by a still, readable headline. */
@supports (-webkit-text-stroke: 1px #fff) {
  @media (prefers-reduced-motion: no-preference) {
    .opening.has-entered .hero-outline { display: block; animation: hero-outline-in 1.3s var(--ease) both; }
    .opening.has-entered .hero-solid { animation: hero-type-fill 1.3s var(--ease) both; }
    .opening.has-entered h1 > span:nth-child(2) .hero-outline,
    .opening.has-entered h1 > span:nth-child(2) .hero-solid { animation-delay: .18s; }
  }
}
@keyframes hero-outline-in {
  0% { clip-path: inset(-.12em 100% -.22em 0); opacity: 1; }
  32%, 70% { clip-path: inset(-.12em -.04em -.22em -.04em); opacity: 1; }
  100% { clip-path: inset(-.12em -.04em -.22em -.04em); opacity: 0; }
}
/* Tight line boxes exclude some glyph ink: include descenders in the reveal mask. */
@keyframes hero-type-fill {
  0%, 28% { clip-path: inset(calc(100% + .22em) -.04em -.22em -.04em); }
  88%, 100% { clip-path: inset(-.12em -.04em -.22em -.04em); }
}

@media (max-width: 1000px) and (min-width: 681px) {
  .navigation { gap: 20px; font-size: 12px; }
  .nav-contact { padding-inline: 15px !important; }
}
@media (max-width: 680px) {
  :root { --header-height: 82px; }
  .header { padding-top: 12px; }
  .navigation { top: calc(var(--header-height) - 1px); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; color: #fff; background: var(--hero-ink); border-color: #ffffff1a; box-shadow: 0 15px 22px #0002; }
  .film-frame { left: 17%; width: calc(80% - var(--gutter)); }
  .opening { padding-top: 110px; padding-bottom: 38px; gap: 24px; }
  .headline-layout h1 { font-size: 13.8vw; line-height: .96; letter-spacing: -.055em; }
  .film-headline { padding-block: 34px; font-size: 8.6vw; line-height: 1.12; letter-spacing: -.035em; }
  .has-scroll-motion .film-scene { height: calc(252svh + var(--hero-height)); }
  .has-scroll-motion .film-headline { bottom: 48px; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .opening { padding-top: 56px; padding-bottom: 18px; gap: 16px; }
  .headline-layout h1 { font-size: min(11vw, 13svh); }
  .film-headline { font-size: clamp(30px, 5.3vw, 66px); }
  .has-scroll-motion .film-headline { bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .scrub-stage { position: relative; top: 0; }
  .film-frame { top: var(--hero-video-top); height: calc(var(--hero-height) - var(--hero-video-top)) !important; }
  .opening, .film-headline { opacity: 1; }
  .intro.has-text-entrance #intro-heading > span,
  .intro.has-text-entrance .intro-summary { opacity: 1; transform: none !important; }
}

/* Review-only hero action. The approved header and typography stay in place. */
.film-scene .opening { gap: clamp(22px, 3svh, 30px); }
.hero-project-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 56px;
  max-width: 100%;
  padding: 16px 24px;
  border: 1px solid #268571;
  background: #41c5ad;
  color: #10392f;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.hero-project-cta:focus-visible {
  outline: 2px solid #10392f;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px #f2eee5;
}
@media (hover: hover) {
  .hero-project-cta:hover { background: #67d2be; border-color: #10392f; transform: translateY(-1px); }
}
.hero-project-cta:active { transform: translateY(1px); }
@media (max-width: 680px) {
  .film-scene .opening { gap: 22px; padding-bottom: 32px; }
  .hero-project-cta { min-height: 54px; padding: 15px 23px; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .film-scene .opening { gap: 16px; padding-bottom: 18px; }
  .hero-project-cta { min-height: 48px; padding-block: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-project-cta { transition: none; transform: none; }
}