/* ---------------------------------------------------------
   GODSMAN — landing hero
   Sunset landscape that merges into the real header logo on scroll
--------------------------------------------------------- */

:root {
  --sky-top: #0f1620;
  --sky-mid: #2c3644;
  --sky-warm: #3d5570;
  --sky-horizon: #ffd9a0;

  --sun-flat: #e9c002;
  --sun-glow: rgba(233, 192, 2, 0.45);

  --ground-base: #0a0706;

  --ink: #14100d;
  --paper: #fbf3e4;
  --paper-dim: rgba(251, 243, 228, 0.68);
  --amber-deep: #7a5600;

  --header-h: 76px;

  /* Composition stays this wide at most; beyond it, content centers
     instead of stretching toward the edges on wide/ultra-wide screens. */
  --stage-max: 1680px;
  --stage-pad: max(0px, (100vw - var(--stage-max)) / 2);

  /* Sun's landscape position/size, shared so the mascot can be
     positioned relative to it (covering its right 20%). */
  --sun-left: calc(var(--stage-pad) + min(6vw, 100.8px));
  --sun-size: clamp(180px, 22vw, 340px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground-base);
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  overflow-x: hidden;
}

main {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--stage-pad) + clamp(20px, 4vw, 56px));
}

.header-bg {
  position: absolute;
  inset: 0;
  background: rgba(251, 243, 228, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20, 16, 13, 0.08);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
}

.logo-slot {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-link {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.header-logo-img {
  display: block;
  height: 34px;
  width: auto;
  opacity: 0;
}

.header-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  opacity: 0;
  transform: translateX(14px);
  pointer-events: none;
}

.header-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
}

.header-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--sun-flat);
  transition: right 0.28s ease;
}

.header-nav a:hover::after {
  right: 0;
}

/* ---------------------------------------------------------
   Flying logo pieces (sun / mascot)
   Positioned as fixed elements; JS drives translate+scale,
   then crossfades them into the real header logo image.
--------------------------------------------------------- */

.sun-fly,
.man-fly {
  position: fixed;
  transform-origin: center center;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 110;
}

.sun-fly {
  left: var(--sun-left);
  top: 32vh;
  width: var(--sun-size);
  height: var(--sun-size);
  border-radius: 50%;
  background: var(--sun-flat);
  box-shadow: 0 0 70px 6px var(--sun-glow);
}

.man-fly {
  left: calc(var(--sun-left) + var(--sun-size) * 0.15 + 50px);
  bottom: 9.5vh;
  height: clamp(280px, 44vh, 520px);
  width: auto;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.35));
}

/* Subtle ground-contact shadow, feet-only — offset down-right since the
   sun sits at the mascot's top-left. Sized/positioned as a % of the
   mascot's own box (which is shrink-to-fit around the image, so these
   percentages line up with the artwork's actual foot position) rather
   than fixed units, so it scales and travels with the mascot as one
   unit through the fly-up/scale JS transform and fades with it too. */
.man-fly-shadow {
  position: absolute;
  left: 30%;
  width: 42%;
  bottom: -8%;
  height: 9%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 55%, transparent 80%);
  filter: blur(3px);
  pointer-events: none;
}

.man-fly img {
  position: relative;
  display: block;
  height: 100%;
  width: auto;
}

/* Stands in for the real ground for the first moment of scroll, just so it
   can outrank the mascot's z-index and hide his feet. The real ground/curtain
   live inside .hero-stage, a stacking context of their own — nothing in there
   can ever out-stack a body-level fixed element like .man-fly, no matter what
   z-index it's given. This duplicate is body-level too, so it can. It fades
   out almost immediately once the mascot lifts off, handing off seamlessly
   to the identical-looking real ground underneath. */
.ground-front {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28vh;
  z-index: 115;
  pointer-events: none;
  will-change: opacity;
}

.ground-front svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------
   Hero landscape
--------------------------------------------------------- */

.hero {
  position: relative;
  height: 340vh;
}

.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--ground-base);
}

.sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 46%,
    var(--sky-warm) 74%,
    var(--sky-horizon) 100%
  );
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fffdf4;
  box-shadow: 0 0 6px 1.5px rgba(255, 253, 244, 0.85);
  animation: twinkle 3.6s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.75); }
  50% { opacity: 1; transform: scale(1.15); }
}

