/* ==========================================================================
   GB FAM — components & sections (BEM-ish `gb-*`), on top of tokens.css.
   D-022: black & white design in the Bang Bang direction — photo-led,
   centered lockup, letterspaced caps, ruled "ledger" details.
   Load order: bootstrap.min.css → fonts.css → tokens.css → main.css.
   Only brand colours: var(--gb-*) or rgba() of palette bases (check-colors).
   ========================================================================== */

:root {
  --gb-header-h: 4.25rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--gb-header-h) + 0.5rem);
}
html.lenis, html.lenis body { height: auto; } /* Lenis smooth wheel scrolling */
body {
  font-family: var(--gb-font-text);
  background-color: var(--gb-bg);
  color: var(--gb-fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 991.98px) {
  body { padding-bottom: 3.5rem; } /* room for the sticky CTA bar */
}
::selection {
  background-color: var(--gb-white);
  color: var(--gb-black);
}
:focus-visible {
  outline: 2px solid var(--gb-focus);
  outline-offset: 2px;
  border-radius: var(--gb-radius);
}
h1, h2, h3, h4 {
  font-family: var(--gb-font-display);
  font-weight: 700;
  line-height: var(--gb-leading-tight);
  color: var(--gb-fg); /* resolve per element, not via --bs-heading-color */
}
a {
  color: var(--gb-fg);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--gb-white); }
img, svg { vertical-align: middle; }
img { filter: grayscale(1); } /* B&W discipline for every photo (D-022) */

.gb-container {
  width: 100%;
  max-width: var(--gb-container);
  margin-inline: auto;
  padding-inline: var(--gb-gutter);
}

/* Letterspaced caps "data" label (the Bang Bang mono voice, set in Manrope) */
.gb-label {
  font-family: var(--gb-font-text);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Skip link */
.gb-skip {
  position: fixed;
  top: -4rem;
  left: var(--gb-gutter);
  z-index: 1090;
  padding: 0.75rem 1.25rem;
  background-color: var(--gb-white);
  color: var(--gb-black);
  font-family: var(--gb-font-display);
  font-size: var(--gb-step--1);
  text-decoration: none;
  transition: top var(--gb-dur) var(--gb-ease);
}
.gb-skip:focus-visible { top: 0.75rem; color: var(--gb-black); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.gb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.7rem 1.9rem;
  border: 1px solid var(--gb-white);
  border-radius: var(--gb-radius);
  background: transparent;
  font-family: var(--gb-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gb-white);
  cursor: pointer;
  transition: background-color var(--gb-dur) var(--gb-ease),
              color var(--gb-dur) var(--gb-ease),
              border-color var(--gb-dur) var(--gb-ease);
}
.gb-btn:hover { background-color: var(--gb-grey-100); color: var(--gb-black); }
.gb-btn--primary { background-color: var(--gb-cta-bg); color: var(--gb-cta-fg); }
.gb-btn--primary:hover { background-color: var(--gb-cta-bg-hover); color: var(--gb-cta-fg); }
.gb-btn--ghost { border-color: var(--gb-line); color: var(--gb-fg); }
.gb-btn--ghost:hover { border-color: var(--gb-fg); background: transparent; color: var(--gb-white); }

/* Bang Bang boxed text button (underlined label in a box) */
.gb-boxbtn {
  display: inline-block;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--gb-fg);
  font-family: var(--gb-font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gb-fg);
  transition: background-color var(--gb-dur) var(--gb-ease), color var(--gb-dur) var(--gb-ease);
}
.gb-boxbtn span { border-bottom: 1px solid currentColor; padding-bottom: 0.15rem; }
.gb-boxbtn:hover { background-color: var(--gb-white); color: var(--gb-black); }

/* --------------------------------------------------------------------------
   Header — nav left · centered mark · nav right
   -------------------------------------------------------------------------- */
.gb-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1040;
  background-color: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(224, 224, 224, 0.1);
  transition: background-color var(--gb-dur) var(--gb-ease);
}
.gb-header.is-scrolled { background-color: rgba(0, 0, 0, 0.95); }
.gb-header__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--gb-header-h);
  max-width: 86rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
