/* ==========================================================================
   Collies Wealth Partnerships
   Design tokens carried across verbatim from the Horizons build.
   ========================================================================== */

:root {
  --charcoal:      #1a1a1a;
  --charcoal-deep: #0a0a0a;
  --card-bg:       #242424;
  --off-white:     #f5f5f5;
  --gold:          #c9a84c;
  --text-warm:     #a89968;
  --taupe:         #a39a92;
  --border-gold:   rgba(201, 168, 76, 0.2);
  --border-gold-f: rgba(201, 168, 76, 0.1);

  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Header height, used to pull heroes up underneath the transparent header */
  --header-h: 77px;

  /* Per-page focal point for hero art, so subjects can be kept clear of text */
  --hero-focus: center;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--off-white);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.1;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1.25rem; }

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

.wrap--narrow { max-width: 860px; }

/* Utility ---------------------------------------------------------------- */

.gold { color: var(--gold); }
.italic { font-style: italic; }
.center { text-align: center; }
.eyebrow {
  color: var(--gold);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--charcoal);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  z-index: 200;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.15rem 2.5rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--gold);
  background: var(--gold);
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
}

.btn:hover { background: #d4b661; border-color: #d4b661; }
.btn:active { transform: scale(0.98); }

.btn--ghost {
  background: transparent;
  color: var(--gold);
}
.btn--ghost:hover {
  background: rgba(201, 168, 76, 0.1);
  border-color: var(--gold);
  color: var(--gold);
}

.btn--block { width: 100%; }

/* Header ----------------------------------------------------------------- */

/* Starts transparent so the hero video reads full-bleed, then solidifies on
   scroll. A gradient scrim sits behind the nav while transparent so the links
   stay legible over any frame of the video. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.8), rgba(26, 26, 26, 0));
  transition: opacity 0.35s ease;
}

.site-header.is-stuck {
  background: rgba(26, 26, 26, 0.92);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--border-gold);
}

.site-header.is-stuck::before { opacity: 0; }

/* No JS: fall back to the solid header rather than an unreadable transparent one */
html:not(.js) .site-header {
  background: rgba(26, 26, 26, 0.92);
  border-bottom-color: var(--border-gold);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.brand:hover { opacity: 0.9; }

.brand img { width: 44px; height: 44px; object-fit: contain; }

.brand__name {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.2rem;
  color: var(--off-white);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .brand__name { display: none; }
}

.nav { display: none; align-items: center; gap: 2rem; }

.nav a {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--off-white);
  text-decoration: none;
  padding-block: 0.25rem;
  transition: color 0.2s ease;
}

.nav a:hover { color: var(--gold); }

.nav a[aria-current="page"] { color: var(--gold); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--gold);
}

/* NOTE: this base rule must stay ABOVE the min-width:1024px block below.
   It previously sat after it, so `display:grid` won on source order and the
   hamburger rendered on desktop next to the full nav, doing nothing. */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  color: var(--off-white);
  cursor: pointer;
}
.nav-toggle:hover { color: var(--gold); }

@media (min-width: 1024px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
}

/* Mobile drawer: checkbox-free, tiny JS toggles [data-open] */
.nav-mobile {
  display: none;
  border-top: 1px solid var(--border-gold);
  padding-block: 1.5rem;
}
.nav-mobile[data-open="true"] { display: block; }
.nav-mobile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.nav-mobile a {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--off-white);
  text-decoration: none;
}
.nav-mobile a:hover,
.nav-mobile a[aria-current="page"] { color: var(--gold); }

@media (min-width: 1024px) {
  .nav-mobile { display: none !important; }
}

/* Hero ------------------------------------------------------------------- */

/* Pulled up under the transparent header so the media starts at the very top
   of the viewport. --header-h must match the real header height. */
.hero {
  position: relative;
  min-height: 100svh;
  margin-top: calc(-1 * var(--header-h));
  display: grid;
  place-items: center;
  padding-top: calc(var(--header-h) + clamp(3rem, 8vh, 6rem));
  padding-bottom: clamp(5rem, 12vh, 9rem);
  overflow: hidden;
  background: var(--charcoal);
}

