/* ==============================================================
   Konevych FDC — Home (matchday-programme editorial)
   Namespace .bull · Big Shoulders Display + Chivo
   Palette: navy · orange · white (OKLCH)
   ============================================================== */

/* ---- tokens ---- */
.bull {
  /* palette — Electric is the shipped theme; Bulls is behind [data-theme="bulls"] */
  --navy:       oklch(39%   0.205 264);
  --navy-2:     oklch(44%   0.195 265);
  --navy-3:     oklch(49%   0.175 266);
  --orange:     oklch(79%   0.150  88);
  --orange-2:   oklch(74%   0.160  80);
  --canvas:     oklch(100%  0      0);
  --canvas-2:   oklch(97.8% 0.004 264);
  --ink:        oklch(23%   0.075 264);
  --ink-2:      oklch(40%   0.060 264);
  --ink-3:      oklch(55%   0.050 266);
  --line:       oklch(86.5% 0.022  90);
  --on-navy:    oklch(97%   0.022  92);
  --on-navy-2:  oklch(86%   0.045  90);
  --on-navy-3:  oklch(81%   0.055  88);
  --hair-d:     oklch(100%  0     0 / 0.14);
  --hair-d-2:   oklch(100%  0     0 / 0.26);
  --on-orange:  oklch(24%   0.070  84);
  /* headline-scale gold rides --orange at full strength; --accent-ink-2 stays
     darker for body-size text and links, where 5.1:1 is still required */
  --accent-ink-2: oklch(54%   0.165  87); /* body-size text/links, 5.1:1 */

  /* type */
  --fd: "Big Shoulders Display", "Arial Narrow", ui-sans-serif, sans-serif;
  --fb: "Chivo", ui-sans-serif, system-ui, sans-serif;

  --t-hero: clamp(3.6rem, 0.8rem + 11vw, 10rem);
  --t-h2:   clamp(2.6rem, 1.4rem + 5.4vw, 6rem);   /* tier 1 — primary sections */
  --t-h2b:  clamp(2.2rem, 1.5rem + 3.2vw, 4.4rem); /* tier 2 — supporting */
  --t-h2c:  clamp(1.9rem, 1.4rem + 2.2vw, 3.2rem); /* tier 3 — secondary */
  --t-h3:   clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --t-lead: clamp(1.1rem, 1.02rem + 0.45vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-sm:   0.9rem;
  --t-xs:   0.75rem;

  /* spacing (4pt) */
  --s4: .25rem;  --s8: .5rem;   --s12: .75rem; --s16: 1rem;
  --s24: 1.5rem; --s32: 2rem;   --s40: 2.5rem; --s48: 3rem;
  --s64: 4rem;   --s80: 5rem;   --s96: 6rem;
  --band: clamp(4.5rem, 2.5rem + 8vw, 9rem);
  --gx:   clamp(1.25rem, 0.4rem + 4vw, 5rem);
  --max:  1380px;

  /* shape + motion */
  --r: 2px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* the display ease is exponential and spends itself in the first fifth — too
     abrupt to read on a sweep the width of the frame, which needs its own curve */
  --ease-sweep: cubic-bezier(0.38, 0.12, 0.24, 1);
  --t1: 130ms; --t2: 280ms; --t3: 560ms;

  background: var(--canvas);
  color: var(--ink);
  font-family: var(--fb);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.bull *, .bull *::before, .bull *::after { box-sizing: border-box; }
.bull a { color: inherit; text-decoration: none; }
.bull img { display: block; max-width: 100%; }
:where(.bull button) { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
.bull :focus-visible { outline: 2.5px solid var(--orange); outline-offset: 3px; border-radius: var(--r); }
.bull h1, .bull h2, .bull h3, .bull p, .bull figure, .bull blockquote, .bull dl, .bull dd { margin: 0; }

/* smooth in-page scrolling — anchor links + back-to-top */
html:has(body.bull-page) { scroll-behavior: smooth; }

/* page reset — home loads no legacy theme css */
body.bull-page { margin: 0; background: oklch(100% 0 0); }
.bull-page .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.bull-shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gx);
}

/* ---- eyebrow ---- */
.bull-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  font-family: var(--fb);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bull-eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--orange); flex-shrink: 0;
}
.bull-eyebrow--dk { color: var(--on-navy-3); }

/* ---- buttons ---- */
.bull-btn {
  --pad: 14px 28px;
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  padding: var(--pad);
  font-family: var(--fd);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r);
  line-height: 1;
  white-space: nowrap;
  transition: background var(--t1) var(--ease), color var(--t1) var(--ease),
              border-color var(--t1) var(--ease), transform var(--t1) var(--ease);
}
.bull-btn svg { width: 17px; height: 17px; flex-shrink: 0; transition: transform var(--t2) var(--ease); }
.bull-btn--primary { background: var(--orange); color: var(--on-orange); }
/* `.bull a { color: inherit }` is one specificity point above the rule above, so
   a CTA rendered as a link picked up its band colour instead — which painted
   cream on gold inside the navy sections. Spell the anchor out to win. */
.bull a.bull-btn--primary { color: var(--on-orange); }
.bull-btn--primary:hover { background: var(--orange-2); }
.bull-btn--primary:hover svg { transform: translate(3px, -3px); }
.bull-btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); padding: 12.5px 26px; }
.bull-btn--ghost:hover { border-color: var(--ink); }
.bull-btn--ghost:hover svg { transform: translate(3px, -3px); }
.bull-btn--ghost-dk { background: transparent; color: var(--on-navy); border: 1.5px solid var(--hair-d-2); padding: 12.5px 26px; }
.bull-btn--ghost-dk:hover { border-color: var(--on-navy); }
.bull-btn--lg { padding: 17px 36px; font-size: 1.15rem; }

/* ---- scroll progress ---- */
.bull-skip {
  position: absolute; left: var(--s16); top: var(--s16); z-index: 500;
  transform: translateY(-200%);
  padding: 12px 20px; border-radius: var(--r);
  background: var(--orange); color: var(--on-orange);
  font-family: var(--fd); font-weight: 700; font-size: 1rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.bull-skip:focus { transform: none; }

.bull-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 300; pointer-events: none; background: transparent;
}
.bull-progress span {
  display: block; height: 100%; width: var(--p, 0%);
  background: var(--orange); transform-origin: left;
}

/* ---- floating actions: contact + back to top ---- */
.bull-fab-stack {
  position: fixed;
  right: clamp(var(--s16), 3vw, var(--s32));
  bottom: clamp(var(--s16), 3vw, var(--s32));
  z-index: 240;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s12);
}
.bull-fab {
  position: relative;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: var(--r);
  transition: background var(--t1) var(--ease), color var(--t1) var(--ease),
              transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
.bull-fab svg { width: 20px; height: 20px; transition: transform var(--t2) var(--ease); }
.bull-fab:hover svg, .bull-fab:focus-visible svg { transform: translateY(-2px); }

.bull-fab--contact {
  background: var(--orange);
  color: var(--on-orange);
  box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--orange) 45%, transparent);
}
.bull-fab--contact:hover, .bull-fab--contact:focus-visible {
  background: var(--orange-2);
  box-shadow: 0 12px 28px -8px color-mix(in oklab, var(--orange) 50%, transparent);
}
.bull-fab-tip {
  position: absolute; right: calc(100% + var(--s12)); top: 50%;
  transform: translate(6px, -50%);
  padding: 7px 14px;
  background: var(--navy); color: var(--on-navy);
  font-family: var(--fb); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.02em; white-space: nowrap;
  border-radius: var(--r);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease);
}
.bull-fab--contact:hover .bull-fab-tip, .bull-fab--contact:focus-visible .bull-fab-tip {
  opacity: 1; transform: translate(0, -50%);
}

.bull-totop {
  background: var(--navy);
  color: var(--on-navy);
  box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--navy) 45%, transparent);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease),
              background var(--t1) var(--ease), box-shadow var(--t2) var(--ease);
}
.bull-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.bull-totop:hover, .bull-totop:focus-visible {
  background: var(--orange); color: var(--on-orange);
  box-shadow: 0 12px 28px -8px color-mix(in oklab, var(--orange) 50%, transparent);
}

/* ==============================================================
   NAV
   ============================================================== */
.bull-nav {
  position: sticky; top: 0; z-index: 200;
  background: color-mix(in oklab, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.bull-nav.is-scrolled { border-bottom-color: var(--line); }
.bull-nav-inner {
  display: flex; align-items: center; gap: var(--s32);
  height: 72px; max-width: var(--max); margin-inline: auto; padding-inline: var(--gx);
}
.bull-logo { display: inline-flex; align-items: center; gap: var(--s12); flex-shrink: 0; }
/* the mark is inline SVG: the horns ride currentColor, the face halves
   --logo-accent, so one file serves the light canvas, the navy footer and both
   palettes. It carries the full-strength brand pair rather than the text-safe
   inks: the shapes are large solids, not type. */
.bull-mark { display: block; width: auto; height: 44px; }
.bull-logo .bull-mark { color: var(--navy); --logo-accent: var(--orange); }
.bull-drawer-logo .bull-mark { height: 34px; color: var(--navy); --logo-accent: var(--orange); }
.bull-logo-word {
  font-family: var(--fd); font-weight: 800; font-size: 1.32rem;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); line-height: 1;
}
.bull-logo-word em { font-style: normal; color: var(--orange); }

.bull-nav-links {
  display: flex; align-items: center; gap: var(--s4);
  list-style: none; margin: 0; padding: 0; flex: 1; justify-content: center;
}
.bull-nav-links a {
  display: block; padding: var(--s8) var(--s12);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink-2); border-radius: var(--r);
  transition: color var(--t1);
}
.bull-nav-links a:hover { color: var(--ink); }
.bull-nav-right { display: flex; align-items: center; gap: var(--s16); flex-shrink: 0; }
.bull-nav-login { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); transition: color var(--t1); }
.bull-nav-login:hover { color: var(--ink); }

