/* ==========================================================================
   Vision Enterprises — Page-specific styles
   Ref #CSG-WEB-2026

   Overrides only. Anything reusable belongs in components.css; anything that
   is a value belongs in tokens.css. Loads last.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HOME — hero

   Layer order, bottom to top:
     1. poster image   paints first, is the LCP element
     2. video          attached after the load event by main.js
     3. scrim          charcoal at 65%, the reason the text stays readable
     4. content
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--ve-charcoal);
  padding-block: var(--sp-9);
}

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

.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__video {
  z-index: 1;
  /* Invisible until it is actually playing, so the <picture> underneath (the
     landscape frame on desktop, the portrait frame on a phone) is what shows
     while the file loads, and what stays if autoplay is refused — iOS Low
     Power Mode does that. Without this a video that has not started paints
     as a black box over the poster. main.js adds .is-playing. */
  opacity: 0;
  transition: opacity var(--t-reveal) var(--ease);
}

.hero__video.is-playing {
  opacity: 1;
}

/* Structural, not decorative. White text over an unscrimmed video becomes
   unreadable the instant a bright frame passes — sunlight, a white kurta,
   open sky. At 65% charcoal every frame clears 4.5:1. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--ve-charcoal-65);
}

.hero__inner {
  position: relative;
  z-index: 3;
  text-align: center;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-5);
}

.hero__badges .badge--outline {
  color: var(--ve-gold);
  border-color: var(--ve-amber);
}

.hero__title {
  color: var(--ve-white);
  font-size: clamp(30px, 5.4vw, 58px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 20ch; /* wide enough for "Where Vision Meets" to share a line */
  margin-inline: auto;
}

.hero__sub {
  color: var(--ve-cream);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.62;
  max-width: 60ch;
  margin: var(--sp-5) auto 0;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-7);
}

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%);
  z-index: 3;
  color: var(--ve-cream);
  opacity: 0.7;
  animation: cue-bob 2.4s ease-in-out infinite;
}

.hero__cue:hover {
  color: var(--ve-gold);
  opacity: 1;
}

@keyframes cue-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

@media (max-width: 767px) {
  .hero {
    min-height: 88svh;
    padding-block: var(--sp-8);
  }
  /* The video now plays on phones too. The <picture> underneath has already
     swapped to the portrait frame and stays visible until the first frame
     arrives — see .hero__video below. */
  .hero__cue { display: none; }
  .hero__cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cue { animation: none; }
}

/* --------------------------------------------------------------------------
   HOME — services grid

   All nine categories, each with its own sample frame. The icon-only version
   that stood here showed four of the nine, directly under a line that reads
   "Nine service categories".

   Below 768px the grid turns into a snap-scrolling row. Nine full-width cards
   stacked vertically added roughly 2,500px of scroll on a phone, which pushed
   the featured work and the credentials out of reach on the device most
   district officers actually use. Each card sits at 78% of the viewport so the
   next one always peeks in — the affordance that says the row scrolls.
   -------------------------------------------------------------------------- */

/* Wrappers for the pinned phone row. They are nothing at all until hscroll.js
   switches them on, so every other viewport lays the grid out untouched. */
.svc-stage,
.svc-stage__pin {
  display: contents;
}

.svc-progress {
  display: none;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.svc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ve-white);
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--t-hover) var(--ease),
    transform var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease);
}

.svc-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  border-color: var(--ve-amber);
  color: inherit;
}

.svc-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ve-cream);
  border-bottom: 3px solid var(--ve-amber);
}

.svc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-hover) var(--ease);
}

.svc-card:hover .svc-card__media img {
  transform: scale(1.04);
}

.svc-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  flex: 1;
}

.svc-card__num {
  font-size: 12px;
  line-height: 1.4;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  color: var(--ve-amber-dk);
}

.svc-card h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.svc-card p {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ve-text-muted);
}

/* Pinned to the bottom so the arrows line up across a row of uneven cards. */
.svc-card .link-arrow {
  margin-top: auto;
  padding-top: var(--sp-3);
}

.svc-card:hover .link-arrow .icon {
  transform: translateX(3px);
}

@media (max-width: 1023px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .svc-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Without this the first snap position aligns the card with the scrollport
       edge, which swallows the padding below and pins card 01 to the screen
       edge while every other card keeps its gutter. */
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    /* Bleed to both screen edges so the row reads as a strip, not a boxed
       widget. html carries overflow-x: clip, so this cannot leak into a
       horizontal scrollbar on the page itself. */
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: var(--sp-3);
  }

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

  /* ----------------------------------------------------------------------
     Pinned pan. hscroll.js adds .is-pinned and sets the stage height; the row
     then moves sideways by transform as the page scrolls, and the page carries
     on once the last card has arrived.

     Everything here is inside .is-pinned, so the swipe row above stays the
     fallback for reduced motion and for JavaScript being off.
     ---------------------------------------------------------------------- */

  .svc-stage.is-pinned {
    display: block;
    position: relative;
  }

  .svc-stage.is-pinned .svc-stage__pin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-5);
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    padding-block: var(--sp-6);
    /* Full-bleed: the gutter is carried by the track's own padding, which also
       keeps the pan distance easy to measure. */
    margin-inline: calc(-1 * var(--gutter));
  }

  /* The heading rides along inside the pin, so it is tighter than in flow. */
  .svc-stage.is-pinned .section-head {
    margin-bottom: 0;
    padding-inline: var(--gutter);
  }

  .svc-stage.is-pinned .section-head p {
    display: none;
  }

  .svc-stage.is-pinned .svc-grid {
    grid-auto-flow: column;
    grid-auto-columns: 78vw;
    width: max-content;
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: var(--gutter);
    padding-bottom: 0;
    will-change: transform;
  }

  /* In flow under the row, not pinned to the bottom of the screen: down there
     it ran straight through the WhatsApp button. */
  .svc-stage.is-pinned .svc-progress {
    display: block;
    flex: none;
    margin-inline: var(--gutter);
    height: 3px;
    border-radius: 2px;
    background: var(--ve-rule);
  }

  .svc-stage.is-pinned .svc-progress span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--ve-amber);
    transform: scaleX(0);
    transform-origin: left center;
  }
}