/* Explicit grid placement: with the left links display:none on mobile,
   auto-placement would pull the logo into column 1 and the burger to the
   middle — pin each zone to its column instead. */
.gb-header__nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); grid-column: 1; }
.gb-header__nav--r { justify-content: flex-end; grid-column: 3; }
.gb-header__nav a {
  font-family: var(--gb-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gb-fg-muted);
  white-space: nowrap;
}
.gb-header__nav a:hover { color: var(--gb-white); }
.gb-header__brand {
  display: inline-flex;
  color: var(--gb-white);
  padding-inline: clamp(0.75rem, 2vw, 1.5rem);
  grid-column: 2;
}
.gb-header__brand:hover { color: var(--gb-grey-100); }
.gb-header__logo {
  --glyph: url("../brand/svg/gbfam-mark-cross.svg");
  width: 3.4rem;
  aspect-ratio: 426 / 379;
}

/* Language switcher */
.gb-lang { display: flex; align-items: center; gap: 0.25rem; }
.gb-lang a,
.gb-lang [aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  font-family: var(--gb-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--gb-fg-muted);
}
.gb-lang a:hover { color: var(--gb-white); }
.gb-lang [aria-current] {
  color: var(--gb-white);
  box-shadow: inset 0 -2px 0 0 var(--gb-white);
}

/* Burger (mobile) */
.gb-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.375rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.625rem;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius);
  background: transparent;
}
.gb-burger span { display: block; height: 1px; background-color: var(--gb-grey-100); }

/* Offcanvas (Bootstrap, restyled) */
.gb-offcanvas {
  --bs-offcanvas-bg: var(--gb-black);
  --bs-offcanvas-color: var(--gb-grey-100);
  --bs-offcanvas-border-color: var(--gb-line);
  --bs-offcanvas-width: min(85vw, 22rem);
}
.gb-offcanvas .btn-close { filter: invert(1) grayscale(1); }
.gb-offcanvas__nav {
  display: flex;
  flex-direction: column;
  gap: var(--gb-space-3);
  margin: var(--gb-space-4) 0 var(--gb-space-5);
}
.gb-offcanvas__nav a {
  font-family: var(--gb-font-display);
  font-size: var(--gb-step-2);
  font-weight: 700;
  text-decoration: none;
  color: var(--gb-fg);
  padding-block: 0.25rem;
}
.gb-offcanvas__nav a:hover { color: var(--gb-white); }
.gb-offcanvas__foot {
  display: grid;
  gap: var(--gb-space-4);
  margin-top: auto;
  padding-top: var(--gb-space-4);
  border-top: 1px solid var(--gb-line);
}

/* --------------------------------------------------------------------------
   Hero — full-bleed B&W photo, FIXED to the viewport so content scrolls
   over it (the Bang Bang effect, D-023). Painting order: the body's black
   propagates to the canvas, the negative-z fixed photo sits above it, and
   every later section's opaque background slides across both.
   -------------------------------------------------------------------------- */
.gb-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
}
.gb-hero__ph {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  object-fit: cover;
  z-index: -2;
}
.gb-hero__dim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
  pointer-events: none;
}
.gb-hero__in {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: calc(var(--gb-header-h) + 2rem) 1rem 4rem;
}
.gb-hero__wordmark {
  --glyph: url("../brand/svg/gbfam-wordmark-full.svg");
  width: min(78vw, 44rem);
  aspect-ratio: 896.11 / 263.61;
  color: var(--gb-white);
  margin-inline: auto;
}
.gb-hero h1 {
  margin: 2.2rem 0 0.8rem;
  font-family: var(--gb-font-text);
  font-weight: 500;
  font-size: clamp(0.8rem, 1.6vw, 1rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gb-white);
}
.gb-hero__addr {
  margin: 0 0 2.2rem;
  font-size: 0.72rem;
  color: var(--gb-fg-muted);
}
.gb-hero__cue {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: var(--gb-fg-muted);
}

/* --------------------------------------------------------------------------
   Info strip (ruled ledger row under the hero)
   -------------------------------------------------------------------------- */