.bull-ham {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 44px; height: 44px; padding: 10px; border-radius: var(--r);
}
.bull-ham span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform var(--t2) var(--ease), opacity var(--t2); }
.bull-ham[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bull-ham[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bull-ham[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* drawer */
.bull-overlay {
  position: fixed; inset: 0; background: oklch(17% 0.045 250 / 0.5);
  z-index: 250; opacity: 0; pointer-events: none; transition: opacity var(--t2);
}
.bull-overlay.is-open { opacity: 1; pointer-events: auto; }
.bull-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw);
  background: var(--canvas); z-index: 260; transform: translateX(100%);
  transition: transform var(--t3) var(--ease);
  display: flex; flex-direction: column; padding: var(--s24); overflow-y: auto;
}
.bull-drawer.is-open { transform: none; }
.bull-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s40); }
.bull-drawer-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); border-radius: var(--r); }
.bull-drawer-close:hover { color: var(--ink); background: var(--canvas-2); }
.bull-drawer-links { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; flex: 1; }
.bull-drawer-links li { border-top: 1px solid var(--line); }
.bull-drawer-links li:last-child { border-bottom: 1px solid var(--line); }
.bull-drawer-links a {
  display: flex; align-items: baseline; gap: var(--s16); padding: var(--s16) var(--s4);
  font-family: var(--fd); font-size: 1.9rem; font-weight: 700; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--ink); transition: color var(--t1);
}
.bull-drawer-links a:hover { color: var(--orange); }
.bull-drawer-i { font-size: 0.8rem; font-weight: 700; color: var(--orange); letter-spacing: 0.1em; }
.bull-drawer-footer { margin-top: var(--s40); display: flex; flex-direction: column; gap: var(--s12); }
.bull-drawer-footer .bull-btn { justify-content: center; }

/* ==============================================================
   HERO
   ============================================================== */
.bull-hero { overflow: clip; }
.bull-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 44vw, 780px);
  align-items: stretch;
  min-height: clamp(560px, 84svh, 920px);
}
.bull-hero-text {
  display: flex; flex-direction: column; justify-content: center;
  /* align the text's left edge with the page container, run free to the image */
  padding-left: max(var(--gx), calc((100vw - var(--max)) / 2 + var(--gx)));
  padding-right: clamp(var(--s32), 4vw, var(--s64));
  padding-block: clamp(var(--s40), 5vw, var(--s80));
}
.bull-kicker {
  display: inline-flex; align-items: center; gap: var(--s8);
  font-family: var(--fb); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: var(--s24);
}
.bull-kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

.bull-hero-h {
  font-family: var(--fd); font-weight: 900; font-size: var(--t-hero);
  line-height: 0.82; letter-spacing: -0.015em; text-transform: uppercase;
  color: var(--navy); margin-bottom: var(--s24);
}
.bull-hero-h > span { display: block; clip-path: inset(-45% -6% -8% -6%); }
.bull-hero-h > span > span { display: block; }
/* the staircase step is capped by the narrowest headline column the two-column
   hero ever runs at (769px, just above the stack breakpoint), where "here." at
   the deepest indent still has to clear its own line */
.bull-hero-l2 { text-indent: 0.45em; }
.bull-hero-l3 { text-indent: 0.9em; }
.bull-hero-l3 em { font-style: normal; color: var(--orange); }
.bull-hero-l4 { text-indent: 1.35em; }

.bull-hero-sub {
  font-size: var(--t-lead); color: var(--ink-2); line-height: 1.55;
  max-width: 46ch; margin-bottom: var(--s24);
}
.bull-hero-actions { display: flex; flex-wrap: wrap; gap: var(--s16); margin-bottom: var(--s32); }

.bull-hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s40);
  padding-top: var(--s24); border-top: 1px solid var(--line);
}
.bull-hero-meta dt {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s4);
}
.bull-hero-meta dd { font-family: var(--fd); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; color: var(--ink); letter-spacing: 0.01em; }

.bull-hero-media { position: relative; min-height: clamp(320px, 50vw, 920px); }
.bull-hero-img { position: absolute; inset: 0; overflow: hidden; background: var(--canvas-2); }
.bull-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
/* brand-geometry wedge where the image meets the headline column.
   It overhangs 2px to the left and lets the frame's own overflow cut it: a
   clip-path edge sitting exactly on the frame boundary antialiases away a
   sub-pixel, and the photo — wider than the frame, because it drifts — bled
   through that sliver as a hairline between headline column and picture. */
.bull-hero-img::before {
  content: ""; position: absolute; inset: 0 auto 0 -2px; z-index: 1;
  width: calc(clamp(28px, 3vw, 64px) + 2px); background: var(--canvas);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.bull-hero-stamp {
  position: absolute; bottom: clamp(var(--s32), 5vw, var(--s64)); left: var(--s16); z-index: 2;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--fb); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-navy);
  text-shadow: 0 1px 10px oklch(0% 0 0 / 0.55);
}

/* ---- hero entrance -------------------------------------------
   One authored moment, run entirely from CSS so the slogan and the photo are
   never hidden behind a script. Everything rises: the headline lines set
   themselves out of their own crops, and the picture comes up under a soft
   gradient mask rather than out from behind a coloured panel — the frame fills
   with the pitch instead of a block of navy sliding off it. The <img> itself is
   never faded or transformed at load: it is the LCP element, and a mask on its
   frame does not enter the LCP calculation.
   ------------------------------------------------------------- */
