/* ============================================================
   Goodwood Marine — home
   ============================================================ */

/* ── HERO ────────────────────────────────────────────────────
   Full-bleed marina footage under a two-layer scrim. The scrim
   does real work: the headline must be legible on the poster,
   during load, and over any frame of the video. */

.hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 88svh;
  padding: var(--sp-10) 0 var(--sp-9);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img,
.hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
}
/* Video sits over the poster and fades in once it can play, so there
   is never a flash of empty ground. */
.hero__video { opacity: 0; transition: opacity 800ms var(--ease-out); }
.hero__video.is-ready { opacity: 1; }

.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(6,34,48,.55) 0%,
      rgba(6,34,48,.18) 32%,
      rgba(6,34,48,.52) 74%,
      rgba(6,34,48,.88) 100%),
    linear-gradient(90deg, rgba(6,34,48,.74) 0%, rgba(6,34,48,.28) 46%, rgba(6,34,48,0) 78%);
}

.hero__inner { position: relative; z-index: 1; width: 100%; }

.hero__stamp {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  color: var(--amber);
  margin-bottom: var(--sp-5);
}
.hero__stamp::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); flex: none;
  box-shadow: 0 0 0 4px var(--amber-dim);
}

.hero__title { max-width: 15ch; }
.hero__title em {
  font-style: normal;
  color: var(--amber);
}

.hero__lead {
  margin-top: var(--sp-5);
  max-width: 44ch;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: rgba(244, 251, 252, .82);
}

/* Dealer badge. The single most differentiating fact the business has, so it
   goes above the fold — but the hero already spends its three permitted amber
   elements on the stamp, the headline em and the call button. This earns its
   attention from a plate, a hairline and weight instead. */
.hero__dealer {
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line-dark);
  background: rgba(6, 34, 48, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--fs-sm);
}
.hero__dealer strong { color: var(--bone); font-weight: 700; letter-spacing: -.005em; }
.hero__dealer span { color: var(--muted-dark); }

.hero .actions { margin-top: var(--sp-8); }

/* Scroll cue — a small bobbing indicator, hidden once the user
   has scrolled. */
.hero__cue {
  position: absolute; left: 50%; bottom: var(--sp-5);
  transform: translateX(-50%);
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: var(--muted-dark);
  transition: opacity var(--t-mid);
}
.hero__cue svg { width: 22px; height: 22px; animation: cue 2.2s var(--ease-out) infinite; }
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(6px); opacity: 1; }
}
.is-scrolled .hero__cue { opacity: 0; }

/* ── SERVICES — photo cards ──────────────────────────────────
   Six cards, each carrying one of the graded photographs. The
   image is the point: this is a trade where people want to see
   the kit before they believe you stock it. */

.svc__head { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-8); }
.svc__head h2 { max-width: 20ch; }
.svc__head p { max-width: 46ch; color: var(--muted-light); }

.svc__grid { display: grid; gap: var(--sp-5); }

.svc-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none; color: var(--ink-text);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.svc-card:active { transform: translateY(-2px); }

.svc-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); }
.svc-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* The six photographs came from different sources and read as it —
     saturated teal water beside grey metal. Pulling saturation down and
     lifting contrast slightly makes them a set. */
  filter: saturate(1.08) contrast(1.03);
  transition: transform 700ms var(--ease-out), filter var(--t-mid) var(--ease-out);
}
.svc-card:hover .svc-card__media img { filter: saturate(1.08) contrast(1.03); transform: scale(1.06); }
/* Keeps the photographs reading as one set rather than six sources. */
.svc-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 34, 48,.05) 0%, rgba(6, 34, 48,.42) 100%);
}

.svc-card__body { padding: var(--sp-5) var(--sp-5) var(--sp-6); flex: 1; display: flex; flex-direction: column; }
.svc-card__body h3 { margin-bottom: var(--sp-2); }
.svc-card__body p { color: var(--muted-light); font-size: var(--fs-sm); flex: 1; }

.svc-card__more {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-text);
}
.svc-card__more svg { width: 15px; height: 15px; color: var(--amber); transition: transform var(--t-fast) var(--ease-out); }
.svc-card:hover .svc-card__more svg { transform: translateX(4px); }

/* ── GUARDIANAGE — split ─────────────────────────────────────── */

.guard__grid { display: grid; gap: var(--sp-7); align-items: center; }
.guard__media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-md);
}
.guard__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) contrast(1.03); }
.guard__body h2 { max-width: 16ch; margin-bottom: var(--sp-5); }
.guard__body > p { color: var(--muted-light); max-width: 46ch; }

.guard__list { margin: var(--sp-6) 0 var(--sp-7); display: grid; gap: var(--sp-4); }
.guard__list li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); }
.guard__list svg { width: 20px; height: 20px; flex: none; color: var(--amber); margin-top: 2px; }

/* ── THE RANGE — teaser ──────────────────────────────────────
   A split, not another card row. The services grid directly above
   is six white photo cards; a second row of the same shape would
   read as one long undifferentiated section. Here the argument
   carries the left and four tiles sample the range on the right. */

.range__grid { display: grid; gap: var(--sp-7); }

.range__body h2 { max-width: 15ch; margin-bottom: var(--sp-5); }
.range__body > p { color: var(--muted-light); max-width: 44ch; }
.range__body .btn { margin-top: var(--sp-7); }

.range__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }

/* ── REVIEWS ─────────────────────────────────────────────────
   Not cards. The home page already carries six white photo cards,
   and a second boxed grid would read as filler. Three columns
   divided by a rule is quieter and unmistakably editorial.

   Amber budget: the star row is the only amber here, which is why
   this section carries no eyebrow tick. */

.reviews__head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.reviews__head h2 { max-width: 16ch; }

.reviews__grid { display: grid; gap: var(--sp-7); }

.review { border-top: 2px solid var(--line-light); padding-top: var(--sp-5); }
.review__stars { color: var(--amber); letter-spacing: .18em; font-size: var(--fs-sm); }
.review blockquote {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-base); line-height: 1.6;
  color: var(--ink-text); max-width: 34ch;
}
/* A name and a source are attribution, not prose. */
.review__by {
  margin-top: var(--sp-5);
  font-family: var(--data); font-size: var(--fs-xs);
  color: var(--muted-light); letter-spacing: .03em;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */

@media (min-width: 600px) {
  .hero__cue { display: flex; }
  .svc__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
}

@media (min-width: 900px) {
  .hero { min-height: 92svh; }
  .svc__head { grid-template-columns: 1.2fr 1fr; align-items: end; }
  .svc__grid { grid-template-columns: repeat(3, 1fr); }
  .guard__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
  .reviews__head { grid-template-columns: 1fr auto; align-items: baseline; gap: var(--sp-6); }
  .reviews__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
  .range__grid { grid-template-columns: 1fr 1.15fr; gap: var(--sp-10); align-items: center; }
}