/* --------------------------------------------------------------------------
   HOME — statistics band

   Four figures across on desktop, two by two on a phone. A single column put
   one number per screenful and pushed everything below it out of reach.
   -------------------------------------------------------------------------- */

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}

.stat-band > li + li {
  border-left: 1px solid var(--ve-cream-deep);
}

@media (max-width: 767px) {
  .stat-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-4);
  }

  .stat-band > li + li {
    border-left: 0;
  }
}

/* --------------------------------------------------------------------------
   HOME — showreel and recent projects

   The three project cards here used to carry placeholder thumbnails, which is
   the one thing a media production company cannot show on its own front page.
   The reel the client supplied is real footage, so it leads the section and
   the projects sit beside it as a list — no invented stills anywhere.
   -------------------------------------------------------------------------- */

.showreel {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.showreel__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.showreel__info h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.showreel__info p {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ve-text-muted);
  max-width: 52ch;
}

.showreel__player {
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ve-charcoal);
  box-shadow: var(--shadow-rest);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--t-hover) var(--ease),
    transform var(--t-hover) var(--ease);
}

.showreel__player:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  color: inherit;
}

.showreel__frame {
  position: relative;
  display: block;
}

.showreel__player img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* A charcoal bar under the frame rather than a tag floating on it: on a phone
   the floating version sat under the play button, and the bar gives the card
   an edge to sit on against the cream band. */
.showreel__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ve-charcoal);
  color: var(--ve-cream);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
}

.showreel__bar .icon {
  color: var(--ve-amber);
  flex: none;
}

.showreel__time {
  margin-left: auto;
  color: var(--ve-on-dark-muted);
  font-weight: var(--fw-regular);
  white-space: nowrap;
}

.showreel__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* No full-frame tint. This used to dim the whole picture by 32% so a play
     button read against a photograph; the thumbnail is now designed artwork
     with its own lettering, and the tint turned its white text grey and its
     gold muddy. The amber button carries itself. */
  background: transparent;
  transition: background-color var(--t-hover) var(--ease);
}

.showreel__player:hover .showreel__play {
  background: rgba(40, 31, 27, 0.12);
}

.showreel__play span {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--ve-amber);
  color: var(--ve-charcoal);
  display: grid;
  place-items: center;
  transition: transform var(--t-hover) var(--ease);
}

.showreel__player:hover .showreel__play span {
  transform: scale(1.06);
}

.project-list > li {
  border-bottom: 1px solid var(--ve-cream-deep);
}

.project-list > li:last-child { border-bottom: 0; }

/* The whole row is the link — a title that looks clickable and is not is
   worse than no link at all. It lands on the portfolio filtered to that
   department, which is as close to a project page as this build has. */
.project-list__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  margin-inline: calc(-1 * var(--sp-4));
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--t-hover) var(--ease);
}

.project-list__link:hover {
  background: var(--ve-white);
  color: inherit;
}

/* Thumbnail on the left of each row. Fixed width so the three titles start on
   the same line however tall the picture is. */
.project-list__thumb {
  display: block;
  flex: none;
  width: 132px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-button);
  background: var(--ve-cream-deep);
}

.project-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-hover) var(--ease);
}

.project-list__link:hover .project-list__thumb img {
  transform: scale(1.06);
}

.project-list__go {
  color: var(--ve-amber-dk);
  transition: transform var(--t-hover) var(--ease);
}

.project-list__link:hover .project-list__go {
  transform: translateX(3px);
}

.project-list__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--ve-text-muted);
}

.project-list h3 {
  font-size: var(--fs-body);
  line-height: 1.45;
}

.project-list p {
  margin-top: 6px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ve-text-muted);
}