.bull-hero-img {
  -webkit-mask-image: linear-gradient(to top, #000 0 55%, transparent 70%);
          mask-image: linear-gradient(to top, #000 0 55%, transparent 70%);
  -webkit-mask-size: 100% 200%;
          mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: bull-hero-reveal 1100ms var(--ease-sweep) both;
}
@keyframes bull-hero-reveal {
  from { -webkit-mask-position: 0% 0%;   mask-position: 0% 0%; }
  to   { -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
}

.bull-hero-h > span > span { animation: bull-hero-line 780ms var(--ease) both; }
/* the class has to be spelled out through .bull-hero-h: the shorthand above is
   one specificity point higher, and would otherwise reset every delay to 0 */
.bull-hero-h > .bull-hero-l1 > span { animation-delay: 140ms; }
.bull-hero-h > .bull-hero-l2 > span { animation-delay: 230ms; }
.bull-hero-h > .bull-hero-l3 > span { animation-delay: 320ms; }
.bull-hero-h > .bull-hero-l4 > span { animation-delay: 410ms; }
@keyframes bull-hero-line { from { transform: translate3d(0, 118%, 0); } }

/* the emphasis arrives as its line settles, rather than being there already */
.bull-hero-l3 em { animation: bull-hero-ignite 380ms var(--ease) 780ms both; }
@keyframes bull-hero-ignite { from { color: var(--navy); } }

.bull-hero .bull-kicker,
.bull-hero-sub,
.bull-hero-actions,
.bull-hero-meta { animation: bull-hero-rise 560ms var(--ease) both; }
.bull-hero .bull-kicker { animation-delay: 60ms; }
.bull-hero-sub          { animation-delay: 560ms; }
.bull-hero-actions      { animation-delay: 650ms; }
.bull-hero-meta         { animation-delay: 740ms; }
@keyframes bull-hero-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

.bull-hero-stamp { animation: bull-hero-stamp 500ms var(--ease) 900ms both; }
@keyframes bull-hero-stamp { from { opacity: 0; transform: rotate(180deg) translateY(-14px); } }

/* ---- hero photo drift ----------------------------------------
   Depth, not decoration: the photo holds back against the first viewport of
   scroll so the headline column separates from it. Scroll-driven, so it costs
   no scroll listener and no main-thread work; browsers without the timeline
   simply get a still photo.
   ------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .bull-hero-img img {
      animation: bull-hero-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100svh;
    }
    /* the overscale has to exceed the travel or the drift walks an edge of the
       photo into the frame at the end of the range */
    @keyframes bull-hero-drift {
      from { transform: scale(1.09) translate3d(0, -2.4%, 0); }
      to   { transform: scale(1.09) translate3d(0,  3.2%, 0); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* the sequence still plays, as a plain arrival with no travel */
  .bull-hero-h > span { clip-path: none; }
  .bull-hero-h > span > span,
  .bull-hero .bull-kicker,
  .bull-hero-sub,
  .bull-hero-actions,
  .bull-hero-meta,
  .bull-hero-stamp { animation: bull-hero-appear 320ms linear both; }
  .bull-hero-h > .bull-hero-l1 > span,
  .bull-hero-h > .bull-hero-l2 > span,
  .bull-hero-h > .bull-hero-l3 > span,
  .bull-hero-h > .bull-hero-l4 > span { animation-delay: 0s; }
  .bull-hero-l3 em { animation: bull-hero-ignite 300ms linear 320ms both; }
  .bull-hero-img { animation: none; -webkit-mask-image: none; mask-image: none; }
  .bull-hero-img img { animation: none; transform: none; }
  @keyframes bull-hero-appear { from { opacity: 0; } }
}

/* ==============================================================
   TICKER
   ============================================================== */
.bull-ticker {
  background: var(--orange); color: var(--on-orange);
  overflow: hidden; border-block: 1px solid var(--orange-2);
  padding-block: var(--s16);
}
.bull-ticker-track {
  display: inline-flex; align-items: center; gap: var(--s24);
  white-space: nowrap; will-change: transform;
  animation: bull-marquee 38s linear infinite;
}
.bull-ticker span {
  font-family: var(--fd); font-weight: 800; font-size: clamp(1.1rem, 0.9rem + 1vw, 1.7rem);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.bull-ticker-sep { color: oklch(18% 0.045 47 / 0.45); }
.bull-ticker:hover .bull-ticker-track { animation-play-state: paused; }
@keyframes bull-marquee { to { transform: translateX(-50%); } }

/* ==============================================================
   MANIFESTO
   ============================================================== */
/* ==============================================================
   OFF-SCREEN SECTION SKIPPING
   ============================================================== */
/* Rendering was the single largest slice of main-thread time on the home page:
   every band below the fold was styled, laid out and painted during the load,
   even though none of it is on screen. content-visibility lets the browser skip
   that work until the section scrolls close; contain-intrinsic-size keeps a
   placeholder box so the scrollbar and in-page anchors stay accurate (and the
   `auto` keyword makes the browser remember the real size once measured).
   The reviews carousel and the gallery strip are deliberately excluded — their
   scripts measure clientWidth/scrollWidth, which reads 0 inside skipped content. */
.bull-manifesto,
.bull-prog,
.bull-fix,
.bull-coaches,
.bull-faq,
.bull-home-news { content-visibility: auto; }
/* first-load height guesses, measured at 412px wide; `auto` makes the browser
   replace each one with the real height as soon as the section has been rendered */
.bull-manifesto  { contain-intrinsic-size: auto 540px; }
.bull-prog       { contain-intrinsic-size: auto 1250px; }
.bull-fix        { contain-intrinsic-size: auto 830px; }
.bull-coaches    { contain-intrinsic-size: auto 1300px; }
.bull-faq        { contain-intrinsic-size: auto 960px; }
.bull-home-news  { contain-intrinsic-size: auto 980px; }

.bull-manifesto { background: var(--navy); color: var(--on-navy); padding-block: var(--band); }
.bull-manifesto-h {
  font-family: var(--fd); font-weight: 800; font-size: var(--t-h2b);
  line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--on-navy); max-width: 18ch;
  margin-top: var(--s24); margin-bottom: var(--s64);
}
.bull-standards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s48); border-top: 1px solid var(--hair-d); padding-top: var(--s40);
}
.bull-standard-n {
  display: block; font-family: var(--fd); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.1em; color: var(--orange); margin-bottom: var(--s16);
}
.bull-standard h3 {
  font-family: var(--fd); font-weight: 700; font-size: var(--t-h3);
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05;
  color: var(--on-navy); margin-bottom: var(--s12);
}
.bull-standard p { color: var(--on-navy-2); max-width: 34ch; line-height: 1.65; }

/* ==============================================================
   PROGRAMMES (index + image swap)
   ============================================================== */
.bull-prog { background: var(--canvas); padding-block: var(--band); }
.bull-prog-head { max-width: 60ch; margin-bottom: var(--s64); }
.bull-prog-h {
  font-family: var(--fd); font-weight: 900; font-size: var(--t-h2);
  line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase;
  color: var(--navy); margin-top: var(--s16); margin-bottom: var(--s16);
}
.bull-prog-intro { font-size: var(--t-lead); color: var(--ink-2); max-width: 50ch; line-height: 1.6; }

.bull-prog-body { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(var(--s32), 4vw, var(--s80)); align-items: start; }
.bull-prog-stage {
  position: sticky; top: calc(72px + var(--s32));
  aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--canvas-2);
}
.bull-prog-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  opacity: 0; transform: scale(1.04); transition: opacity var(--t3) var(--ease), transform 1.2s var(--ease);
}
.bull-prog-stage img.is-active { opacity: 1; transform: none; }

.bull-prog-list { list-style: none; margin: 0; padding: 0; }
.bull-prog-row { border-top: 1px solid var(--line); }
.bull-prog-row:last-child { border-bottom: 1px solid var(--line); }
.bull-prog-row > a {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
  gap: var(--s24); padding-block: clamp(var(--s24), 3vw, var(--s48));
  transition: padding-left var(--t2) var(--ease);
}
.bull-prog-row:hover > a, .bull-prog-row:focus-within > a { padding-left: var(--s16); }
.bull-prog-num {
  font-family: var(--fd); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.1em; color: var(--ink-3); transition: color var(--t1);
}
.bull-prog-row:hover .bull-prog-num, .bull-prog-row:focus-within .bull-prog-num { color: var(--orange); }
.bull-prog-main { display: flex; flex-direction: column; gap: var(--s8); }
.bull-prog-name {
  font-family: var(--fd); font-weight: 800; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase; color: var(--navy);
  transition: color var(--t1);
}
.bull-prog-row:hover .bull-prog-name, .bull-prog-row:focus-within .bull-prog-name { color: var(--orange); }
.bull-prog-desc { font-size: var(--t-sm); color: var(--ink-2); max-width: 42ch; line-height: 1.55; }
.bull-prog-age {
  font-family: var(--fd); font-weight: 700; font-size: 1rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
.bull-prog-arrow { width: 26px; height: 26px; color: var(--ink-3); transition: transform var(--t2) var(--ease), color var(--t1); }
.bull-prog-row:hover .bull-prog-arrow, .bull-prog-row:focus-within .bull-prog-arrow { color: var(--orange); transform: rotate(-45deg); }
.bull-prog-thumb { display: none; }

/* ==============================================================
   FIXTURES
   ============================================================== */
.bull-fix { background: var(--navy); color: var(--on-navy); padding-block: var(--band); }
.bull-fix-inner { display: grid; grid-template-columns: 0.85fr 1.6fr; gap: clamp(var(--s32), 5vw, var(--s96)); align-items: start; }
.bull-fix-lhs { position: sticky; top: calc(72px + var(--s32)); }
.bull-fix-h {
  font-family: var(--fd); font-weight: 900; font-size: var(--t-h2);
  line-height: 0.9; letter-spacing: -0.015em; text-transform: uppercase;
  color: var(--on-navy); margin-top: var(--s16); margin-bottom: var(--s24);
}
.bull-fix-sub { color: var(--on-navy-2); font-size: var(--t-lead); line-height: 1.6; max-width: 32ch; margin-bottom: var(--s32); }

.bull-fix-list { display: flex; flex-direction: column; }
/* semantics only — the rows stay direct children of the flex column */
.bull-fix-group { display: contents; }
.bull-fix-row {
  display: grid; grid-template-columns: 92px 1fr auto; gap: var(--s24); align-items: center;
  padding-block: clamp(var(--s16), 2vw, var(--s24)); border-top: 1px solid var(--hair-d);
  transition: background-color 360ms var(--ease);
}
.bull-fix-row:last-child { border-bottom: 1px solid var(--hair-d); }
.bull-fix-row:hover {
  background-color: color-mix(in oklab, var(--on-navy) 7%, transparent);
}
/* GPU-smooth lean-in: translate content, never layout props */
.bull-fix-day, .bull-fix-info {
  transition: transform 420ms var(--ease);
}
.bull-fix-row:hover .bull-fix-day { transform: translateX(12px); }
.bull-fix-row:hover .bull-fix-info { transform: translateX(10px); }
.bull-fix-day { display: flex; flex-direction: column; gap: 2px; }
.bull-fix-dow { font-family: var(--fd); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-navy); line-height: 1; }
.bull-fix-date { font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-navy-3); }
.bull-fix-badge {
  align-self: start; margin-top: var(--s4); font-family: var(--fb); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-orange); background: var(--orange);
  padding: 2px 7px; border-radius: var(--r);
  position: relative; transform-origin: left center;
  animation: bull-badge-pulse 2.6s var(--ease) infinite;
}
/* the halo used to be an animated box-shadow, which repainted the badge on every
   frame for as long as the page was open; a pseudo-element ring animates on
   transform + opacity only, so it stays on the compositor */
