/* Homepage-only rules. Loaded after components.css via @push('styles').
   Anything reusable belongs in components.css, not here. */

/* ══ Hero ══════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; display: block; }

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ink) 76%, transparent) 0%,
    color-mix(in srgb, var(--ink) 26%, transparent) 45%,
    color-mix(in srgb, var(--ink) 93%, transparent) 100%
  );
}

.hero__body {
  position: relative;
  padding-block: 0 var(--space-12);
  color: var(--paper);
}

.hero__eyebrow { color: var(--ocean-300); margin-bottom: var(--space-7); }

.hero__title { max-width: 15ch; }

.hero__lede {
  margin-top: var(--space-7);
  font-size: var(--size-body-l);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--ink-300);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-9);
}

/* Entrance sequence. Gated behind the motion query rather than given a
   0.01ms duration, so nothing plays at all when motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes phRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }

  .hero__eyebrow { animation: phRise 0.7s var(--ease) both; }
  .hero__title { animation: phRise 0.8s 0.06s var(--ease) both; }
  .hero__lede { animation: phRise 0.8s 0.14s var(--ease) both; }
  .hero__actions { animation: phRise 0.8s 0.22s var(--ease) both; }
}

/* ══ Facts ═════════════════════════════════════════════════════════════ */

.facts .grid { border-inline: 0; }

.facts__cell { padding: var(--space-8) var(--space-6) var(--space-9) 0; }

.facts__big {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ocean-300);
}

.facts__small {
  margin-top: var(--space-2);
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted-on-ink);
}

/* ══ Work / comparison ═════════════════════════════════════════════════ */

.work__frame {
  border: var(--hairline) solid var(--ink);
  background: var(--ink);
  gap: var(--hairline);
}

/* <picture> is inline by default; the slider needs it to fill the frame. */
.compare picture { position: absolute; inset: 0; display: block; }

/* Inside a split, the row height is set by the taller detail panel and
   align-items:stretch makes that height definite. With width:auto, the
   slider's aspect-ratio then derives its WIDTH from that height — 4/3 × 517px
   = 690px — and it overhangs its 587px column, covering the panel's text.
   An explicit width makes both axes definite, so the ratio stops driving
   layout and object-fit handles the images. */
.work__frame .compare { width: 100%; }

.work__detail { padding: var(--space-10) var(--space-9); display: flex; flex-direction: column; }

.work__title { margin-top: var(--space-5); }

.work__body {
  margin-top: var(--space-5);
  line-height: 1.6;
  color: var(--muted-on-ink);
}

.work__specs { margin-top: auto; padding-top: var(--space-9); }

/* ══ Services ══════════════════════════════════════════════════════════ */

.services__grid { border-top: 0; }
.services .cell { min-height: 232px; }

/* ══ Process — the one true sequence on the page ═══════════════════════ */

.process__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
  counter-reset: none;
}

.process__step {
  position: relative;
  padding-top: var(--space-10);
}

/* The connected rail. A single ::before on each step draws its segment, and
   the last step's segment stops at its own tick rather than running off. */
.process__step::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  right: calc(var(--space-6) * -1);
  height: 2px;
  background: var(--rule);
}

.process__step:last-child::before { right: 0; }

.process__num {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.process__title { font-size: var(--size-subhead); font-weight: 700; letter-spacing: -0.02em; }

.process__body {
  margin-top: var(--space-3);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

/* ══ Gallery ═══════════════════════════════════════════════════════════ */

.gallery__grid { margin-top: var(--space-8); }

.gallery__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-200);
}

/* <picture> is an inline element with no definite height of its own, so the
   img's height:100% below had nothing to resolve against and object-fit never
   applied — every photo rendered at its natural aspect and was simply cropped
   by the frame's overflow. Giving the picture the frame's box fixes both. */
.gallery__frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Full colour, deliberately. The stone, tile and cedar are the product —
   never add filter: grayscale() here. */
.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.gallery__item:hover .gallery__img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .gallery__item:hover .gallery__img { transform: none; }
}

/* ══ Owner ═════════════════════════════════════════════════════════════ */

.owner { margin-top: var(--space-14); }

.owner .container { padding-inline: 0; }

.owner__split { align-items: stretch; }

.owner__media { position: relative; min-height: 560px; }

.owner__media picture { position: absolute; inset: 0; display: block; }

.owner__img { width: 100%; height: 100%; object-fit: cover; }

.owner__body { padding: var(--space-13) var(--gutter) var(--space-13) var(--space-12); }

.owner__title { margin-top: var(--space-5); max-width: 20ch; font-size: var(--size-display-m); }

.owner__copy {
  margin-top: var(--space-6);
  font-size: 17px;
  line-height: 1.62;
  max-width: 52ch;
  color: var(--ink-300);
}

.owner__sheet { margin-top: var(--space-10); max-width: 480px; }

/* ══ Journal ═══════════════════════════════════════════════════════════ */

.journal__grid { margin-top: var(--space-8); }

.journal__meta {
  margin-top: auto;
  padding-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--size-eyebrow);
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ══ Testimonials — moved to components.css ═══════════════════════════
   The whole component lives in components.css now. It used to be split
   between this file and that one, which is how the rating stars ended up
   unreachable on the homepage: a shared partial's styles belong in the
   shared stylesheet, all of them, not most of them. */

/* ══ Testimonials (removed) ══════════════════════════════════════════════════════ */







/* ══ Quote ═════════════════════════════════════════════════════════════ */

.quote__split { gap: var(--space-12); }

.quote__title { margin-top: var(--space-4); font-size: var(--size-display-l); }

.quote__lede { margin-top: var(--space-6); font-size: 17px; max-width: 34ch; }

.quote__contacts { margin-top: var(--space-9); }

.quote__email { font-size: 15px; }

.quote__form { padding: var(--space-10); border: 0; }

.quote__types { border: 0; padding: 0; margin: 0; }
.quote__types legend { padding: 0; }

.quote__fields { margin-top: var(--space-8); }

.quote__message { margin-top: var(--space-6); }

.quote__submit { margin-top: var(--space-8); }

.quote__note {
  margin-top: var(--space-4);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-on-ink);
}

/* ══ Responsive ════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .process__list { grid-template-columns: repeat(2, 1fr); }
  .process__step::before { right: calc(var(--space-6) * -1); }
  .process__step:nth-child(2n)::before,
  .process__step:last-child::before { right: 0; }

  .work__detail { padding: var(--space-8) var(--space-6) var(--space-9); }

  .owner { margin-top: var(--space-12); }
  .owner .container { padding-inline: 0; }
  .owner__media { min-height: 360px; }
  .owner__body { padding: var(--space-11) var(--gutter); }
}

@media (max-width: 768px) {
  .hero { min-height: 76vh; }
  .hero__body { padding-bottom: var(--space-11); }
  .facts__cell { padding: var(--space-6) var(--space-5) var(--space-7) 0; }
  .facts__big { font-size: 26px; }
  .quote__form { padding: var(--space-8) var(--space-6); }
}

@media (max-width: 560px) {
  .process__list { grid-template-columns: 1fr; gap: var(--space-8); }
  .process__step::before { right: 0; }
  .compare { aspect-ratio: 3 / 4; }
}