.hero--short { min-height: 78svh; }

/* Subject is composed right of centre. Keep the focal point there, and pan
   further right on phones where a 16:9 frame crops hard to the middle.
   (Set here rather than inline, so the media query can still win.) */
.hero--split { --hero-focus: 68% center; }

@media (max-width: 767px) {
  .hero--split { --hero-focus: 80% center; }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus);
}

/* Video sits above the poster and fades in only once it can actually play */
.hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__video[data-ready="true"] { opacity: 1; }

/* Graduated rather than flat: heavy behind the header and headline so the type
   stays legible, then lifting toward the base of the frame so the foreground
   collie reads clearly instead of being flattened into the murk. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(26, 26, 26, 0.88) 0%,
    rgba(26, 26, 26, 0.82) 38%,
    rgba(26, 26, 26, 0.62) 68%,
    rgba(26, 26, 26, 0.42) 88%,
    rgba(26, 26, 26, 0.5) 100%
  );
}

/* Short heroes carry less art below the text, so they need less lift. */
.hero--short .hero__scrim {
  background: linear-gradient(
    to bottom,
    rgba(26, 26, 26, 0.86) 0%,
    rgba(26, 26, 26, 0.78) 45%,
    rgba(26, 26, 26, 0.6) 85%,
    rgba(26, 26, 26, 0.6) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Asymmetric hero: text held to the left so a subject composed on the right
   side of the art stays clear of the wording. Collapses back to centred on
   phones, where the art is panned instead. */
@media (min-width: 768px) {
  .hero--split .hero__inner {
    text-align: left;
    align-items: flex-start;
    max-width: min(var(--wrap), 100%);
  }
  .hero--split .hero__inner > * { max-width: 58%; }
  .hero--split .hero__lede { margin-inline: 0; }
  .hero--split .hero__actions { max-width: none; justify-content: flex-start; }
}

/* The hero sits over moving footage, so the backdrop behind the type changes
   frame to frame. A soft shadow keeps everything legible on every frame
   without needing to darken the scrim further. */
.hero__inner .eyebrow,
.hero__inner h1,
.hero__inner .hero__lede {
  text-shadow: 0 2px 18px rgba(10, 10, 10, 0.55), 0 1px 3px rgba(10, 10, 10, 0.4);
}

.hero h1 {
  font-size: clamp(2.75rem, 8vw, 6rem);
  margin-bottom: 2.5rem;
}
.hero h1 span { display: block; }
.hero h1 .line-gold { color: var(--gold); font-style: italic; }

.hero__lede {
  color: var(--taupe);
  font-size: clamp(1.0625rem, 2.2vw, 1.3rem);
  max-width: 42rem;
  margin: 0 auto 3rem;
}

/* Force the closing line onto its own row at every width, rather than letting
   it wrap wherever the measure happens to break. */
.hero__lede-break { display: block; }

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

@media (min-width: 640px) {
  .hero__actions { flex-direction: row; justify-content: center; width: auto; }
}

/* Sections --------------------------------------------------------------- */

.section { padding-block: clamp(4rem, 10vw, 6.5rem); }
.section--tight { padding-block: clamp(3rem, 7vw, 5rem); }
.section--rule { border-block: 1px solid var(--border-gold); }
.section--fade { background: linear-gradient(to bottom, var(--charcoal), var(--charcoal-deep)); }
.section--fade-up { background: linear-gradient(to bottom, var(--charcoal-deep), var(--charcoal)); }

.section__title {
  text-align: center;
  font-size: clamp(1.875rem, 4.5vw, 2.75rem);
  margin-bottom: 3.5rem;
}

/* Statement bands ---------------------------------------------------------
   The single-line pronouncements that sit in their own ruled band on the home,
   contact, about, programme and Off the Fence pages. One component so they all
   read as the same device. These were previously styled inline on each page,
   which had drifted into three different treatments: serif italic, plain serif,
   and sans-serif. Always use this class, never inline typography. */

.statement {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.375rem, 3.4vw, 2.125rem);
  line-height: 1.35;
  text-align: center;
  color: var(--off-white);
  max-width: 52rem;
  margin-inline: auto;
}

.statement--gold  { color: var(--gold); }
.statement--quote { font-style: italic; }

/* The marquee statement on the homepage, deliberately a size up */
.statement--lead {
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  line-height: 1.3;
  max-width: 60rem;
}

/* Cards ------------------------------------------------------------------ */

.grid { display: grid; gap: 2rem; }

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border-gold);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.card:hover { border-color: var(--gold); transform: translateY(-4px); }