.bull-fix-badge::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--orange) 55%, transparent);
  animation: bull-badge-halo 2.6s var(--ease) infinite;
}
@keyframes bull-badge-pulse {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
@keyframes bull-badge-halo {
  0%   { transform: scale(0.86); opacity: 1; }
  55%  { transform: scale(1);    opacity: 0; }
  100% { transform: scale(1);    opacity: 0; }
}
.bull-fix-name { font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; color: var(--on-navy); }
.bull-fix-meta { font-size: var(--t-sm); color: var(--on-navy-3); margin-top: var(--s4); }
.bull-fix-dot { color: var(--hair-d-2); margin-inline: 4px; }
.bull-fix-loc a { color: var(--on-navy-2); text-decoration: underline; text-decoration-color: var(--hair-d-2); text-underline-offset: 3px; }
.bull-fix-loc a:hover { color: var(--on-navy); text-decoration-color: var(--orange); }
.bull-fix-time { font-family: var(--fd); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; color: var(--on-navy-2); white-space: nowrap; text-align: right; transition: color 360ms var(--ease), transform 420ms var(--ease); }
.bull-fix-row:hover .bull-fix-time { color: var(--orange); transform: translateX(-6px); }

/* show-more collapse */
.bull-fix-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 480ms var(--ease); }
.bull-fix-more.is-open { grid-template-rows: 1fr; }
.bull-fix-more-inner { overflow: hidden; min-height: 0; opacity: 0; transition: opacity 300ms var(--ease); }
.bull-fix-more.is-open .bull-fix-more-inner { opacity: 1; }
.bull-fix-more-inner .bull-fix-row:last-child { border-bottom: 0; }

.bull-fix-toggle {
  display: flex; align-items: center; gap: var(--s16); width: 100%;
  padding-block: clamp(var(--s16), 2vw, var(--s24)); border-top: 1px solid var(--hair-d);
  font-family: var(--fd); font-weight: 700; font-size: var(--t-h3);
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--on-navy);
  transition: color var(--t1) var(--ease);
}
.bull-fix-toggle:hover { color: var(--orange); }
.bull-fix-toggle-txt[hidden] { display: none; }
.bull-fix-toggle-count { font-family: var(--fb); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--on-navy-3); }
.bull-fix-toggle-chev { width: 24px; height: 24px; margin-left: auto; color: var(--on-navy-2); transition: transform var(--t2) var(--ease), color var(--t1); }
.bull-fix-toggle:hover .bull-fix-toggle-chev { color: var(--orange); }
.bull-fix-toggle[aria-expanded="true"] .bull-fix-toggle-chev { transform: rotate(180deg); }

.bull-fix-empty { padding-block: var(--s32); display: flex; flex-direction: column; align-items: start; gap: var(--s24); border-top: 1px solid var(--hair-d); }
.bull-fix-empty-mark { font-family: var(--fd); font-size: 3rem; line-height: 1; color: var(--orange); }
.bull-fix-empty p { color: var(--on-navy-2); font-size: var(--t-lead); max-width: 44ch; line-height: 1.6; }

/* ==============================================================
   COACHES
   ============================================================== */
.bull-coaches { background: var(--canvas); padding-block: var(--band); }
.bull-coaches-head { max-width: 60ch; margin-bottom: var(--s64); }
.bull-coaches-h {
  font-family: var(--fd); font-weight: 800; font-size: var(--t-h2b);
  line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase;
  color: var(--navy); margin-top: var(--s16); margin-bottom: var(--s16);
}
.bull-coaches-sub { font-size: var(--t-lead); color: var(--ink-2); max-width: 50ch; line-height: 1.6; }
.bull-coaches-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(var(--s32), 4vw, var(--s48));
  max-width: 920px;
}
/* full-bleed photo card — portrait cover with scrim-anchored text */
.bull-coach {
  position: relative; overflow: hidden; border-radius: 18px;
  aspect-ratio: 4 / 5; background: var(--navy); isolation: isolate;
  box-shadow: 0 16px 40px oklch(17% 0.045 250 / 0.14);
  transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease);
}
/* subtle vertical stagger so the pair reads composed, not a plain row */
.bull-coach:hover { transform: translateY(-6px); box-shadow: 0 26px 60px oklch(17% 0.045 250 / 0.26); }
.bull-coach-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  transition: transform 900ms var(--ease);
}
.bull-coach:hover .bull-coach-img { transform: scale(1.04); }
.bull-coach-initial {
  position: absolute; inset: 0; z-index: 0; display: grid; place-items: center;
  font-family: var(--fd); font-weight: 800; font-size: 5rem; letter-spacing: 0.02em;
  color: var(--on-navy-2); background: var(--navy);
}
/* gradient scrim over the photo, not over the text */
.bull-coach-scrim {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  display: flex; flex-direction: column; gap: var(--s16);
  padding: clamp(var(--s48), 12%, 72px) clamp(var(--s24), 7%, var(--s32)) clamp(var(--s24), 6%, var(--s32));
  color: var(--on-navy);
  background: linear-gradient(
    to top,
    oklch(17% 0.045 250 / 0.94) 0%,
    oklch(17% 0.045 250 / 0.82) 32%,
    oklch(17% 0.045 250 / 0.4) 68%,
    oklch(17% 0.045 250 / 0) 100%
  );
}
.bull-coach-name { font-family: var(--fd); font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.05rem); line-height: 1.02; text-transform: uppercase; letter-spacing: 0.01em; color: var(--on-navy); }
.bull-coach-role { font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange); margin-top: var(--s8); }
.bull-coach-cred { font-size: var(--t-sm); color: var(--on-navy-2); line-height: 1.6; margin-top: var(--s12); max-width: 34ch; }

/* horizontal social row, sits at the foot of the scrim */
.bull-coach-socials { display: flex; flex-wrap: wrap; gap: var(--s12); }
.bull-coach-soc {
  width: 42px; height: 42px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: oklch(100% 0 0 / 0.12); color: var(--on-navy);
  border: 1px solid oklch(100% 0 0 / 0.18); backdrop-filter: blur(2px);
  transition: background var(--t1) var(--ease), color var(--t1), border-color var(--t1), transform var(--t1) var(--ease);
}
.bull-coach-soc svg { width: 18px; height: 18px; }
.bull-coach-soc:hover { background: var(--orange); color: var(--on-orange); border-color: var(--orange); transform: scale(1.08); }

/* ==============================================================
   REVIEWS
   ============================================================== */
.bull-rev { background: var(--navy); color: var(--on-navy); padding-block: var(--band); }

/* two-column split */
.bull-rev-split {
  display: grid; grid-template-columns: 1fr; gap: var(--s48);
}
@media (min-width: 1024px) {
  .bull-rev-split { grid-template-columns: 0.42fr 1fr; gap: clamp(var(--s40), 4vw, var(--s80)); align-items: start; }
  .bull-rev-intro { position: sticky; top: calc(72px + var(--s32)); }
}
.bull-rev-h {
  font-family: var(--fd); font-weight: 800; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 3rem);
  line-height: 0.94; letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--on-navy); margin-top: var(--s12);
}
.bull-rev-statement {
  margin-top: var(--s24); font-size: var(--t-sm); line-height: 1.7;
  color: var(--on-navy-2); max-width: 38ch;
}
.bull-rev-main { min-width: 0; }

/* carousel */
.bull-rev-carousel { position: relative; }
.bull-rev-viewport {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; border: 1px solid var(--hair-d);
  scrollbar-width: none; -ms-overflow-style: none;
}
.bull-rev-viewport::-webkit-scrollbar { display: none; }

.bull-rev-slide {
  flex: 0 0 100%; scroll-snap-align: start;
  background: var(--navy-2);
  display: flex; flex-direction: column; gap: var(--s16);
  padding: clamp(var(--s32), 3.5vw, var(--s48));
  min-height: clamp(280px, 26vw, 360px);
}
.bull-rev-mark { font-family: var(--fd); font-weight: 800; font-size: 3.4rem; line-height: 0.5; color: var(--orange); height: 1.5rem; }
.bull-rev-text {
  font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.15rem); color: var(--on-navy);
  line-height: 1.7; max-width: 70ch; font-weight: 400;
}
.bull-rev-foot {
  margin-top: auto; padding-top: var(--s24);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s16);
}
.bull-rev-cap { display: flex; flex-direction: column; gap: 3px; }
.bull-rev-name { font-family: var(--fd); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-navy); }
.bull-rev-sub { font-size: var(--t-sm); color: var(--on-navy-3); }

/* WhatsApp proof — small thumbnail, top-right corner */
.bull-rev-proof {
  position: relative; display: block; flex-shrink: 0;
  width: clamp(64px, 7vw, 84px); aspect-ratio: 1;
  border-radius: var(--r); overflow: hidden; cursor: pointer;
  border: 1px solid var(--hair-d-2); background: var(--navy);
  transition: border-color var(--t1) var(--ease), transform var(--t1) var(--ease);
}
.bull-rev-proof img { width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 0.82; transition: opacity var(--t1); }
.bull-rev-proof:hover, .bull-rev-proof:focus-visible { border-color: var(--orange); transform: translateY(-2px); }
.bull-rev-proof:hover img, .bull-rev-proof:focus-visible img { opacity: 1; }
.bull-rev-proof-tag {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: center; gap: 3px;
  font-size: 0.5rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--on-orange); background: var(--orange); padding: 2px 0;
  opacity: 0; transform: translateY(100%); transition: opacity var(--t1), transform var(--t2) var(--ease);
}
.bull-rev-proof-tag svg { width: 8px; height: 8px; }
.bull-rev-proof:hover .bull-rev-proof-tag, .bull-rev-proof:focus-visible .bull-rev-proof-tag { opacity: 1; transform: none; }

