/* ============================================================
   Caterati — Landing page

   Two blocks: a hero carousel that says what we sell, and the
   clients' stories beneath it. Both are full-width; the copy
   inside them keeps to the site's container width.
   ============================================================ */

.hero {
  position: relative;
  /* Shaped to the photograph rather than to a guess, so the whole frame is on
     screen and nothing is sliced off the top or the bottom.

     With object-fit: cover, whichever way the box is out of proportion decides
     what gets cut. Matching the box to the image's own ratio means neither —
     and once a phone makes the box proportionally TALLER than the picture,
     cover trims the SIDES instead, which is the cheap edge of this frame: a
     balustrade on one side and a planter on the other.

     min-height keeps it a picture rather than a strip on a narrow phone; the
     cap stops a wide monitor turning the hero into a full page. Between the
     two the image is shown whole:
         under  746px  -> 420px tall, sides cropped
         746 to 1352px -> the entire photograph, nothing cropped
         over  1352px  -> 760px tall, a little off top and bottom */
  /* width:100% is load-bearing. With an auto width, aspect-ratio works in
     BOTH directions: min-height raises the box to 420px, and the ratio then
     derives a width of 420 x 1.776 = 746px from it — wider than a phone, and
     the whole page scrolls sideways. Fixing the width leaves the ratio only
     one thing left to decide, which is the height. */
  width: 100%;
  aspect-ratio: 2016 / 1135;
  height: auto;
  min-height: 420px;
  max-height: 760px;
  overflow: hidden;
  background: var(--ivory-2, #f4f1ed);
}

.hero-track, .hero-slide { position: absolute; inset: 0; }

.hero-slide[hidden] { display: none; }
.hero-slide.is-on { animation: heroFade .6s ease both; }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

.hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;

  /* Set per slide in js/home.js. Only the HORIZONTAL half does any work now:
     the box is shaped to the picture, so the sides are the only thing cover
     ever trims, and this says which part of the width to hold on to when it
     does. The vertical half stays at 50% because there is nothing to choose
     between — the full height is on screen. */
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}

.hero-copy {
  position: absolute;
  left: 0; right: 0; bottom: clamp(48px, 8vh, 84px);
  max-width: var(--maxw, 1120px);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  color: #fff;
  text-align: center;
}
/* The one display-sized thing on the site: 64px, stepping to 40px on a phone
   where a 64px headline breaks into five words a line. Georgia regular. */
.hero-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-display);
  letter-spacing: var(--track-display);
  line-height: 1.05;
  color: var(--cypress);
  margin: 0 0 .35em;
}
/* The lead size, but left at 400: this sits over a photograph, where Work
   Sans 300 in white goes thin and the scrim stops carrying it. */
.hero-tagline {
  font-size: var(--fs-lead);
  margin: 0 0 var(--space-5);
  color: var(--cypress);
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* A second action on the same picture needs to read as a choice, not as a
   lesser button — outlined in white rather than dimmed. */
.btn--ghost-light {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .75);
  backdrop-filter: blur(2px);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, .22); text-decoration: none; }

/* Controls, bottom right as on the reference. */
.hero-controls {
  position: absolute; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vh, 28px);
  display: flex; gap: 8px; z-index: 2;
}
.hero-btn {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s;
}
.hero-btn:hover { background: #fff; }
.hero-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--cypress, #072b31); stroke-width: 1.7; }
.hero-btn svg rect { fill: var(--cypress, #072b31); stroke: none; }
.hero-btn svg path { fill: none; }
/* One button, two states: pause while running, play once stopped. */
.hero-btn .i-play { display: none; fill: var(--cypress, #072b31); }
.hero-btn.is-paused .i-pause { display: none; }
.hero-btn.is-paused .i-play { display: block; }

.hero-dots {
  position: absolute; left: 0; right: 0; bottom: clamp(16px, 3vh, 28px);
  display: flex; gap: 9px; justify-content: center; z-index: 2;
}
.hero-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .85);
  background: transparent; cursor: pointer;
  transition: background .15s;
}
.hero-dot[aria-selected="true"] { background: #fff; }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------------- clients' stories ---------------- */

.stories { padding: var(--space-9) var(--page-pad) 0; }
.stories-head {
  font-family: var(--display);
  font-size: var(--fs-h2);
  text-align: center;
  margin: 0 0 var(--space-7);
}

.stories-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gutter);
  max-width: 960px;
  margin: 0 auto;
}

.story {
  display: block;
  color: inherit;
  background: var(--white, #fff);
  border: 1px solid var(--line, #d9d5cc);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .18s;
}
/* No lift, and a shadow at the 10% ceiling — the card is separated from the
   ground by its border and the value step, not by being thrown off it. */
.story:hover { text-decoration: none; box-shadow: var(--shadow); }

/* The paintings are all different shapes, so the frame is the constant: one
   ratio, the face centred, and no distortion. */
.story-art { aspect-ratio: 4 / 5; background: var(--ivory-2, #f4f1ed); }
.story-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }

.story-body { padding: var(--space-5); text-align: center; }
.story-name { font-family: var(--display); font-size: var(--fs-h4); line-height: 1.35; margin: 0 0 var(--space-1); }
.story-piece { font-size: var(--fs-body-sm); color: var(--muted, #5b6360); margin: 0 0 var(--space-3); }
.story-cta {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-support);
  text-transform: uppercase; color: var(--teal, #004851);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

@media (max-width: 560px) {
  .hero { height: clamp(380px, 70vh, 520px); }
  .hero-dots { justify-content: flex-start; padding-left: 20px; }
}