.card h3 {
  font-size: 1.75rem;
  color: var(--off-white);
  margin-bottom: 0.75rem;
}

.card__desc { color: rgba(245, 245, 245, 0.8); }

.card__list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.card__list li {
  position: relative;
  padding-left: 1.5rem;
  color: rgba(245, 245, 245, 0.9);
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 7px;
  height: 7px;
  background: var(--gold);
}

.card__cta {
  margin-top: auto;
  color: var(--gold);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.card__cta:hover { gap: 0.85rem; }
.card__cta svg { transition: transform 0.2s ease; }

/* Stat blocks ------------------------------------------------------------ */

.stats {
  display: grid;
  gap: 2.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .stats > * + * { border-left: 1px solid var(--border-gold); }
  .stats > * { padding-inline: 1.5rem; }
}

.stat h3 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.5rem;
  letter-spacing: 0;
}

.stat p { color: rgba(245, 245, 245, 0.7); font-size: 0.9375rem; margin: 0; }

/* Prose ------------------------------------------------------------------ */

.prose { max-width: 52rem; margin-inline: auto; }

.prose h2 {
  font-size: clamp(1.625rem, 3.5vw, 2.125rem);
  font-weight: 700;
  color: var(--off-white);
  margin-top: 3rem;
}
.prose h2:first-child { margin-top: 0; }

.prose h3 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  color: var(--off-white);
  margin-top: 2.5rem;
}

.prose h4 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.01em;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.disclaimer {
  border-top: 1px solid var(--border-gold-f);
  margin-top: 3.5rem;
  padding-top: 1.75rem;
}
.disclaimer p { font-size: 0.875rem; color: var(--text-warm); }
.disclaimer strong { color: var(--off-white); }

.prose p,
.prose li { color: rgba(245, 245, 245, 0.8); font-size: 1.0625rem; }

/* Body links inside prose go gold and underlined, but buttons must keep their
   own colours. `.prose a` (0,1,1) outranks `.btn` (0,1,0), so without the
   :not() the CTA rendered gold-on-gold and was invisible. */
.prose a:not(.btn):not(.card__cta) {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose .btn { color: var(--charcoal); text-decoration: none; }
.prose .btn--ghost { color: var(--gold); }

/* Generic list styling applies ONLY to unclassed lists. Any list carrying its
   own class (.tick-list, .feature-grid, .journey, .crumbs) opts out entirely.
   Without the :not([class]), `.prose ul li::before` at (0,1,3) outranked
   `.tick-list li::before` at (0,1,2) and turned every tick into a filled
   square, and `.prose ul` outranked `.feature-grid` so it could not be hidden. */

.prose ol:not([class]) { padding-left: 1.35rem; display: grid; gap: 0.85rem; margin-bottom: 1.75rem; }
.prose ol:not([class]) li { padding-left: 0.35rem; }
.prose ol:not([class]) li::marker { color: var(--gold); font-weight: 700; }

.prose ul:not([class]) { padding-left: 0; list-style: none; display: grid; gap: 0.85rem; margin-bottom: 1.75rem; }
.prose ul:not([class]) li { position: relative; padding-left: 1.75rem; }
.prose ul:not([class]) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px; height: 8px;
  background: var(--gold);
}

.principles { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .principles { grid-template-columns: repeat(2, 1fr); } }
.principles div { display: flex; gap: 0.85rem; align-items: flex-start; }
.principles span { color: var(--gold); font-size: 1.5rem; line-height: 1; }
.principles p { margin: 0; color: rgba(245, 245, 245, 0.9); }