.cloud {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 227, 202, 0.16);
  filter: blur(18px);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.cloud-a {
  top: 12%;
  left: 2%;
  width: 30vw;
  height: 7vh;
  animation-name: driftRight;
  animation-duration: 70s;
}

.cloud-b {
  top: 22%;
  left: 44%;
  width: 24vw;
  height: 6vh;
  opacity: 0.75;
  animation-name: driftLeft;
  animation-duration: 95s;
}

.cloud-c {
  top: 7%;
  left: 68%;
  width: 18vw;
  height: 5vh;
  opacity: 0.6;
  animation-name: driftRight;
  animation-duration: 60s;
}

@keyframes driftRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(4vw); }
}

@keyframes driftLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-4vw); }
}

.bird {
  position: absolute;
  top: 26%;
  left: 33%;
  width: 34px;
  height: auto;
  animation: birdDrift 50s ease-in-out infinite alternate;
}

@keyframes birdDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(8vw, -1.2vh); }
}

/* A tall dark panel anchored so only its top 28vh (the hill art) shows at
   rest. JS translates it upward on scroll — the hills slide toward the top
   of the screen and solid dark fill takes their place, covering the building
   and hero copy as it passes over them (both sit at a lower z-index). */
.ground-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 72vh;
  height: 200vh;
  z-index: 50;
  will-change: transform;
}

.ground-art {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28vh;
}

/* Solid fill for everything below the hill art — kept off the wrapper
   itself so it doesn't show through the art's transparent sky gap
   above the hill line. */
.ground-fill {
  position: absolute;
  top: 28vh;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ground-base);
}

.ground-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Centers the foreground content (building, copy, scroll cue) within
   --stage-max instead of letting it drift toward the edges on wide screens.
   The sky/ground stay full-bleed on purpose. */
.stage-inner {
  position: absolute;
  inset: 0;
  max-width: var(--stage-max);
  margin: 0 auto;
}

.building {
  position: absolute;
  right: 2%;
  bottom: 20vh;
  height: 26vh;
  width: auto;
  transform: scaleX(-1);
  filter: brightness(0) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.4));
  opacity: 0.9;
}

/* Soft dark ground patch under the building so it reads as sitting on
   the terrain instead of floating above the hill line. */
.building-ground {
  position: absolute;
  right: 26vh;
  bottom: 15vh;
  width: 27vh;
  height: 9vh;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.38) 50%, transparent 78%);
  filter: blur(4px);
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  top: 20vh;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 460px;
  text-align: center;
  z-index: 55;
  will-change: opacity;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sun-flat);
  margin: 0 0 14px;
}

.hero-copy h1 {
  margin: 0 auto 18px;
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--paper);
  max-width: 13ch;
}

.hero-copy h1 span {
  color: var(--sun-flat);
}

.hero-copy p {
  margin: 0 auto;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 48ch;
}

.scroll-cue {
  position: absolute;
  right: 6%;
  bottom: 6vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--paper-dim);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.scroll-cue span.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sun-flat);
  animation: scrollPulse 1.8s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(10px); opacity: 0.3; }
}

/* ---------------------------------------------------------
   Reveal layer — the dark counterpart to the hero, faded in by JS
   once the ground has risen, inside the same pinned stage. Building
   sits on the "floor" (bottom-anchored, like the hero's), copy stacks
   above it and is allowed to overlap its top a little on purpose.
--------------------------------------------------------- */

.reveal-inner {
  z-index: 60;
  pointer-events: none;
}

.next-building {
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-50%, -50%);
  height: 38vh;
  opacity: 0;
  will-change: opacity, transform;
}

/* Gentle perpetual rock — kept on the image itself (not the wrapper JS
   positions) so it doesn't fight the scroll-driven inline transform above. */
.next-building-img {
  display: block;
  height: 100%;
  width: auto;
  transform-origin: 50% 50%;
  animation: craneRock 7s ease-in-out infinite;
}

@keyframes craneRock {
  0%, 100% { transform: rotate(-15deg); }
  50% { transform: rotate(15deg); }
}