@media (max-width: 1023px) {
  .showreel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

/* On a phone the thumbnail goes on top and runs the full width: beside the
   text it left about 200px for a three-line title and its summary. */
@media (max-width: 767px) {
  .project-list__link {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb thumb"
      "body  go";
    gap: var(--sp-3);
  }

  .project-list__thumb {
    grid-area: thumb;
    width: 100%;
    border-radius: var(--radius-card);
  }

  .project-list__link > div { grid-area: body; }
  .project-list__go { grid-area: go; }
}

@media (max-width: 767px) {
  /* The frame is barely 220px tall on a phone; at 76px the play button and
     the duration tag start to collide. */
  .showreel__play span {
    width: 60px;
    height: 60px;
  }

  .showreel__play .icon--xl {
    width: 30px;
    height: 30px;
  }
}

/* --------------------------------------------------------------------------
   HOME — gallery

   Six 16:9 stills that open in the lightbox as a group, so the arrows step
   through them. The caption sits on the image rather than under it: the tiles
   are the same height, and a caption below would set six different heights.
   -------------------------------------------------------------------------- */

/* Category toggles. Charcoal on amber for the active one — amber is a fill
   colour here, never the text. */
.gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.gallery-tab {
  padding: 9px var(--sp-4);
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-button);
  background: var(--ve-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--ve-text-muted);
  white-space: nowrap;
  transition:
    background-color var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease);
}

.gallery-tab:hover {
  border-color: var(--ve-charcoal);
  color: var(--ve-charcoal);
}

.gallery-tab[aria-pressed="true"] {
  background: var(--ve-amber);
  border-color: var(--ve-amber);
  color: var(--ve-charcoal);
}

/*
  Four across on a wide screen. Most of the photographs are landscape and sit
  in a 4:3 tile; the team pictures are long panoramas, so they take two columns
  at a 2.8:1 crop. The order in the markup (2+1+1, 1+1+2, 2+2) fills three
  rows exactly, so no row is left short.
*/
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--grid-gap);
}

.gallery-item--wide {
  grid-column: span 2;
}

/* A panorama across the whole grid. */
.gallery-item--full {
  grid-column: 1 / -1;
}

.gallery-item--full .gallery-tile {
  aspect-ratio: 3.2 / 1;
}

/* The picture the page wants noticed: two columns by two rows, ringed in amber,
   with its own badge and a larger caption. Its height comes from the two rows it
   spans, so it needs no ratio of its own. */
.gallery-item--feature {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item--feature .gallery-tile {
  height: 100%;
  aspect-ratio: auto;
  box-shadow: 0 0 0 3px var(--ve-amber), var(--shadow-hover);
}

.gallery-item--feature .gallery-tile__cap {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
}

.gallery-tile__badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 1;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ve-amber);
  color: var(--ve-charcoal);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.gallery-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--ve-charcoal);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-rest);
  transition: box-shadow var(--t-hover) var(--ease);
}

.gallery-item--wide .gallery-tile {
  aspect-ratio: 2.8 / 1;
}

.gallery-tile:hover {
  box-shadow: var(--shadow-hover);
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-hover) var(--ease);
}

.gallery-tile:hover img,
.gallery-tile:focus-visible img {
  transform: scale(1.05);
}

/* Charcoal gradient, not a flat bar: a bar would cover the frame, and cream
   text straight on a photograph is unreadable the moment the frame is light. */
.gallery-tile__text {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-7) var(--sp-4) var(--sp-4);
  background: linear-gradient(to top, rgba(40, 31, 27, 0.94), rgba(40, 31, 27, 0.55) 45%, rgba(40, 31, 27, 0));
}

.gallery-tile__cat {
  font-size: 11px;
  line-height: 1.4;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ve-gold);
}

.gallery-tile__cap {
  color: var(--ve-white);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
}

/* Appears on hover and on keyboard focus, so the tile reads as something that
   opens rather than a decorative picture. */
.gallery-tile__zoom {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ve-amber);
  color: var(--ve-charcoal);
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity var(--t-hover) var(--ease),
    transform var(--t-hover) var(--ease);
}

.gallery-tile:hover .gallery-tile__zoom,
.gallery-tile:focus-visible .gallery-tile__zoom {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 1023px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gallery-item--feature {
    grid-row: auto;
  }

  .gallery-item--feature .gallery-tile {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .gallery-item--full .gallery-tile {
    aspect-ratio: 2.6 / 1;
  }
}

/*
  Phone: a plain two-column grid of pictures.

  A swipe row showed one and a third tiles and hid the other ten behind a
  gesture nobody is told about. Captions come off at this width as well — at
  167px a tile is mostly caption, and the lightbox carries the same words the
  moment a tile is tapped. 4:3 rather than 16:9 because a phone has height to
  spare and none to waste sideways.
*/
@media (max-width: 767px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
  }

  .gallery-tile {
    aspect-ratio: 4 / 3;
  }

  /* A full-width panorama on a phone: a little taller than the desktop crop so
     the people in it are still recognisable. */
  .gallery-item--wide .gallery-tile,
  .gallery-item--full .gallery-tile {
    aspect-ratio: 2 / 1;
  }

  .gallery-tile__text,
  .gallery-tile__zoom {
    display: none;
  }

  /* The featured picture keeps its caption: it is the one tile meant to be read. */
  .gallery-item--feature .gallery-tile {
    aspect-ratio: 4 / 3;
  }

  .gallery-item--feature .gallery-tile__text {
    display: flex;
  }

  .gallery-item--feature .gallery-tile__cat {
    display: none;
  }

  .gallery-item--feature .gallery-tile__cap {
    font-size: var(--fs-body);
    line-height: var(--lh-small);
  }

  .gallery-tile__badge {
    top: var(--sp-3);
    left: var(--sp-3);
  }

  /* One line that scrolls, not a wrapped block of buttons: the filter reads as
     a strip the moment it cannot fit. */
  .gallery-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: var(--sp-2);
  }

  .gallery-tab {
    flex: none;
    padding: 8px var(--sp-3);
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   HOME — frequently asked questions

   <details> elements, styled. No script: they open, close and take keyboard
   focus on their own, and the answers are in the markup either way.
   -------------------------------------------------------------------------- */

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--sp-8);
  align-items: start;
}