/* Person ----------------------------------------------------------------- */

.person { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .person { grid-template-columns: 1fr 1fr; } }

/* Shared image treatment: a fine gold edge and a soft gold bloom rather than a
   heavy black drop, so it reads as warmth and sits with the rest of the site. */
.framed {
  box-shadow:
    0 0 0 1px rgba(201, 168, 76, 0.3),
    0 0 34px -10px rgba(201, 168, 76, 0.25),
    0 20px 44px -22px rgba(0, 0, 0, 0.6);
}

.person img {
  width: 100%;
  filter: grayscale(100%) contrast(1.05);
  box-shadow:
    0 0 0 1px rgba(201, 168, 76, 0.3),
    0 0 34px -10px rgba(201, 168, 76, 0.25),
    0 20px 44px -22px rgba(0, 0, 0, 0.6);
  transition: filter 0.4s ease;
}
.person img:hover { filter: grayscale(0%); }

.person__role {
  color: var(--gold);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.contact-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(245, 245, 245, 0.8);
  text-decoration: none;
  transition: color 0.2s ease;
}
.contact-list a:hover { color: var(--gold); }
.contact-list svg { flex-shrink: 0; color: var(--text-warm); }

.social-list {
  list-style: none;
  display: flex;
  gap: 1.25rem;
  margin: 1.75rem 0 0;
  padding: 0;
}
.social-list a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: rgba(245, 245, 245, 0.75);
  border: 1px solid var(--border-gold);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.social-list a:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
}

/* Article cards ---------------------------------------------------------- */

.article-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border-gold);
  padding: 2rem;
  height: 100%;
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.article-card:hover { border-color: var(--gold); transform: translateY(-4px); }

.article-card__meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-warm);
  margin-bottom: 1rem;
}
.article-card__meta .cat { color: var(--gold); font-weight: 600; }

.article-card h3 {
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--off-white);
  margin-bottom: 0.85rem;
}

.article-card p { color: rgba(245, 245, 245, 0.75); font-size: 0.9375rem; flex-grow: 1; }

.article-card__more {
  color: var(--gold);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 1rem;
}

/* Article ---------------------------------------------------------------- */

.article-hero {
  position: relative;
  padding-block: clamp(6rem, 14vh, 9rem) clamp(3rem, 8vh, 5rem);
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(4rem, 10vh, 7rem));
  overflow: hidden;
  border-bottom: 1px solid var(--border-gold-f);
}

.article-hero__media { position: absolute; inset: 0; z-index: 0; }
.article-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.article-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(26,26,26,.9) 0%, rgba(26,26,26,.78) 55%, rgba(26,26,26,.85) 100%);
}

.article-hero__inner { position: relative; z-index: 2; text-align: center; max-width: 56rem; margin-inline: auto; }
.article-hero__inner h1 { font-size: clamp(2rem, 5.5vw, 3.5rem); margin-bottom: 1.5rem; }
.article-hero__inner h1,
.article-hero__inner .article-hero__intro { text-shadow: 0 2px 18px rgba(10,10,10,.55); }

.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.article-hero__cat {
  background: var(--gold);
  color: var(--charcoal);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
}
.article-hero__date { color: var(--off-white); font-size: 0.875rem; font-weight: 500; }

.article-hero__intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
  color: rgba(245, 245, 245, 0.9);
  max-width: 46rem;
  margin-inline: auto;
}

/* Gold rule under article section headings */
.prose h2.ruled { margin-bottom: 0.75rem; }
.rule-gold {
  width: 4rem;
  height: 2px;
  background: var(--gold);
  margin-bottom: 1.75rem;
}