.next-copy {
  position: absolute;
  left: 50%;
  top: 20vh;
  transform: translateX(-50%);
  width: 90%;
  opacity: 0;
  will-change: opacity;
  max-width: 700px;
  text-align: center;
}

.next-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sun-flat);
  margin: 0 0 14px;
}

.next-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--paper);
}

.next-copy h2 span {
  color: var(--sun-flat);
}

.next-copy p {
  margin: 0 auto;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 48ch;
}

@media (max-width: 720px) {
  :root {
    --sun-left: calc(var(--stage-pad) + 4vw);
  }
  .next-building {
    height: 24vh;
  }
  .next-copy {
    top: 14vh;
  }
  .next-copy h2 {
    font-size: clamp(26px, 7vw, 40px);
  }
  .hero-copy {
    top: 8vh;
    left: 6%;
    right: 6%;
    width: auto;
    max-width: none;
    transform: none;
  }
  .hero-copy h1 {
    max-width: none;
    font-size: clamp(28px, 8vw, 40px);
  }
  .scroll-cue {
    bottom: 3vh;
  }
  .ground-wrap {
    top: 68vh;
  }
  .ground-art {
    height: 32vh;
  }
  .ground-fill {
    top: 32vh;
  }
  .ground-front {
    height: 32vh;
  }
  .man-fly {
    left: calc(var(--sun-left) + var(--sun-size) * 0.05);
    bottom: 4vh;
    height: clamp(200px, 32vh, 340px);
  }
  .building {
    height: 16vh;
    right: 2%;
    bottom: 26vh;
    opacity: 0.6;
  }
  .building-ground {
    right: 16vh;
    bottom: 23vh;
    width: 17vh;
    height: 5.5vh;
  }
  .sun-fly {
    top: 48vh;
  }
  .header-nav {
    gap: 14px;
  }
  .header-nav a {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  .header-logo-img {
    height: 28px;
  }
}

/* ---------------------------------------------------------
   Third section — portfolio: hero copy on top, a skyline of
   scroll-revealed blocks below. Each block is a project; once
   every block has drawn in, hover/click turns on.
--------------------------------------------------------- */

.portfolio-section {
  position: relative;
  height: 320vh;
}

.portfolio-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--sun-flat);
  display: flex;
  flex-direction: column;
}

.portfolio-hero {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.portfolio-eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--amber-deep);
}

.portfolio-hero h2 {
  margin: 0 0 16px;
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  max-width: 14ch;
}

.portfolio-hero h2 span {
  color: #fff;
  text-shadow:
    -1.5px -1.5px 0 var(--ink),
    1.5px -1.5px 0 var(--ink),
    -1.5px 1.5px 0 var(--ink),
    1.5px 1.5px 0 var(--ink);
}

.portfolio-hero p {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: rgba(20, 16, 13, 0.72);
  max-width: 56ch;
}

.blocks-row {
  flex: 0 0 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  width: 60%;
  margin: 0 auto;
  box-sizing: border-box;
}

.block {
  /* flex-shrink (default) lets every block compress proportionally instead
     of overflowing on narrower screens, without needing breakpoint math. */
  width: var(--w);
  height: var(--h);
  min-width: 0;
  font-family: inherit;
  padding: 0;
  border: none;
  border-radius: 6px 6px 0 0;
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(233, 192, 2, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 192, 2, 0.28) 1px, transparent 1px);
  background-size: 14px 14px;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  transform-origin: bottom center;
  transform: scaleY(var(--reveal, 0));
  opacity: 0;
  cursor: default;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.blocks-row:not(.interactive) .block {
  pointer-events: none;
}

.blocks-row.interactive .block {
  cursor: pointer;
}

.blocks-row.interactive .block:hover {
  filter: brightness(1.3);
  box-shadow: 0 16px 30px -8px rgba(0, 0, 0, 0.5);
}

/* Vertical hint, only readable on hover — hints that the block opens a
   project without cluttering the skyline look the rest of the time. */
.block-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sun-flat);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.blocks-row.interactive .block:hover .block-hint {
  opacity: 1;
}