.faq-layout .section-head {
  margin-bottom: 0;
  position: sticky;
  top: calc(var(--header-h-compact) + var(--sp-5));
}

/* Cards, not hairlines: on a cream band a row of rules reads as a table of
   contents nobody opens. The first question ships open so the section shows
   what is inside it rather than six closed lids. */
.faq__item {
  background: var(--ve-white);
  border: 1px solid var(--ve-cream-deep);
  border-radius: var(--radius-card);
  transition:
    border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease);
}

.faq__item + .faq__item {
  margin-top: var(--sp-3);
}

.faq__item:hover {
  border-color: var(--ve-amber);
}

.faq__item[open] {
  border-color: var(--ve-amber);
  box-shadow: var(--shadow-rest);
}

.faq__item summary {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  color: var(--ve-charcoal);
  /* Both are needed: the marker is a ::marker in Firefox and a shadow
     pseudo-element in Safari. */
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__num {
  flex: none;
  font-size: 12px;
  line-height: 1.4;
  font-weight: var(--fw-black);
  letter-spacing: 0.1em;
  color: var(--ve-amber-dk);
}

.faq__q {
  flex: 1;
  font-weight: var(--fw-semibold);
}

.faq__item summary:hover .faq__q {
  color: var(--ve-amber-dk);
}

.faq__icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ve-cream);
  color: var(--ve-amber-dk);
  transition:
    background-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease);
}

.faq__icon .icon {
  transition: transform var(--t-hover) var(--ease);
}

.faq__item[open] .faq__icon {
  background: var(--ve-amber);
  color: var(--ve-charcoal);
}

.faq__item[open] .faq__icon .icon {
  transform: rotate(180deg);
}

.faq__answer {
  padding: 0 var(--sp-5) var(--sp-5);
  /* Lines up with the question, past the number in the gutter. */
  margin-left: calc(24px + var(--sp-4));
}

.faq__answer p {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ve-text-muted);
  max-width: 62ch;
}

/* Call / WhatsApp block under the heading. */
.faq-help {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-radius: var(--radius-card);
  background: var(--ve-charcoal);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.faq-help__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--ve-cream);
}

.faq-help__row:hover {
  color: var(--ve-gold);
}

.faq-help__icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(250, 171, 24, 0.16);
  color: var(--ve-amber);
}

.faq-help__label {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ve-on-dark-muted);
}

.faq-help__value {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: inherit;
}

@media (max-width: 767px) {
  .faq__item summary {
    padding: var(--sp-4);
    gap: var(--sp-3);
  }

  .faq__answer {
    padding: 0 var(--sp-4) var(--sp-4);
    margin-left: calc(20px + var(--sp-3));
  }
}

@media (max-width: 1023px) {
  .faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }

  .faq-layout .section-head {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   HOME — clients strip

   Icon-over-name cards in the auto-scrolling strip, as the old department
   marks were — but the name is live text, so it follows the language toggle,
   and the icons are generic metaphors that carry no emblem.
   -------------------------------------------------------------------------- */

.logo-strip__track {
  gap: var(--sp-4);
}

.logo-strip .client-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 200px;
  height: 136px;
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  background: var(--ve-white);
  border: 1px solid var(--ve-cream-deep);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-rest);
  color: var(--ve-charcoal);
  font-size: 15px;
  line-height: 1.35;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.logo-strip .client-tile:hover {
  border-color: var(--ve-amber);
  color: var(--ve-charcoal);
  box-shadow: var(--shadow-hover);
}

.logo-strip .client-tile__icon {
  flex: none;
  width: 76px;
  height: 62px;
}

@media (max-width: 767px) {
  .logo-strip .client-tile {
    width: 172px;
    height: 124px;
  }

  .logo-strip .client-tile__icon {
    width: 64px;
    height: 52px;
  }
}

/* --------------------------------------------------------------------------
   HOME — flagship assignments

   The nine highlights from the company profile. Each leads with the number
   that makes it large — 17 episodes, 38 districts, a month of coverage.
   -------------------------------------------------------------------------- */

.flag-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.flag-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-5);
  background: var(--ve-white);
  border: 1px solid var(--ve-cream-deep);
  border-top: 3px solid var(--ve-amber);
  border-radius: var(--radius-card);
}

.flag-card__figure {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  color: var(--ve-amber-dk);
  line-height: 1;
}

.flag-card__figure span {
  font-size: 44px;
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
}

.flag-card__figure small {
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ve-text-muted);
}

.flag-card h3 {
  margin-top: var(--sp-2);
  font-size: var(--fs-body);
  line-height: 1.45;
}

.flag-card p {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ve-text-muted);
}