.gb-info-strip {
  background-color: var(--gb-bg); /* opaque — slides over the fixed hero photo */
  border-bottom: 1px solid var(--gb-line);
}
.gb-info-strip__grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .gb-info-strip__grid { grid-template-columns: 1fr 1fr 1fr auto; align-items: center; }
}
.gb-info-strip dl { margin: 0; }
.gb-info-strip .cell {
  padding: 2rem clamp(1rem, 2.5vw, 2.5rem);
  border-top: 1px solid var(--gb-line);
}
@media (min-width: 820px) {
  .gb-info-strip .cell { border-top: 0; border-left: 1px solid var(--gb-line); }
  .gb-info-strip .cell:first-child { border-left: 0; }
}
.gb-info-strip dt { margin-bottom: 0.5rem; color: var(--gb-fg-muted); font-weight: 500; }
.gb-info-strip dd { margin: 0; font-size: 0.95rem; color: var(--gb-white); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.gb-section {
  background-color: var(--gb-bg);
  color: var(--gb-fg);
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
.gb-section--panel { background-color: var(--gb-bg-alt); }
.gb-h2row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: clamp(2.2rem, 5vw, 4rem);
}
.gb-h2row::before, .gb-h2row::after { content: ""; flex: 1; height: 1px; background-color: var(--gb-line); }
.gb-h2row h2 {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gb-white);
  white-space: nowrap;
}
.gb-more {
  font-family: var(--gb-font-display);
  font-size: var(--gb-step--1);
  font-weight: 600;
  letter-spacing: var(--gb-tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--gb-line);
  padding-bottom: 0.3rem;
}
.gb-more:hover { border-color: var(--gb-fg); }
button.gb-more { background: none; border: 0; border-bottom: 1px solid var(--gb-line); color: var(--gb-fg); cursor: pointer; }

/* Brand glyphs as CSS masks */
.gb-glyph {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--glyph) no-repeat center / contain;
  mask: var(--glyph) no-repeat center / contain;
}
.gb-glyph--wolf { --glyph: url("../brand/svg/gbfam-icon-wolf.svg"); width: 1.05em; height: 1.22em; }
.gb-glyph--hashtag { --glyph: url("../brand/svg/gbfam-mark-wolves-hashtag.svg"); aspect-ratio: 318.94 / 199.44; }

/* Labelled placeholder slot (hard rule: no stock photos on the real site) */
.gb-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--gb-space-3);
  border: 1px solid var(--gb-line);
  background-color: var(--gb-surface);
  text-align: center;
}
.gb-slot__tag {
  font-family: var(--gb-font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gb-fg-muted);
}
.gb-slot__note { font-size: 0.7rem; color: var(--gb-fg-muted); }
.gb-slot--portrait { aspect-ratio: 3 / 4; }
.gb-slot--work { aspect-ratio: 4 / 5; }

/* --------------------------------------------------------------------------
   Artists
   -------------------------------------------------------------------------- */
.gb-artists {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 62rem;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .gb-artists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .gb-artists { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
}
/* Variant B (client-picked, Task 22): photo on top, name/style/bio below it
   in a ruled frame. Frames in a row share one height; buttons share a baseline. */
.gb-artist { display: flex; flex-direction: column; }
.gb-artist__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gb-line);
  margin-bottom: 1.1rem;
}
.gb-artist__ph {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.gb-artist__meta {
  flex: 1;
  padding: 1rem 1.1rem 1.2rem;
  border-top: 1px solid var(--gb-line);
}
.gb-artist h3 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gb-white);
}
.gb-artist .gb-label { margin: 0.3rem 0 0; color: var(--gb-fg-muted); }
.gb-artist .gb-artist__bio {
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--gb-fg-muted);
}
.gb-artist .gb-boxbtn { margin-top: auto; align-self: center; }

/* --------------------------------------------------------------------------
   Works (teaser on home, full grid on the gallery page)
   -------------------------------------------------------------------------- */