/* controls */
.bull-rev-controls { display: flex; align-items: center; gap: var(--s12); margin-top: var(--s24); }
.bull-rev-controls[hidden] { display: none; }
.bull-rev-arrow, .bull-rev-pause {
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--hair-d-2); border-radius: var(--r); color: var(--on-navy-2);
  transition: color var(--t1), border-color var(--t1), background var(--t1);
}
.bull-rev-arrow svg, .bull-rev-pause svg { width: 20px; height: 20px; }
.bull-rev-arrow:hover, .bull-rev-pause:hover { color: var(--on-orange); background: var(--orange); border-color: var(--orange); }
.bull-rev-pause { margin-right: var(--s4); }
.bull-rev-ico-play { display: none; }
.bull-rev-controls.is-paused .bull-rev-ico-pause { display: none; }
.bull-rev-controls.is-paused .bull-rev-ico-play { display: block; }

.bull-rev-dots { display: flex; align-items: center; gap: var(--s8); flex: 1; flex-wrap: wrap; }
.bull-rev-dot {
  /* the dot stays 10px; the padding is what a thumb actually has to hit */
  width: 10px; height: 10px; border-radius: 50%; background: var(--hair-d-2);
  padding: 0; border: 7px solid transparent; background-clip: content-box;
  box-sizing: content-box;
  transition: background var(--t1) var(--ease), width var(--t2) var(--ease);
}
.bull-rev-dot:hover { background: var(--on-navy-3); }
.bull-rev-dot[aria-current="true"] { width: 26px; border-radius: 5px; background: var(--orange); background-clip: content-box; }

/* ==============================================================
   LIGHTBOX
   ============================================================== */
.bull-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bull-lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: clamp(var(--s16), 4vw, var(--s48));
  opacity: 0; transition: opacity var(--t2) var(--ease);
}
.bull-lightbox[hidden] { display: none; }
.bull-lightbox.is-open { opacity: 1; }
.bull-lightbox-backdrop { position: absolute; inset: 0; background: oklch(12% 0.03 250 / 0.88); backdrop-filter: blur(3px); }
.bull-lightbox-fig {
  position: relative; z-index: 1; margin: 0; max-width: min(1000px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: var(--s16);
  transform: scale(0.96); transition: transform var(--t3) var(--ease);
}
.bull-lightbox.is-open .bull-lightbox-fig { transform: none; }
.bull-lightbox-fig img {
  max-width: 100%; max-height: 82vh; object-fit: contain;
  border-radius: var(--r); background: var(--navy-2); box-shadow: 0 24px 60px oklch(0% 0 0 / 0.5);
}
.bull-lightbox-cap { font-size: var(--t-sm); color: var(--on-navy-2); letter-spacing: 0.02em; }
.bull-lightbox-cap:empty { display: none; }
.bull-lightbox-close {
  position: absolute; z-index: 5;
  top: clamp(var(--s16), 3vw, var(--s32)); right: clamp(var(--s16), 3vw, var(--s32));
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--on-orange); background: var(--orange); border: 0; border-radius: var(--r);
  box-shadow: 0 6px 20px oklch(0% 0 0 / 0.45);
  transition: background var(--t1), transform var(--t1) var(--ease);
}
.bull-lightbox-close svg { width: 24px; height: 24px; }
.bull-lightbox-close:hover { background: var(--orange-2); transform: rotate(90deg); }

/* gallery viewer nav (only in gallery mode) */
.bull-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 52px; height: 52px; display: none; align-items: center; justify-content: center;
  color: var(--on-navy); border: 1.5px solid var(--hair-d-2); border-radius: var(--r);
  background: oklch(17% 0.045 250 / 0.42); backdrop-filter: blur(6px);
  transition: background var(--t1), color var(--t1), border-color var(--t1);
}
.bull-lightbox-nav svg { width: 24px; height: 24px; }
.bull-lightbox-nav:hover { background: var(--orange); color: var(--on-orange); border-color: var(--orange); }
.bull-lightbox-nav--prev { left: clamp(var(--s16), 3vw, var(--s40)); }
.bull-lightbox-nav--next { right: clamp(var(--s16), 3vw, var(--s40)); }
.bull-lightbox.is-gallery .bull-lightbox-nav { display: inline-flex; }
.bull-lightbox-count {
  position: absolute; bottom: clamp(var(--s16), 3vw, var(--s32)); left: 50%; transform: translateX(-50%); z-index: 4;
  font-family: var(--fd); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.1em;
  color: var(--on-navy-2); display: none;
}
.bull-lightbox.is-gallery .bull-lightbox-count { display: block; }
@media (max-width: 540px) {
  .bull-lightbox-nav { width: 44px; height: 44px; }
  .bull-lightbox-nav--prev { left: var(--s12); }
  .bull-lightbox-nav--next { right: var(--s12); }
}

/* ==============================================================
   GALLERY
   ============================================================== */
.bull-gal { background: var(--canvas-2); padding-block: var(--band); overflow: clip; }
.bull-gal-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s24); flex-wrap: wrap; margin-bottom: var(--s48); }
.bull-gal-h {
  font-family: var(--fd); font-weight: 800; font-size: var(--t-h2c);
  line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase;
  color: var(--navy); margin-top: var(--s12);
}
/* paged photo collage */
.bull-gal-stripwrap { position: relative; }
.bull-gal-strip {
  display: flex; gap: var(--s24); overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.bull-gal-strip::-webkit-scrollbar { display: none; }
.bull-gal-panel { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.bull-gal-mosaic {
  display: grid; gap: var(--s12);
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: clamp(116px, 13vw, 178px);
  grid-auto-flow: dense;
}
/* asymmetric mosaic: a big feature + a wide tile per 10 */
.bull-gal-mosaic > :nth-child(10n+1) { grid-column: span 2; grid-row: span 2; }
.bull-gal-mosaic > :nth-child(10n+6) { grid-column: span 2; }

.bull-gal-item {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: var(--canvas-2); padding: 0; cursor: pointer; min-width: 0;
}
.bull-gal-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.bull-gal-item:hover img, .bull-gal-item:focus-visible img { transform: scale(1.05); }
.bull-gal-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s24) var(--s16) var(--s12);
  font-size: var(--t-sm); font-weight: 500; color: var(--on-navy); text-align: left;
  background: linear-gradient(to top, oklch(17% 0.045 250 / 0.82), transparent);
  opacity: 0; transform: translateY(8px); transition: opacity var(--t2), transform var(--t2) var(--ease);
}
.bull-gal-item:hover .bull-gal-cap, .bull-gal-item:focus-visible .bull-gal-cap { opacity: 1; transform: none; }

/* placeholders: the mosaic keeps its exact height while the photos are fetched,
   so nothing below the gallery moves when they land */
.bull-gal-skel {
  border-radius: var(--r);
  background: var(--line);
  opacity: 0.45;
  min-width: 0;
}
/* buildGallery() pages ten tiles on desktop and four on mobile — the reserved
   room has to follow, or the section resizes the moment the photos arrive */
@media (max-width: 768px) {
  .bull-gal-skel:nth-child(n+5) { display: none; }
}
.bull-gal-fallback { margin: var(--s16) 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.bull-gal-fallback a,
.bull-gal-retry {
  color: var(--accent-ink-2);
  text-decoration: underline;
}
.bull-gal-retry {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.bull-gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--navy); color: var(--on-navy);
  box-shadow: 0 6px 22px oklch(0% 0 0 / 0.28);
  transition: background var(--t1) var(--ease), color var(--t1), opacity var(--t2) var(--ease);
}
.bull-gal-arrow svg { width: 22px; height: 22px; }
.bull-gal-arrow:hover { background: var(--orange); color: var(--on-orange); }
.bull-gal-arrow--prev { left: clamp(calc(var(--s16) * -1), -1.5vw, 0px); }
.bull-gal-arrow--next { right: clamp(calc(var(--s16) * -1), -1.5vw, 0px); }
.bull-gal-arrow[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 768px) {
  .bull-gal-arrow { display: none; }
  .bull-gal-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(132px, 38vw, 220px);
  }
  /* uniform tiles on mobile — features off */
  .bull-gal-mosaic > :nth-child(10n+1) { grid-column: auto; grid-row: auto; }
  .bull-gal-mosaic > :nth-child(10n+6) { grid-column: auto; }
}

/* ==============================================================
   REVEAL
   ============================================================== */
.bull-reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease); }
.bull-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html:has(body.bull-page) { scroll-behavior: auto; }
  .bull-totop { transition: opacity var(--t1) linear; transform: none; }
  .bull-reveal { opacity: 1; transform: none; transition: none; }
  .bull-ticker-track { animation: none; }
  .bull-fix-badge, .bull-fix-badge::after { animation: none; }
  .bull-fix-badge::after { opacity: 0; }
  .bull-fix-row, .bull-fix-day, .bull-fix-info, .bull-fix-time { transition: none; }
  .bull-fix-more, .bull-fix-more-inner, .bull-fix-toggle-chev { transition: none; }
  .bull-faq-a, .bull-faq-chev { transition: none; }
  .bull-gal-strip { scroll-behavior: auto; }
  .bull-coach, .bull-coach-img, .bull-coach-soc { transition: none; }
  .bull * { scroll-behavior: auto; }
  .bull-rev-viewport { scroll-behavior: auto; }
}

/* ==============================================================
   RESPONSIVE
   ============================================================== */