@media (max-width: 1023px) { .flag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .flag-grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   HOME — why choose us

   Deliberately not the card grid used for services two sections above: same
   component twice in a row was what made the page read as a template. Charcoal
   band, hairline rules, no boxes.
   -------------------------------------------------------------------------- */

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-6);
}

.why-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--ve-amber);
}

.why-item .icon {
  color: var(--ve-gold);
  margin-bottom: var(--sp-1);
}

.why-item p {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ve-on-dark-muted);
}

@media (max-width: 1023px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .why-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }

/* --------------------------------------------------------------------------
   HOME — trust strip
   -------------------------------------------------------------------------- */

.trust-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.trust-strip__marks {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.trust-strip__marks img {
  height: 48px;
  width: auto;
}

/* On a phone the six badges fill the width as an even grid, rather than sitting
   at their desktop size with empty space beside them, and the button spans the
   column like the other primary actions. */
@media (max-width: 767px) {
  .trust-strip { align-items: stretch; }

  .trust-strip__marks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    width: 100%;
  }

  .trust-strip__marks li { display: flex; }

  .trust-strip__marks img {
    width: 100%;
    height: auto;
  }

  .trust-strip > .btn { width: 100%; justify-content: center; }
}

@media (min-width: 480px) and (max-width: 767px) {
  .trust-strip__marks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   ABOUT — story and timeline
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
  align-items: center;
}

.split img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

@media (max-width: 767px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

/* Four across on desktop, two on tablet, one on mobile. Entries are text
   only: each is a documented assignment or registration, and a date is not
   illustrated with a stand-in picture. */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
}

.timeline__item {
  border-top: 3px solid var(--ve-amber);
  padding-top: var(--sp-4);
}

.timeline__year {
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  color: var(--ve-amber-dk);
}

.timeline__item h3 {
  font-size: var(--fs-body);
  margin-top: var(--sp-3);
}

.timeline__item p {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ve-text-muted);
  margin-top: var(--sp-2);
}

@media (max-width: 1023px) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .timeline { grid-template-columns: minmax(0, 1fr); }
}

/* Company-at-a-glance card beside the story. */
.facts {
  background: var(--ve-cream);
  border: 1px solid var(--ve-cream-deep);
  border-radius: var(--radius-card);
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--ve-cream-deep);
}

.facts > div:last-child {
  border-bottom: 0;
}

.facts dt {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ve-text-muted);
}

.facts dd {
  font-weight: var(--fw-semibold);
  color: var(--ve-charcoal);
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}

.story-photo {
  margin-top: var(--sp-7);
}

.story-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

.story-photo figcaption {
  margin-top: var(--sp-3);
}

/* Monogram — stands in for a portrait until the client supplies photographs. */
.mono {
  display: grid;
  place-items: center;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-avatar);
  background: var(--ve-amber);
  color: var(--ve-charcoal);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  letter-spacing: 0.02em;
}

.mono--lg {
  width: 120px;
  height: 120px;
  font-size: var(--fs-stat);
}

.leader-card {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-4);
  aspect-ratio: 4 / 3;
  background: var(--ve-charcoal);
  border-radius: var(--radius-card);
}

.leader-card__name {
  color: var(--ve-on-dark-muted);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.gallery a {
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  line-height: 0;
}

.gallery img {
  width: 100%;
  height: auto;
  transition: transform var(--t-hover) var(--ease);
}

.gallery a:hover img {
  transform: scale(1.04);
}

@media (max-width: 1023px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .gallery { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   SERVICES — sticky in-page navigation

   Replaces a header dropdown. Below 1024px it becomes a horizontal scroll
   strip pinned under the header.
   -------------------------------------------------------------------------- */

.services-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.service-nav {
  position: sticky;
  top: calc(var(--header-h-compact) + var(--sp-5));
}

.service-nav a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--ve-rule);
  border-radius: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--ve-text-muted);
  text-decoration: none;
  transition:
    color var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease),
    background-color var(--t-hover) var(--ease);
}

.service-nav a:hover,
.service-nav a.is-active {
  color: var(--ve-charcoal);
  border-left-color: var(--ve-amber);
  background: var(--ve-cream);
}

.service-block {
  scroll-margin-top: calc(var(--header-h-compact) + var(--sp-5));
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--ve-rule);
}

.service-block + .service-block {
  padding-top: var(--sp-8);
}

.service-block__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.service-block__num {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-card);
  background: var(--ve-amber);
  color: var(--ve-charcoal);
  display: grid;
  place-items: center;
  font-weight: var(--fw-black);
}

.service-block img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  margin-block: var(--sp-5);
}

.service-block ul {
  display: grid;
  gap: var(--sp-2);
}

.service-block ul li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.service-block ul .icon {
  color: var(--ve-amber-dk);
  margin-top: 3px;
  flex: none;
}

@media (max-width: 1023px) {
  .services-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }

  .service-nav {
    position: sticky;
    top: var(--header-h-compact);
    z-index: 10;
    background: var(--ve-white);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--ve-rule);
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .service-nav a {
    flex: none;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: var(--sp-2) var(--sp-3);
    white-space: nowrap;
  }

  .service-nav a:hover,
  .service-nav a.is-active {
    background: transparent;
    border-bottom-color: var(--ve-amber);
  }
}

/* Four-step process strip */
.process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  counter-reset: step;
}

