/*
  Project-owned stylesheet. Linked after the six vendor stylesheets so it wins
  on source order - public/assets/css/main.css stays byte-identical to the
  vendor file apart from the self-hosted Satoshi @font-face.

  Accent: green -> red.

  The template's global accent is --main-600, a lime green (hsl 78 68% 59%).
  index-8 - the variant this site is built from - recolours only its own page
  body markup to red by hand and leaves the chrome on the green ramp: nav
  active/hover, submenus, the offcanvas panel, the back-to-top button and the
  circle buttons are all styled from the stylesheet, where 116 rules reference
  var(--main-<n>) directly. None of those are reachable from component markup,
  so no class rename can reach them.

  Repointing the three palette primitives instead moves the whole
  --main-50 ... --main-900 ramp (each step is derived from them with calc()),
  and every reference - including the four bare hsl(var(--main)) call sites -
  follows. The value is index-8's own accent, --main-five: hsl(7 100% 54%).

  --main-two (hue 13) and the other --main-*-* families are deliberately
  untouched.
*/
:root {
  --main-h: 7;
  --main-s: 100%;
  --main-l: 54%;
}

/*
  One green survives the palette repoint because it is a literal rather than a
  var(--main-*) reference: the social-button chip background, hardcoded as
  #292d20 - hsl(78 17% 15%), i.e. the same 78deg green tinted down onto black.
  Rotate it onto the accent hue so the offcanvas, footer and team-member social
  buttons match. (main.css also hardcodes rgba(179,222,79,.471) on
  .service-details-button::before/::after, but that component is not used on
  this site, so those two rules are unreachable and left alone.)
*/
.footer-social a {
  background: hsl(7, 17%, 15%);
}

/*
  Video gallery thumbnails come from two sources - a manual upload or a
  YouTube fetch - and the vendor markup puts no sizing on <img> inside
  .gallery-four-thumb, so cards would otherwise render at whatever height
  each thumbnail's own ratio happens to produce. Benchmark is YouTube's
  maxresdefault (1280x720, 16:9) - see youtubeThumbnailUrl() in lib/cms.ts -
  so every card, regardless of source, is forced to the same ratio.
*/
.gallery-four-thumb img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}