@media (max-width: 1024px) {
  .bull-prog-body { grid-template-columns: 1fr; }
  .bull-prog-stage { display: none; }
  .bull-prog-row > a { grid-template-columns: auto 1fr auto; }
  .bull-prog-arrow { display: none; }
  .bull-prog-thumb { display: block; overflow: hidden; border-radius: var(--r); aspect-ratio: 16 / 7; margin-top: 0; }
  .bull-prog-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
  .bull-prog-row > a { padding-bottom: var(--s16); }
  .bull-prog-row .bull-prog-thumb { margin-bottom: clamp(var(--s24), 3vw, var(--s48)); }

  .bull-fix-inner { grid-template-columns: 1fr; gap: var(--s48); }
  .bull-fix-lhs { position: static; }
}

@media (max-width: 768px) {
  .bull-nav-links { display: none; }
  .bull-nav-right .bull-nav-login, .bull-nav-right .bull-btn { display: none; }
  .bull-ham { display: flex; }
  .bull-logo-word { display: none; }

  .bull-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .bull-hero-media { order: -1; min-height: clamp(240px, 62vw, 440px); }
  .bull-hero-img::before { display: none; }
  .bull-hero-text { padding-inline: var(--gx); padding-block: var(--s40) var(--s64); }
  .bull-hero-stamp { display: none; }
  .bull-hero-meta { gap: var(--s24); }
  .bull-hero-l2, .bull-hero-l3, .bull-hero-l4 { text-indent: 0; }

  .bull-standards { grid-template-columns: 1fr; gap: var(--s32); }
  .bull-standard { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s16); align-items: baseline; }
  .bull-standard-n { margin-bottom: 0; }
  .bull-standard h3 { grid-column: 2; }
  .bull-standard p { grid-column: 2; }

  .bull-prog-row > a { grid-template-columns: auto 1fr; row-gap: var(--s8); }
  .bull-prog-age { grid-column: 2; }

  .bull-fix-row { grid-template-columns: 80px 1fr; grid-template-rows: auto auto; }
  .bull-fix-time { grid-column: 2; grid-row: 2; text-align: left; font-size: 1rem; color: var(--on-navy-3); }

  .bull-rev-slide { min-height: 0; }
}

@media (max-width: 460px) {
  .bull-hero-actions { flex-direction: column; align-items: stretch; }
  .bull-hero-actions .bull-btn { justify-content: center; }
  .bull-prog-row > a { grid-template-columns: 1fr; }
  .bull-prog-num { display: none; }
  .bull-prog-age { grid-column: auto; }
}

/* ==============================================================
   FOOTER (home_footer.html · .hv2-foot — own tokens, renders outside .bull)
   ============================================================== */
.hv2-foot {
  --navy:      oklch(39%   0.205 264);
  --navy-2:    oklch(44%   0.195 265);
  --orange:    oklch(79%   0.150  88);
  --orange-2:  oklch(74%   0.160  80);
  --on-navy:   oklch(97%   0.022  92);
  --on-navy-2: oklch(86%   0.045  90);
  --on-navy-3: oklch(81%   0.055  88);
  --hair:      oklch(100%  0     0 / 0.14);
  --hair-2:    oklch(100%  0     0 / 0.26);
  --on-orange: oklch(24%   0.070  84);
  --fd: "Big Shoulders Display", "Arial Narrow", ui-sans-serif, sans-serif;
  --fb: "Chivo", ui-sans-serif, system-ui, sans-serif;
  --gx: clamp(1.25rem, 0.4rem + 4vw, 5rem);
  --max: 1380px;

  background: var(--navy);
  color: var(--on-navy);
  font-family: var(--fb);
  -webkit-font-smoothing: antialiased;
  overflow: clip;
}
.hv2-foot * { box-sizing: border-box; }
.hv2-foot a { color: inherit; text-decoration: none; }
.hv2-foot img { display: block; max-width: 100%; }
.hv2-foot :focus-visible { outline: 2.5px solid var(--orange); outline-offset: 3px; }

/* CTA band */
.hv2-foot-cta { border-bottom: 1px solid var(--hair); }
.hv2-foot-cta-inner {
  max-width: var(--max); margin-inline: auto; padding: clamp(3rem, 1.5rem + 5vw, 5.5rem) var(--gx);
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2.5rem; align-items: end;
}
.hv2-foot-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--on-navy-3); margin-bottom: 1.25rem;
}
.hv2-foot-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--orange); }
.hv2-foot-cta-h {
  font-family: var(--fd); font-weight: 900; font-size: clamp(2.4rem, 1.4rem + 4.5vw, 5rem);
  line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; color: var(--on-navy); margin: 0;
}
.hv2-foot-cta-h .hv2-amber { color: var(--orange); }
.hv2-foot-cta-sub { margin: 1.25rem 0 0; color: var(--on-navy-2); font-size: 1.1rem; line-height: 1.6; max-width: 40ch; }
.hv2-foot-cta-actions { display: flex; flex-direction: column; gap: .75rem; align-items: stretch; }
.hv2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 16px 28px; font-family: var(--fd); font-size: 1.1rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1; border-radius: 2px;
  background: var(--orange); color: var(--on-orange);
  transition: background 130ms cubic-bezier(.16,1,.3,1), border-color 130ms, transform 130ms;
}
.hv2-foot a.hv2-btn:not(.hv2-btn--ghost) { color: var(--on-orange); }
.hv2-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.hv2-btn:hover { background: var(--orange-2); }
.hv2-btn--ghost { background: transparent; color: var(--on-navy); border: 1.5px solid var(--hair-2); }
.hv2-btn--ghost:hover { border-color: var(--on-navy); background: transparent; }
.hv2-arrow { transition: transform 280ms cubic-bezier(.16,1,.3,1); }
.hv2-btn:hover .hv2-arrow { transform: translate(3px, -3px); }

/* oversized wordmark */
.hv2-foot-mark {
  display: flex; justify-content: space-between; gap: 0.5%;
  max-width: var(--max); margin-inline: auto; padding: clamp(1.5rem, 1rem + 2vw, 3rem) var(--gx) 0;
  line-height: 0.8; overflow: clip;
}
.hv2-foot-mark span {
  font-family: var(--fd); font-weight: 900; font-size: clamp(2.5rem, -1rem + 16vw, 13rem);
  letter-spacing: -0.01em; color: transparent;
  -webkit-text-stroke: 1px var(--hair-2); text-stroke: 1px var(--hair-2);
  transition: color 200ms, -webkit-text-stroke-color 200ms;
}
.hv2-foot-mark:hover span { color: var(--navy-2); }

/* body grid */
.hv2-foot-body { max-width: var(--max); margin-inline: auto; padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--gx); }
.hv2-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 2.5rem; }
.hv2-foot-brand { display: flex; flex-direction: column; gap: 1rem; align-items: start; }
.hv2-foot-logo .bull-mark { height: 48px; --logo-accent: var(--orange); }
.hv2-foot-tagline { color: var(--on-navy-2); line-height: 1.6; max-width: 32ch; margin: 0; }
.hv2-foot-since { display: inline-flex; align-items: baseline; gap: .5rem; margin-top: .25rem; }
.hv2-foot-since-label { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-3); }
.hv2-foot-since-num { font-family: var(--fd); font-weight: 700; font-size: 1.4rem; color: var(--orange); letter-spacing: .04em; }

.hv2-foot-col { display: flex; flex-direction: column; align-items: start; gap: .8rem; }
.hv2-foot-col-h { font-family: var(--fd); font-weight: 700; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy); margin: 0 0 .4rem; }
.hv2-foot-col a {
  color: var(--on-navy-2); font-size: .95rem; transition: color 130ms;
  display: inline-flex; align-items: center; min-height: 24px;  /* tap target */
}
.hv2-foot-col a:not(.hv2-foot-soc):hover { color: var(--orange); }

/* `.hv2-foot-col a` centres its single-line links. This row turns the same
   anchor into a column, where that align-items centres the label and value
   horizontally instead — and it out-specifies a lone class, so match its
   specificity to win. */
.hv2-foot-col a.hv2-foot-contact-row {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; min-height: 24px; justify-content: center;
}
.hv2-foot-contact-label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-3); }
.hv2-foot-contact-value { font-family: var(--fd); font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; color: var(--on-navy); }
.hv2-foot-contact-row:hover .hv2-foot-contact-value { color: var(--orange); }

.hv2-foot-socials { display: flex; gap: .6rem; margin-top: .6rem; }
.hv2-foot-soc {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair-2); border-radius: 2px; color: var(--on-navy-2);
  transition: color 130ms, border-color 130ms, background 130ms;
}
.hv2-foot-soc svg { width: 18px; height: 18px; }
.hv2-foot-soc:hover { color: var(--on-orange); background: var(--orange); border-color: var(--orange); }

/* bottom bar */
.hv2-foot-bar { border-top: 1px solid var(--hair); }
.hv2-foot-bar-inner {
  max-width: var(--max); margin-inline: auto; padding: 1.5rem var(--gx);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.hv2-foot-copy { font-size: .85rem; color: var(--on-navy-3); }
.hv2-foot-bar-sep { flex: 1; }

@media (max-width: 900px) {
  .hv2-foot-cta-inner { grid-template-columns: 1fr; align-items: start; }
  .hv2-foot-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
  .hv2-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .hv2-foot-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hv2-foot * { transition: none !important; }
}

/* ==============================================================
   THEME SWITCHER  (Bulls = default tokens above · Electric = blue + gold)
   ============================================================== */
.bull-theme {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px;
  background: var(--canvas); flex-shrink: 0; isolation: isolate;
}
.bull-theme-thumb {
  position: absolute; z-index: 0; inset: 3px auto 3px 3px;
  width: calc((100% - 6px) / 2); border-radius: 999px; background: var(--orange);
  transition: transform var(--t2) var(--ease), background var(--t1);
  transform: translateX(100%);  /* Electric is the default, and sits second */
}
:root[data-theme="bulls"] .bull-theme-thumb { transform: none; }
.bull-theme-opt {
  position: relative; z-index: 1; padding: 6px 14px;
  font-family: var(--fb); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-2); border-radius: 999px; transition: color var(--t1);
}
.bull-theme-opt[aria-checked="true"] { color: var(--on-orange); }
.bull-theme-opt[aria-checked="false"]:hover { color: var(--ink); }
.bull-theme-opt:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 3px; }

