/* ==========================================================================
   Champion Worldwide Corporation — Design System
   Glossy off-white · Silver · Ink — warm ivory surfaces, silver accents
   ========================================================================== */

:root {
  --ink: #f6f4f0;
  --ink-2: #ece7df;
  --ink-3: #ffffff;
  --ink-soft: #e2ddd4;
  --silver: #8f95a1;
  --silver-2: #4b5058;
  --silver-3: #6f7681;
  --cream: #f1ede6;
  --cream-2: #e6e0d7;
  --paper: #ffffff;

  --gold: #8f95a1;
  --gold-2: #3f4550;
  --gold-3: #6f7681;
  --gold-glow: rgba(28, 29, 34, 0.12);
  --gold-deep: #3f4550;   /* AA-safe accent for text on ivory/paper */

  --text: #1c1d22;
  --text-dim: #4e525c;
  --text-dark: #1c1d22;
  --text-dark-dim: #4e525c;

  --line: rgba(28, 29, 34, 0.16);
  --line-soft: rgba(28, 29, 34, 0.1);

  --ff-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --ff-serif: "Playfair Display", Georgia, serif;
  --ff-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --maxw: 1240px;
  --gut: 28px;
  --radius: 2px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-lift: 0 28px 60px -30px rgba(28, 29, 34, 0.28);
}

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

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

/* Every heading sits on the page's one left alignment line -- the same edge the
   justified body copy starts from -- so a heading never floats centered above
   text that is flushed left. The only exceptions are self-contained numbered
   tiles, whose whole box is centered and which hold no other text to fall out
   of line with. */
h1, h2, h3, h4, h5, h6 {
  text-align: left;
}
.card[style*="text-align:center"] h3,
[style*="text-align:center"] h1,
[style*="text-align:center"] h2,
[style*="text-align:center"] h3,
[style*="text-align:center"] h4,
[style*="text-align:center"] h5,
[style*="text-align:center"] h6 {
  text-align: center;
}

/* Body copy is justified edge-to-edge. Hyphenation is what keeps justification
   clean: without it the browser stretches the spaces on short lines, which is
   the "gaps between words" look. Headings opt out below. */
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 16.5px;
  line-height: 1.75;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  overflow-wrap: break-word;
}
p, li, dd, figcaption { text-align: justify; }
p { text-wrap: pretty; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--silver-2); }
button { font: inherit; }

::selection {
  background: var(--gold);
  color: #0a0a0c;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold-3), var(--gold-3));
  border: 3px solid var(--ink);
  border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
/* Intro columns keep a ~900px reading measure, but they start on the same left
   gutter as .wrap instead of being centered inside it, so their headings line up
   with the headings in every other section. */
.wrap--narrow { max-width: var(--maxw); }
.wrap--narrow:not(.wrap) { margin-inline: 0; }
.wrap--narrow > * { max-width: 900px; }

section { position: relative; }
.section { padding: clamp(72px, 9vw, 132px) 0; }
.section--tight { padding: clamp(56px, 6vw, 88px) 0; }
.section--cream { background: var(--cream); color: var(--text-dark); }
.section--paper { background: var(--paper); color: var(--text-dark); }

/* Light sections re-map the palette tokens so every nested component
   (accordion rows, tags, schedules, cards, body copy) keeps its contrast. */
.section--cream,
.section--paper {
  --text: var(--text-dark);
  --text-dim: var(--text-dark-dim);
  --gold-2: #3f4550;
  --line: rgba(93, 100, 112, 0.28);
  --line-soft: rgba(10, 10, 12, 0.1);
  --gold-glow: rgba(93, 100, 112, 0.25);
  text-align: justify;
}
.section--ink-2 { background: var(--ink-2); }

.grid { display: grid; gap: 26px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5 {
  font-family: var(--ff-serif);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.4rem, 5.3vw, 4.5rem); }
h2 { font-size: clamp(1.95rem, 3.9vw, 3.35rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.25; }
h4 {
  font-family: var(--ff-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-2);
}
h5 {
  font-family: var(--ff-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-2);
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.28rem);
  line-height: 1.72;
  color: var(--text-dim);
}
.section--cream .lead,
.section--paper .lead { color: var(--text-dark-dim); }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--silver-3);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--silver));
}
.eyebrow--center { justify-content: center; }.eyebrow--center::after {
  content: "";
  width: 42px; height: 1px;
  background: linear-gradient(90deg, var(--silver), transparent);
}
.section--cream .eyebrow,
.section--paper .eyebrow { color: var(--text-dark-dim); }
.section--cream .eyebrow::before,
.section--paper .eyebrow::before { background: linear-gradient(90deg, transparent, var(--text-dark-dim)); }
.section--cream .eyebrow--center::after,
.section--paper .eyebrow--center::after { background: linear-gradient(90deg, var(--text-dark-dim), transparent); }