.process__step {
  position: relative;
  padding-top: var(--sp-6);
  border-top: 3px solid var(--ve-amber);
}

.process__step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: calc(-1 * var(--sp-5));
  left: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ve-amber);
  color: var(--ve-charcoal);
  display: grid;
  place-items: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
}

.process__step h3 {
  font-size: var(--fs-body);
}

.process__step p {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ve-text-muted);
  margin-top: var(--sp-2);
}

@media (max-width: 1023px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-7); } }
@media (max-width: 767px)  { .process { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-7); } }

/* --------------------------------------------------------------------------
   PORTFOLIO
   -------------------------------------------------------------------------- */

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--sp-6);
}

@media (max-width: 1023px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .project-grid { grid-template-columns: minmax(0, 1fr); } }

.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

/* --------------------------------------------------------------------------
   PORTFOLIO — film wall

   Twenty-eight YouTube films, each with a local thumbnail. Four across on a
   wide screen, two on a tablet and a phone, one only on the narrowest.
   -------------------------------------------------------------------------- */

.film-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.film-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ve-white);
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--t-hover) var(--ease),
    transform var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease);
}

.film-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  border-color: var(--ve-amber);
  color: inherit;
}

.film-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--ve-charcoal);
  overflow: hidden;
}

.film-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-hover) var(--ease);
}

.film-card:hover .film-card__media img {
  transform: scale(1.05);
}

.film-card__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(40, 31, 27, 0.22);
  transition: background-color var(--t-hover) var(--ease);
}

.film-card:hover .film-card__play {
  background: rgba(40, 31, 27, 0.4);
}

.film-card__play span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ve-amber);
  color: var(--ve-charcoal);
  display: grid;
  place-items: center;
}

.film-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.film-card__title {
  font-size: 15px;
  line-height: 1.4;
  font-weight: var(--fw-semibold);
  color: var(--ve-charcoal);
}

.film-card__client {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ve-text-muted);
}

@media (max-width: 1199px) { .film-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .film-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px)  { .film-grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   PORTFOLIO — assignment register

   One row per assignment, in the client's own words. Rows rather than picture
   cards: most of the 87 have no still, and a placeholder frame on each would
   say less than the row does.
   -------------------------------------------------------------------------- */

.register {
  margin-top: var(--sp-6);
  background: var(--ve-white);
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.reg-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(0, 260px);
  gap: var(--sp-3) var(--sp-5);
  align-items: start;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid transparent;
  transition:
    background-color var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease);
}

.reg-row + .reg-row {
  border-top: 1px solid var(--ve-rule);
}

.reg-row:hover {
  background: rgba(248, 230, 197, 0.35);
  border-left-color: var(--ve-amber);
}

.reg-row__date {
  padding-top: 3px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: var(--fw-semibold);
  color: var(--ve-amber-dk);
  white-space: nowrap;
}

.reg-row__title {
  font-size: var(--fs-body);
  line-height: 1.45;
}

.reg-row__client {
  margin-top: 2px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  color: var(--ve-charcoal);
}

.reg-row__summary {
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ve-text-muted);
}

.reg-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  justify-content: flex-end;
}

/* Charcoal on amber, never amber as the text colour. */
.reg-row__watch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-button);
  background: var(--ve-amber);
  color: var(--ve-charcoal);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.reg-row__watch:hover {
  background: var(--ve-gold);
  color: var(--ve-charcoal);
}

@media (max-width: 899px) {
  .reg-row {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .reg-row__meta {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 479px) {
  .reg-row {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--sp-4);
  }

  .reg-row__meta {
    grid-column: 1;
  }
}

/* --------------------------------------------------------------------------
   CREDENTIALS
   -------------------------------------------------------------------------- */

.cred-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 1023px) { .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .cred-grid { grid-template-columns: minmax(0, 1fr); } }

/* Two to a row on a tablet: an odd card out takes the whole row rather than leaving a hole. */
@media (min-width: 768px) and (max-width: 1023px) {
  .cred-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.cred-card {
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
  background: var(--ve-white);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.cred-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.cred-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-small);
  margin: 0;
}

.cred-card dt {
  color: var(--ve-text-muted);
}

.cred-card dd {
  margin: 0;
  color: var(--ve-charcoal);
  font-weight: var(--fw-semibold);
}

/* The paper that backs a card up — thumbnail, what it is, the PDF — pinned to
   the foot of the card, so a row lines up whichever of its cards carry one. */
.cred-card__doc {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ve-rule);
}

/* Opens the full scan in the lightbox. */
.doc-thumb {
  flex: none;
  width: 88px;
  line-height: 0;
  background: var(--ve-white);
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-button);
  overflow: hidden;
  transition: border-color var(--t-hover) var(--ease);
}

.doc-thumb:hover {
  border-color: var(--ve-amber);
}

.doc-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.cred-card__doc-body,
.download-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.cred-card__doc-name {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--ve-charcoal);
}

.cred-card__doc-body .link-arrow,
.download-card__body .link-arrow {
  align-self: flex-start;
  margin-top: var(--sp-1);
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 767px) { .download-grid { grid-template-columns: minmax(0, 1fr); } }

.download-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-card);
  background: var(--ve-white);
}