.tick-list { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; display: grid; gap: 0.85rem; }
.tick-list li {
  position: relative;
  padding-left: 2rem;
  color: rgba(245, 245, 245, 0.8);
  font-size: 1.0625rem;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

.banner-gold {
  border: 1px solid var(--gold);
  background: rgba(201, 168, 76, 0.06);
  padding: 1.5rem;
  margin: 2rem 0;
  text-align: center;
}
.banner-gold p { color: var(--gold); font-size: 1.125rem; font-weight: 600; margin: 0; }

.figure-chart {
  border: 1px solid var(--border-gold);
  border-top: 2px solid var(--gold);
  background: var(--charcoal-deep);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin: 2.5rem 0;
}
.figure-chart figcaption { text-align: center; color: var(--gold); font-size: 1.0625rem; margin-bottom: 1.25rem; }
.figure-chart svg { width: 100%; height: auto; }
.figure-chart .note { text-align: center; font-style: italic; font-size: 0.9375rem; margin: 1rem 0 0; }

.quote-block {
  border-left: 3px solid var(--gold);
  padding: 0.5rem 0 0.5rem 1.75rem;
  margin: 2.5rem 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  color: var(--gold);
}
.quote-block p { margin: 0; }

.data-table { margin: 2.5rem 0; }
.data-table figcaption { text-align: center; color: var(--gold); font-size: 1.0625rem; margin-bottom: 1.25rem; }
.data-table__scroll { overflow-x: auto; }
.data-table table { width: 100%; border-collapse: collapse; border: 1px solid var(--border-gold); min-width: 26rem; }
.data-table th {
  text-align: left;
  padding: 0.85rem 1rem;
  font-weight: 500;
  color: var(--gold);
  background: rgba(201, 168, 76, 0.06);
  border-bottom: 1px solid var(--border-gold);
  font-size: 0.9375rem;
}
.data-table th:last-child { text-align: right; }
.data-table td {
  padding: 0.85rem 1rem;
  color: rgba(245, 245, 245, 0.8);
  border-bottom: 1px solid var(--border-gold-f);
  vertical-align: top;
  font-size: 0.9375rem;
}
.data-table td:last-child { text-align: right; white-space: nowrap; }
.data-table tr:last-child td { border-bottom: 0; }

.conclusion-box { border: 1px solid var(--gold); padding: clamp(1.5rem, 4vw, 2rem); margin-top: 2rem; }
.conclusion-box__title { color: var(--gold); font-size: 1.25rem; font-weight: 600; text-align: center; margin-bottom: 1.25rem; }

/* Legal pages ------------------------------------------------------------ */

.legal-hero {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-gold-f);
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(3.5rem, 9vh, 5.5rem));
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  text-align: center;
}

.legal-hero h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); margin-bottom: 1rem; }

.legal-hero__updated {
  color: rgba(245, 245, 245, 0.7);
  font-size: 0.8125rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
}

/* Legal copy leads with gold headings, matching the original build */
.prose--legal h2 { color: var(--gold); font-family: var(--font-serif); font-weight: 300; }
.prose--legal h3 { font-size: 1.375rem; }

.contact-box {
  border: 1px solid var(--gold);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  text-align: center;
  margin-top: 2rem;
}
.contact-box > p:first-child { font-style: italic; margin-bottom: 1.75rem; }
.contact-box table {
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  border-collapse: collapse;
  text-align: left;
}
.contact-box td {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-gold-f);
  color: rgba(245, 245, 245, 0.8);
  font-size: 0.9375rem;
}
.contact-box td:first-child {
  color: var(--text-warm);
  font-weight: 500;
  width: 38%;
  padding-right: 1.5rem;
}
.contact-box tr:last-child td { border-bottom: 0; }
.contact-box__meta { font-size: 0.8125rem; color: var(--text-warm); margin: 1.5rem 0 0; }

.pds-table td {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-gold-f);
  color: rgba(245, 245, 245, 0.8);
  font-size: 0.9375rem;
  vertical-align: top;
}
.pds-table td:first-child {
  color: var(--text-warm);
  font-weight: 500;
  width: 34%;
  min-width: 9rem;
  padding-right: 1.5rem;
}
.pds-table tr:last-child td { border-bottom: 0; }

/* Public Disclosure Statement components ---------------------------------- */

