/* =====================================================================
   components.css  ·  Material 3 components (built only from tokens)
   ===================================================================== */

/* =====================================================================
   TOP APP BAR  ·  injected by layout.js
   ===================================================================== */
.app-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;   /* no bar background — items are individual pills */
}
.app-bar__inner {
  position: relative;                 /* anchors the ::before glass layer */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  margin-top: 10px;
  padding: 6px 8px 6px 22px;          /* logo on the left, pills on the right */
  /* Apple-style liquid glass: translucent white tint + blurred, saturated
     backdrop, a top highlight + hairline border, and soft layered shadows.
     The tint + blur live on ::before (not the element) so .app-bar__inner is
     NOT a backdrop-root — that lets the nested dropdown blur the page too. */
  background: transparent;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,            /* inner top highlight */
    0 8px 24px rgba(0,0,0,.12),                    /* soft drop shadow     */
    0 2px 6px rgba(0,0,0,.08);
}
.app-bar__inner::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.7));
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.app-bar__inner > * { position: relative; z-index: 1; }  /* content above the glass layer */
/* Opaque fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .app-bar__inner::before { background: #ffffff; }
  .app-bar__inner { box-shadow: var(--md-sys-elevation-2); }
}
.app-bar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--md-sys-color-on-surface);
}
.app-bar__brand:hover { text-decoration: none; }
.app-bar__brand img { height: 19px; width: auto; }
.app-bar__wordmark { height: 19px; display: block; }

.app-bar__nav { display: flex; align-items: center; gap: 14px; }
.app-bar__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 116px;                          /* equal-width hit areas */
  padding: 10px 18px;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;                   /* unselected = no background */
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
  transition: color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.app-bar__nav a:hover { text-decoration: none; background: rgba(255,255,255,.72); }
.app-bar__nav a[aria-current="page"] {
  background: var(--md-sys-color-primary);   /* selected = dark green */
  color: #ffffff;
}

/* Nav dropdown group (Projects) */
.app-bar__group { position: relative; display: inline-flex; }
.app-bar__grouptoggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 116px;                          /* match the other pills */
  padding: 10px 18px;
  border: 0; cursor: pointer;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;                   /* unselected = no background */
  color: var(--md-sys-color-on-surface);
  font: inherit; font-weight: 500;
  transition: color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.app-bar__grouptoggle:hover { background: rgba(255,255,255,.72); }
.app-bar__group.is-active .app-bar__grouptoggle {
  background: var(--md-sys-color-primary);    /* selected = dark green */
  color: #ffffff;
}
.app-bar__dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%;
  min-width: 200px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  /* Liquid glass — mirrors the .app-bar__inner menu pill */
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.7));
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--md-sys-shape-corner-xl);  /* rounded to match the pill bar */
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 8px 24px rgba(0,0,0,.12),
    0 2px 6px rgba(0,0,0,.08);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .18s var(--md-sys-motion-easing-standard),
              transform .18s var(--md-sys-motion-easing-standard),
              visibility .18s;
  z-index: 120;
}
/* Invisible bridge across the gap so hover doesn't drop mid-travel */
.app-bar__dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
/* Opaque fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .app-bar__dropdown { background: #ffffff; box-shadow: var(--md-sys-elevation-2); }
}
.app-bar__group:hover .app-bar__dropdown,
.app-bar__group:focus-within .app-bar__dropdown,
.app-bar__group.is-open .app-bar__dropdown {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.app-bar__dropdown a {
  justify-content: flex-start;                      /* icon + label aligned left */
  gap: 10px;
  min-width: 0;
  padding: 11px 18px;
  border-radius: var(--md-sys-shape-corner-full);   /* pill shaped */
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.app-bar__dropicon { display: inline-flex; align-items: center; color: var(--md-sys-color-primary); }
/* Icons keep their size even when a badge crowds the row (flex would shrink them) */
.app-bar__dropicon, .app-bar__dropicon svg { flex: none; }
/* Small status label next to a dropdown item (e.g. "Beta") — light red pill */
.app-bar__badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--md-sys-shape-corner-full);
  background: rgba(255, 218, 214, 0.5);  /* light red (M3 error container) at 50% */
  color: #93000a;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.app-bar__dropdown a:hover { text-decoration: none; background: rgba(255,255,255,.72); }
