/* ==========================================================================
   Home page sections — one block per slide of the source deck
   ========================================================================== */

/* ==== 1. HERO (deck p3) ================================================== */

.hero {
  align-items: center;
  display: grid;
  isolation: isolate;
  min-block-size: min(78vh, 720px);
  overflow: hidden;
  position: relative;
}

.hero__bg {
  block-size: 100%;
  filter: saturate(0.92);
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  z-index: -3;
}

/* light wash so the white wordmark keeps contrast over the skyline */
.hero::after {
  background: linear-gradient(180deg, rgb(210 226 224 / 30%) 0%, rgb(163 190 188 / 26%) 45%, rgb(247 247 247 / 88%) 100%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: -2;
}

.hero__inner {
  margin-inline: auto;
  max-inline-size: var(--wrap-wide);
  padding-block: var(--sp-8) var(--sp-7);
  padding-inline: var(--gutter);
  inline-size: 100%;
}

/* Solid white wordmark. The layered shadow keeps it legible over the bright
   parts of the skyline without reading as an outline. */
.hero__wordmark {
  color: var(--white);
  font-size: var(--fs-hero);
  margin-block-end: var(--sp-4);
  text-align: center;
  text-shadow: 0 2px 4px rgb(0 36 36 / 28%), 0 10px 30px rgb(0 36 36 / 34%);
}

.hero__locations {
  color: var(--ink-strong);
  font-size: clamp(0.85rem, 1.25vw, 1.06rem);
  margin-block-end: var(--sp-6);
}

.hero__locations strong {
  font-weight: 600;
}

/* soft scrim so the intro copy stays legible over the skyline */
.hero__welcome {
  backdrop-filter: blur(3px) saturate(0.9);
  background: linear-gradient(100deg, rgb(247 247 247 / 88%), rgb(247 247 247 / 62%));
  border-radius: var(--r-lg);
  box-shadow: 0 8px 28px rgb(0 36 36 / 10%);
  padding: var(--sp-5) var(--sp-6);
  -webkit-backdrop-filter: blur(3px) saturate(0.9);
}

.hero__welcome h1 {
  font-size: clamp(1rem, 1.7vw, 1.28rem);
  letter-spacing: 0.03em;
  margin-block-end: var(--sp-3);
  text-transform: uppercase;
}

.hero__welcome p {
  color: var(--ink);
  text-align: justify;
}

.hero__welcome strong {
  color: var(--teal-deep);
  font-weight: 600;
}

@media (width <= 700px) {
  .hero__welcome p {
    text-align: start;
  }
}

/* ==== 2. MISSION STRIP (deck p2) ========================================= */

/* --- Shared bokeh field --------------------------------------------------
   The pale out-of-focus texture the deck sits its light slides on. Applied to
   the three light sections; the position is varied per section so three
   stacked copies do not read as an obvious repeat. The background-colour
   matches the plate's own lower tone, so the join is invisible wherever the
   image does not reach.                                                     */

.mission,
.founder,
.team {
  background-color: #f1f2f1;
  background-image: url("../img/bg-bokeh.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.founder {
  background-position: center center;
}

.team {
  background-position: right bottom;
}

.mission {
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  position: relative;
}

.mission__pill {
  background: linear-gradient(90deg, var(--sage-card), var(--sage-soft));
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  color: rgb(255 255 255 / 78%);
  display: inline-block;
  font-size: clamp(0.85rem, 1.5vw, 1.18rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-block-end: var(--sp-4);
  margin-inline-start: calc(var(--gutter) * -1);
  padding: 0.75em 2.4em 0.75em calc(var(--gutter) + 1em);
  text-transform: uppercase;
}

.mission__title {
  color: var(--sage);
  font-size: var(--fs-d1);
  position: relative;
  z-index: 1;
}

/* ==== 3. FOUNDER (deck p4) =============================================== */

.founder {
  overflow: hidden;
  padding-block-end: 0; /* the founder cut-out bleeds off the bottom, as in the deck */
  position: relative;
}

.founder__inner {
  align-items: end;
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr minmax(280px, 0.85fr);
}

.founder__shell {
  block-size: auto;
  inline-size: clamp(220px, 30vw, 430px);
  inset-block-start: 50%;
  inset-inline-start: 46%;
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.founder__text {
  align-self: center;
  padding-block-end: var(--section-y);
  position: relative;
  z-index: 1;
}

.founder__name {
  color: var(--sage-card);
  font-size: clamp(2.6rem, 7.6vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 0.94;
  margin-block: var(--sp-5) var(--sp-6);
  text-shadow: 0 6px 18px rgb(0 36 36 / 10%);
  text-transform: uppercase;
}

.founder__signature {
  block-size: auto;
  inline-size: clamp(230px, 32vw, 420px);
  margin-block-end: var(--sp-3);
}

.founder__role {
  color: var(--teal-label);
  font-size: clamp(0.7rem, 1.1vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.founder__photo {
  block-size: auto;
  filter: drop-shadow(0 24px 50px rgb(0 36 36 / 22%));
  inline-size: 100%;
  position: relative;
  z-index: 1;

  /* The cut-out bleeds off the bottom of the section, which left a hard
     horizontal line where the photo simply stopped. Fading the last stretch of
     it lets the shot dissolve into the background instead. Masked rather than
     covered with a white overlay, so it works over the bokeh background and
     keeps working if that background is ever changed. */
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, rgb(0 0 0 / 0%) 100%);
  mask-image: linear-gradient(to bottom, #000 88%, rgb(0 0 0 / 0%) 100%);
}

@media (width <= 860px) {
  .founder__inner {
    grid-template-columns: 1fr;
  }

  .founder__photo {
    justify-self: center;
    max-inline-size: 380px;
  }

  .founder__text {
    padding-block-end: var(--sp-6);
  }
}

/* ==== 4. TEAM (deck p5) ================================================== */

.team {
  overflow: hidden;
  position: relative;
}

.team__shell {
  block-size: auto;
  inline-size: clamp(240px, 26vw, 400px);
  inset-block-start: 8%;
  inset-inline-start: 50%;
  opacity: 0.16;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
}

.team__head {
  align-items: start;
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  margin-block: var(--sp-5) var(--sp-8);
  position: relative;
  z-index: 1;
}

.team__title {
  color: var(--sage);
  font-size: var(--fs-d1);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
}

.team__blurb {
  font-size: var(--fs-sm);
  line-height: 1.72;
  text-align: justify;
}

.team__blurb strong {
  color: var(--ink-strong);
  font-weight: 700;
}

/* all six across on desktop */
.team__grid {
  display: grid;
  gap: var(--sp-5) var(--sp-3);
  grid-template-columns: repeat(6, 1fr);
  position: relative;
  z-index: 1;
}

@media (width <= 1180px) {
  .team__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width <= 980px) {
  .team__head {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

@media (width <= 640px) {
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team__blurb {
    text-align: start;
  }
}

/* ==== 5. SERVICES WE OFFER (deck p6) ===================================== */

.services {
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.services__bg {
  block-size: 100%;
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  z-index: -2;
}

/* the teal wash that turns the city plate into the deck's background */
.services::after {
  background: linear-gradient(160deg, rgb(21 62 65 / 58%), rgb(46 106 103 / 52%) 55%, rgb(8 109 106 / 56%));
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

.services__bar {
  align-items: center;
  border-block-end: 1px solid rgb(255 255 255 / 35%);
  display: flex;
  justify-content: space-between;
  margin-block-end: var(--sp-6);
  padding-block-end: var(--sp-3);
}

.services__wordmark {
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.services__panel {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}

/* 16:9 — measured off the deck, where this photo is placed at 479 x 269pt.
   The clip is 1280x720, so at this ratio nothing is cropped. */
.services__photo {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  display: block;
  inline-size: 100%;
  object-fit: cover;
  transform: rotate(-1.4deg);
  transition: transform var(--dur) var(--ease);
}

.services__photo:hover {
  transform: rotate(0deg) scale(1.02);
}

/* the still is only for reduced-motion; the loop is the default */
.services__still {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .services__video {
    display: none;
  }

  .services__still {
    display: block;
  }
}

.services__title {
  color: var(--white);
  font-size: clamp(2.2rem, 5.4vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.02;
  margin-block: var(--sp-6) var(--sp-4);
  text-transform: uppercase;
}

.services__blurb {
  font-size: var(--fs-lead);
  line-height: 1.62;
}

.services__cards {
  display: grid;
  gap: var(--sp-4);
}

@media (width <= 900px) {
  .services__panel {
    grid-template-columns: 1fr;
  }
}

/* ==== 6. WHAT WE DO (deck p7) ============================================ */

.whatwedo {
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.whatwedo__bg {
  block-size: 100%;
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  z-index: -2;
}

.whatwedo::after {
  /* Measured against deck p7 rather than guessed. The slide's field sits at
     about rgb(110 150 148) with the skyline only ghosted behind it, while
     bg-jobtypes.jpg averages rgb(93 132 130) — darker, and sharper. Every stop
     here is therefore LIGHTER than the plate: the wash lifts the photograph
     toward the slide's tone and flattens its contrast. Shading it down, which
     is what the old dark stops did, made the section read as a see-through
     photo instead of a teal panel. */
  background: linear-gradient(200deg, rgb(132 170 166 / 54%), rgb(140 176 172 / 48%) 50%, rgb(110 150 148 / 58%));
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

.whatwedo__bar {
  align-items: center;
  display: flex;
  gap: var(--sp-4);
  justify-content: space-between;
  margin-block-end: var(--sp-6);
}

.whatwedo__wordmark {
  font-size: 1.05rem;
}

.whatwedo__main {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  margin-block-end: var(--sp-7);
}

/* the reel collage: one tall tile + two stacked (deck p7) */
/* Rows are sized by the two small tiles' 9:16 aspect. The .yt embeds have no
   intrinsic height of their own — their contents are absolutely positioned —
   so without this the rows collapse to nothing. */
.reels {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto auto;
}

.reels > * {
  border-radius: var(--r-sm);
  box-shadow: var(--sh-2);
  inline-size: 100%;
  min-block-size: 0;
}

.reels > *:first-child {
  block-size: 100%;
  grid-row: span 2;
}

.reels > *:not(:first-child) {
  aspect-ratio: 9 / 16;
}

.whatwedo__panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.whatwedo__title {
  color: var(--white);
  font-size: clamp(1.85rem, 4.2vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.06;
  margin-block-end: var(--sp-4);
}

.whatwedo__panel > p {
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.whatwedo__sub {
  align-items: center;
  display: flex;
  gap: var(--sp-3);
  margin-block: var(--sp-6) var(--sp-4);
}

.whatwedo__sub h3 {
  color: var(--white);
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight: 700;
}

.whatwedo__sub svg {
  block-size: 40px;
  color: var(--white);
  flex: none;
  inline-size: 40px;
}

.whatwedo__detail {
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-align: justify;
}

@media (width <= 900px) {
  .whatwedo__main {
    grid-template-columns: 1fr;
  }

  .whatwedo__detail {
    text-align: start;
  }
}

/* ==== 7. JOB TYPES + STATS (deck p8) ===================================== */

.jobtypes {
  color: var(--ink-strong);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.jobtypes__bg {
  block-size: 100%;
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transform: scale(1.05);
  z-index: -2;
}

.jobtypes::after {
  background: linear-gradient(180deg, rgb(214 226 224 / 62%), rgb(232 240 238 / 58%));
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

.jobtypes__kicker {
  color: var(--ink-strong);
  font-size: var(--fs-lead);
  margin-block-end: var(--sp-5);
}

.jobtypes__kicker em {
  color: var(--sage-card);
  font-style: italic;
}

/* Column ratios and gutters are lifted straight off deck p8, measured as a
   share of the slide width. The two gutters are deliberately uneven there — a
   wide one after the panel, a narrow one after the video — which a single
   `gap` cannot express, so they are empty tracks instead.

     panel 38.5 | gap 5.0 | video 32.1 | gap 1.2 | aside 23.2                */
.jobtypes__grid {
  align-items: stretch;
  display: grid;
  gap: 0;
  grid-template-columns:
    minmax(0, 38.5fr) minmax(0, 5fr) minmax(0, 32.1fr) minmax(0, 1.2fr) minmax(0, 23.2fr);
}

.jobtypes__panel { grid-column: 1; }
.jobtypes__clip  { grid-column: 3; }
.jobtypes__aside { grid-column: 5; }

.jobtypes__panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.joblist {
  display: grid;
  gap: var(--sp-5);
  margin-block-end: var(--sp-7);
}

.joblist li {
  padding-inline-start: var(--sp-6);
  position: relative;
}

.joblist li::before {
  background: rgb(255 255 255 / 55%);
  block-size: 14px;
  border-radius: 50%;
  content: "";
  inset-block-start: 0.55em;
  inset-inline-start: 0;
  position: absolute;
  inline-size: 14px;
}

.joblist h3 {
  color: var(--white);
  font-family: var(--ff-condensed);
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin-block-end: var(--sp-2);
  text-shadow: 0 2px 10px rgb(0 36 36 / 22%);
  text-transform: uppercase;
}

.joblist p {
  color: var(--white);
  font-size: var(--fs-sm);
  line-height: 1.45;
  max-inline-size: 42ch;
}

.jobtypes__cta {
  display: flex;
  justify-content: center;
  margin-block-start: var(--sp-6);
}

/* In the deck the clip runs taller than the panel and is centred against it,
   bleeding a little past it top and bottom. */
.jobtypes__clip {
  align-self: center;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
  inline-size: 100%;
  margin-inline: auto;
  max-block-size: min(860px, 88vh);
}

/* Quote pinned to the top, the two teal cards sunk to the bottom, and a lot of
   air between them — exactly how the slide is arranged. The 1fr row is that
   gap; without it the three would sit as an evenly spaced stack. */
.jobtypes__aside {
  display: grid;
  gap: var(--sp-4);
  grid-template-rows: auto 1fr auto auto;
}

/* Placed by row on purpose. Left to auto-placement the first teal card lands in
   the 1fr row and stretches to fill it; row 2 has to stay empty to act as the
   gap the slide leaves between the quote and the pair below. */
.jobtypes__aside > .quote-card { grid-row: 1; }
.jobtypes__aside > .tag-card:nth-of-type(1) { grid-row: 3; }
.jobtypes__aside > .tag-card:nth-of-type(2) { grid-row: 4; }

.jobtypes__aside > * { align-self: start; }

/* The teal cards overhang the clip's right edge on the slide: they start at
   68.8% of the slide where the clip only ends at 75.6%. Both offsets are a
   share of this column's own width, so the overlap holds at any size. */
.tag-card {
  margin-inline: -34.5% 24.6%;
}

.quote-card {
  border-radius: var(--r-md);
  color: var(--white);
  padding: var(--sp-5);
}

.quote-card svg {
  block-size: 26px;
  inline-size: 26px;
  margin-block-end: var(--sp-2);
  opacity: 0.9;
}

.quote-card p {
  font-size: clamp(1rem, 1.6vw, 1.28rem);
  line-height: 1.35;
}

.tag-card {
  background: rgb(93 134 130 / 88%);
  border-radius: 4px;
  color: var(--white);
  padding: var(--sp-4);
}

.tag-card h4 {
  color: var(--white);
  font-family: var(--ff-condensed);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tag-card p {
  font-size: var(--fs-xs);
  line-height: 1.5;
  margin-block-start: var(--sp-2);
  text-align: justify;
}

/* Below the desktop slide the overlap stops being a design and starts being a
   collision, so the empty gutter tracks and the negative margin both go. */
@media (width <= 1000px) {
  .jobtypes__grid {
    gap: clamp(1.25rem, 3vw, 2.25rem);
    grid-template-columns: 1fr 1fr;
  }

  .jobtypes__panel {
    grid-column: 1 / -1;
  }

  .jobtypes__clip {
    grid-column: 1;
    max-block-size: 620px;
  }

  .jobtypes__aside {
    grid-column: 2;
    grid-template-rows: none;
  }

  .jobtypes__aside > .quote-card,
  .jobtypes__aside > .tag-card:nth-of-type(1),
  .jobtypes__aside > .tag-card:nth-of-type(2) {
    grid-row: auto;
  }

  .tag-card {
    margin-inline: 0;
  }
}

@media (width <= 640px) {
  .jobtypes__grid {
    grid-template-columns: 1fr;
  }

  .jobtypes__clip,
  .jobtypes__aside {
    grid-column: 1;
  }
}

/* ==== 8. MEDIA GALLERY (deck p9) ========================================= */

.gallery {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.gallery__bg {
  block-size: 100%;
  filter: blur(6px);
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transform: scale(1.08);
  z-index: -2;
}

.gallery::after {
  background: rgb(232 238 237 / 62%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

/* --- Infinite horizontal carousel ---------------------------------------

   Loop maths: the track is 3 identical groups of 4. Spacing uses a trailing
   margin on every item rather than `gap`, so 12 items = 12 x (item + margin)
   and one group is exactly 33.3333% of the track. Translating by that amount
   lands group 2 precisely where group 1 began — no visible seam.

   No-gap guarantee: at the loop's far end the viewport is covered by groups
   2 and 3, so the carousel stays full as long as 2 x group width exceeds the
   viewport. Group width is at least 4 x (190 + 12) = 808px on small screens
   and 4 x (340 + 28) = 1472px once the item size caps, i.e. safe past 2900px.
   ---------------------------------------------------------------------- */

.gallery__carousel {
  --item-w: clamp(190px, 22vw, 340px);
  --item-gap: clamp(0.75rem, 1.6vw, 1.75rem);
  --scroll-time: 28s; /* lower = faster */

  /* feather both edges so posters enter and leave instead of being cut */
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.gallery__track {
  animation: gallery-scroll var(--scroll-time) linear infinite;
  display: flex;
  inline-size: max-content;
  will-change: transform;
}

.gallery__track > li {
  flex: none;
  inline-size: var(--item-w);
  margin-inline-end: var(--item-gap);
}

.gallery__track img {
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  box-shadow: var(--sh-3);
  inline-size: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

@keyframes gallery-scroll {
  to {
    transform: translateX(-33.3333%);
  }
}

/* hovering anywhere on the strip holds it still so a poster can be looked at */
@media (hover: hover) {
  .gallery__carousel:hover .gallery__track {
    animation-play-state: paused;
  }

  .gallery__track img:hover {
    box-shadow: 0 30px 70px rgb(0 36 36 / 28%);
    transform: translateY(-10px);
  }
}

/* keyboard users get the same pause */
.gallery__carousel:focus-within .gallery__track {
  animation-play-state: paused;
}

/* No motion: fall back to a normal swipeable, snapping strip so the content
   is still fully reachable. */
@media (prefers-reduced-motion: reduce) {
  .gallery__carousel {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .gallery__track {
    animation: none;
  }

  .gallery__track > li {
    scroll-snap-align: center;
  }
}

/* ==== 9. WE FIND JOBS BANNER (deck p10) ================================== */

/* The bokeh plate shows through the top of the band, where there is nothing but
   the wordmark over it. The lower stops stay heavy on purpose: they are matched
   to the skyline cut-out's own sky and river tones, and they are what makes the
   PNG's edges dissolve instead of reading as a rectangle. */
.banner {
  background-color: #e9edeb;
  background-image: linear-gradient(180deg, rgb(223 232 229 / 30%) 0%, rgb(233 237 235 / 44%) 42%,
      rgb(242 242 241 / 82%) 78%, rgb(247 247 247 / 96%) 100%),
    url("../img/bg-bokeh.jpg");
  background-position: center, center top;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  display: grid;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
  place-items: center;
  position: relative;
  text-align: center;
}

.banner__eyebrow {
  color: var(--teal-label);
  font-size: clamp(0.7rem, 1.5vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.42em;
  margin-block-end: var(--sp-3);
  text-transform: uppercase;
}

.banner__wordmark {
  color: var(--teal-header);
  font-size: clamp(3rem, 24vw, 21.5rem);
  line-height: 0.84;
  opacity: 0.92;
}

/* the skyline cut-out overlaps the wordmark's lower half, as in the deck.
   The mask feathers its left/right/bottom edges into the page background. */
.banner__skyline {
  block-size: auto;
  inline-size: min(1400px, 100%);
  margin-block-start: -5%;
  mask-composite: intersect;
  mask-image: linear-gradient(to bottom, #000 58%, transparent 98%),
    linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  position: relative;
  -webkit-mask-composite: source-in;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 98%),
    linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  z-index: 1;
}

.banner__pill {
  margin-block-start: -6%;
  padding-block-end: var(--sp-6);
  position: relative;
  z-index: 2;
}

.banner__pill .pill--amber {
  box-shadow: var(--sh-2);
}

/* ==== 10. THANK YOU (deck p11) =========================================== */

.thanks {
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.thanks__bg {
  block-size: 100%;
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  z-index: -2;
}

.thanks::after {
  background: linear-gradient(180deg, rgb(62 104 112 / 90%), rgb(93 134 130 / 88%));
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

.thanks__head {
  align-items: start;
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-end: var(--sp-7);
}

.thanks__title {
  color: var(--white);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  text-shadow: 0 4px 16px rgb(0 36 36 / 25%);
  text-transform: uppercase;
}

.thanks__lead {
  font-size: var(--fs-lead);
  line-height: 1.85;
}

.thanks__clips {
  display: grid;
  gap: clamp(1rem, 3vw, 2.75rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* both clips are 16:9 and top-aligned so their frames line up exactly */
.thanks__clips {
  align-items: start;
}

.thanks__frame {
  aspect-ratio: 16 / 9;
}

.thanks__clip img {
  block-size: 100%;
}

.thanks__clip img {
  inline-size: 100%;
  object-fit: cover;
}

/* An uploaded MP4 fills the same 16:9 box as the still it replaces. The base
   reset sets `height: auto` on video, so the size has to be re-stated here. */
.thanks__video {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}


/* the podcast slot is a 16:9 player rather than a still */
.yt--wide {
  aspect-ratio: 16 / 9;
}

.thanks__email {
  background: var(--bg-band);
  padding-block: var(--sp-6);
  text-align: center;
}

.thanks__email a {
  color: var(--sage-card);
  font-size: clamp(0.75rem, 2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
  word-break: break-word;
}

.thanks__email a:hover {
  color: var(--teal-deep);
}

.thanks__dots {
  display: flex;
  gap: clamp(1.25rem, 5vw, 3.6rem);
  justify-content: center;
  margin-block-start: var(--sp-5);
}

.thanks__dots span {
  background: var(--sage-card);
  block-size: 11px;
  border-radius: 50%;
  inline-size: 11px;
}

@media (width <= 760px) {
  .thanks__head {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .thanks__clips {
    grid-template-columns: 1fr;
  }
}

/* ==== 11. CONTACT + REVIEWS (deck p12) =================================== */

.reviews {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.reviews__bg {
  block-size: 100%;
  filter: blur(3px);
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transform: scale(1.06);
  z-index: -2;
}

.reviews::after {
  background: rgb(243 243 243 / 88%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

/* the third column is sized to hold the card ring's full ellipse
   (2 x rx + card width), not just a stack of cards */
.reviews__grid {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.15fr) minmax(0, 0.8fr);
}

/* contact column */
.contact-col {
  border-inline-end: 1px solid rgb(0 36 36 / 14%);
  display: grid;
  gap: var(--sp-5);
  padding-inline-end: clamp(1rem, 2.5vw, 2rem);
  text-align: center;
}

.contact-col h3 {
  font-size: 1.06rem;
  font-weight: 700;
  margin-block-end: var(--sp-3);
}

.contact-col a {
  display: inline-block;
  hyphens: none;
  overflow-wrap: anywhere;
  transition: color var(--dur) var(--ease);
}

/* keep the long address to one readable measure */
.contact-col address,
.contact-col p {
  margin-inline: auto;
  max-inline-size: 26ch;
}

/* the address is the only genuinely long line — the email must not be capped
   or it breaks mid-domain. Selector matches `.contact-col p` specificity. */
.contact-col p.contact-col__email {
  font-size: 0.875rem;
  max-inline-size: none;
}

.contact-col p.contact-col__email a {
  overflow-wrap: normal;
}

.contact-col a:hover {
  color: var(--teal-deep);
}

.contact-col__socials {
  display: grid;
  gap: var(--sp-1);
  font-weight: 600;
}

.contact-col__handle {
  color: var(--ink-soft);
  font-weight: 400;
}

/* reviews column */
.reviews__head {
  margin-block-end: var(--sp-5);
  text-align: center;
}

.reviews__head h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 600;
}

.reviews__head p {
  color: var(--teal-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-block-start: var(--sp-1);
}

/* --- Scrollable review list ---------------------------------------------
   Three cards are visible; the rest scroll inside the panel rather than
   lengthening the page. The wrapper carries the bottom fade so the hint does
   not scroll away with the content.                                        */

.reviews__scroll {
  position: relative;
}

.reviews__scroll::after {
  background: linear-gradient(to top, rgb(243 243 243 / 92%), rgb(243 243 243 / 0%));
  block-size: 34px;
  content: "";
  inset-block-end: 0;
  inset-inline: 0;
  pointer-events: none;
  position: absolute;
  z-index: 6;
}

.reviews__list {
  display: grid;
  gap: var(--sp-4);
  max-block-size: 23.5rem; /* ~3 cards + their gaps, clear of the fade */
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scrollbar-color: var(--sage-soft) rgb(0 36 36 / 8%);
  scrollbar-width: thin;
  /* room for the hover scale, which the scroll container would otherwise clip */
  padding-block: 4px 2.25rem;
  padding-inline: 14px;
}

.reviews__list > li {
  scroll-snap-align: start;
}

.reviews__list::-webkit-scrollbar {
  inline-size: 8px;
}

.reviews__list::-webkit-scrollbar-track {
  background: rgb(0 36 36 / 8%);
  border-radius: 8px;
}

.reviews__list::-webkit-scrollbar-thumb {
  background: var(--sage-soft);
  border-radius: 8px;
}

.reviews__list::-webkit-scrollbar-thumb:hover {
  background: var(--sage-card);
}

/* id-card column */
.idcards {
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
  place-content: center;
}

/* --- Floating 3D card carousel ------------------------------------------

   Reproduces the elliptical "cloud carousel" on the client's current site:
   cards travel a horizontal ellipse, growing and brightening as they swing
   to the front and shrinking, dimming and blurring as they fall to the back.

   One shared @keyframes walks a full orbit in eight steps (every 45 deg).
   Each card is the same animation offset by a negative delay of
   duration / 5, so the five are evenly spaced around the ring forever.
   Values are the literal ellipse: x = rx*sin, y = ry*cos, and scale,
   opacity, blur and z-index all track (cos + 1) / 2, i.e. depth.
   ---------------------------------------------------------------------- */

.idcards__carousel {
  /* portrait 9:16 cards — so the box is about twice the card width tall.
     2*rx + card-w must stay inside the grid column (381px here). */
  --card-w: clamp(78px, 8vw, 110px);
  --rx: clamp(62px, 9vw, 128px); /* ellipse half-width  */
  --ry: 16px; /* ellipse half-height */
  --spin: 18s;

  block-size: calc(var(--card-w) * 2);
  inline-size: 100%;
  perspective: 700px;
  position: relative;
}

.idcards__carousel li {
  animation: idcard-orbit var(--spin) linear infinite;
  inline-size: var(--card-w);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  /* half the card's own height, so it orbits about its centre */
  margin-block-start: calc(var(--card-w) * -0.889);
  margin-inline-start: calc(var(--card-w) / -2);
  position: absolute;
  transform-style: preserve-3d;
}

.idcards__carousel li:nth-child(2) {
  animation-delay: calc(var(--spin) / -5);
}

.idcards__carousel li:nth-child(3) {
  animation-delay: calc(var(--spin) / -5 * 2);
}

.idcards__carousel li:nth-child(4) {
  animation-delay: calc(var(--spin) / -5 * 3);
}

.idcards__carousel li:nth-child(5) {
  animation-delay: calc(var(--spin) / -5 * 4);
}

.idcards__carousel a {
  display: block;
  border-radius: 8px;
}

.idcards__carousel img {
  border-radius: 8px;
  box-shadow: var(--sh-2);
  display: block;
  inline-size: 100%;
}

/* a small play glyph so the thumbnails read as video, not stills */
/* sized off --card-w, not percentages: the card is no longer square, so a
   percentage would give an oval rather than a circle */
.idcards__carousel a::after {
  align-items: center;
  background: rgb(8 109 106 / 84%);
  block-size: calc(var(--card-w) * 0.34);
  border: 1.5px solid rgb(255 255 255 / 82%);
  border-radius: 50%;
  color: var(--white);
  content: "▶";
  display: flex;
  font-size: calc(var(--card-w) * 0.1);
  inline-size: calc(var(--card-w) * 0.34);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  justify-content: center;
  padding-inline-start: 8%;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: background-color var(--dur) var(--ease);
}

.idcards__carousel a:hover::after,
.idcards__carousel a:focus-visible::after {
  background: var(--amber);
}

@keyframes idcard-orbit {
  /* 0deg — front of the ellipse: largest, sharpest, on top */
  0% {
    filter: blur(0);
    opacity: 1;
    transform: translateX(0) translateY(var(--ry)) rotateY(0deg) scale(1);
    z-index: 40;
  }

  12.5% {
    filter: blur(0.15px);
    opacity: 0.96;
    transform: translateX(calc(var(--rx) * 0.707)) translateY(calc(var(--ry) * 0.707))
      rotateY(15.6deg) scale(0.94);
    z-index: 34;
  }

  25% {
    filter: blur(0.5px);
    opacity: 0.86;
    transform: translateX(var(--rx)) translateY(0) rotateY(22deg) scale(0.79);
    z-index: 20;
  }

  37.5% {
    filter: blur(0.9px);
    opacity: 0.73;
    transform: translateX(calc(var(--rx) * 0.707)) translateY(calc(var(--ry) * -0.707))
      rotateY(15.6deg) scale(0.64);
    z-index: 6;
  }

  /* 180deg — back of the ellipse: smallest, softest, behind everything */
  50% {
    filter: blur(1.1px);
    opacity: 0.65;
    transform: translateX(0) translateY(calc(var(--ry) * -1)) rotateY(0deg) scale(0.58);
    z-index: 0;
  }

  62.5% {
    filter: blur(0.9px);
    opacity: 0.73;
    transform: translateX(calc(var(--rx) * -0.707)) translateY(calc(var(--ry) * -0.707))
      rotateY(-15.6deg) scale(0.64);
    z-index: 6;
  }

  75% {
    filter: blur(0.5px);
    opacity: 0.86;
    transform: translateX(calc(var(--rx) * -1)) translateY(0) rotateY(-22deg) scale(0.79);
    z-index: 20;
  }

  87.5% {
    filter: blur(0.15px);
    opacity: 0.96;
    transform: translateX(calc(var(--rx) * -0.707)) translateY(calc(var(--ry) * 0.707))
      rotateY(-15.6deg) scale(0.94);
    z-index: 34;
  }

  100% {
    filter: blur(0);
    opacity: 1;
    transform: translateX(0) translateY(var(--ry)) rotateY(0deg) scale(1);
    z-index: 40;
  }
}

/* hold the ring so a card can be read */
.idcards__carousel:hover li,
.idcards__carousel:focus-within li {
  animation-play-state: paused;
}

/* No motion: drop the orbit and fall back to the original static fan. */
@media (prefers-reduced-motion: reduce) {
  .idcards__carousel {
    block-size: auto;
    display: grid;
    grid-template-areas: "stack";
    perspective: none;
    place-items: center;
  }

  .idcards__carousel li {
    animation: none;
    grid-area: stack;
    inline-size: clamp(74px, 9vw, 104px);
    margin: 0;
    position: relative;
    inset: auto;
  }

  .idcards__carousel li:nth-child(1) {
    transform: translate(-56%, -14%) rotate(-9deg);
  }

  .idcards__carousel li:nth-child(2) {
    transform: translate(-28%, -7%) rotate(-4deg);
  }

  .idcards__carousel li:nth-child(4) {
    transform: translate(28%, -7%) rotate(4deg);
  }

  .idcards__carousel li:nth-child(5) {
    transform: translate(56%, -14%) rotate(9deg);
  }
}

.idcards__badge {
  block-size: auto;
  inline-size: clamp(70px, 8vw, 96px);
}

@media (width <= 1000px) {
  .reviews__grid {
    grid-template-columns: 1fr;
  }

  .contact-col {
    border-block-end: 1px solid rgb(0 36 36 / 14%);
    border-inline-end: 0;
    padding-block-end: var(--sp-5);
    padding-inline-end: 0;
  }

  /* Side by side the ring got squeezed and the badge collided with the cards.
     Stack them and give the ellipse a definite width instead. */
  .idcards {
    grid-auto-flow: row;
    justify-items: center;
  }

  .idcards__carousel {
    --card-w: 96px;
    --rx: 96px;

    inline-size: min(100%, 300px);
    margin-inline: auto;
  }
}

/* ==== 12. SERVICE WORDS BAND (deck p12) ================================== */

.words-band {
  background: var(--bg-alt);
  padding-block: clamp(1.75rem, 4vw, 3rem);
}