.gb-work__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px; /* room for the tiles' outer hairlines */
}
@media (min-width: 992px) {
  .gb-work__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gb-work__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Each tile draws its own hairline (Task 23), so a part-filled last row
   shows the page background instead of a grey block. */
.gb-work__grid > * { background-color: var(--gb-bg); border: 0; box-shadow: 0 0 0 1px var(--gb-line); }
.gb-work__grid a[data-lightbox] {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5; /* the tile owns the ratio; the img fills it */
}
.gb-work__grid a[data-lightbox] img {
  width: 100%; height: 100%; object-fit: cover;
  transition: filter var(--gb-dur) var(--gb-ease), transform var(--gb-dur) var(--gb-ease);
}
.gb-work__grid a[data-lightbox]:hover img { filter: grayscale(0); transform: scale(1.02); }
/* Gallery page (Task 23, client decision): photos always in colour.
   The home "Selected work" grid keeps black and white with colour on hover. */
[data-filterable] .gb-work__grid img { filter: none; }
.gb-tag {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  padding: 0.25rem 0.55rem;
  background-color: var(--gb-black);
  color: var(--gb-fg);
  font-family: var(--gb-font-display);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gb-works-cta { text-align: center; margin-top: 2.6rem; }

/* --------------------------------------------------------------------------
   Follow us — teal band (data-gb-theme="teal"), between Selected work and FAQ
   -------------------------------------------------------------------------- */
.gb-follow__in {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  justify-items: center;
  text-align: center;
}
@media (min-width: 992px) {
  .gb-follow__in { grid-template-columns: 1fr 1fr; gap: 5rem; justify-items: start; text-align: left; }
  .gb-follow__mark { justify-self: center; }
}
.gb-follow__mark { width: min(60vw, 26rem); color: var(--gb-white); opacity: 0.92; }
.gb-follow h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gb-white);
}
.gb-follow__text { max-width: 29rem; margin: 1.4rem 0 0; color: var(--gb-fg-muted); line-height: var(--gb-leading-text); }
.gb-follow__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }
@media (min-width: 992px) { .gb-follow__actions { justify-content: flex-start; } }
.gb-follow .gb-btn .gb-ico { width: 1.25rem; height: 1.25rem; }
.gb-follow .gb-btn--primary:hover { background-color: var(--gb-white); }
.gb-follow .gb-btn--ghost { border-color: rgba(224, 224, 224, 0.45); }

/* Gallery filters */
.gb-filterbar { display: grid; gap: 0.9rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
/* "Book with …" (Task 23): one per artist, shown only for the picked artist.
   Phone: its own row under the chips. Desktop: right end of the chip row. */
.gb-filterbar > [data-book] { text-align: center; }
@media (min-width: 992px) {
  .gb-filterbar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.gb-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.gb-filter > .gb-label { color: var(--gb-fg-muted); margin-right: 0.5rem; }
.gb-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius);
  background: transparent;
  color: var(--gb-fg-muted);
  /* Manrope, not Unbounded: near-identical fallback metrics keep the chip
     rows from re-wrapping on font swap (the gallery CLS source) */
  font-family: var(--gb-font-text);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--gb-dur) var(--gb-ease),
              color var(--gb-dur) var(--gb-ease),
              border-color var(--gb-dur) var(--gb-ease);
}
.gb-chip:hover { color: var(--gb-fg); border-color: var(--gb-fg); }
.gb-chip[aria-pressed="true"] {
  background-color: var(--gb-cta-bg);
  border-color: var(--gb-cta-bg);
  color: var(--gb-cta-fg);
}

/* Simple page head (gallery, privacy) */
.gb-page {
  padding-top: calc(var(--gb-header-h) + var(--gb-space-6));
  padding-bottom: var(--gb-space-7);
  background-color: var(--gb-bg);
}
.gb-page__head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.gb-page__head h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gb-white);
}
.gb-page__head p { margin: 0; color: var(--gb-fg-muted); }

/* --------------------------------------------------------------------------
   FAQ (Bootstrap accordion as clean ruled rows)
   -------------------------------------------------------------------------- */