/* recolor transition while switching (skipped under reduced-motion) */
html.bull-theming .bull, html.bull-theming .bull *,
html.bull-theming .hv2-foot, html.bull-theming .hv2-foot *,
html.bull-theming body.bull-page {
  transition: background-color 320ms cubic-bezier(0.16,1,0.3,1),
              border-color 320ms cubic-bezier(0.16,1,0.3,1),
              color 320ms cubic-bezier(0.16,1,0.3,1),
              fill 320ms cubic-bezier(0.16,1,0.3,1) !important;
}
@media (prefers-reduced-motion: reduce) {
  html.bull-theming .bull, html.bull-theming .bull *,
  html.bull-theming .hv2-foot, html.bull-theming .hv2-foot *,
  html.bull-theming body.bull-page { transition: none !important; }
}

/* ---- Bulls palette: .bull surfaces + text (development-only alternative) ---- */
:root[data-theme="bulls"] .bull {
  --navy:       oklch(17%   0.045 250);
  --navy-2:     oklch(22%   0.044 249);
  --navy-3:     oklch(27%   0.040 248);
  --orange:     oklch(70%   0.195  47);
  --orange-2:   oklch(62%   0.205  42);
  --on-orange:  oklch(18%   0.045  47);
  --canvas:     oklch(99.3% 0.003 250);
  --canvas-2:   oklch(96.8% 0.006 248);
  --ink:        oklch(17%   0.045 250);
  --ink-2:      oklch(38%   0.030 249);
  --ink-3:      oklch(55%   0.020 249);
  --line:       oklch(89%   0.010 249);
  --on-navy:    oklch(97%   0.004 249);
  --on-navy-2:  oklch(80%   0.014 249);
  --on-navy-3:  oklch(63%   0.020 249);
  --hair-d:     oklch(100%  0 0 / 0.12);
  --hair-d-2:   oklch(100%  0 0 / 0.24);
  --accent-ink-2: oklch(52%   0.195  47);
}
:root[data-theme="bulls"] body.bull-page { background: oklch(99.3% 0.003 250); }

/* ---- Bulls palette: footer tokens ---- */
:root[data-theme="bulls"] .hv2-foot {
  --navy:       oklch(17%   0.045 250);
  --navy-2:     oklch(22%   0.044 249);
  --orange:     oklch(70%   0.195  47);
  --orange-2:   oklch(62%   0.205  42);
  --on-orange:  oklch(18%   0.045  47);
  --on-navy:    oklch(97%   0.004 249);
  --on-navy-2:  oklch(80%   0.014 249);
  --on-navy-3:  oklch(62%   0.020 249);
  --hair:       oklch(100%  0 0 / 0.12);
  --hair-2:     oklch(100%  0 0 / 0.24);
}

@media (max-width: 768px) {
  .bull-theme-opt { padding: 6px 10px; font-size: 0.64rem; letter-spacing: 0.06em; }
}

/* ==============================================================
   FAQ
   ============================================================== */
.bull-faq { background: var(--canvas); padding-block: var(--band); }
.bull-faq-split { display: grid; grid-template-columns: 1fr; gap: var(--s48); }
@media (min-width: 1024px) {
  .bull-faq-split { grid-template-columns: 0.85fr 1fr; gap: clamp(var(--s48), 5vw, var(--s96)); align-items: start; }
  .bull-faq-intro { position: sticky; top: calc(72px + var(--s32)); }
}
.bull-faq-h {
  font-family: var(--fd); font-weight: 900; font-size: var(--t-h2b);
  line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--navy); margin-top: var(--s16);
}
.bull-faq-h em { font-style: normal; color: var(--orange); }

/* help card */
.bull-faq-help {
  margin-top: var(--s40); max-width: 42ch;
  display: flex; flex-direction: column; gap: var(--s24);
  padding: clamp(var(--s24), 3vw, var(--s32));
  background: var(--canvas-2); border: 1px solid var(--line); border-radius: var(--r);
}
.bull-faq-help-top { display: flex; align-items: center; gap: var(--s16); }
.bull-faq-help-icon {
  width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--orange); color: var(--on-orange);
}
.bull-faq-help-icon svg { width: 26px; height: 26px; }
.bull-faq-help-label {
  font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); line-height: 1.05;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--navy);
}
.bull-faq-help .bull-btn { align-self: start; }

/* accordion */
.bull-faq-list { display: flex; flex-direction: column; gap: var(--s12); }
.bull-faq-item {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); overflow: clip;
  transition: border-color var(--t2) var(--ease), background var(--t2) var(--ease);
}
.bull-faq-item.is-open { border-color: color-mix(in oklab, var(--orange) 55%, var(--line)); background: var(--canvas-2); }
.bull-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s16); width: 100%;
  padding-block: clamp(var(--s12), 1.4vw, var(--s16)); padding-inline: clamp(var(--s16), 2vw, var(--s24));
  font-family: var(--fd); font-weight: 700; font-size: clamp(1.05rem, 0.92rem + 0.5vw, 1.35rem); line-height: 1.2;
  letter-spacing: 0.01em; color: var(--navy); text-align: left;
  transition: color var(--t1) var(--ease);
}
.bull-faq-q-txt { flex: 1; }
/* the question stays the brand blue on the pale panel (9.6:1); gold here was 1.9:1 */
.bull-faq-q:hover, .bull-faq-item.is-open .bull-faq-q { color: var(--navy); }
.bull-faq-chev { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink-3); transition: transform var(--t2) var(--ease), color var(--t1) var(--ease); }
.bull-faq-q:hover .bull-faq-chev, .bull-faq-item.is-open .bull-faq-chev { color: var(--navy); }
.bull-faq-item.is-open .bull-faq-chev { transform: rotate(180deg); }

.bull-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 440ms var(--ease); }
.bull-faq-item.is-open .bull-faq-a { grid-template-rows: 1fr; }
.bull-faq-a-inner { overflow: hidden; min-height: 0; padding-inline: clamp(var(--s16), 2vw, var(--s24)); }
.bull-faq-a-inner p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; max-width: 64ch; margin: 0; padding-block: 0 clamp(var(--s16), 2vw, var(--s20)); }
.bull-faq-a-inner a { color: var(--accent-ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--accent-ink-2) 40%, transparent); }
.bull-faq-a-inner a:hover { text-decoration-color: var(--accent-ink-2); }
.bull-faq-slots { list-style: none; margin: 0; padding: 0 0 clamp(var(--s16), 2vw, var(--s20)); display: grid; gap: 5px; }
.bull-faq-slots li { color: var(--ink-2); font-size: var(--t-sm); }
.bull-faq-slots strong { color: var(--navy); font-weight: 600; }

/* ==============================================================
   ARTICLE CARDS — shared by the home news strip and the article index,
   so they live in the stylesheet both of those pages already load
   ============================================================== */
.bull-art-grid {
  display: grid;
  gap: clamp(var(--s24), 3vw, var(--s40));
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .bull-art-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .bull-art-grid { grid-template-columns: repeat(3, 1fr); } }

.bull-artcard { display: flex; flex-direction: column; gap: var(--s16); }
.bull-artcard-media { display: block; overflow: hidden; border-radius: var(--r); background: var(--canvas-2); }
.bull-artcard-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  transition: transform var(--t3) var(--ease);
}
.bull-artcard:hover .bull-artcard-media img { transform: scale(1.04); }
.bull-artcard-body { display: flex; flex-direction: column; gap: var(--s8); }
.bull-artcard-date {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bull-artcard-title {
  font-family: var(--fd);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
.bull-artcard-sub { font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }
.bull-artcard-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s4);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}
.bull-artcard-go svg { width: 14px; height: 14px; transition: transform var(--t2) var(--ease); }
.bull-artcard:hover .bull-artcard-go svg { transform: translate(3px, -3px); }

/* ==============================================================
   HOME STRIP
   ============================================================== */
/* The gallery above this is --canvas-2 and the footer below is navy. Every
   adjacent pair on the home page changes ground; repeating canvas-2 here
   turned two section bands into one unexplained 288px void. */
.bull-home-news { background: var(--canvas); padding-block: var(--band); }
.bull-home-news-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s24);
  flex-wrap: wrap;
  margin-bottom: clamp(var(--s32), 4vw, var(--s48));
}
.bull-home-news-h {
  font-family: var(--fd);
  font-weight: 800;
  font-size: var(--t-h2c);
  line-height: 1.02;
  text-transform: uppercase;
  margin-top: var(--s16);
}