/* Top-ruled panel, used for paired explainer cards and feature tiles */
.panel {
  border: 1px solid var(--border-gold-f);
  border-top: 2px solid var(--gold);
  background: var(--charcoal);
  padding: clamp(1.25rem, 3vw, 1.5rem);
}
.panel h4 { margin-top: 0; }
.panel p, .panel li { font-size: 0.9375rem; }
.panel > *:last-child { margin-bottom: 0; }

.panel-pair { display: grid; gap: 1.5rem; margin: 1.75rem 0; }
@media (min-width: 768px) { .panel-pair { grid-template-columns: 1fr 1fr; } }

.feature-grid { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 560px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
.feature-grid li { list-style: none; text-align: center; }
.feature-grid p { margin: 0; font-size: 0.9375rem; color: rgba(245, 245, 245, 0.8); }

/* Orbit -------------------------------------------------------------------
   The features ringed around the logo, as on Brett's original site. The old
   build hard-coded a 900x700px absolutely-positioned box, which overflowed its
   container and could not adapt. Positions were already percentages, so here
   the container is fluid with a fixed aspect ratio and the whole pattern
   scales. Below 1000px it hands over to the stacked grid, which stays in the
   markup so the content is never dependent on the decorative layout.        */

.orbit { display: none; }

@media (min-width: 1000px) {
  .orbit { display: block; }
  /* The orbit carries its own logo and captions, so the stacked versions go */
  .feature-grid,
  .custodian { display: none; }
}

.orbit {
  position: relative;
  width: min(900px, 100%);
  margin: 2.5rem auto 0;
  aspect-ratio: 900 / 700;
  min-height: 600px;
}

.orbit__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  text-align: center;
  z-index: 2;
}

.orbit__center img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(201, 168, 76, 0.2);
}

.orbit__caption {
  margin-top: 1rem;
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-warm);
  line-height: 1.5;
}
.orbit__caption strong {
  display: block;
  color: var(--gold);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 0.2rem;
}

.orbit__node {
  position: absolute;
  width: 23%;
  border: 1px solid var(--border-gold-f);
  border-top: 2px solid var(--gold);
  background: var(--charcoal);
  padding: 0.85rem 0.75rem;
  text-align: center;
}

.orbit__node p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(245, 245, 245, 0.85);
}

.custodian { text-align: center; margin-bottom: 2.5rem; }
.custodian img {
  width: 160px; height: 160px;
  margin-inline: auto;
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(201, 168, 76, 0.2);
}
.custodian p {
  margin-top: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-warm);
}
.custodian strong {
  display: block;
  color: var(--gold);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 0.25rem;
}

/* "The Collies Difference" section headers */
.diff-head {
  background: rgba(201, 168, 76, 0.1);
  border-left: 2px solid var(--gold);
  color: var(--gold);
  font-style: italic;
  text-align: center;
  padding: 0.85rem 1rem;
  margin: 2.5rem 0 1.25rem;
  font-size: 1.25rem;
}

/* Numbered onboarding journey */
.journey { list-style: none; padding: 0; display: grid; gap: 0; margin: 2rem 0 0; }
.journey li {
  display: flex;
  gap: clamp(1rem, 3vw, 1.5rem);
  border-bottom: 1px solid var(--border-gold-f);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}
.journey li:last-child { border-bottom: 0; margin-bottom: 0; }
.journey__num {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
}
.journey h4 { margin: 0 0 0.35rem; }
.journey p { margin: 0; font-size: 0.9375rem; }

/* Breadcrumb ------------------------------------------------------------- */

.crumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 2rem;
  font-size: 0.8125rem;
  color: var(--text-warm);
}
.crumbs a { color: var(--text-warm); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }

/* Form ------------------------------------------------------------------- */

.form-panel {
  background: var(--charcoal-deep);
  border: 1px solid var(--border-gold);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}

.field { margin-bottom: 1.5rem; }

.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--off-white);
  margin-bottom: 0.5rem;
}

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: #111;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 0;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.field textarea { resize: vertical; min-height: 9rem; }