.download-card .icon-card__icon {
  flex: none;
  width: 48px;
  height: 48px;
}

.download-card__name {
  font-weight: var(--fw-semibold);
  color: var(--ve-charcoal);
}

/* Notice box — a short caveat set apart from the text around it. */
.notice {
  border: 1px dashed var(--ve-amber);
  background: var(--ve-cream);
  color: var(--ve-charcoal);
  border-radius: var(--radius-card);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.notice .icon {
  color: var(--ve-amber-dk);
  flex: none;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   TEAM
   -------------------------------------------------------------------------- */

/* Portrait cards, three to a row. Flex rather than grid so the last row, and any
   filtered tab with only one or two people, centres instead of hugging the left. */
.team-grid {
  --team-cols: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-6) var(--grid-gap);
}

/* A tab panel adds no box of its own, so "All" runs on as one list. */
.team-panel {
  display: contents;
}

.member {
  flex: 0 1 calc((100% - (var(--team-cols) - 1) * var(--grid-gap)) / var(--team-cols));
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-card);
  background: var(--ve-white);
  box-shadow: var(--shadow-rest);
  transition:
    box-shadow var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease);
}

.member:hover {
  border-color: var(--ve-cream-deep);
  box-shadow: var(--shadow-hover);
}

/* Arriving from a home-page card (team.html#name): the page's scroll-padding
   already clears the sticky header; mark the card so the eye finds it among ten. */
.member:target {
  scroll-margin-top: var(--sp-4);
  border-color: var(--ve-amber);
  box-shadow: 0 0 0 3px rgba(250, 171, 24, 0.35), var(--shadow-hover);
}

/* Four across only where the column is still wide enough to read a biography. */
@media (min-width: 1280px) { .team-grid { --team-cols: 4; } }
@media (max-width: 1023px) { .team-grid { --team-cols: 2; } }

@media (max-width: 639px) {
  .team-grid { --team-cols: 1; }
  .member { flex-basis: 100%; max-width: 420px; }
}

.member__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ve-cream);
}

/* An amber foot to the photograph ties the cards to the rest of the site. */
.member__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--ve-amber);
}

.member__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* the avatars carry their headroom at the top */
  transition: transform 0.6s var(--ease);
}

.member:hover .member__photo img {
  transform: scale(1.04);
}

.member__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}

.member__role {
  font-size: 12px;
  line-height: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ve-amber-dk);
}

.member__name {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
  color: var(--ve-charcoal);
}

.member__name::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-top: var(--sp-2);
  background: var(--ve-amber);
}

.member__bio {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ve-text-muted);
  margin-top: var(--sp-2);
}

/* Added by main.js, so a visitor without script still reads the whole biography. */
.member__bio.is-folded {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.member__more {
  align-self: flex-start;
  margin-top: auto;
  padding: var(--sp-3) 0 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--ve-amber-dk);
  cursor: pointer;
  transition: color var(--t-hover) var(--ease);
}

/* While one card is open its neighbours keep their own height instead of stretching to match.
   Where :has() is unsupported they simply stay level. */
.team-grid:has(.member__more[aria-expanded="true"]) {
  align-items: flex-start;
}

.member__more[hidden] {
  display: none;
}

.member__more::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-bottom: 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-hover) var(--ease);
}

.member__more[aria-expanded="true"]::after {
  margin-bottom: -3px;
  transform: rotate(-135deg);
}

.member__more:hover {
  color: var(--ve-charcoal);
}

/* --------------------------------------------------------------------------
   HOME — team strip (charcoal band: photograph, role and name only)
   -------------------------------------------------------------------------- */

.crew-grid {
  --crew-cols: 5;
  --crew-gap: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5) var(--crew-gap);
  margin-top: var(--sp-7);
  list-style: none;
  padding: 0;
}

.crew {
  flex: 0 1 calc((100% - (var(--crew-cols) - 1) * var(--crew-gap)) / var(--crew-cols));
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ve-rule-dark);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.04);
  transition:
    border-color var(--t-hover) var(--ease),
    background-color var(--t-hover) var(--ease);
}

.crew:hover,
.crew:focus-within {
  border-color: rgba(250, 171, 24, 0.55);
  background: rgba(255, 255, 255, 0.07);
}

/* The whole card is the link to that person on the Team page. */
.crew__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.crew__link:hover .crew__name,
.crew__link:focus-visible .crew__name {
  color: var(--ve-amber);
}

.crew__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.crew__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--ve-amber);
}

.crew__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s var(--ease);
}

.crew:hover .crew__photo img,
.crew:focus-within .crew__photo img {
  transform: scale(1.05);
}

.crew__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.crew__role {
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ve-amber);
}

.crew__name {
  font-size: 17px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--ve-white);
}

@media (max-width: 1099px) { .crew-grid { --crew-cols: 4; } }
@media (max-width: 767px)  { .crew-grid { --crew-cols: 3; --crew-gap: var(--sp-3); } }
@media (max-width: 559px)  {
  .crew-grid { --crew-cols: 2; }
  .crew__body { padding: var(--sp-3); }
  .crew__name { font-size: 15px; line-height: 21px; }
  .crew__role { font-size: 11px; letter-spacing: 0.04em; }
}