.gb-faq__wrap { max-width: 46rem; margin-inline: auto; }
.gb-faq .accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--gb-fg);
  --bs-accordion-border-color: transparent;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-color: var(--gb-fg);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--gb-white);
  --bs-accordion-btn-focus-box-shadow: none;
}
.gb-faq .accordion-item { border: 0; border-bottom: 1px solid var(--gb-line); background: transparent; }
.gb-faq .accordion-button {
  padding: 1.2rem 0.2rem;
  font-family: var(--gb-font-display);
  font-size: 0.82rem;
  font-weight: 600;
  gap: 1rem;
}
.gb-faq .accordion-button::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background-image: none;
  font-family: var(--gb-font-display);
  font-size: var(--gb-step-1);
  font-weight: 400;
  line-height: 1;
  transition: none;
  transform: none;
  color: var(--gb-fg-muted);
}
.gb-faq .accordion-button:not(.collapsed)::after { content: "−"; }
.gb-faq .accordion-body {
  padding: 0 0.2rem 1.2rem;
  color: var(--gb-fg-muted);
  line-height: var(--gb-leading-text);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.gb-contact {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.gb-contact h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gb-white);
}
.gb-contact h2 span { display: block; } /* question and call to action on their own lines */
.gb-contact__intro { color: var(--gb-fg-muted); margin: 0 0 2.2rem; }
.gb-channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  padding: 0;
  margin: 0 0 2.4rem;
  list-style: none;
}
/* Icon-only square channel buttons — all five on one line */
.gb-channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius);
  text-decoration: none;
  color: var(--gb-fg);
  transition: border-color var(--gb-dur) var(--gb-ease), color var(--gb-dur) var(--gb-ease);
}
.gb-channel .gb-ico { width: 1.625rem; height: 1.625rem; }
.gb-channel:hover { border-color: var(--gb-white); color: var(--gb-white); }
.gb-info {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 2.4rem;
  font-size: 0.8rem;
  color: var(--gb-fg-muted);
}
.gb-info a { color: var(--gb-fg); }

/* Form */
.gb-form { display: grid; gap: 0.9rem; text-align: left; }
.gb-form .form-label {
  margin: 0;
  font-family: var(--gb-font-text);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gb-fg-muted);
}
.gb-form .form-control {
  background-color: transparent;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius);
  color: var(--gb-fg);
  min-height: 2.9rem;
}
.gb-form .form-control::placeholder { color: var(--gb-fg-muted); opacity: 0.6; }
.gb-form .form-control:focus {
  background-color: transparent;
  border-color: var(--gb-grey-100);
  box-shadow: none;
  color: var(--gb-fg);
}
.gb-form .form-text { color: var(--gb-fg-muted); }
.gb-form .form-check { text-align: left; }
.gb-form .form-check-input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  background-color: transparent;
  border: 1px solid var(--gb-grey-300);
  border-radius: var(--gb-radius);
}
.gb-form .form-check-input:focus { box-shadow: none; border-color: var(--gb-white); }
.gb-form .form-check-input:checked {
  background-color: var(--gb-white);
  border-color: var(--gb-white);
  /* black tick, URL-encoded (#000000) */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.gb-form .form-check-label { color: var(--gb-fg-muted); font-size: var(--gb-step--1); }
.gb-form .form-check-label a { color: var(--gb-fg); }
.gb-form .form-control.is-invalid,
.gb-form .form-check-input.is-invalid {
  border-color: var(--gb-white);
  box-shadow: inset 0 0 0 1px var(--gb-white);
  background-image: none;
}
.gb-form .invalid-feedback {
  display: block;
  margin: 0.35rem 0 0;
  color: var(--gb-fg);
  font-size: var(--gb-step--1);
}
.gb-form__status { margin: var(--gb-space-3) 0 0; color: var(--gb-fg); font-weight: 600; }
.gb-form__fallback {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  margin-top: var(--gb-space-4);
  font-size: var(--gb-step--1);
  color: var(--gb-fg-muted);
}

/* Honeypot */
.gb-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Icons (inline sprite, stroke style) */
.gb-ico {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Footer — centered closure
   -------------------------------------------------------------------------- */
.gb-footer {
  border-top: 1px solid var(--gb-line);
  padding: 3.5rem var(--gb-gutter) 5rem;
  background-color: var(--gb-bg);
  color: var(--gb-fg);
  text-align: center;
}
.gb-footer__mark { width: 7.5rem; color: var(--gb-white); margin-inline: auto; }
.gb-footer__social {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin: 1.8rem 0 1.6rem;
}
.gb-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--gb-line);
  border-radius: 50%;
  color: var(--gb-fg-muted);
  transition: color var(--gb-dur) var(--gb-ease), border-color var(--gb-dur) var(--gb-ease);
}
.gb-footer__social a:hover { color: var(--gb-white); border-color: var(--gb-fg); }
.gb-footer__social .gb-ico { width: 1.375rem; height: 1.375rem; }
.gb-footer p { margin: 0.3rem 0; font-size: 0.74rem; color: var(--gb-fg-muted); }
.gb-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin-top: 1rem; }
.gb-footer__links a { color: var(--gb-fg-muted); font-size: 0.74rem; }
.gb-footer__links a:hover { color: var(--gb-white); }