@media (prefers-reduced-motion: reduce) {
  .bull-artcard-media img,
  .bull-artcard-go svg { transition: none; }
  .bull-artcard:hover .bull-artcard-media img { transform: none; }
}

/* ==============================================================
   FREE TRIAL — public booking form + result screens
   Editorial, not a card: hairline-ruled steps on canvas, square
   corners (--r), the same band rhythm as the homepage sections.
   Phone-first; nearly all of this traffic is a parent on a mobile.
   ============================================================== */

.bull-trial-head {
  background: var(--navy);
  color: var(--on-navy);
  /* bottom lighter than top — the facts row is the band's floor */
  padding-top: clamp(2.75rem, 1.5rem + 5vw, 4.5rem);
  padding-bottom: clamp(2rem, 1.25rem + 3vw, 3rem);
}
.bull-trial-head h1 {
  font-family: var(--fd);
  font-weight: 800;
  font-size: var(--t-h2b);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--on-navy);
  max-width: 14ch;
}
.bull-trial-head p {
  margin-top: var(--s24);
  max-width: 46ch;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--on-navy-2);
}
.bull-trial-head-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s12) var(--s32);
  margin-top: var(--s32);
  padding-top: var(--s24);
  border-top: 1px solid var(--hair-d);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--on-navy-3);
}
.bull-trial-head-facts li { list-style: none; }
.bull-trial-head-facts b { color: var(--orange); font-weight: 700; }

.bull-trial-body { padding-block: clamp(2rem, 1.25rem + 3vw, 3.5rem); }

/* One column, one axis. The band and the form share this container so the
   headline and the first field line up instead of sitting on two edges. */
.bull-trial-shell {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: var(--gx);
}
.bull-trial-col { min-width: 0; }

/* ---- steps ---- */
.bull-trial-step {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s24) 0 0;
  padding: var(--s24) 0 0;
}
.bull-trial-step + .bull-trial-step { margin-top: var(--s32); }
/* Two groups, so the order speaks for itself — no counters needed. */
.bull-trial-step > legend {
  padding: 0;
  font-family: var(--fd);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---- step progress ---- */
.bull-trial-progress { display: flex; gap: var(--s8); }
.bull-trial-dot {
  height: 3px;
  flex: 1;
  background: var(--line);
  transition: background var(--t2) var(--ease);
}
.bull-trial-dot.is-done,
.bull-trial-dot.is-current { background: var(--orange); }
.bull-trial-stepcount {
  margin-top: var(--s12);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bull-trial-nav { margin-top: var(--s24); }
.bull-trial-nav .bull-btn { width: 100%; justify-content: center; }
.bull-trial-backbtn { width: 100%; justify-content: center; margin-top: var(--s12); }

/* short fields pair up above the fold on anything wider than a phone */
.bull-trial-row { display: grid; gap: var(--s16); }
@media (min-width: 620px) {
  .bull-trial-row { grid-template-columns: 1fr 1fr; gap: var(--s16) var(--s24); }
  .bull-trial-row .bull-trial-field { margin-top: var(--s16); }
}

/* ---- fields ---- */
.bull-trial-field { margin-top: var(--s16); }
.bull-trial-field > label,
.bull-trial-legend-sub {
  display: block;
  margin-bottom: var(--s8);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.bull-trial-field :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
  width: 100%;
  min-height: 48px;              /* one-handed phone target */
  padding: var(--s8) var(--s12);
  background: var(--canvas);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font-family: var(--fb);
  font-size: 1rem;               /* 16px — below this iOS zooms on focus */
  line-height: 1.4;
  transition: border-color var(--t1) var(--ease);
}
.bull-trial-field :is(input, select, textarea):hover { border-color: var(--ink-3); }
.bull-trial-field textarea { min-height: 4.5rem; resize: vertical; }
.bull-trial-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s40);
}
.bull-trial-field select:disabled {
  background-color: var(--canvas-2);
  color: var(--ink-3);
  cursor: not-allowed;
}
.bull-trial-hint {
  display: block;
  margin-top: var(--s8);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink-2);
}

/* consent — the whole row is the target */
.bull-trial-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s12);
  align-items: start;
  margin-top: var(--s24);
  padding: var(--s12) var(--s16);
  background: var(--canvas-2);
  border-radius: var(--r);
  cursor: pointer;
}
.bull-trial-consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--navy); }
.bull-trial-consent label { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); cursor: pointer; }

.bull-trial-submit { margin-top: var(--s24); }
.bull-trial-submit .bull-btn { width: 100%; justify-content: center; }
.bull-trial-reassure {
  margin-top: var(--s12);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-2);
  text-align: center;
}

/* ---- errors + notices ---- */
.bull-trial-errors {
  list-style: none;
  margin-top: var(--s8);
  padding: 0;
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.45;
  color: oklch(45% 0.19 25);
}
.bull-trial-field:has(.bull-trial-errors) :is(input, select, textarea) {
  border-color: oklch(45% 0.19 25);
}
.bull-trial-note {
  margin-top: var(--s16);
  padding: var(--s16);
  border-radius: var(--r);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.bull-trial-note b {
  display: block;
  margin-bottom: var(--s4);
  font-family: var(--fd);
  font-size: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.bull-trial-note a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.bull-trial-note--info  { background: oklch(96.5% 0.035 85);  color: oklch(42% 0.12 75); }
.bull-trial-note--error { background: oklch(96% 0.035 25);    color: oklch(45% 0.19 25); }
.bull-trial-note--quiet { background: var(--canvas-2);        color: var(--ink-2); }

/* ---- pending state ----
   The submit posts and waits on an SMTP send, so the button has to hold the
   parent's attention for a couple of seconds rather than look inert. */
.bull-trial-go { position: relative; }
.bull-trial-go-idle,
.bull-trial-go-busy {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
}
.bull-trial-go-busy { display: none; }
.bull-trial-form.htmx-request .bull-trial-go-idle { display: none; }
.bull-trial-form.htmx-request .bull-trial-go-busy { display: inline-flex; }

.bull-trial-form.htmx-request .bull-trial-go,
.bull-trial-form.htmx-request .bull-trial-backbtn {
  cursor: progress;
}
.bull-trial-go[disabled],
.bull-trial-backbtn[disabled] { opacity: 0.85; }

.bull-trial-spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bull-trial-spin 700ms linear infinite;
}
@keyframes bull-trial-spin { to { transform: rotate(360deg); } }

.bull-trial-reassure-busy { display: none; }
.bull-trial-form.htmx-request .bull-trial-reassure-idle { display: none; }
.bull-trial-form.htmx-request .bull-trial-reassure-busy { display: inline; }

@media (prefers-reduced-motion: reduce) {
  .bull-trial-spinner {
    animation: bull-trial-fade 1s ease-in-out infinite alternate;
    border-right-color: currentColor;
    opacity: 0.55;
  }
  @keyframes bull-trial-fade { to { opacity: 1; } }
}

/* HTMX swap feedback — the group/session block reloads from the server */
.bull-trial-options { position: relative; transition: opacity var(--t1) var(--ease); }
.bull-trial-options.htmx-request { opacity: 0.45; pointer-events: none; }

/* ---- result screens ---- */
.bull-trial-result { padding-block: var(--band); }
.bull-trial-result-inner { min-width: 0; }
.bull-trial-result h1,
.bull-trial-result h2 {
  font-family: var(--fd);
  font-weight: 800;
  font-size: var(--t-h2b);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 16ch;
}
.bull-trial-result p { margin-top: var(--s16); font-size: var(--t-lead); line-height: 1.55; }
.bull-trial-result .bull-trial-hint { margin-top: var(--s16); font-size: var(--t-body); }
.bull-trial-slot + .bull-trial-hint { margin-top: var(--s24); }

.bull-trial-result--dark { background: var(--navy); color: var(--on-navy); }
.bull-trial-result--dark h1 { color: var(--on-navy); }
.bull-trial-result--dark p { color: var(--on-navy-2); }
.bull-trial-result--dark .bull-trial-hint { color: var(--on-navy-3); }

/* The assigned session, stated once and plainly.
   Light is the default: this block also renders inside the form's
   "check your email" state, which has no band wrapper to opt into. */
.bull-trial-slot {
  margin-top: var(--s24);
  padding-top: var(--s16);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--s16);
}
.bull-trial-slot-row { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s16); align-items: baseline; }
.bull-trial-slot-k {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bull-trial-slot-v {
  font-family: var(--fd);
  font-size: 1.35rem;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink);
}
.bull-trial-slot-v small {
  display: block;
  margin-top: var(--s4);
  font-family: var(--fb);
  font-size: var(--t-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-2);
}

/* on the navy confirmation band, invert it */
.bull-trial-result--dark .bull-trial-slot { border-top-color: var(--hair-d); }
.bull-trial-result--dark .bull-trial-slot-k { color: var(--on-navy-3); }
.bull-trial-result--dark .bull-trial-slot-v { color: var(--on-navy); }
.bull-trial-result--dark .bull-trial-slot-v small { color: var(--on-navy-2); }

.bull-trial-actions { display: flex; flex-wrap: wrap; gap: var(--s12); margin-top: var(--s32); }

@media (max-width: 560px) {
  .bull-trial-slot-row { grid-template-columns: 1fr; gap: var(--s4); }
  .bull-trial-actions .bull-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bull-trial-field :is(input, select, textarea),
  .bull-trial-options { transition: none; }
}