.app-bar__dropdown a[aria-current="page"] {
  background: var(--md-sys-color-primary);   /* selected = dark green, like the top bar */
  color: #ffffff;
}
.app-bar__dropdown a[aria-current="page"] .app-bar__dropicon { color: #ffffff; }
/* On the selected (dark green) item the translucent badge would vanish — go solid white */
.app-bar__dropdown a[aria-current="page"] .app-bar__badge { background: #ffffff; }

.app-bar__menu-btn {
  display: none;
  width: 48px; height: 48px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  align-items: center; justify-content: center;
}
.app-bar__menu-btn:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }

/* Globe language switcher */
.app-bar__lang {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; cursor: pointer;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface);
  transition: color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.app-bar__lang:hover { background: rgba(255,255,255,.72); }

/* Globe ⇄ flag swap: resting state shows the globe; hover/focus reveals the
   circle flag of the language the button switches TO (same 22px footprint). */
.app-bar__lang-globe,
.app-bar__lang-flag { display: inline-flex; }
.app-bar__lang-globe svg,
.app-bar__lang-flag svg { display: block; }
.app-bar__lang-flag { display: none; }
.app-bar__lang:hover .app-bar__lang-globe,
.app-bar__lang:focus-visible .app-bar__lang-globe { display: none; }
.app-bar__lang:hover .app-bar__lang-flag,
.app-bar__lang:focus-visible .app-bar__lang-flag { display: inline-flex; }

/* Mobile drawer */
.nav-scrim {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--md-sys-color-scrim) 40%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
  /* Must stay BELOW the .app-bar stacking context (z-index:100) so the open
     drawer — which lives inside .app-bar — paints above the scrim and stays
     tappable. Higher than page content/FAB/top-glow (≤90) so it still dims them. */
  z-index: 99;
}
body.nav-open .nav-scrim { opacity: 1; visibility: visible; }

@media (max-width: 860px) {
  .app-bar__menu-btn { display: inline-flex; }
  .app-bar__nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(78vw, 320px);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 24px 16px;
    background: var(--md-sys-color-surface-container);
    box-shadow: var(--md-sys-elevation-3);
    transform: translateX(100%);
    transition: transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
    z-index: 210;
  }
  body.nav-open .app-bar__nav { transform: translateX(0); }
  /* Drawer panel is cream — flat links, dark text (no white pills here) */
  .app-bar__nav a { padding: 14px 20px; border-radius: var(--md-sys-shape-corner-full); background: transparent; box-shadow: none; color: var(--md-sys-color-on-surface-variant); justify-content: flex-start; min-width: 0; }
  .app-bar__nav a:hover { color: var(--md-sys-color-on-surface); background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); box-shadow: none; }
  .app-bar__nav a[aria-current="page"] { color: var(--md-sys-color-on-secondary-container); background: var(--md-sys-color-secondary-container); }

  /* Dropdown group expands inline in the drawer */
  .app-bar__group { flex-direction: column; align-items: stretch; }
  .app-bar__grouptoggle { justify-content: space-between; padding: 14px 20px; background: transparent; box-shadow: none; color: var(--md-sys-color-on-surface-variant); }
  .app-bar__grouptoggle:hover { color: var(--md-sys-color-on-surface); background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); box-shadow: none; }
  .app-bar__group.is-active .app-bar__grouptoggle { color: var(--md-sys-color-on-secondary-container); background: var(--md-sys-color-secondary-container); }
  .app-bar__dropdown {
    position: static; left: auto; opacity: 1; visibility: visible; transform: none;
    padding: 0 0 0 16px; margin-top: 2px;
    background: transparent; border: 0; box-shadow: none; min-width: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* keep the drawer dropdown flush-left (cancel the desktop centred transform) */
  .app-bar__group:hover .app-bar__dropdown,
  .app-bar__group:focus-within .app-bar__dropdown,
  .app-bar__group.is-open .app-bar__dropdown { transform: none; }
  /* drawer items align left, not centred */
  .app-bar__dropdown a { justify-content: flex-start; text-align: left; }
}

/* =====================================================================
   BUTTONS  (filled / tonal / outlined / text)  + state layer
   ===================================================================== */
.btn {
  --_bg: transparent;
  --_fg: var(--md-sys-color-primary);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 24px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--_bg);
  color: var(--_fg);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.007em;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.btn:hover { text-decoration: none; }
.btn::after {                              /* state layer */
  content: "";
  position: absolute; inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.btn:hover::after  { opacity: var(--md-sys-state-hover-opacity); }
.btn:focus-visible::after { opacity: var(--md-sys-state-focus-opacity); }
.btn:active::after { opacity: var(--md-sys-state-pressed-opacity); }

.btn--filled  { --_bg: var(--md-sys-color-primary); --_fg: var(--md-sys-color-on-primary); }
.btn--filled:hover { box-shadow: var(--md-sys-elevation-1); }
.btn--tonal   { --_bg: var(--md-sys-color-secondary-container); --_fg: var(--md-sys-color-on-secondary-container); }
.btn--outlined { --_fg: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); }
/* Frosted glass — for buttons over imagery/video (mirrors .eyebrow-pill) */
.btn--glass {
  --_fg: var(--md-sys-color-on-surface);          /* dark text, like the menu pills */
  background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.25));
  border: 1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 8px 24px rgba(0,0,0,.12),
    0 2px 6px rgba(0,0,0,.08);
}
.btn--glass:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 10px 28px rgba(0,0,0,.16),
    0 2px 6px rgba(0,0,0,.1);
}
.btn--text    { padding: 0 12px; }
.btn--large   { min-height: 56px; padding: 0 32px; font-size: 1rem; border-radius: var(--md-sys-shape-corner-lg); }