.field-row { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .field-row { grid-template-columns: 1fr 1fr; } }

.field__error {
  display: block;
  color: #f87171;
  font-size: 0.875rem;
  margin-top: 0.375rem;
}

/* Honeypot: hidden from humans, visible to naive bots */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.notice {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--gold);
  background: rgba(201, 168, 76, 0.08);
  font-size: 0.9375rem;
}
.notice--error { border-left-color: #f87171; background: rgba(248, 113, 113, 0.08); }

/* Footer ----------------------------------------------------------------- */

.site-footer { background: var(--charcoal); padding-block: clamp(3rem, 8vw, 4.5rem); }

.footer-grid { display: grid; gap: 3rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 2rem; } }

.footer-brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.5rem; }
.footer-brand img { width: 44px; height: 44px; object-fit: contain; }
.footer-brand span { font-family: var(--font-serif); font-size: 1.25rem; letter-spacing: 0.02em; }

.footer-blurb { color: var(--text-warm); max-width: 24rem; }

.footer-head {
  display: block;
  color: var(--gold);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.footer-links a { color: rgba(245, 245, 245, 0.8); text-decoration: none; transition: color 0.2s ease; }
.footer-links a:hover { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid var(--border-gold-f);
  padding-top: 2rem;
  display: grid;
  gap: 1.5rem;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-legal a { color: var(--text-warm); font-size: 0.875rem; text-decoration: none; font-weight: 500; }
.footer-legal a:hover { color: var(--gold); }

.footer-copy { color: var(--text-warm); font-size: 0.875rem; text-align: center; margin: 0; }

@media (min-width: 1024px) {
  .footer-bottom__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
  .footer-copy { text-align: left; }
  .footer-legal { justify-content: flex-end; }
}

.taki-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text-warm);
  font-size: 0.75rem;
  opacity: 0.75;
  transition: opacity 0.3s ease;
  justify-self: center;
}
.taki-credit:hover { opacity: 1; }
.taki-credit img { width: 22px; height: 22px; object-fit: contain; }

@media (min-width: 1024px) { .taki-credit { justify-self: end; } }

/* Steps ------------------------------------------------------------------ */

.steps { display: grid; gap: clamp(3.5rem, 9vw, 6rem); max-width: 68rem; margin-inline: auto; }

.step {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 880px) {
  .step { grid-template-columns: 1fr 1fr; }
  /* Alternate the imagery so the eye zig-zags down the page */
  .step--reverse .step__media { order: 2; }
}

.step__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.step__head {
  display: flex;
  align-items: baseline;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  margin-bottom: 1rem;
}

.step__num {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 9vw, 5rem);
  font-weight: 300;
  line-height: 0.85;
  color: var(--gold);
  opacity: 0.45;
  font-variant-numeric: tabular-nums;
}

.step__head h3 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  color: var(--off-white);
  margin: 0;
}

.step__body p { color: rgba(245, 245, 245, 0.8); font-size: 1.0625rem; }
.step__body > *:last-child { margin-bottom: 0; }

/* Callout ---------------------------------------------------------------- */

.callout {
  border: 1px solid var(--border-gold);
  background: rgba(201, 168, 76, 0.06);
  padding: clamp(1.5rem, 4vw, 2rem);
  margin-top: 2rem;
}

.callout__label {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.callout p:last-child { margin-bottom: 0; color: var(--text-warm); }

.callout--accent {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  background: rgba(201, 168, 76, 0.08);
}
.callout--accent h2 { color: var(--gold); font-weight: 700; font-size: 1.5rem; margin-bottom: 1rem; }
.callout--accent p { color: rgba(245, 245, 245, 0.9); font-size: 1.125rem; margin: 0; }

/* Scroll reveal ---------------------------------------------------------- */

/* Content is visible by default and stays that way unless JS has positively
   confirmed it can animate it back in. No JS, no IntersectionObserver, a
   script error, or reduced motion all leave the page fully readable. */
html.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

html.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero__video { transition: none; }
  .card:hover, .article-card:hover { transform: none; }
}