/* ==========================================================================
   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 {
  /* Sits above the poster once it has frames to show. Until main.js attaches
     a source it is an empty element and the poster shows through. */
  z-index: 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: 18ch;
  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 is never even fetched at this width — see main.js. The poster
     element stays: <picture> has already swapped it to the portrait frame. */
  .hero__video { display: none; }
  .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 tender board 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;
  background: rgba(40, 31, 27, 0.32);
  transition: background-color var(--t-hover) var(--ease);
}

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

.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);
}

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

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

.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)); }
}

/*
  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;
  }

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

  /* 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 — 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 — tender notice board

   Rows, not a four-card grid. The number of open tenders is whatever the data
   file happens to hold, and a four-column grid holding two cards reads as a
   page with something missing; a list of rows is complete at any length. It
   also matches how the same information is posted on an actual notice board.
   Rows are written by ticker.js.
   -------------------------------------------------------------------------- */

.tender-board {
  background: var(--ve-white);
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.tender-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-5);
  border-left: 3px solid var(--ve-amber);
  transition: background-color var(--t-hover) var(--ease);
}

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

.tender-row:hover {
  background: rgba(248, 230, 197, 0.35);
}

.tender-row__top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.tender-row h3 {
  font-size: var(--fs-body);
  line-height: 1.5;
}

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

.tender-row__closing {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ve-charcoal);
}

.tender-row__closing .icon {
  color: var(--ve-amber-dk);
}

/* Seven days or fewer switches to the amber fill. Charcoal on amber, never
   amber text on a light surface. */
.tender-row__days {
  padding: 3px 10px;
  border-radius: var(--radius-button);
  background: var(--ve-cream);
  color: var(--ve-charcoal);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.tender-row__days.is-soon {
  background: var(--ve-amber);
}

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

/* --------------------------------------------------------------------------
   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;
}

/* --------------------------------------------------------------------------
   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); }
}

/* Horizontal on desktop, vertical on mobile. */
.timeline {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  padding-bottom: var(--sp-5);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.timeline__item {
  flex: 0 0 300px;
  scroll-snap-align: start;
  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 img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  margin-top: var(--sp-3);
}

.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: 767px) {
  .timeline {
    flex-direction: column;
    overflow-x: visible;
  }
  .timeline__item { flex: 1 1 auto; }
}

.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);
}

/* --------------------------------------------------------------------------
   TENDERS & 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); } }

.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);
}

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

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

.cert-card {
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ve-white);
}

.cert-card img {
  width: 100%;
  height: auto;
}

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

.cert-card__name {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--ve-charcoal);
}

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

.award-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--ve-rule);
}

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

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

.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);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-hover) var(--ease);
}

.download-card:hover {
  border-color: var(--ve-amber);
  color: inherit;
}

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

/* Placeholder notice — used wherever a client asset has not yet arrived, so
   nothing on this page can be mistaken for a genuine document. */
.awaiting {
  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;
}

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

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

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

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

.member {
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ve-white);
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.member img {
  width: 100%;
  height: auto;
}

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

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

.member__role {
  font-size: var(--fs-small);
  color: var(--ve-amber-dk);
  font-weight: var(--fw-semibold);
}

/* Inline biography expansion with a smooth height transition. */
.member__bio {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-reveal) var(--ease);
}

.member__bio > div {
  overflow: hidden;
}

.member.is-open .member__bio {
  grid-template-rows: 1fr;
}

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

.member__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--ve-amber-dk);
  margin-top: var(--sp-2);
}

.member.is-open .member__toggle .icon {
  transform: rotate(180deg);
}

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

.district-map {
  max-width: 800px;
  margin-inline: auto;
}

.district-map img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   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);
}