@media (max-width: 720px) {
  .portfolio-hero {
    padding-top: calc(var(--header-h) + 16px);
    box-sizing: border-box;
  }
  .blocks-row {
    width: 94%;
    gap: 6px;
    padding-bottom: 20px;
    box-sizing: border-box;
  }
  .portfolio-hero h2 {
    font-size: clamp(26px, 7vw, 40px);
  }
  .block-hint {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
}

/* ---------------------------------------------------------
   Project modal — opened by clicking a block
--------------------------------------------------------- */

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.project-modal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

.project-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--sun-flat);
}

/* Full-bleed, edge to edge — no card, no margins. Content flows top to
   bottom (image, then info) instead of the info overlaying the image. */
.project-modal-card {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: var(--sun-flat);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project-modal-close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(20, 16, 13, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.project-modal-close:hover {
  background: rgba(20, 16, 13, 0.95);
}

/* Contained, not cropped — sits clear of the close button up top and
   stops short of the info block below it. */
.project-modal-img {
  display: block;
  width: auto;
  max-width: min(88%, 900px);
  height: auto;
  max-height: 56vh;
  object-fit: contain;
  margin: 84px auto 0;
  border-radius: 14px;
  box-shadow: 0 24px 50px -20px rgba(20, 16, 13, 0.35);
}

.project-modal-info {
  position: relative;
  width: 100%;
  max-width: 720px;
  padding: 28px clamp(24px, 5vw, 64px) 64px;
  text-align: center;
}

.project-modal-eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--amber-deep);
}

.project-modal-info h3 {
  margin: 0;
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 800;
  color: var(--ink);
}

@media (max-width: 720px) {
  .project-modal-img {
    max-width: 92%;
    margin-top: 70px;
  }
  .project-modal-info {
    padding: 24px 24px 48px;
  }
  .project-modal-close {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
  }
}

/* ---------------------------------------------------------
   Fourth section — leadership. Pinned like the hero/portfolio,
   so the design language holds: the two partner cards draw in
   one at a time as the section scrolls past, JS-driven per frame
   rather than a one-time CSS transition.
--------------------------------------------------------- */

.team-section {
  position: relative;
  height: 220vh;
}

.team-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #180f22 0%, var(--ground-base) 45%);
}

.team-inner {
  width: 100%;
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
  box-sizing: border-box;
}

.team-header {
  max-width: 680px;
  margin: 0 auto 64px;
  text-align: center;
}

.team-eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sun-flat);
}

.team-header h2 {
  margin: 0 0 16px;
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--paper);
}

.team-header h2 span {
  color: var(--sun-flat);
}

.team-header p {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--paper-dim);
}

.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px;
}

.team-card {
  width: 280px;
  text-align: center;
  opacity: 0;
  transform: translateY(48px);
  will-change: opacity, transform;
}

.team-photo {
  width: 176px;
  height: 176px;
  margin: 0 auto 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--sun-flat);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.55);
}

.team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card h3 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  color: var(--paper);
}

.team-role {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sun-flat);
}

.team-bio {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper-dim);
}

/* ---------------------------------------------------------
   Fifth section — contact. Bright again, mirroring the
   portfolio section's yellow for rhythm across the page.
   Pinned the same way: the copy + form are there from the
   start, and the three contact blocks draw in on scroll.
--------------------------------------------------------- */

.contact-section {
  position: relative;
  height: 220vh;
}

.contact-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--sun-flat);
}

.contact-inner {
  width: 100%;
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6vw;
  flex-wrap: wrap;
}

.contact-copy {
  flex: 1 1 420px;
  max-width: 460px;
}

.contact-eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--amber-deep);
}

.contact-copy h2 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}

.contact-copy h2 span {
  color: #fff;
  text-shadow:
    -1.5px -1.5px 0 var(--ink),
    1.5px -1.5px 0 var(--ink),
    -1.5px 1.5px 0 var(--ink),
    1.5px 1.5px 0 var(--ink);
}

.contact-copy > p {
  margin: 0 0 28px;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  color: rgba(20, 16, 13, 0.72);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(20, 16, 13, 0.6);
}

.form-row input,
.form-row textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(20, 16, 13, 0.25);
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  resize: vertical;
}

.form-row input:focus,
.form-row textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  background: #fff;
}