/* FAB */
.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 20px;
  border: none; cursor: pointer;
  border-radius: var(--md-sys-shape-corner-lg);
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  font-weight: 600;
  box-shadow: var(--md-sys-elevation-3);
  text-decoration: none;
}
.fab:hover { text-decoration: none; box-shadow: var(--md-sys-elevation-4); }

/* =====================================================================
   CARDS  (elevated / filled / outlined)
   ===================================================================== */
.card {
  position: relative;                              /* anchor for whole-card click */
  display: flex;
  flex-direction: column;
  border-radius: var(--md-sys-shape-corner-md);   /* M3 cards = medium (12px) */
  /* Unified style: offwhite (top) → white (bottom) gradient + soft elevation */
  background: var(--gradient-card);
  box-shadow: var(--md-sys-elevation-1);
  overflow: hidden;
  transition: box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),
              transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}
.card:hover { box-shadow: var(--md-sys-elevation-3); transform: translateY(-4px); }
/* All cards now share one look; these modifiers are kept as aliases. */
.card--elevated { box-shadow: var(--md-sys-elevation-1); }
.card--outlined { border: 1px solid var(--md-sys-color-outline-variant); }

/* Whole card is clickable when it carries a primary action link */
.card--clickable { cursor: pointer; }

/* Image fills the whole card; a frosted scrim fades in from the bottom
   (transparent at top → blurry white at bottom) so the text stays readable.
   Gated on :has(.card__media) so image-less cards (stats, CTAs) keep their
   normal look even inside a .cards--glass grid. */
.cards--glass .card:has(.card__media) {
  position: relative;
  aspect-ratio: 16 / 13;                            /* defines the card's footprint */
}
/* Portrait variant — tall cards for narrow multi-column rows (e.g. services) */
.cards--portrait .card:has(.card__media) { aspect-ratio: 9 / 16; }
.cards--portrait .card__actions { justify-content: center; }
/* Narrow 5-up cards: keep labels on one line and slim the button padding */
.cards--portrait .card__actions .btn { white-space: nowrap; padding: 0 12px; }
/* Button-only bodies need far less frosted scrim than title + text */
.cards--portrait .card:has(.card__media):has(.card__actions)::after { height: 34%; }
.card__actions .btn svg { flex: none; }
@media (max-width: 560px) {
  /* single column on phones: full-width portrait would be huge */
  .cards--portrait .card:has(.card__media) { aspect-ratio: 16 / 13; }
}
.cards--glass .card:has(.card__media) .card__media {
  width: 100%; height: 100%; position: absolute; inset: 0; z-index: 0;
  aspect-ratio: auto;
}
/* Frosted gradient scrim behind the text — white tint, stronger toward the bottom */
.cards--glass .card:has(.card__media)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: 1;
  background: linear-gradient(to bottom,
      rgba(255,255,255,0)    0%,
      rgba(255,255,255,.04) 40%,
      rgba(255,255,255,.18) 70%,
      rgba(255,255,255,.45) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  /* fade the blur in gradually from the top so there's no hard edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 45%, #000 80%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 45%, #000 80%);
  pointer-events: none;
}
/* Cards that carry chips + a button need more frosted area to cover the taller body */
.cards--glass .card:has(.card__media):has(.card__actions)::after { height: 72%; }
.cards--glass .card:has(.card__media) .card__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;   /* content over the scrim */
  padding: 16px;
}
.cards--glass .card:has(.card__media) .card__title,
.cards--glass .card:has(.card__media) .card__text {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
}

/* Category tags — icon-only circular badges, stacked in the top-right corner */
.cards--glass .card__tags {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: flex; gap: 6px;
}
.cards--glass .card__tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;        /* circle */
  background: var(--md-sys-color-primary);              /* deep green */
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;                                          /* white icon */
}
.cards--glass .card__tag .tag-ico { width: 16px; height: 16px; flex: none; }
.filter-bar .tag-ico { width: 16px; height: 16px; flex: none; }