.gold-text {
  background: linear-gradient(100deg, #6f7681 0%, #1c1d22 55%, #4b5058 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gold { color: var(--gold); }

.rule {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin: 0;
}
.rule--left { background: linear-gradient(90deg, var(--gold), transparent); }

/* Decorative divider */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 8px 0 0;
}
.divider span {
  display: block;
  height: 1px;
  width: 70px;
  background: linear-gradient(90deg, transparent, var(--silver));
}
.divider span:last-child { background: linear-gradient(90deg, var(--silver), transparent); }
.divider i {
  width: 6px; height: 6px;
  transform: rotate(45deg);
  background: var(--silver);
  box-shadow: 0 2px 10px rgba(28, 29, 34, 0.18);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--silver);
  background: transparent;
  color: var(--silver-2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.45s var(--ease);
  text-align: center;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--silver);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
  z-index: -1;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: #0a0a0c; transform: translateY(-2px); }
.btn:hover::before { transform: translateY(0); }
.btn--solid { background: var(--silver); color: #0a0a0c; }
.btn--solid::before { background: var(--silver-2); }
.btn--solid:hover { color: #0a0a0c; }
.btn--ghost { border-color: var(--line); color: var(--text-dim); }
.btn--sm { padding: 11px 22px; font-size: 0.68rem; letter-spacing: 0.16em; color: var(--silver-2); border-color: var(--line); }
.btn--sm:hover { color: #0a0a0c; border-color: var(--silver); }

/* outline buttons sit on light sections: use the AA-safe bronze for the label.
   Solid buttons keep their dark label against the gold fill. */
.section--cream .btn:not(.btn--solid),
.section--paper .btn:not(.btn--solid) { color: var(--gold-deep); }
.section--cream .btn:hover,
.section--paper .btn:hover { color: #0a0a0c; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  overflow-wrap: anywhere;
  gap: 10px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  transition: gap 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.link-arrow::after {
  content: "→";
  font-size: 0.95rem;
  line-height: 1;
}
.link-arrow:hover { gap: 16px; color: var(--text); border-color: var(--gold); }
.section--paper .link-arrow { color: var(--gold-3); }
.section--cream .link-arrow:hover,
.section--paper .link-arrow:hover { color: var(--text-dark); border-color: var(--gold-3); }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.topbar {
  background: var(--ink-3);
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-3);
  padding: 9px 0;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.topbar a { color: var(--silver-2); transition: color 0.3s; }
.topbar a:hover { color: var(--text); }
.topbar__tag { color: var(--silver-3); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--line);
  box-shadow: 0 20px 50px -32px rgba(28, 29, 34, 0.45);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 84px;
}
.nav__menu { min-width: 0; }

.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand__mark {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--silver);
  font-family: var(--ff-serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--silver-2);
  position: relative;
  background: linear-gradient(150deg, rgba(28, 29, 34, 0.05), transparent 65%);
  letter-spacing: 0.02em;
}
.brand__mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(28, 29, 34, 0.16);
}
.brand__name {
  font-family: var(--ff-serif);
  font-size: 1.04rem;
  line-height: 1.18;
  letter-spacing: 0.03em;
  color: var(--text);
  display: block;
}
.brand__sub {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 3px;
}

.nav__menu {
  display: flex;
  align-items: center;
  /* capped low: on 1600px+ screens the wrap stops growing, so a wider gap
     pushes the last link under the CTA button */
  gap: clamp(8px, 0.9vw, 12px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__menu a {
  display: block;
  font-size: 0.645rem;
  font-weight: 500;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 0;
  position: relative;
  transition: color 0.3s var(--ease);
  white-space: nowrap;
}
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  width: 0; height: 1px;
  background: var(--silver);
  transition: width 0.4s var(--ease);
}
.nav__menu a:hover { color: var(--text); }
.nav__menu a:hover::after,
.nav__menu a.is-active::after { width: 100%; }
.nav__menu a.is-active { color: var(--silver-2); }

.nav__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav__cta { white-space: nowrap; }
.nav__cta.btn--sm { padding: 10px 16px; font-size: 0.6rem; letter-spacing: 0.13em; }

.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid var(--line-soft);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.nav__toggle span {
  position: absolute;
  left: 12px;
  width: 22px; height: 1px;
  background: var(--silver-2);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), top 0.4s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 17px; }
.nav__toggle span:nth-child(2) { top: 22px; }
.nav__toggle span:nth-child(3) { top: 27px; }
.nav__toggle.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(248, 247, 244, 0.985);
  backdrop-filter: blur(8px);
  padding: var(--nav-pad-top, 108px) 26px 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav ul {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}
.mobile-nav li { border-bottom: 1px solid var(--line-soft); }
.mobile-nav a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px 2px;
  font-family: var(--ff-serif);
  font-size: 1.42rem;
  color: var(--text);
}
.mobile-nav a span {
  font-family: var(--ff-body);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--gold-3);
}
.mobile-nav a.is-active { color: var(--gold-2); }
.mobile-nav .mobile-nav__foot {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mobile-nav .mobile-nav__foot a { display: inline; font-family: var(--ff-body); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--gold-2); padding: 0; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(76px, 9vw, 124px) 0 clamp(62px, 7vw, 96px);
  overflow: hidden;
  background:
    radial-gradient(120% 88% at 78% 8%, rgba(199, 204, 212, 0.55) 0%, transparent 58%),
    radial-gradient(90% 70% at 8% 96%, rgba(199, 204, 212, 0.3) 0%, transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f7f4ef 62%, #efeae3 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(28, 29, 34, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 29, 34, 0.05) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(115% 95% at 50% 12%, #000 8%, transparent 72%);
  -webkit-mask-image: radial-gradient(115% 95% at 50% 12%, #000 8%, transparent 72%);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 720px; height: 720px;
  right: -220px; top: -280px;
  border-radius: 50%;
  border: 1px solid rgba(28, 29, 34, 0.09);
  box-shadow:
    0 0 0 60px rgba(28, 29, 34, 0.022),
    0 0 0 130px rgba(28, 29, 34, 0.014);
  animation: spin 60s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero__inner {
  max-width: 940px;
  position: relative;
  z-index: 2;
}
.hero--center .hero__inner { max-width: 1000px; margin-inline: auto; text-align: center; }
.hero--center .eyebrow { justify-content: center; }
.hero--center .eyebrow::after {
  content: "";
  width: 42px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.hero h1 { margin-bottom: 22px; }
.hero h1 .ln { display: block; }

.hero__tagline {
  font-family: var(--ff-display);
  font-size: clamp(1.16rem, 2vw, 1.6rem);
  font-style: italic;
  color: var(--silver-2);
  letter-spacing: 0.02em;
  margin: 0 0 30px;
}
.hero__lede { max-width: min(72ch, 100%); font-size: clamp(1rem, 1.3vw, 1.14rem); margin-bottom: 34px; }
.hero--center .hero__lede { margin-inline: auto; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero--center .hero__actions { justify-content: center; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  gap: 10px;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silver-3);
  z-index: 2;
}
.hero__scroll i {
  display: block;
  width: 1px; height: 46px;
  background: linear-gradient(var(--silver), transparent);
  animation: drop 2.2s var(--ease) infinite;
}
@keyframes drop {
  0%, 100% { transform: scaleY(0.35); opacity: 0.35; transform-origin: top; }
  50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

/* Page hero (inner pages) */
.page-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(64px, 8vw, 112px) 0 clamp(52px, 6vw, 80px);
  background:
    radial-gradient(100% 80% at 82% 0%, rgba(199, 204, 212, 0.5) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f4f1ec 100%);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(28, 29, 34, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 29, 34, 0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
}
.page-hero h1 { max-width: 17ch; margin-bottom: 16px; }
.page-hero--center h1 { max-width: none; }
.page-hero__tagline {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  color: var(--silver-2);
  margin: 0 0 26px;
}
.page-hero__body { max-width: 780px; }

/* ==========================================================================
   Ticker
   ========================================================================== */
.ticker {
  border-block: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(28, 29, 34, 0.035), transparent);
  padding: 15px 0;
  overflow: hidden;
  white-space: nowrap;
}
.ticker__track {
  display: inline-flex;
  align-items: center;
  gap: 42px;
  animation: slide 38s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track span {
  font-family: var(--ff-display);
  font-size: clamp(0.98rem, 1.5vw, 1.24rem);
  font-style: italic;
  color: var(--silver-2);
  letter-spacing: 0.04em;
}
.ticker__track i {
  width: 5px; height: 5px;
  background: var(--silver);
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0.85;
}
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  position: relative;
  padding: 36px 32px;
  background: linear-gradient(160deg, #ffffff, #fbfaf8);
  border: 1px solid var(--line-soft);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(143, 149, 161, 0));
  transition: width 0.6s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(143, 149, 161, 0.55);
  background: linear-gradient(160deg, #ffffff, #f2efea);
  box-shadow: var(--shadow-lift);
}
.card:hover::before { width: 100%; }
.card__num {
  font-family: var(--ff-display);
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(28, 29, 34, 0.24);
  margin-bottom: 14px;
  display: block;
}
.card h3 { margin-bottom: 12px; }
.card p { color: var(--text-dim); font-size: 0.97rem; }

/* Card with a category photo: the image bleeds to the card edges, then the
   card's own padding takes over for the copy underneath. */
.card--photo { padding-top: 0; }
.card__photo {
  display: block;
  max-width: none; /* the global img{max-width:100%} would clamp the bleed */
  width: calc(100% + 64px);
  height: 190px;
  object-fit: cover;
  margin: 0 -32px 26px;
  border-bottom: 1px solid var(--line-soft);
  transition: transform 0.6s var(--ease);
}
.card--photo:hover .card__photo { transform: scale(1.04); }
.card--cream,
.section--cream .card,
.section--paper .card {
  background: #fff;
  border-color: rgba(10, 10, 12, 0.09);
}
.section--cream .card:hover,
.section--paper .card:hover { border-color: rgba(143, 149, 161, 0.5); box-shadow: 0 26px 52px -30px rgba(28, 29, 34, 0.22); }
.section--cream .card p,
.section--paper .card p { color: var(--text-dark-dim); }
.section--cream .card__num,
.section--paper .card__num { color: rgba(93, 100, 112, 0.45); }

/* Icon chip */
.chip {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(28, 29, 34, 0.18);
  margin-bottom: 20px;
  background: linear-gradient(150deg, rgba(28, 29, 34, 0.06), transparent 70%);
  flex-shrink: 0;
}
.chip svg { width: 21px; height: 21px; stroke: var(--gold-2); fill: none; stroke-width: 1.4; }
.section--cream .chip,
.section--paper .chip { border-color: rgba(93, 100, 112, 0.35); background: linear-gradient(150deg, rgba(93, 100, 112, 0.1), transparent 70%); }
.section--cream .chip svg,
.section--paper .chip svg { stroke: var(--gold-3); }

/* Value / check list */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative;
  padding: 9px 0 9px 30px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.97rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 2px; top: 19px;
  width: 9px; height: 9px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.section--cream .checklist li,
.section--paper .checklist li { border-color: rgba(10, 10, 12, 0.08); }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  font-size: 0.96rem;
}
.ticks li::before {
  content: "→";
  position: absolute;
  left: 0; top: -1px;
  color: var(--gold);
}
.section--cream .ticks li::before,
.section--paper .ticks li::before { color: var(--gold-3); }

/* =============================================================
   Split feature (image / copy)
   ============================================================= */
.split {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(34px, 5vw, 74px);
  align-items: center;
}
.split--flip .split__media { order: 2; }

.media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(90% 80% at 70% 20%, rgba(255, 255, 255, 0.9), transparent 62%),
    linear-gradient(150deg, #ffffff, #e6e0d7 70%);
}
.media::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(28, 29, 34, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 29, 34, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(200deg, #000, transparent 76%);
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 76%);
}
.media--wide { aspect-ratio: 16 / 10; }
.media--square { aspect-ratio: 1 / 1; }
.media--band { aspect-ratio: 21 / 9; }

/* Category photo: the image fills the frame edge to edge, with no caption
   overlaid on top of the photograph. */
.media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media--photo { background: var(--ink-soft); }
.media--photo::before { display: none; }

/* Stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.stat {
  background: var(--ink-2);
  padding: 30px 26px;
  text-align: center;
}
.stat__num {
  font-family: var(--ff-serif);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1;
  color: var(--gold-2);
  margin-bottom: 8px;
}
.stat__label {
  font-size: 0.63rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ==========================================================================
   Timeline / schedule
   ========================================================================== */
.schedule { display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
.schedule__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(18px, 3vw, 44px);
  padding: 34px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
  transition: background 0.4s var(--ease);
}
.schedule__row:hover { background: rgba(28, 29, 34, 0.035); }
.schedule__time {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.1;
  color: var(--silver-2);
  font-style: italic;
}
.schedule__label {
  display: block;
  font-family: var(--ff-body);
  font-size: 0.63rem;
  font-style: normal;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 8px;
}
.schedule__body h3 { margin-bottom: 10px; }
.schedule__body p { color: var(--text-dim); max-width: 62ch; }

/* ==========================================================================
   Category grid (awards)
   ========================================================================== */
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-2);
  border: 1px solid var(--line);
  padding: 8px 15px;
  background: rgba(28, 29, 34, 0.04);
  transition: background 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.tag:hover { background: rgba(28, 29, 34, 0.09); transform: translateY(-2px); border-color: var(--gold); }
.section--cream .tag,
.section--paper .tag { background: rgba(93, 100, 112, 0.07); }
.section--cream .tag:hover,
.section--paper .tag:hover { background: rgba(93, 100, 112, 0.14); }
.tag--plain { text-transform: none; letter-spacing: 0.01em; font-size: 0.85rem; color: var(--text-dim); }

/* Accordion (for very long grouped content) */
.acc { border-top: 1px solid var(--line-soft); }
.acc__group {
  padding: 30px 4px 12px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-2);
  display: flex;
  align-items: center;
  gap: 14px;
}
.acc__group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.acc__group:first-child { padding-top: 22px; }
.acc__item { border-bottom: 1px solid var(--line-soft); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: var(--ff-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.32rem);
  transition: color 0.3s var(--ease), padding-left 0.4s var(--ease);
}
.acc__btn:hover { color: var(--silver-2); padding-left: 10px; }
.acc__sign {
  position: relative;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.acc__sign::before,
.acc__sign::after {
  content: "";
  position: absolute;
  background: var(--silver);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.acc__sign::before { left: 0; top: 8px; width: 18px; height: 1px; }
.acc__sign::after { left: 8px; top: 0; width: 1px; height: 18px; }
.acc__item.is-open .acc__sign::after { transform: rotate(90deg); opacity: 0; }
.acc__panel {
  overflow: hidden;
  height: 0;
  transition: height 0.5s var(--ease);
}
.acc__inner { padding: 0 4px 28px; }
.acc__inner > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-card {
  background: linear-gradient(165deg, #ffffff, #fbfaf8);
  border: 1px solid var(--line-soft);
  padding: clamp(28px, 4vw, 52px);
  position: relative;
}
.form-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(143, 149, 161, 0));
}
.field { margin-bottom: 26px; }
.field > label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 10px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 1rem;
  padding: 15px 17px;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease);
  border-radius: 0;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(143, 149, 161, 0.22);
}
.field input::placeholder,
.field textarea::placeholder { color: #6e7076; }
.field__hint {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-3);
  margin-top: 9px;
}
.checkline { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 0.9rem;
  color: var(--text-dim);
  cursor: pointer;
}
.checkbox input { width: 17px; height: 17px; accent-color: var(--gold); cursor: pointer; }
.form-status {
  display: none;
  margin-top: 22px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  background: rgba(28, 29, 34, 0.04);
  color: var(--gold-2);
  font-size: 0.9rem;
}
.form-status.is-visible { display: block; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 112px) 0;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(199, 204, 212, 0.5), transparent 62%),
    linear-gradient(180deg, #ffffff, #ece7df);
  border-block: 1px solid var(--line);
  text-align: left;
  text-align-last: left;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(28, 29, 34, 0.1) 1px, transparent 0);
  background-size: 34px 34px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 75%);
}
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band h2 { max-width: 20ch; }
.cta-band .hero__tagline { margin-bottom: 26px; }
.cta-band .hero__actions { justify-content: flex-start; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: linear-gradient(180deg, #f1ede6, #e7e2d9);
  border-top: 1px solid var(--line-soft);
  padding: clamp(52px, 6vw, 82px) 0 0;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 50px;
}
.footer__brand p {
  color: var(--text-dim);
  font-size: 0.94rem;
  max-width: 34ch;
  margin-top: 18px;
}
.footer h5 {
  color: var(--gold-2);
  margin-bottom: 20px;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 11px; }
.footer li a {
  color: var(--text-dim);
  font-size: 0.9rem;
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
  display: inline-block;
}
.footer li a:hover { color: var(--gold-2); padding-left: 6px; }
.footer address {
  font-style: normal;
  color: var(--text-dim);
  font-size: 0.94rem;
  line-height: 1.9;
}
.footer address a { color: var(--text); transition: color 0.3s; }
.footer address a:hover { color: var(--gold-2); }
.footer__tagline {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--gold-2);
  font-size: 1.05rem;
  line-height: 1.7;
}
.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.socials a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-2);
  transition: background 0.35s var(--ease), transform 0.35s var(--ease), color 0.35s var(--ease);
}
.socials a:hover { background: var(--gold); color: #0a0a0c; transform: translateY(-3px); }
.socials svg { width: 15px; height: 15px; fill: currentColor; }
.footer__bottom {
  border-top: 1px solid var(--line-soft);
  padding: 24px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-3);
}
.footer__bottom a { color: var(--text-dim); }
.footer__bottom a:hover { color: var(--gold-2); }