.contact-form button[type="submit"] {
  align-self: flex-start;
  margin-top: 4px;
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--sun-flat);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.contact-form button[type="submit"]:hover {
  background: #000;
  transform: translateY(-2px);
}

.form-note {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(20, 16, 13, 0.55);
}

.contact-methods {
  flex: 0 0 auto;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 22px;
  background: rgba(20, 16, 13, 0.06);
  border: 1px solid rgba(20, 16, 13, 0.14);
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(32px);
  will-change: opacity, transform;
  transition: background 0.2s ease, transform 0.2s ease;
}

a.contact-method:hover {
  background: rgba(20, 16, 13, 0.12);
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--sun-flat);
}

.contact-icon svg {
  width: 20px;
  height: 20px;
}

.contact-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.contact-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(20, 16, 13, 0.55);
}

.contact-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 900px) {
  .contact-inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 28px;
  }
  .contact-copy,
  .contact-methods {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 720px) {
  .team-grid {
    gap: 40px;
  }
  /* Two full card bios stacked can outgrow 100vh on a short phone
     screen — same safety net as the contact stage below. Top-aligned
     with explicit padding instead of centered: centering an overflowing
     flex item pushes its top half above y:0, out of reach above the
     pinned stage instead of just scrolling to it. */
  .team-stage {
    align-items: flex-start;
    overflow-y: auto;
    padding: calc(var(--header-h) + 32px) 0 40px;
    box-sizing: border-box;
  }
  /* The form makes contact-copy tall enough that, stacked above
     contact-methods on a short phone screen, it can outgrow 100vh.
     Everything still scrolls to reach it instead of being clipped. */
  .contact-stage {
    align-items: flex-start;
    overflow-y: auto;
    padding: calc(var(--header-h) + 24px) 0 32px;
    box-sizing: border-box;
  }
  .contact-form {
    gap: 10px;
  }
  .form-row input,
  .form-row textarea {
    padding: 10px 12px;
  }
  .contact-methods {
    gap: 10px;
  }
  .contact-method {
    padding: 12px 16px;
  }
}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */

.site-footer {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground-base);
  box-sizing: border-box;
  overflow: hidden;
}

/* Soft amber glow low in the footer, echoing the hero's sun — keeps the
   dark panel from reading as a flat, empty block. */
.footer-glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -14%;
  width: min(1000px, 140vw);
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(233, 192, 2, 0.2) 0%, rgba(233, 192, 2, 0.07) 45%, transparent 72%);
  pointer-events: none;
}

.footer-top {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 72px clamp(24px, 6vw, 64px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  box-sizing: border-box;
  text-align: center;
}

.footer-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer-heading {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 243, 228, 0.55);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.footer-links--stacked {
  flex-direction: column;
  gap: 8px;
}

.footer-links a,
.footer-links span {
  font-size: 14px;
  color: var(--paper-dim);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--sun-flat);
}

.footer-links .sep {
  color: rgba(251, 243, 228, 0.3);
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(251, 243, 228, 0.25);
  color: var(--paper-dim);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.footer-social a:hover {
  background: var(--sun-flat);
  border-color: var(--sun-flat);
  color: var(--ink);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

/* Giant ghost wordmark — fills the footer's remaining height as a bold
   brand flourish instead of empty space. Faint fill is the fallback for
   browsers without text-stroke support; the stroke gives the hollow look. */
.footer-word {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 90px;
  padding: 40px clamp(16px, 4vw, 48px) 32px;
  overflow: hidden;
}

.footer-word span {
  font-weight: 800;
  font-size: clamp(70px, 17vw, 280px);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: rgba(251, 243, 228, 0.05);
  -webkit-text-stroke: 1.5px rgba(251, 243, 228, 0.16);
  white-space: nowrap;
}

.footer-bottom {
  position: relative;
  z-index: 1;
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: 28px clamp(24px, 5vw, 64px) 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid rgba(251, 243, 228, 0.12);
  font-size: 13px;
  color: var(--paper-dim);
}

.footer-tagline {
  margin: 0 auto;
  max-width: 560px;
  text-align: center;
  line-height: 1.6;
}

.footer-bottom-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-bottom a {
  color: var(--paper-dim);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--sun-flat);
}