/* --------------------------------------------------------------------------
   Sticky mobile CTA bar (ads hygiene — hard rule 2)
   -------------------------------------------------------------------------- */
.gb-sticky {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1030;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 3.5rem;
  border-top: 1px solid var(--gb-line);
  background-color: var(--gb-black);
}
@media (min-width: 992px) { .gb-sticky { display: none; } }
.gb-sticky a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gb-font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gb-fg);
}
.gb-sticky a + a { border-left: 1px solid var(--gb-line); }
.gb-sticky a:first-child { background-color: var(--gb-white); color: var(--gb-black); }
.gb-sticky.is-hidden { display: none; }

/* --------------------------------------------------------------------------
   Cookie bar
   -------------------------------------------------------------------------- */
.gb-cookie {
  position: fixed;
  inset: auto 0 3.5rem 0;
  z-index: 1035;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gb-space-3);
  padding: 0.75rem var(--gb-gutter);
  border-top: 1px solid var(--gb-line);
  background-color: var(--gb-black);
  color: var(--gb-grey-100);
}
@media (min-width: 992px) { .gb-cookie { inset: auto 0 0 0; } }
.gb-cookie p { margin: 0; font-size: var(--gb-step--1); color: var(--gb-fg-muted); }
.gb-cookie__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.gb-cookie .gb-btn { min-height: 2.5rem; padding: 0.35rem 1rem; }
.gb-cookie__more {
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  font-size: var(--gb-step--1);
  color: var(--gb-fg-muted);
}
.gb-cookie[hidden] { display: none; }
.gb-consented #cookieBar { display: none; } /* returning visitor, before main.js */

/* --------------------------------------------------------------------------
   Floating contact dial (bottom right, all sizes)
   -------------------------------------------------------------------------- */
.gb-dial {
  position: fixed;
  right: 1.25rem;
  bottom: 4rem; /* above the mobile sticky bar */
  z-index: 1041;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: bottom var(--gb-dur) var(--gb-ease);
}
@media (max-width: 991.98px) {
  html:not(.gb-consented) #cookieBar:not([hidden]) ~ .gb-dial { display: none; }
}
@media (min-width: 992px) {
  .gb-dial { bottom: 1rem; }
  html:not(.gb-consented) #cookieBar:not([hidden]) ~ .gb-dial { bottom: 4.25rem; }
}
.gb-dial__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.gb-dial__list[hidden] { display: none; }
.gb-dial__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(224, 224, 224, 0.35);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--gb-grey-100);
  transition: background-color var(--gb-dur) var(--gb-ease),
              color var(--gb-dur) var(--gb-ease),
              border-color var(--gb-dur) var(--gb-ease);
}
.gb-dial__item:hover {
  background-color: var(--gb-white);
  border-color: var(--gb-white);
  color: var(--gb-black);
}
@keyframes gb-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.gb-dial.is-open .gb-dial__item { animation: gb-rise 200ms var(--gb-ease) both; }
.gb-dial.is-open li:nth-last-child(2) .gb-dial__item { animation-delay: 40ms; }
.gb-dial.is-open li:nth-last-child(3) .gb-dial__item { animation-delay: 80ms; }
.gb-dial.is-open li:nth-last-child(4) .gb-dial__item { animation-delay: 120ms; }
.gb-dial.is-open li:nth-last-child(5) .gb-dial__item { animation-delay: 160ms; }
.gb-dial__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--gb-white);
  border-radius: 50%;
  background-color: var(--gb-white);
  color: var(--gb-black);
  cursor: pointer;
  transition: background-color var(--gb-dur) var(--gb-ease), color var(--gb-dur) var(--gb-ease);
}
.gb-dial__toggle:hover { background-color: var(--gb-grey-100); }
.gb-dial__wolf { font-size: 1.4rem; }
.gb-dial__x { position: relative; display: none; width: 1.05rem; height: 1.05rem; }
.gb-dial__x::before,
.gb-dial__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
}
.gb-dial__x::before { transform: rotate(45deg); }
.gb-dial__x::after { transform: rotate(-45deg); }
.gb-dial__toggle[aria-expanded="true"] .gb-dial__wolf { display: none; }
.gb-dial__toggle[aria-expanded="true"] .gb-dial__x { display: block; }