/* Opaque fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cards--glass .card:has(.card__media)::after {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 70%);
  }
  .cards--glass .card__tag { background: #013c33; }
}

/* Filter chips (portfolio) — pill shape; deep green when selected, white/grey when not */
.filter-bar .chip {
  border-radius: 999px;
  background: var(--md-sys-color-surface-variant);     /* light grey when deselected */
  color: var(--md-sys-color-on-surface-variant);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.filter-bar .chip[aria-pressed="true"] {
  background: var(--md-sys-color-primary);             /* deep green when selected */
  color: var(--md-sys-color-on-primary);
  border-color: transparent;
}

/* Glass cards on dark-green sections */
.section--dark .card {
  background: color-mix(in srgb, #ffffff 8%, transparent);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
}
.section--dark .card__title { color: #fff; }
.section--dark .card__text  { color: rgba(255,255,255,.82); }
.section--dark .card__meta  { color: rgba(255,255,255,.7); }

.card__media {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  background: var(--md-sys-color-surface-variant);
}
.card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__title { font-family: var(--font-brand); font-weight: 500; font-size: calc(1.25rem * var(--title-scale)); color: var(--md-sys-color-on-surface); }
.card__text  { color: var(--md-sys-color-on-surface-variant); font-size: 0.9375rem; }
.card__price { color: var(--md-sys-color-primary); font-weight: 700; font-size: 1.25rem; }
.card__actions { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Card call-to-action buttons read as solid dark-green filled buttons */
.card__actions .btn--text {
  --_bg: var(--md-sys-color-primary);
  --_fg: var(--md-sys-color-on-primary);
  padding: 0 24px;
}
.card__actions .btn--text:hover { box-shadow: var(--md-sys-elevation-1); }
.card__meta { color: var(--md-sys-color-on-surface-variant); font-size: 0.8125rem; }

/* =====================================================================
   CHIPS
   ===================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border-radius: var(--md-sys-shape-corner-sm);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.8125rem; font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.chip:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.chip[aria-pressed="true"], .chip--selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Checkbox chips (contact form services) — real checkboxes styled like the
   portfolio filter pills: grey when idle, deep green when selected */
.chip--checkbox {
  position: relative;
  border-radius: 999px;
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  font: inherit;
}
.chip--checkbox:has(input:checked) {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-color: transparent;
}
.chip--checkbox .tag-ico { width: 16px; height: 16px; flex: none; }
.chip--checkbox:has(input:focus-visible) {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

/* Filter bar (portfolio) — multi-select chips that show/hide cards */
.filter-bar { margin-bottom: clamp(24px, 4vw, 40px); }
.filter-bar .chip { font: inherit; }
.card.is-hidden { display: none; }

/* =====================================================================
   POINT LIST  ·  checkmark bullets (used on the dark About band)
   ===================================================================== */
.point-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.point-list li {
  position: relative;
  padding-left: 38px;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.point-list li::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
}
.point-list li::after {
  content: "";
  position: absolute; left: 7px; top: 6px;
  width: 10px; height: 6px;
  border-left: 2.5px solid var(--md-sys-color-on-primary-container);
  border-bottom: 2.5px solid var(--md-sys-color-on-primary-container);
  transform: rotate(-45deg);
}

/* =====================================================================
   WORK MOSAIC  ·  bento grid of portfolio cards (home) — one large
   featured tile, wide and square tiles around it
   ===================================================================== */
/* The mosaic is a single <a> to portfolio.html — image-only tiles, no per-card
   text, buttons, or hover effects. */
.work-mosaic {
  position: relative;                    /* anchor for the bottom fade overlay */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(180px, 21vw, 250px);
  gap: 20px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
/* "View full portfolio" — a deep-green fade rising from the bottom of the
   grid (solid at the base, transparent on top), with the button floating on it */
.work-mosaic__more {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  height: clamp(220px, 60%, 380px);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: clamp(28px, 4vw, 44px);
  background: linear-gradient(to top,
      var(--md-sys-color-primary) 0%,
      color-mix(in srgb, var(--md-sys-color-primary) 80%, transparent) 40%,
      color-mix(in srgb, var(--md-sys-color-primary) 35%, transparent) 72%,
      transparent 100%);
  border-bottom-left-radius: var(--md-sys-shape-corner-md);
  border-bottom-right-radius: var(--md-sys-shape-corner-md);
  pointer-events: none;                  /* clicks pass through to the mosaic link */
}
.work-mosaic__more .btn {
  --_bg: var(--md-sys-color-on-primary); /* white button reads on the green fade */
  --_fg: var(--md-sys-color-primary);
}
.work-mosaic__featured { grid-column: span 2; grid-row: span 2; }
.work-mosaic__wide     { grid-column: span 2; }
/* Grid rows define tile heights — drop the fixed glass-card aspect ratio */
.work-mosaic .card:has(.card__media) { aspect-ratio: auto; }
/* Tiles are not individually interactive: no lift, no shadow, no zoom,
   and no frosted text scrim — just the images under the green fade.
   (:has() matches the scrim rule's specificity, which otherwise wins) */
.work-mosaic .card,
.work-mosaic .card:hover { transform: none; box-shadow: none; }
.work-mosaic .card:has(.card__media)::after { content: none; }

@media (max-width: 920px) {
  .work-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(160px, 26vw, 220px); }
}
@media (max-width: 560px) {
  .work-mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .work-mosaic__featured, .work-mosaic__wide { grid-column: auto; grid-row: auto; }
  .work-mosaic .card:has(.card__media) { aspect-ratio: 16 / 11; }
}

/* =====================================================================
   SPLAT HERO  ·  full-bleed Gaussian-splat viewer with overlay content
   ===================================================================== */
.hero-splat {
  position: relative;
  min-height: 100dvh;          /* fill the screen (header overlays it) */
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--md-sys-color-on-surface);
  background: #eceef0;         /* light studio base (behind the gradient layer) */
}
/* Gradient backdrop — the splat viewer renders transparently over this. */
.hero-splat__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--gradient-hero-splat);
}
/* Viewer mount: the renderer's <canvas> is appended here and fills it.
   Shifted to the RIGHT so the splat sits in the right portion and the left
   stays clear for the text. (The Viewer sizes itself to this element, so the
   camera aspect follows automatically.) Full-width on mobile (see media query). */
.hero-splat__canvas {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  left: clamp(0px, 38vw, 540px);
  transform: translateX(48px);   /* nudge the splat right (paired with the text shift) */
  z-index: -2;
}
.hero-splat__canvas canvas { display: block; }
.hero-splat__canvas.is-loading { opacity: .6; transition: opacity .3s; }
/* M3 circular progress (indeterminate) — deep-green arc, spec motion:
   container spins at 1568ms linear while the arc grows/shrinks at 1333ms.
   Visible only while the viewer flags the mount with .is-loading. */
.hero-splat__progress {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s;
  pointer-events: none;
}
.hero-splat__canvas.is-loading .hero-splat__progress { opacity: 1; visibility: visible; }
.hero-splat__progress svg {
  width: 48px; height: 48px;
  animation: m3-progress-rotate 1568ms linear infinite;
}
.hero-splat__progress circle {
  fill: none;
  stroke: var(--md-sys-color-primary);     /* deep green */
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 113.1;                  /* circumference, r=18 */
  transform-origin: center;
  animation: m3-progress-arc 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes m3-progress-rotate { to { transform: rotate(360deg); } }
@keyframes m3-progress-arc {
  0%   { stroke-dashoffset: 107; transform: rotate(0deg); }
  50%  { stroke-dashoffset: 31;  transform: rotate(90deg); }
  100% { stroke-dashoffset: 107; transform: rotate(360deg); }
}
/* Render slide: the splat canvas hides and this full-bleed video shows instead.
   The iframe is oversized to cover the hero at 16:9 whatever the viewport
   shape; pointer-events off keeps it a pure background. */
.hero-splat__canvas.is-video { visibility: hidden; }
.hero-splat__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-splat__video iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: max(100%, 177.78vh);   /* 16/9 × height — covers tall viewports */
  height: max(100%, 56.25vw);   /* 9/16 × width — covers wide viewports */
  transform: translate(-50%, -50%);
  border: 0;
}
/* No-WebGL / reduced-motion fallback — poster behind the same overlay copy. */
.hero-splat__canvas.hero-splat--fallback {
  background: url("../img/hero-reel.jpg") center / cover no-repeat;
}
/* No dark top scrim on the light studio — the glass menu reads fine on white. */
.hero-splat__topfade { display: none; }
/* Content pinned to the bottom; nav pushed to the right. The open upper area
   stays clear for the splat (and for dragging to rotate it). */
.hero-splat__inner {
  width: 100%;
  padding-block: clamp(40px, 8vw, 84px) clamp(120px, 20vh, 220px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 56px);
  flex-wrap: wrap;
  /* Let drag-to-rotate pass THROUGH the overlay to the splat behind it.
     Interactive children re-enable pointer events below so they still work. */
  pointer-events: none;
}
.hero-splat__inner a,
.hero-splat__inner button { pointer-events: auto; }
.hero-splat__left { max-width: 600px; margin-left: -48px; }  /* nudge text left */
.hero-splat__left .eyebrow-pill { margin-bottom: 16px; }
/* Midpoint between display-xl (2.8–5rem) and the page-hero size (2–3.2rem) */
.hero-splat h1 {
  color: var(--brand-primary);
  margin-top: 4px;
  font-size: calc(clamp(2.4rem, 5.75vw, 4.1rem) * var(--title-scale));
}
.hero-splat p {
  color: var(--md-sys-color-on-surface-variant);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  margin-top: 18px;
  max-width: 46ch;
}
.hero-splat__actions { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }
/* Hero CTAs are fully pill-shaped (override btn--large's softer corner) */
.hero-splat__actions .btn { border-radius: var(--md-sys-shape-corner-full); }

/* Nav generates no box — the arrows and dots are positioned individually
   relative to the hero. */
.hero-splat__nav { display: contents; }
/* Prev / next arrows — vertically centred on the hero's left & right edges. */
.hero-splat__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex: none;
  cursor: pointer; color: var(--brand-primary);
  border-radius: var(--md-sys-shape-corner-full);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 20px rgba(0,0,0,.12);
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
[data-hero-prev] { left: clamp(12px, 3vw, 44px); }
[data-hero-next] { right: clamp(12px, 3vw, 44px); }
.hero-splat__arrow:hover { background: rgba(255,255,255,.95); }
.hero-splat__arrow:active { transform: translateY(-50%) scale(.92); }
/* Slide dots — bottom centre. */
.hero-splat__dots {
  position: absolute;
  left: 50%;
  bottom: clamp(76px, 12vh, 128px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex; align-items: center; gap: 10px;
}
.hero-splat__dot {
  width: 9px; height: 9px; padding: 0; flex: none;
  border: 0; cursor: pointer; border-radius: 50%;
  background: rgba(0,0,0,.22);
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.hero-splat__dot:hover { background: rgba(0,0,0,.4); }
.hero-splat__dot[aria-current="true"] { background: var(--brand-primary); transform: scale(1.4); }

@media (max-width: 760px) {
  .hero-splat__inner { flex-direction: column; align-items: flex-start; }
  .hero-splat__canvas { left: 0; transform: none; }   /* full-width splat on small screens */
  .hero-splat__left { margin-left: 0; }               /* no shift on mobile */
  .hero-splat__arrow { width: 44px; height: 44px; }
}

/* Pill eyebrow (frosted) for use on imagery/video */
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: var(--md-sys-shape-corner-full);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  color: #fff; font-weight: 600; font-size: .8125rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.eyebrow-pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--md-sys-color-primary-container);
}
/* Light variant for heroes on the white page */
.eyebrow-pill--solid {
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
  backdrop-filter: none;
  color: var(--brand-primary);
}
.eyebrow-pill--solid::before { background: var(--brand-primary); }
/* Icon variant — replaces the leading dot with a per-category icon. */
.eyebrow-pill--icon::before { display: none; }
.hero-splat__service-icon { display: inline-flex; align-items: center; color: currentColor; }
.hero-splat__service-icon svg { width: 15px; height: 15px; display: block; }
/* Inside the hero CTA button the icon scales up to match the button text */
.hero-splat__actions .hero-splat__service-icon svg { width: 19px; height: 19px; }

/* Scroll cue — deep-green chevron that smooth-scrolls to the next section */
.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 1; color: var(--brand-primary);
  display: block; line-height: 0;
  animation: scrollbob 1.8s var(--md-sys-motion-easing-standard) infinite;
}
.scroll-cue:hover { color: color-mix(in srgb, var(--brand-primary) 80%, #000); }
@keyframes scrollbob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* =====================================================================
   APP HERO  ·  full-bleed, frameless embed of the Evolume viewer
   ===================================================================== */
.app-hero {
  width: 100%;
  background: var(--md-sys-color-surface-container);
}
.app-hero__frame {
  display: block;
  width: 100%;
  height: min(86vh, 820px);
  border: 0;
}

/* Viewer page: fill the viewport below the (fixed) app bar, no page scroll */
/* Viewer fills the whole screen; the floating menu pill overlays its top. */
.page-viewer { height: 100dvh; overflow: hidden; }
.page-viewer .app-hero,
.page-viewer .app-hero__frame { height: 100dvh; }

/* The app bar is fixed (overlays the hero). Non-hero first sections need
   top clearance so their content isn't hidden behind it. The video/app
   heroes are full-bleed and intentionally sit under the transparent bar. */
main > .section:first-child { padding-top: calc(72px + clamp(20px, 5vw, 48px)); }
section[id] { scroll-margin-top: 80px; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  background:
    var(--gradient-hero-scrim),
    var(--md-sys-color-surface-variant);
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hero__inner { padding-block: clamp(80px, 16vw, 180px); max-width: 720px; }
.hero h1 { color: #fff; }
.hero p { color: rgba(255,255,255,.9); font-size: 1.125rem; margin-top: 16px; max-width: 56ch; }
.hero__actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* =====================================================================
   TEXT FIELDS  (M3 outlined)
   ===================================================================== */
.field { position: relative; display: flex; flex-direction: column; }
.field > label {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 6px;
}
.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-xs);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) { border-color: var(--md-sys-color-error); }
.field__error { color: var(--md-sys-color-error); font-size: 0.8125rem; margin-top: 6px; min-height: 1em; }

/* Two-step form (contact page) — the second step is a quiet optional follow-up */
.form-step__note {
  font-weight: 500;
  color: var(--md-sys-color-primary);
}
.form-optional { font-weight: 400; color: var(--md-sys-color-on-surface-variant); }

/* Map card (contact page) — live map fills the card; the whole card is a
   link to Google Maps, so the iframe is decorative and ignores the mouse */
.map-card { overflow: hidden; min-height: clamp(280px, 32vw, 380px); }
.map-card__map {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  pointer-events: none;     /* decorative — the stretched link handles clicks */
}
/* Stretched link: the whole map area opens Google Maps in a new tab */
.map-card__link { position: absolute; inset: 0; z-index: 1; }
/* Deep-green fade rising from the bottom — same treatment as the
   "View full portfolio" overlay on the home mosaic. Address sits left,
   contact info right; only the tel/mail links catch the mouse, the rest
   of the strip stays clickable as map. */
.map-card__info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap;
  padding: clamp(48px, 9vw, 80px) 22px 18px;   /* tall top padding = the fade run-up */
  background: linear-gradient(to top,
      var(--md-sys-color-primary) 0%,
      color-mix(in srgb, var(--md-sys-color-primary) 72%, transparent) 38%,
      color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent) 60%,
      color-mix(in srgb, var(--md-sys-color-primary) 18%, transparent) 78%,
      color-mix(in srgb, var(--md-sys-color-primary) 6%, transparent) 90%,
      transparent 100%);
  pointer-events: none;
}
.map-card__info a { pointer-events: auto; }
.map-card__contact { text-align: right; }
.map-card__info .card__title { color: var(--md-sys-color-on-primary); }
.map-card__info .card__text,
.map-card__info .card__text a { color: color-mix(in srgb, var(--md-sys-color-on-primary) 88%, transparent); }
.map-card__info .card__text a:hover { color: var(--md-sys-color-on-primary); }

/* Side-by-side field pairs; single column on narrow screens */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  align-items: start;
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}

/* Field group (fieldset of checkbox chips, e.g. contact form services) */
.field--group { border: 0; padding: 0; margin: 0; min-width: 0; }
.field--group > legend {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 6px; padding: 0;
}
.field--group .chip--checkbox input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; border: 0;
  opacity: 0;
  pointer-events: none;
}

