/* ==========================================================================
   Elevate — pages.css
   Page-specific layouts: hero, signature video, service, contact.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Home hero — full-bleed placeholder with ink gradient overlay
   -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media .ph { height: 100%; border-radius: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Keep placeholder label from bleeding through the headline; real photo replaces the block */
.hero__media .ph__tag,
.hero__media .ph__caption { display: none; }
/* Two stacked layers, not one flat wash. The old single gradient put 35% black across
   the middle of the photo, which greyed out the part of the image with all the detail
   in it and still left the type sitting on mid-tone. Now: the photo stays open at the
   top, the darkness is concentrated low where the copy actually is, and a soft vignette
   holds the edges. Same AA contrast under the text, far more depth above it. */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 70% 10%, transparent 40%, rgba(20,23,26,0.42) 100%),
    linear-gradient(178deg,
      rgba(20,23,26,0.50) 0%,
      rgba(20,23,26,0.20) 32%,
      rgba(20,23,26,0.58) 72%,
      rgba(20,23,26,0.86) 100%);
}
.hero__inner {
  min-height: min(92vh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: var(--space-9);
  color: var(--white);
}
.hero .eyebrow { color: var(--white); }
.hero h1 {
  font-size: var(--fs-display);
  line-height: 0.94;
  font-weight: 700;
  color: var(--white);
  max-width: 14ch;
  text-transform: uppercase;   /* signature editorial type moment */
  letter-spacing: -0.025em;
  /* The headline sits on a photo, so it carries its own shadow rather than relying on
     the scrim alone — this is what survives when a bright frame lands behind it. */
  text-shadow: 0 2px 28px rgba(20, 23, 26, 0.45);
}
.hero__sub {
  font-size: var(--fs-lead);
  color: var(--plaster);
  max-width: 48ch;
  margin-top: var(--space-5);
  text-shadow: 0 1px 16px rgba(20, 23, 26, 0.45);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }

/* Compact hero for service/contact pages. Ink is the fallback only — every subpage
   carries a .hero__media photo, because a text-only ink slab read as a black screen
   at the top of five pages in a row. */
.hero--compact { background: var(--ink); color: var(--plaster); }
.hero--compact .hero__inner {
  min-height: min(58vh, 480px);
  justify-content: flex-end;
  padding-block: calc(var(--header-h) + var(--space-7)) var(--space-8);
}
.hero--compact h1 { color: var(--white); font-size: var(--fs-h1); max-width: 18ch; text-transform: uppercase; letter-spacing: -0.015em; }
/* Shorter band than the home hero, so the scrim has to work harder to hold AA
   contrast over a bright interior photo — but it keeps the same two-layer shape so
   the subpages read as the same site, just tighter. */
.hero--compact::after {
  background:
    radial-gradient(120% 90% at 72% 8%, transparent 34%, rgba(20,23,26,0.40) 100%),
    linear-gradient(178deg,
      rgba(20,23,26,0.62) 0%,
      rgba(20,23,26,0.42) 30%,
      rgba(20,23,26,0.72) 74%,
      rgba(20,23,26,0.88) 100%);
}

/* Breadcrumbs */
.breadcrumbs { font-size: var(--fs-small); color: var(--stone); margin-bottom: var(--space-5); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumbs li::after { content: "/"; margin-left: var(--space-2); color: var(--line); }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs a { color: var(--accent-soft); }
.breadcrumbs [aria-current="page"] { color: var(--plaster); }

/* --------------------------------------------------------------------------
   Intro / two-column text+media
   -------------------------------------------------------------------------- */
.split { display: grid; gap: var(--space-6); align-items: center; }
/* Columns of unequal height (prose + photo beside a long rules list) must not float
   against each other's middles. */
.split--top { align-items: start; }
@media (min-width: 1025px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }

/* A short headline column next to three paragraphs left a tall empty rectangle under
   the heading — the single flattest area on the home page. Sticking the heading to the
   top of its own grid area makes it travel with the prose instead of stranding.
   Sticky is inert when the column is already as tall as the row, so the same rule is
   harmless on the splits whose left column carries a photo. */
@media (min-width: 1025px) {
  .split--top > :first-child {
    position: sticky;
    top: calc(var(--header-h) + var(--space-7));
  }
}

/* --------------------------------------------------------------------------
   Statement band — the home page's brand thesis, set at headline scale.
   Replaced a .split--top carrying three --stone paragraphs (190 words) beside an
   empty half-column: an essay where the page needed a breath. Both supporting
   paragraphs were already said elsewhere on the page (the old-house paragraph by
   FAQ 6, the city list by the FAQ, the CTA line, and the footer), so the fix was
   to cut, not to reflow. One sentence at --fs-h1 with a short note hung off its
   last line says the same thing in a sixth of the words.
   -------------------------------------------------------------------------- */
.statement { display: grid; gap: var(--space-6); }
@media (min-width: 1025px) {
  .statement {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    /* The note sits on the statement's baseline, not its middle — that is the
       whole reason this is not just another .split. */
    align-items: end;
  }
}
/* Two sentences, one per line. `text-wrap: balance` evens the line lengths, which
   on this string breaks after "The" and orphans it at the biggest type size on the
   page — so each sentence is its own block instead. The size is a step under
   --fs-h1 so the longer of the two still fits its line at 1440. */
.statement h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.06; }
.statement h2 span { display: block; }
.statement__note { color: var(--stone); max-width: 42ch; }

/* Prose beside a spec schedule: the reading column earns the extra width, and
   both columns start at the top so the rules line up with the headline. */
.split--wide { align-items: start; }
@media (min-width: 1025px) {
  .split--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* --------------------------------------------------------------------------
   Signature scroll-scrubbed video
   -------------------------------------------------------------------------- */
.signature { background: var(--ink); color: var(--plaster); }
.signature__pin {
  position: relative;
  height: min(82vh, 660px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* When a real video/poster asset exists, the pin runs full-height for the scrub. */
.signature.has-video .signature__pin { height: 100vh; }
.signature__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Once a real video asset is active (JS adds .has-video), drop the placeholder. */
.signature.has-video .signature__placeholder { display: none; }
.signature__overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  padding: var(--container-gutter);
}
.signature__overlay h2 { color: var(--white); }
.signature__overlay p { color: var(--plaster); max-width: 44ch; margin-inline: auto; margin-top: var(--space-4); }
.signature__scrollhint { margin-top: var(--space-6); font-size: var(--fs-small); color: var(--accent-soft); letter-spacing: 0.14em; text-transform: uppercase; }

/* Still poster frame, shown until a real video asset exists (JS then adds .has-video).
   The scrim keeps the centred overlay copy legible over the photo. */
.signature__placeholder { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.signature__placeholder img { width: 100%; height: 100%; object-fit: cover; }
.signature__placeholder::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,23,26,0.62), rgba(20,23,26,0.48) 50%, rgba(20,23,26,0.72));
}

/* --------------------------------------------------------------------------
   Gallery tiles
   Exactly 4 tiles per page. Two up on mobile; on desktop a 12-column editorial
   rhythm (7/5 then 5/7) so the row reads as a composition rather than a strip
   of identical squares. Still 4 tiles, so a row still never orphans.
   -------------------------------------------------------------------------- */
.gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
.gallery .ph { border-radius: var(--radius-md); }
@media (min-width: 1025px) {
  .gallery {
    grid-template-columns: repeat(12, 1fr);
    /* A fixed row height, not a per-tile aspect ratio: the 7- and 5-column tiles
       have different widths, so ratios would give them different heights and the
       grid would pad the shorter one with a blank slab. */
    grid-auto-rows: clamp(17rem, 26vw, 24rem);
    gap: var(--space-5);
  }
  .gallery > :nth-child(1) { grid-column: span 7; }
  .gallery > :nth-child(2) { grid-column: span 5; }
  .gallery > :nth-child(3) { grid-column: span 5; }
  .gallery > :nth-child(4) { grid-column: span 7; }
  /* Fill the row and crop. The [data-ratio] selector on .ph is (0,2,0), so ours
     is qualified to win regardless of stylesheet order. */
  .gallery > * { height: 100%; }
  .gallery .tile img,
  .gallery .ph[data-ratio] { height: 100%; aspect-ratio: auto; object-fit: cover; }
}

/* --------------------------------------------------------------------------
   Transformation band — before/after slider paired with its scope list.
   The slider is the most persuasive asset on a service page; centring it at a
   fixed 900px left it stranded in the container. Given a companion column it
   fills the band and the copy stops floating.
   -------------------------------------------------------------------------- */
.ba-feature { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 1025px) {
  .ba-feature { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
}
.ba-feature__hint { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--stone); }
/* A portrait pair at the column's full width towers over its scope list; rein it
   in, and drop the standalone `margin-inline: auto` so its left edge still lines
   up with the section headline. */
@media (min-width: 1025px) { .ba-feature .ba--tall { max-width: 520px; margin-inline: 0; } }

/* Home page: the slider is the site's signature interaction, so it runs the full
   container instead of sitting at a fixed 900px with dead air either side. 16:9
   keeps a full-width frame from becoming a wall of image. */
.ba--wide { aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------------------
   Spec schedule + scope list (service pages)
   Hairline rules, not cards: --paper on --plaster is a 2% tonal step, so the
   old bordered boxes read as ghosts. Rules also match the editorial direction.
   -------------------------------------------------------------------------- */
.spec,
.scope { border-top: 2px solid var(--ink); }
.spec__row,
.scope li {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.spec__row { display: grid; gap: var(--space-1); }
@media (min-width: 481px) {
  .spec__row { grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-5); align-items: baseline; }
}
.spec__k {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}
/* An eyebrow that opens a block partway down a column rather than at the top of
   one. Block-level, so its top margin behaves like a heading's — the base
   .eyebrow is inline-flex and would only push its own line box around. */
.eyebrow--mid { display: flex; margin-top: var(--space-7); }

.spec__v,
.scope li { font-size: var(--fs-body); line-height: 1.5; }
.spec__v em { font-style: normal; color: var(--stone); }

/* --------------------------------------------------------------------------
   Contact layout
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--space-8); }
@media (min-width: 1025px) { .contact-grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-9); } }
.contact-info { display: grid; gap: var(--space-6); align-content: start; }
.contact-info__item h3 {
  font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone);
  margin-bottom: var(--space-2);
}
.contact-info__item a, .contact-info__item p { font-size: var(--fs-body); }

/* Final CTA band */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band p { max-width: 46ch; margin-inline: auto; margin-top: var(--space-4); }
.cta-band .hero__cta { justify-content: center; }
.cta-band__area {
  margin-top: var(--space-6);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--stone);
}