/* --------------------------------------------------------------------------
   HOME — video testimonials (YouTube Shorts as tall thumbnail cards)
   -------------------------------------------------------------------------- */

.vt-grid {
  --vt-cols: 4;
  --vt-gap: var(--sp-5);
  --vt-col: calc((100% - (var(--vt-cols) - 1) * var(--vt-gap)) / var(--vt-cols));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--vt-gap);
  margin-top: var(--sp-7);
  list-style: none;
  padding: 0;
}

.vt {
  flex: 0 1 var(--vt-col);
  max-width: 270px;
  min-width: 0;
}

/* A normal 16:9 video (anything that is not a Short) takes the width of two tall
   cards and keeps its own shape, so it is never cropped to a portrait strip. */
.vt--wide {
  flex-basis: calc(var(--vt-col) * 2 + var(--vt-gap));
  max-width: calc(270px * 2 + var(--sp-5));
}

.vt--wide .vt__card {
  aspect-ratio: 16 / 9;
}

.vt__card {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 12px;
  background: var(--ve-charcoal);
  box-shadow: var(--shadow-rest);
  color: var(--ve-white);
  text-decoration: none;
  transition: box-shadow var(--t-hover) var(--ease);
}

.vt__card:hover {
  box-shadow: var(--shadow-hover);
}

/* The thumbnail is 4:3 with the tall video in the middle; cover on a 9:16 box
   lands on exactly that middle. */
.vt__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.vt__card:hover .vt__thumb {
  transform: scale(1.04);
}

.vt__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(40, 31, 27, 0.9) 0%, rgba(40, 31, 27, 0) 55%);
  pointer-events: none;
}

.vt__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: var(--ve-amber);
  color: var(--ve-charcoal);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: transform var(--t-hover) var(--ease);
}

.vt__card:hover .vt__play {
  transform: scale(1.1);
}

.vt__meta {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4);
}

.vt__name {
  font-size: 17px;
  line-height: 24px;
  font-weight: var(--fw-bold);
}

.vt__role {
  font-size: 13px;
  line-height: 18px;
  color: var(--ve-on-dark-muted);
}

.vt__name:empty,
.vt__role:empty {
  display: none;
}

@media (max-width: 1023px) { .vt-grid { --vt-cols: 3; } }

/* On a phone the cards sit in one swipeable row, the next one peeking in. */
@media (max-width: 767px) {
  .vt-grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--sp-3);
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
  }

  .vt {
    flex: 0 0 62%;
    max-width: 240px;
    scroll-snap-align: start;
  }

  .vt--wide {
    flex-basis: 86%;
    max-width: 420px;
  }
}

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

@media (max-width: 1023px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
}

.contact-tiles {
  display: grid;
  /* minmax(0, 1fr), not 1fr — a grid item defaults to min-width:auto and will
     otherwise refuse to shrink below its longest unbreakable string. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}

.contact-tile {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-card);
  background: var(--ve-white);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-hover) var(--ease);
}

.contact-tile:hover {
  border-color: var(--ve-amber);
  color: inherit;
}

.contact-tile__icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-card);
  background: var(--ve-cream);
  color: var(--ve-amber-dk);
  display: grid;
  place-items: center;
}

.contact-tile__label {
  font-size: 13px;
  color: var(--ve-text-muted);
}

/* The text column beside the icon. Without min-width:0 an email address —
   one long unbreakable token — sets the tile's minimum width and pushes the
   whole page into a horizontal scrollbar on a 320px phone. */
.contact-tile > span:not(.contact-tile__icon) {
  min-width: 0;
}

.contact-tile__value {
  font-weight: var(--fw-semibold);
  color: var(--ve-charcoal);
  display: block;
  overflow-wrap: anywhere;
}

.map-holder {
  min-height: 420px;
  background: var(--ve-cream);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.map-holder iframe {
  border-radius: var(--radius-card);
}

.rush-line {
  background: var(--ve-amber);
  border-radius: var(--radius-card);
  padding: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.rush-line h3,
.rush-line p {
  color: var(--ve-charcoal);
}

/* --------------------------------------------------------------------------
   LEGAL PAGES
   Narrower measure for readability. Clause headings at H3.
   -------------------------------------------------------------------------- */

.legal {
  max-width: var(--measure);
}

.legal h2 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}

.legal h3 {
  font-size: var(--fs-body);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}

.legal p,
.legal li {
  color: var(--ve-text);
  max-width: none;
}

.legal ul {
  list-style: disc;
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.legal ol {
  list-style: decimal;
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.legal p + p {
  margin-top: var(--sp-3);
}

.legal__updated {
  display: inline-block;
  background: var(--ve-cream);
  border-radius: var(--radius-button);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-small);
  color: var(--ve-charcoal);
  margin-bottom: var(--sp-6);
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.notfound {
  text-align: center;
  padding-block: var(--sp-9);
}

.notfound img {
  margin: 0 auto var(--sp-6);
}

.notfound .cluster {
  justify-content: center;
  margin-top: var(--sp-6);
}

/* The dividers between the stat figures are cream-coloured, which is right on
   a cream band and all but invisible on a white one. */
.section:not(.section--cream) .stat-band > li + li {
  border-left-color: var(--ve-rule);
}