/* =====================================================================
   IFRAME / EMBED  (Evolume viewer)
   ===================================================================== */
.embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--md-sys-shape-corner-lg);
  overflow: hidden;
  box-shadow: var(--md-sys-elevation-2);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container);
}
.embed iframe { width: 100%; height: 100%; border: 0; }
.embed__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--md-sys-color-surface-container-high);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.embed__bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--md-sys-color-outline); }
.embed__bar .url { margin-left: 8px; font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }

/* =====================================================================
   CTA BAND
   ===================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-xl);
  padding: clamp(32px, 6vw, 64px);
  text-align: center;
}
/* Camera-tracker marks (assets/svg) tiled as a slightly darker texture —
   shared by every deep-green surface (.cta-band and .section--dark). */
.cta-band::before,
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../svg/cta-pattern.svg");
  background-repeat: repeat;
  background-size: 640px 640px;
  opacity: 0.15;
  pointer-events: none;
}
.cta-band > *,
.section--dark > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--md-sys-color-on-primary); }
.cta-band p { color: color-mix(in srgb, var(--md-sys-color-on-primary) 88%, transparent); margin: 12px auto 28px; max-width: 50ch; }

/* Light CTA band — gradient fading to white (home page bottom) */
.cta-band--light {
  background: var(--gradient-cta-light);
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface);
}
.cta-band--light h2 { color: var(--brand-primary); }
.cta-band--light p  { color: var(--md-sys-color-on-surface-variant); }
.cta-band--light::before { display: none; }

