/* ------------------------------------------------------------------
   The sheet system: light panels with large rounded top corners that
   slide over the hero and over each other. This is where "liquid" lives.
   ------------------------------------------------------------------ */
.sheet {
  position: relative;
  background: var(--surface-0);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  margin-top: calc(-1 * var(--sheet-overlap));
  padding: calc(var(--space-6) + var(--sheet-overlap) * 0.5) 0 var(--space-6);
  box-shadow: var(--shadow-sheet);
}
/* Plain sheets alternate cream / white. The variants keep their own colour whatever their position. */
main > .sheet:nth-child(even of .sheet):not(.sheet--navy, .sheet--muted, .sheet--photo) { background: var(--surface-2); }
.sheet--first { z-index: 2; }
.sheet.sheet--muted { background: var(--surface-1); }
.sheet.sheet--navy { background: var(--navy); color: var(--text-on-navy); }
.sheet--navy p { color: var(--text-on-navy-muted); }
.sheet--navy .display-2 { color: #fff; }

/* frosted glass: only where a panel sits over imagery */
.sheet--glass {
  background: var(--surface-glass-strong);
  border: 1px solid rgb(255 255 255 / 0.65);
  box-shadow: var(--shadow-glass);
  border-radius: var(--card-radius);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sheet--glass {
    background: var(--surface-glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
  }
}

/* The last sheet before the footer closes the stack */
.sheet--photo { padding: 0; overflow: hidden; }

/* ---------------- hero (home) ---------------- */
.hero {
  position: relative;
  min-height: clamp(600px, 100svh, 920px);
  display: grid;
  align-items: end;
  padding: calc(var(--header-h) + var(--space-5)) 0 calc(var(--space-6) + var(--sheet-overlap));
  color: var(--text);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--surface-1); }
.hero__media picture { display: block; height: 100%; } /* base.css sets picture height auto; the img needs a sized parent to cover */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero__wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(250 248 244 / 0.15) 0%, rgb(250 248 244 / 0) 30%, rgb(250 248 244 / 0.55) 75%, var(--surface-0) 100%),
    radial-gradient(60% 50% at 20% 70%, rgb(250 248 244 / 0.55), transparent 70%);
}
.hero__inner {
  display: grid; gap: var(--space-2);
  max-width: 720px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface-glass);
  border: 1px solid rgb(255 255 255 / 0.65);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
.hero__lede { color: var(--text); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.hero__phone { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: 0.95rem; }
.hero__phone a { font-weight: 700; color: var(--text); }

/* ---------------- intro (inner pages) ---------------- */
.intro {
  position: relative;
  padding: calc(var(--header-h) + var(--space-6)) 0 calc(var(--space-6) + var(--sheet-overlap));
  background:
    radial-gradient(70% 60% at 85% 10%, var(--accent-tint), transparent 70%),
    radial-gradient(50% 40% at 10% 90%, rgb(11 27 63 / 0.05), transparent 70%),
    var(--surface-1);
}
.intro__inner { max-width: 820px; }

/* intro with a page hero: image behind, text on a glass card, header floats over it */
.intro--media {
  min-height: clamp(460px, 62svh, 640px);
  display: grid; align-items: end;
  padding-top: calc(var(--header-h) + var(--space-5));
  isolation: isolate;
}
.intro__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--surface-1); }
.intro__media picture { display: block; height: 100%; } /* otherwise the img's 100% height resolves to auto and the photo is clipped, not cropped */
.intro__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.page--work .intro__media img { object-position: center 70%; } /* towers and river sit low in that frame */
.intro__wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(250 248 244 / 0.12) 0%, rgb(250 248 244 / 0) 35%, rgb(250 248 244 / 0.5) 80%, var(--surface-0) 100%);
}
.intro--media .intro__inner {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface-glass);
  border: 1px solid rgb(255 255 255 / 0.65);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
.intro--media .intro__inner > :last-child { margin-bottom: 0; }
.intro__phone { margin-top: var(--space-3); }

/* ---------------- reveal (static until JS says ready) ---------------- */
.reveal { opacity: 1; transform: none; }
html.is-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); will-change: opacity, transform; }
html.is-ready .reveal.is-in { opacity: 1; transform: none; will-change: auto; }
.hero__media img { transform: translate3d(0, var(--parallax, 0px), 0) scale(1.06); transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.is-ready .reveal, html.is-ready .reveal.is-in, .reveal { opacity: 1; transform: none; transition: none; }
  .hero__media img { transform: none; }
  * { animation: none !important; }
}