/* ==========================================================================
   Reveal animations
   ========================================================================== */
/* Justification needs a comfortable measure to look clean. Narrow multi-column
   cards (3- and 4-up) sit near 30 characters, where justification can only
   stretch the word spaces, so their copy stays straight-edged instead. */
@media (min-width: 681px) {
  .grid--3 > .card p,
  .grid--4 > .card p,
  .grid--3 > .card .checklist li,
  .grid--4 > .card .checklist li,
  .grid--3 > .card .ticks li,
  .grid--4 > .card .ticks li { text-align: left; }
}
.footer__brand p,
.footer address,
.footer__tagline { text-align: left; }

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal="left"] { transform: translateX(-30px); }
.js [data-reveal="right"] { transform: translateX(30px); }
.js [data-reveal="scale"] { transform: scale(0.965); }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
.js [data-stagger].is-in > *:nth-child(1) { transition-delay: 0.04s; }
.js [data-stagger].is-in > *:nth-child(2) { transition-delay: 0.12s; }
.js [data-stagger].is-in > *:nth-child(3) { transition-delay: 0.2s; }
.js [data-stagger].is-in > *:nth-child(4) { transition-delay: 0.28s; }
.js [data-stagger].is-in > *:nth-child(5) { transition-delay: 0.36s; }
.js [data-stagger].is-in > *:nth-child(6) { transition-delay: 0.44s; }
.js [data-stagger].is-in > *:nth-child(7) { transition-delay: 0.52s; }
.js [data-stagger].is-in > *:nth-child(8) { transition-delay: 0.6s; }
.js [data-stagger].is-in > *:nth-child(9) { transition-delay: 0.68s; }
.js [data-stagger].is-in > *:nth-child(10) { transition-delay: 0.76s; }
.js [data-stagger].is-in > *:nth-child(11) { transition-delay: 0.84s; }
.js [data-stagger].is-in > *:nth-child(12) { transition-delay: 0.92s; }
.js [data-stagger].is-in > *:nth-child(n+13) { transition-delay: 1s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal], .js .js [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1240px) {
  .nav__menu { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  :root { --gut: 22px; }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schedule__row { grid-template-columns: 160px 1fr; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .schedule__row { grid-template-columns: 1fr; gap: 10px; }
  .footer__top { grid-template-columns: 1fr; gap: 34px; }
  .nav { height: 72px; }
  .brand__name { font-size: 0.95rem; }
  .hero__scroll { display: none; }
  .topbar { font-size: 0.6rem; text-align: center; }
  .topbar .wrap { justify-content: center; }
}