/* =====================================================================
   TRUSTED-BY LOGO STRIP  ·  client/partner logos, recolored to one ink
   ---------------------------------------------------------------------
   Logos are masked (not <img>) so wildly different source colours/brightness
   all render as a single muted ink — uniform, premium "logo wall" look. They
   tint to brand green on hover. Swap a logo by editing its --logo url.
   ===================================================================== */
.trustbar { padding-block: clamp(44px, 7vw, 80px); }
.trustbar__label {
  text-align: center;
  color: color-mix(in srgb, var(--md-sys-color-on-primary) 72%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.trustbar__logos {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: clamp(24px, 3.5vw, 48px);
}
.trustbar__logo {
  display: block;
  width: clamp(120px, 13vw, 172px);
  height: clamp(60px, 7vw, 84px);
  object-fit: contain;
  /* Desaturated by default, full brand colour on hover. brightness lifts the
     greys so they read on the deep-green background. */
  filter: grayscale(1) brightness(1.7);
  opacity: 0.9;
  transition: filter var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),
              opacity var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}
.trustbar__logos li:hover .trustbar__logo {
  filter: none;
  opacity: 1;
}

/* =====================================================================
   STATS
   ===================================================================== */
.stat { text-align: center; }
.stat__num { font-family: var(--font-brand); font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); color: var(--md-sys-color-primary); }
.stat__label { color: var(--md-sys-color-on-surface-variant); font-weight: 500; }