/* --------------------------------------------------------------------------
   Lightbox (gallery page)
   -------------------------------------------------------------------------- */
/* Lightbox controls: Variant B (client-picked) — bottom bar with a counter,
   boxed close top right. */
.gb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.5rem var(--gb-space-4) 6rem;
  background-color: rgba(0, 0, 0, 0.92);
}
.gb-lightbox[hidden] { display: none; }
.gb-lightbox img { max-width: 100%; max-height: 100%; filter: none; } /* opened photo in colour (Task 23) */
.gb-lightbox button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  min-height: 3rem;
  border: 0;
  background: transparent;
  color: var(--gb-grey-100);
  font-size: var(--gb-step-0);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--gb-dur) var(--gb-ease), color var(--gb-dur) var(--gb-ease);
}
.gb-lightbox button:hover { background-color: var(--gb-white); color: var(--gb-black); }
.gb-lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 3rem;
  border: 1px solid var(--gb-line);
  border-radius: var(--gb-radius);
  background-color: rgba(0, 0, 0, 0.8);
}
.gb-lightbox__bar {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  border: 1px solid var(--gb-line);
  background-color: rgba(0, 0, 0, 0.8);
}
.gb-lightbox__bar > * + * { border-left: 1px solid var(--gb-line); }
.gb-lightbox__cnt {
  display: inline-flex;
  align-items: center;
  padding-inline: 1.1rem;
  font-family: var(--gb-font-text);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  color: var(--gb-fg-muted);
}
.gb-lightbox__x { position: relative; display: block; width: 1rem; height: 1rem; }
.gb-lightbox__x::before,
.gb-lightbox__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
}
.gb-lightbox__x::before { transform: rotate(45deg); }
.gb-lightbox__x::after { transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Prose (privacy)
   -------------------------------------------------------------------------- */
.gb-prose { max-width: 70ch; }
.gb-prose h1 { font-size: var(--gb-step-3); margin: 0 0 var(--gb-space-4); }
.gb-prose h2 { font-size: var(--gb-step-1); margin: var(--gb-space-5) 0 var(--gb-space-3); }
.gb-prose p, .gb-prose li { color: var(--gb-fg-muted); line-height: var(--gb-leading-text); }
.gb-prose li { margin-bottom: 0.5rem; }
.gb-prose strong { color: var(--gb-fg); }
.gb-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--gb-space-4);
  font-family: var(--gb-font-display);
  font-size: var(--gb-step--1);
  font-weight: 600;
  letter-spacing: var(--gb-tracking-caps);
  text-transform: uppercase;
  color: var(--gb-fg-muted);
}
.gb-eyebrow::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  background-color: currentColor;
  transform: rotate(45deg);
}
.gb-eyebrow--latin { font-family: var(--gb-font-accent); font-weight: 400; }
.gb-footer__bottom--plain { border-top: 0; padding-top: 0; }

/* --------------------------------------------------------------------------
   Reveal on first entry (below the fold; added by main.js)
   -------------------------------------------------------------------------- */
.js .gb-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--gb-dur) var(--gb-ease), transform var(--gb-dur) var(--gb-ease);
}
.js .gb-reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Motion discipline
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gb-btn, .gb-channel, .gb-skip, .gb-header, .gb-chip, .gb-dial, .gb-dial__item, .gb-boxbtn { transition: none; }
  .js .gb-reveal { opacity: 1; transform: none; transition: none; }
  .gb-dial.is-open .gb-dial__item { animation: none; opacity: 1; }
  .gb-work__grid a[data-lightbox] img { transition: none; }
  .gb-work__grid a[data-lightbox]:hover img { transform: none; }
}