/* =====================================================================
   FOOTER  ·  injected by layout.js
   ===================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
  padding-block: clamp(40px, 6vw, 72px) 24px;
  margin-top: 64px;
}
/* Same camera-tracker texture as the deep-green surfaces, but used as a MASK
   that paints a colour slightly darker than the footer bg (the SVG's own dark
   fill is irrelevant when it drives a mask). */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e0ded7;
  -webkit-mask-image: url("../svg/cta-pattern.svg");
          mask-image: url("../svg/cta-pattern.svg");
  -webkit-mask-size: 320px 320px;
          mask-size: 320px 320px;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  opacity: 0.25;
  pointer-events: none;
}
.footer > * { position: relative; z-index: 1; }
.footer__grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 2fr 1fr;   /* brand + the single Contact column */
}
.footer__brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-brand); font-weight: 600; font-size: 1.25rem; color: var(--md-sys-color-on-surface); }
.footer__brand img { height: 28px; width: auto; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.footer__social a:hover {
  background: var(--md-sys-color-primary);
  border-color: transparent;
  color: var(--md-sys-color-on-primary);
}
.footer h4 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--md-sys-color-on-surface); margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { color: var(--md-sys-color-on-surface-variant); }
.footer a:hover { color: var(--md-sys-color-primary); }
/* Social hover: green circle with a WHITE icon. Must come after the generic
   .footer a:hover above, which otherwise paints the icon green too and makes
   it vanish into the green circle. */
.footer .footer__social a:hover {
  background: var(--md-sys-color-primary);
  border-color: transparent;
  color: var(--md-sys-color-on-primary);
}
.footer__bottom {
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 0.8125rem;
}
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   VIDEO LIGHTBOX  ·  cards with data-video open an embedded YouTube player
   ===================================================================== */
/* Centered play badge signals the card opens a video */
.cards--glass .card[data-video],
.cards--glass .card[data-href],
.cards--glass .card[data-gallery] { cursor: pointer; }
.cards--glass .card[data-video]::before,
.cards--glass .card[data-href]::before,
.cards--glass .card[data-gallery]::before {
  content: "";
  position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E")
    center / 26px no-repeat,
    rgba(1, 60, 51, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.cards--glass .card[data-video]:hover::before,
.cards--glass .card[data-video]:focus-visible::before,
.cards--glass .card[data-href]:hover::before,
.cards--glass .card[data-href]:focus-visible::before,
.cards--glass .card[data-gallery]:hover::before,
.cards--glass .card[data-gallery]:focus-visible::before {
  transform: translate(-50%, -50%) scale(1.1);
  background-color: var(--md-sys-color-primary);
}
/* Link cards (data-href) swap the play triangle for a launch arrow */
.cards--glass .card[data-href]::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
}
/* Gallery cards (data-gallery) show a photos icon */
.cards--glass .card[data-gallery]::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}

.video-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.video-lightbox__frame {
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: var(--md-sys-shape-corner-large, 16px);
  overflow: hidden;
  box-shadow: var(--md-sys-elevation-3, 0 12px 40px rgba(0, 0, 0, 0.5));
  background: #000;
}
.video-lightbox__frame iframe {
  display: block;
  width: 100%; height: 100%;
  border: 0;
}
.video-lightbox__frame img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}
.video-lightbox__nav {
  display: none;
  position: absolute; top: 50%;
  transform: translateY(-50%);
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.video-lightbox--gallery .video-lightbox__nav { display: inline-flex; }
.video-lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }
.video-lightbox__nav svg { width: 24px; height: 24px; }
.video-lightbox__nav--prev { left: 16px; }
.video-lightbox__nav--next { right: 16px; }

/* =====================================================================
   HOVER-REVEAL CARDS  ·  title/text hidden until hover (or keyboard focus);
   a deep green gradient fades in from the bottom instead of the frosted scrim
   ===================================================================== */
.cards--hover-reveal .card:has(.card__media)::after {
  height: 60%;
  background: linear-gradient(to bottom,
      rgba(1, 60, 51, 0)    0%,
      rgba(1, 60, 51, 0.35) 45%,
      rgba(1, 60, 51, 0.88) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.cards--hover-reveal .card:has(.card__media) .card__body {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.cards--hover-reveal .card:has(.card__media):hover::after,
.cards--hover-reveal .card:has(.card__media):focus-within::after,
.cards--hover-reveal .card:has(.card__media):focus-visible::after { opacity: 1; }
.cards--hover-reveal .card:has(.card__media):hover .card__body,
.cards--hover-reveal .card:has(.card__media):focus-within .card__body,
.cards--hover-reveal .card:has(.card__media):focus-visible .card__body {
  opacity: 1;
  transform: translateY(0);
}
/* Touch screens have no hover: keep the info always visible there */
@media (hover: none) {
  .cards--hover-reveal .card:has(.card__media)::after,
  .cards--hover-reveal .card:has(.card__media) .card__body {
    opacity: 1;
    transform: none;
  }
}
.video-lightbox__close {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.video-lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }
.video-lightbox__close svg { width: 22px; height: 22px; }