/* ==========================================================================
   Tayo Oyerokun Consulting — design system
   Open Sans throughout (Roboto for the desktop menu only); ink, ivory and
   brass. Gold is an accent — hairlines, labels, numerals, one CTA — never a wash.

   Token NAMES are unchanged from the previous build so existing page markup
   keeps working; the values behind them carry the new palette.

   Breakpoints (max-width), declared next to the component they affect:
     1380 / 1300 / 1240  desktop menu steps down
     1200                gutters 60 → 40px, hero rail folds
     1150                desktop menu → drawer
     1100                metrics and 3-col grids → 2
     980                 split layouts stack
     900                 pricing table → cards; utility bar trims
     760                 utility bar hides
     720                 single column; gutters → 20px
   ========================================================================== */

:root {
  /* Ink */
  --ink:          #111111;
  --ink-deep:     #080808;
  --ink-panel:    #1A1B1B;

  /* Light grounds */
  --stone:        #F7F5F1;   /* page ground — soft cream */
  --stone-deep:   #F1EFEA;   /* alternate sections — warm ivory */
  --stone-field:  #FFFFFF;

  /* Brass */
  --brass:        #A46F23;
  --brass-rich:   #B8862F;
  --brass-light:  #C89A43;
  --brass-ink:    #8E611F;   /* gold text on light grounds */
  --brass-dark:   #6E4A14;

  /* Text */
  --body:         #555555;
  --body-soft:    #666666;
  --muted:        #6F6F6D;   /* on light grounds */
  --nav-ink:      #3A3A38;   /* menu links — ~80% black, not full ink */
  --on-ink:       #A8A8A4;   /* on dark grounds */
  --on-ink-soft:  #D9D7D2;

  /* Rules */
  --rule:         #DDD8CF;
  --rule-soft:    #E5E1D9;
  --rule-faint:   #EDEAE4;
  --rule-ink:     #2A2B2B;

  /* Type */
  /* One family across the site. Both tokens point at it so existing markup
     that asks for var(--serif) keeps working. */
  --sans:  'Open Sans', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Open Sans', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Layout */
  --gutter: 60px;
  --maxw:   1440px;
}

@media (max-width: 1200px) { :root { --gutter: 40px; } }
@media (max-width: 720px)  { :root { --gutter: 20px; } }

/* --------------------------------------------------------------- reset -- */

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

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

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

/* Open Sans throughout. It carries far more weight per pixel than a display
   serif, so headings sit at 700 with tighter tracking and smaller sizes. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.021em;
  line-height: 1.2;
  /* Inherit, so a dark card inside a light section still gets light headings. */
  color: inherit;
}

p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a { color: var(--brass-ink); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--brass-dark); }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: -100px; left: 0; z-index: 100;
  padding: 14px 22px; background: var(--brass); color: #FFF;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.skip-link:focus { top: 0; color: #FFF; }

/* ------------------------------------------------------------ primitives -- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Eyebrow label */
.kicker {
  display: block;
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--brass-ink);
}
.kicker--on-ink { color: var(--brass-light); }
.kicker--muted  { color: var(--muted); }

.rule-accent { display: block; width: 48px; height: 1px; background: var(--brass); }

.grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

/* Buttons — square, 44px+ touch target everywhere */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; text-align: center;
  border: 1px solid transparent; cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.btn svg { transition: transform .22s ease; }
.btn:hover svg { transform: translateX(4px); }
.btn--primary   { background: var(--brass); color: #FFF; }
.btn--primary:hover   { background: var(--brass-rich); color: #FFF; }
.btn--secondary { border-color: var(--ink); color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--stone); }
.btn--ghost     { border-color: rgba(255,255,255,.45); color: #FFF; }
.btn--ghost:hover     { background: #FFF; color: var(--ink); border-color: #FFF; }
.btn--block     { display: flex; width: 100%; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  min-height: 44px; color: var(--brass-ink);
}
.arrow-link svg { transition: transform .22s ease; }
.arrow-link:hover svg { transform: translateX(5px); }

/* Scroll reveal — inert until JS marks the document ready, so a no-JS visitor
   never meets hidden content. */
[data-reveal-ready] [data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal-ready] [data-reveal][data-shown] {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}

/* ---------------------------------------------------------------- header -- */

.utility { background: var(--ink-deep); color: var(--on-ink); font-size: 13px; }
.utility__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; min-height: 46px; flex-wrap: wrap;
}
.utility__contact { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 6px 0; }
.utility__contact a { display: inline-flex; align-items: center; gap: 9px; color: var(--on-ink); overflow-wrap: anywhere; }
.utility__contact a:hover { color: var(--brass-light); }
.utility__contact svg { color: var(--brass-rich); flex: none; }
.utility__sep { color: #383836; }
.utility__places {
  display: flex; gap: 10px; align-items: center;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
.utility__social { display: flex; align-items: center; gap: 2px; }
.utility__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: var(--on-ink);
}
.utility__social a:hover { color: var(--brass-light); }
@media (max-width: 900px) { .utility__places, .utility__wa, .utility__sep--wide { display: none; } }
@media (max-width: 760px) { .utility { display: none; } }

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--stone-field); border-bottom: 1px solid var(--rule-soft);
  transition: box-shadow .25s ease;
}
.masthead[data-stuck] { box-shadow: 0 1px 26px rgba(17,17,17,.10); }
.masthead__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 30px; min-height: 92px;
}
@media (max-width: 720px) { .masthead__inner { min-height: 68px; } }

.brand { display: flex; align-items: center; gap: 13px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand img { height: 30px; width: auto; }
.brand__name { display: flex; flex-direction: column; gap: 3px; }
.brand__name b {
  font-family: var(--sans); font-size: 17px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1;
}
.brand__name span {
  font-family: var(--sans); font-size: 8.5px; font-weight: 600;
  letter-spacing: .36em; text-transform: uppercase; color: var(--muted); line-height: 1;
}
@media (max-width: 720px) {
  .brand img { height: 24px; }
  .brand__name b { font-size: 14px; letter-spacing: .04em; }
  .brand__name span { font-size: 7.5px; letter-spacing: .28em; }
}

/* Desktop menu: uppercase Roboto, pushed right so it sits next to the CTA
   (margin-left:auto takes the free space; the masthead gap separates them). */
.nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav a {
  position: relative;
  font-family: "Roboto", var(--sans); font-size: 13.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--nav-ink); white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 7px;
  height: 1px; background: var(--brass); transition: right .25s ease;
}
.nav a:hover { color: var(--brass-ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--brass-ink); }

.nav__cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav__cta .btn { min-height: 50px; padding: 0 20px; font-size: 11px; letter-spacing: .12em; white-space: nowrap; }
.masthead .brand { flex-shrink: 0; }

.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; color: var(--ink); cursor: pointer;
}
/* Six menu items (Store and Events live in the footer and in the page CTAs),
   so the menu breathes at full size for longer and only tightens near the
   drawer breakpoint. */
@media (max-width: 1380px) { .nav { gap: 26px; } .nav a { letter-spacing: .05em; } }
@media (max-width: 1300px) { .nav { gap: 22px; } .nav a { font-size: 13px; letter-spacing: .04em; } }
@media (max-width: 1240px) { .nav { gap: 18px; } .nav a { font-size: 12.5px; letter-spacing: .03em; } }
@media (max-width: 1150px) {
  .nav, .nav__cta { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 60;
  background: var(--ink); color: var(--stone);
  display: flex; flex-direction: column;
  padding: 20px var(--gutter) 40px;
  overflow-y: auto;
  transform: translateX(100%); transition: transform .32s cubic-bezier(.3,.7,.2,1);
  visibility: hidden;
}
.drawer[data-open="true"] { transform: translateX(0); visibility: visible; }
.drawer__top { display: flex; justify-content: flex-end; min-height: 44px; align-items: center; }
.drawer__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: none; border: 0; color: var(--stone); cursor: pointer;
}
.drawer nav { display: flex; flex-direction: column; margin-top: 10px; }
.drawer nav a {
  display: flex; align-items: center; min-height: 56px;
  padding: 4px 0; border-bottom: 1px solid var(--rule-ink);
  font-family: var(--sans); font-size: 20px; font-weight: 700; letter-spacing: -.015em;
  color: var(--stone);
}
.drawer nav a:hover, .drawer nav a[aria-current="page"] { color: var(--brass-light); }
.drawer__foot { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.drawer__foot a.contact { color: var(--on-ink); font-size: 15px; }

/* ------------------------------------------------- floating WhatsApp CTA -- */
/* One general "Chat us on WhatsApp" button on every page (partials/footer).
   Sits below the drawer (z-index 60) and above page content, bottom-right,
   clear of form submit buttons, which are full-width on the left. */
.wa-float {
  position: fixed; z-index: 55;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 20px 0 17px;
  background: var(--ink); color: #FFF;
  border: 1px solid var(--brass);
  border-radius: 999px;
  font-family: "Roboto", var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 8px 26px rgba(17,17,17,.24);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.wa-float svg { color: var(--brass-light); flex: none; transition: color .2s ease; }
.wa-float:hover, .wa-float:focus-visible { background: var(--brass); color: #FFF; box-shadow: 0 10px 30px rgba(17,17,17,.32); }
.wa-float:hover svg, .wa-float:focus-visible svg { color: #FFF; }
/* Phones and small tablets: icon only, so the button cannot sit across a
   full-width page CTA (the label stays in the accessibility tree). */
@media (max-width: 640px) {
  .wa-float { width: 52px; min-height: 52px; padding: 0; justify-content: center; gap: 0; }
  .wa-float span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }

/* ------------------------------------------------------- internal banner -- */
/* Editorial page hero used by every page except home. */

.banner {
  position: relative; background: var(--ink); color: #FFF; overflow: hidden;
  display: flex; align-items: center; min-height: 360px;
}
.banner__media {
  position: absolute; inset: 0;
  background-image: var(--banner-image);
  background-color: var(--ink);
  background-repeat: no-repeat; background-size: cover;
  background-position: var(--banner-pos, center);
  filter: grayscale(1) brightness(.42) contrast(1.05);
}
.banner__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.72) 100%);
}
.banner__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  width: 100%; padding-top: 84px; padding-bottom: 84px; text-align: center;
}
.banner h1 {
  font-size: clamp(27px, 3.6vw, 46px); line-height: 1.16; color: #FFF;
  max-width: 20ch;
}
.banner p {
  font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.72;
  color: var(--on-ink-soft); max-width: 70ch;
}
.breadcrumb {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-ink);
}
.breadcrumb a { color: var(--on-ink); }
.breadcrumb a:hover { color: var(--brass-light); }
.breadcrumb span { color: #4C4C4A; }
@media (max-width: 720px) {
  .banner { min-height: 260px; }
  .banner__media {
    background-image: var(--banner-image-sm, var(--banner-image));
    background-position: var(--banner-pos-sm, var(--banner-pos, center));
  }
  .banner__inner { padding-top: 52px; padding-bottom: 52px; }
}

/* ----------------------------------------------------------- hero slider -- */
/* Home only. Copy sits on the photograph, as the reference design does: a
   left-weighted scrim carries the type while the right of the frame — where
   the subjects are — stays clear.
   Progressive enhancement: with JS off, slide one shows on its own and the
   controls stay hidden. */

.hero { position: relative; background: var(--ink-deep); color: #FFF; overflow: hidden; }
.hero__stage { position: relative; }

/* Height is set explicitly rather than with aspect-ratio + max-height: that
   pairing makes the browser re-derive the *width* from the ratio once the cap
   bites, and the slider stops filling the page on wide screens.
   Three caps: 60vw keeps a near-16:10 crop on normal windows, 82vh keeps the
   copy and its buttons inside the fold on short or very wide ones, 850px stops
   it growing on large monitors. */
.hero__viewport {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
  width: 100%; height: min(60vw, 82vh, 850px); min-height: 460px;
  background: var(--ink-deep); overflow: hidden;
}

.hero__slide {
  grid-area: 1 / 1; position: relative; min-height: 0; min-width: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .8s ease, visibility 0s linear .8s;
}
.hero:not([data-ready]) .hero__slide:first-child,
.hero__slide[data-active] {
  opacity: 1; visibility: visible; z-index: 1;
  transition: opacity .8s ease, visibility 0s;
}
/* Framing comes from the slide: --pos on wide screens, --pos-sm on phones,
   where the crop is much tighter. Plain values in a custom property are safe;
   only url() resolves against the stylesheet. */
.hero__img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--pos, center);
  display: block;
}

/* Scrim, not decoration — white copy has to hold over a photograph. Weighted
   to the foot of the frame, with a light wash to the left, so the people in
   these photographs stay visible behind the type. */
.hero__slide::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(8, 8, 8, .28) 0%,
      rgba(8, 8, 8, .04) 24%,
      rgba(8, 8, 8, .52) 62%,
      rgba(8, 8, 8, .93) 100%),
    linear-gradient(90deg, rgba(8, 8, 8, .52) 0%, rgba(8, 8, 8, .18) 48%, rgba(8, 8, 8, 0) 78%);
}

.hero__inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 16px;
  /* Lifted clear of the bottom edge so the CTAs land inside the fold. */
  padding-top: 44px; padding-bottom: clamp(40px, 10vh, 112px);
}
.hero__inner > * { max-width: 640px; }

/* Thin ink strip under the slider, holding the controls. */
.hero__band { position: relative; z-index: 1; background: var(--ink-deep); }
.hero__title {
  font-size: clamp(28px, 3.8vw, 54px); line-height: 1.12;
  letter-spacing: -.03em; color: #FFF;
}
.hero__title em { font-style: normal; color: var(--brass-light); }
.hero__inner p {
  font-size: clamp(15.5px, 1.25vw, 18.5px); line-height: 1.72;
  color: var(--on-ink-soft); max-width: 540px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 10px; }

/* Controls — only shown once the slider has taken over. */
.hero__controls {
  display: none; position: relative; z-index: 2;
  align-items: center; gap: 12px; padding-top: 22px; padding-bottom: 22px;
}
.hero[data-ready] .hero__controls { display: flex; }

.hero__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  background: transparent; border: 1px solid rgba(255,255,255,.22);
  color: var(--on-ink-soft); cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.hero__btn:hover { border-color: var(--brass); color: #FFF; background: rgba(164,111,35,.22); }
.hero__btn--play { margin-left: auto; }

.hero__dots { display: flex; align-items: center; gap: 10px; margin: 0 8px; }
.hero__dot {
  position: relative; width: 46px; height: 2px; padding: 0; flex: none;
  border: 0; background: rgba(255,255,255,.24); cursor: pointer; overflow: hidden;
}
.hero__dot::before { content: ''; position: absolute; inset: -16px 0; }  /* hit area */
.hero__dot::after  { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brass-light); }
.hero__dot[aria-current="true"] { background: rgba(200,154,67,.45); }
.hero__dot[aria-current="true"]::after { width: 100%; }
/* While autoplay runs the active dot doubles as the interval countdown. */
.hero[data-autoplay] .hero__dot[aria-current="true"]::after {
  width: 0; animation: heroTick var(--hero-interval, 6500ms) linear forwards;
}
.hero[data-paused] .hero__dot[aria-current="true"]::after { animation-play-state: paused; }
@keyframes heroTick { from { width: 0; } to { width: 100%; } }

/* Section background layer, used by the diaspora and closing CTA bands. */
.hero__media {
  position: absolute; inset: 0;
  background-color: var(--ink);
  background-repeat: no-repeat; background-size: cover; background-position: center;
  filter: grayscale(1) brightness(.58) contrast(1.06);
}

/* Vertical action rail — desktop only, folds into a button row below 1200px */
.rail { position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.rail a {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 54px; padding: 20px 0 22px;
  background: rgba(8,8,8,.6); border: 1px solid rgba(200,154,67,.4); border-right: 0;
  color: #FFF; transition: background .22s ease, border-color .22s ease;
}
.rail a:hover { background: var(--brass); border-color: var(--brass); color: #FFF; }
.rail svg { flex: none; color: var(--brass-light); }
.rail a:hover svg { color: #FFF; }
.rail__label {
  writing-mode: vertical-rl;
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.5; text-align: center;
}
@media (max-width: 1200px) {
  .rail {
    position: static; transform: none; flex-direction: row; flex-wrap: wrap; gap: 10px;
    padding: 26px var(--gutter) 0;
  }
  .rail a {
    flex-direction: row; width: auto; min-height: 46px; padding: 10px 18px;
    border-right: 1px solid rgba(200,154,67,.4);
  }
  .rail__label { writing-mode: horizontal-tb; letter-spacing: .14em; }
}
@media (max-width: 720px) {
  /* Phones stack: a picture band, then the copy beneath it on ink. Overlaying
     type on a portrait-cropped photo left neither the words nor the faces room. */
  .hero__viewport { height: auto; }
  .hero__slide { display: grid; grid-template-rows: auto auto; }
  .hero__img { height: 92vw; object-position: var(--pos-sm, var(--pos, center)); }
  .hero__slide::after {
    inset: 0 0 auto 0; height: 92vw;
    background: linear-gradient(180deg, rgba(8, 8, 8, .18) 0%, rgba(8, 8, 8, 0) 42%, rgba(8, 8, 8, .82) 100%);
  }
  .hero__inner {
    position: static; gap: 12px;
    padding-top: 24px; padding-bottom: 32px;
  }
  .hero__inner > * { max-width: none; }
  .hero__dot { width: 30px; }
  .hero__btn { width: 42px; height: 42px; }
  .rail a { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 980px) and (min-width: 721px) {
  /* Tablets: a taller frame so the overlaid copy is not squeezed against the
     picture edges. */
  .hero__viewport { height: min(80vw, 84vh, 720px); }
  .hero__inner { padding-bottom: clamp(30px, 7vh, 74px); }
}
@media (max-width: 980px) {
  .hero__slide::after {
    background: linear-gradient(180deg, rgba(8, 8, 8, .34) 0%, rgba(8, 8, 8, .12) 28%, rgba(8, 8, 8, .74) 66%, rgba(8, 8, 8, .95) 100%);
  }
}
/* Autoplay is switched off in JS when motion is reduced; hide the countdown
   too, since the global reduced-motion rule collapses its duration. */
@media (prefers-reduced-motion: reduce) {
  .hero[data-autoplay] .hero__dot[aria-current="true"]::after { width: 100%; animation: none; }
}

/* ---------------------------------------------------------------- layout -- */

.section { padding-top: 108px; padding-bottom: 114px; }
.section--stone-deep { background: var(--stone-deep); }
.section--ink { background: var(--ink); color: var(--stone); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #FFF; }
.section--ink p { color: var(--on-ink); }
.section--ink-deep { background: var(--ink-deep); color: var(--stone); }
@media (max-width: 980px) { .section { padding-top: 76px; padding-bottom: 80px; } }
@media (max-width: 720px) { .section { padding-top: 56px; padding-bottom: 60px; } }

.section__head { display: flex; flex-direction: column; gap: 18px; padding-bottom: 52px; max-width: 760px; }
.section__head h2 { font-size: clamp(24px, 2.9vw, 40px); }
.section__head p { font-size: 17px; line-height: 1.75; color: var(--body); }
.section--ink .section__head p { color: var(--on-ink); }
.section__head--split {
  flex-direction: row; align-items: flex-end; justify-content: space-between;
  gap: 40px; max-width: none;
}
.section__head--split > div { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
@media (max-width: 860px) {
  .section__head--split { flex-direction: column; align-items: flex-start; }
  .section__head { padding-bottom: 36px; }
}

/* Two-column: label left, prose right */
.split { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 80px; }
.split__aside { display: flex; flex-direction: column; gap: 20px; align-self: start; }
.split__aside h2 { font-size: clamp(23px, 2.3vw, 33px); }
.prose { display: flex; flex-direction: column; gap: 22px; font-size: 17px; line-height: 1.8; color: var(--body); }
.prose strong { color: var(--ink); font-weight: 600; }
.section--ink .prose { color: var(--on-ink-soft); }
.section--ink .prose strong { color: #FFF; }

/* Column-order modifiers — these must be classes, not inline styles, or the
   responsive rule below cannot win. */
.split--aside-left  { grid-template-columns: 440px minmax(0, 1fr); }
.split--aside-right { grid-template-columns: minmax(0, 1fr) 440px; }

@media (max-width: 980px) {
  .split, .split--aside-left, .split--aside-right { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .prose { font-size: 16.5px; }
}

/* Generic grids */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* Numbered rows — services, process */
.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: 72px 1fr 380px; gap: 48px;
  padding: 46px 0; border-top: 1px solid var(--rule); align-items: start;
}
.row:first-child { border-top-color: var(--ink); }
.row:last-child  { border-bottom: 1px solid var(--ink); }
.row__num { font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: .06em; color: var(--brass); padding-top: 8px; }
.row__body { display: flex; flex-direction: column; gap: 16px; }
.row__body h2, .row__body h3 { font-size: clamp(20px, 2vw, 29px); line-height: 1.22; }
.row__body p { font-size: 16.5px; line-height: 1.78; color: var(--body); max-width: 640px; }
.row__list { display: flex; flex-direction: column; gap: 12px; padding: 28px 28px 30px; background: var(--stone-deep); border-top: 1px solid var(--brass); }
.section--stone-deep .row__list { background: var(--stone-field); }
.row__list li { font-size: 14.5px; line-height: 1.6; color: var(--body); }

@media (max-width: 1100px) {
  .row { grid-template-columns: 48px 1fr; gap: 24px; }
  .row__list { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 30px 0; }
  .row__num { padding-top: 0; font-size: 20px; }
  .row__body p { font-size: 16px; }
}

/* --------------------------------------------------------- metrics strip -- */

.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule-ink);
}
.stat {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 22px;
  align-items: center; align-content: center;
  padding: 40px 40px; border-right: 1px solid var(--rule-ink);
}
.stat:last-child { border-right: 0; }
.stat__icon {
  grid-row: 1 / span 3; align-self: center;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border: 1px solid rgba(200,154,67,.45); border-radius: 50%;
  color: var(--brass-light); flex: none;
}
.stat b {
  font-family: var(--sans); font-size: clamp(26px, 2.5vw, 36px); font-weight: 700;
  letter-spacing: -.025em; color: #FFF; line-height: 1.05;
}
.stat i {
  font-style: normal; font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass-light);
}
.stat span { font-size: 13px; line-height: 1.5; color: var(--on-ink); }
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 30px 26px; border-bottom: 1px solid var(--rule-ink); }
  .stat__icon { width: 46px; height: 46px; }
  .stat:nth-child(2n) { border-right: 0; }
}
@media (max-width: 420px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { border-right: 0; padding: 24px 20px; }
}

/* --------------------------------------------------------- promise cards -- */

.promise { display: flex; flex-direction: column; gap: 52px; }
.promise__lead { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.promise__lead h2 { font-size: clamp(26px, 3.2vw, 43px); line-height: 1.16; }
.promise__lead h2 em { font-style: normal; color: var(--brass); }
.promise__lead p { font-size: 16.5px; line-height: 1.78; color: var(--body); }
.promise-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.promise-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px 28px; background: var(--stone-field); border: 1px solid var(--rule);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.promise-card::before {
  content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
  background: var(--brass); opacity: 0; transition: opacity .3s ease;
}
.promise-card:hover { transform: translateY(-4px); border-color: var(--brass); box-shadow: 0 16px 40px rgba(17,17,17,.09); }
.promise-card:hover::before { opacity: 1; }
.promise-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 4px; }
.promise-card__num { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--brass); line-height: 1; }
.promise-card__icon { display: flex; color: var(--brass); }
.promise-card h3 { font-family: var(--sans); font-size: 16px; font-weight: 700; letter-spacing: -.005em; line-height: 1.3; }
.promise-card p { font-size: 14px; line-height: 1.6; color: var(--body); text-wrap: balance; }
@media (max-width: 1100px) { .promise { gap: 38px; } .promise-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .promise-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 420px) { .promise-cards { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------- service tiles -- */

.svc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.svc-card {
  position: relative; display: flex; min-height: 320px; overflow: hidden;
  background: var(--ink-panel); border: 1px solid #262726; color: #FFF;
}
.svc-card:hover { color: #FFF; }
.svc-card__media {
  position: absolute; inset: 0;
  background-color: var(--ink-panel);
  background-repeat: no-repeat; background-size: cover; background-position: center;
  filter: grayscale(1) brightness(.5) contrast(1.05);
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.svc-card:hover .svc-card__media { transform: scale(1.07); }
.svc-card__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,.25) 0%, rgba(8,8,8,.72) 58%, rgba(8,8,8,.93) 100%);
}
.svc-card__body {
  position: relative; z-index: 1; align-self: flex-end;
  display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px; width: 100%;
}
.svc-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 4px;
  border: 1px solid rgba(200,154,67,.55); color: var(--brass-light);
  transition: background .25s ease, color .25s ease;
}
.svc-card:hover .svc-card__icon { background: var(--brass); border-color: var(--brass); color: #FFF; }
.svc-card h3 { font-size: 20px; line-height: 1.24; color: #FFF; }
.svc-card p { font-size: 14px; line-height: 1.62; color: var(--on-ink-soft); }
.svc-card__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-light);
}
.svc-card:hover .svc-card__more svg { transform: translateX(4px); }
.svc-card__more svg { transition: transform .22s ease; }
@media (max-width: 1200px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-card { min-height: 300px; } }
@media (max-width: 560px)  { .svc-grid { grid-template-columns: minmax(0, 1fr); } .svc-card { min-height: 260px; } }

/* ------------------------------------------------------- advisory process -- */

.process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.process li { position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: 30px; border-top: 1px solid var(--rule); }
.section--ink .process li { border-top-color: var(--rule-ink); }
.process li::before {
  content: ''; position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px; background: var(--brass); border-radius: 50%;
}
.process__num { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--brass); line-height: 1; }
.process h3 { font-size: 18px; line-height: 1.32; }
.process p { font-size: 14.5px; line-height: 1.65; color: var(--body); }
.section--ink .process h3 { color: #FFF; }
.section--ink .process p { color: var(--on-ink); }
@media (max-width: 1100px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 560px)  { .process { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- founder -- */

.founder { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 80px; align-items: center; }
.founder__media { position: relative; }
.founder__media img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: var(--founder-pos, center 18%); filter: grayscale(1) contrast(1.04); }
.founder__media::after {
  content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--brass); z-index: -1;
}
.founder__body { display: flex; flex-direction: column; gap: 22px; }
.founder__body h2 { font-size: clamp(24px, 2.7vw, 37px); }
.founder__creds { display: flex; flex-wrap: wrap; gap: 10px; }
.founder__creds li {
  padding: 8px 14px; border: 1px solid var(--rule);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--body);
}
.section--ink .founder__creds li { border-color: var(--rule-ink); color: var(--on-ink); }
@media (max-width: 980px) { .founder { grid-template-columns: minmax(0, 1fr); gap: 40px; } .founder__media::after { display: none; } }

/* --------------------------------------------------------------- trust -- */

.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.trust li { display: flex; flex-direction: column; gap: 14px; padding: 36px 32px 40px; background: var(--stone); }
.trust__icon { color: var(--brass); }
.trust h3 { font-size: 19px; line-height: 1.3; }
.trust p { font-size: 15px; line-height: 1.7; color: var(--body); }
@media (max-width: 900px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .trust { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------------- events -- */

.event-row {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 34px;
  align-items: center; padding: 26px 0; border-top: 1px solid var(--rule);
}
.event-row:last-child { border-bottom: 1px solid var(--rule); }
.section--ink .event-row, .section--ink .event-row:last-child { border-color: var(--rule-ink); }
.event-date { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border: 1px solid var(--rule); }
.section--ink .event-date { border-color: var(--rule-ink); }
.event-date b { font-family: var(--sans); font-size: 25px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.section--ink .event-date b { color: #FFF; }
.event-date span { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); }
.section--ink .event-date span { color: var(--brass-light); }
.event-row__body { display: flex; flex-direction: column; gap: 8px; }
.event-row__body h3 { font-size: 21px; line-height: 1.28; }
.event-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--muted); }
.section--ink .event-meta { color: var(--on-ink); }
.event-meta span { display: inline-flex; align-items: center; gap: 8px; }
.event-meta svg { color: var(--brass); flex: none; }
@media (max-width: 860px) {
  .event-row { grid-template-columns: 84px minmax(0, 1fr); gap: 20px; }
  .event-row .btn { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------- store -- */

.store-filters { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 40px; }
.store-filters button, .store-filters a {
  min-height: 44px; padding: 0 20px; display: inline-flex; align-items: center;
  background: transparent; border: 1px solid var(--rule); color: var(--body);
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; cursor: pointer; transition: all .22s ease;
}
.store-filters [aria-current="true"], .store-filters button:hover, .store-filters a:hover {
  background: var(--ink); border-color: var(--ink); color: #FFF;
}
.store-card { display: flex; flex-direction: column; gap: 16px; }
.store-card__cover {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  aspect-ratio: 3/4; padding: 22px; overflow: hidden;
  background: var(--ink-panel); background-size: cover; background-position: center;
  border: 1px solid var(--rule);
}
.store-card__cover span {
  position: relative; z-index: 1;
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-ink); text-align: center;
}
.store-card__body { display: flex; flex-direction: column; gap: 8px; }
.store-card h3 { font-size: 19px; line-height: 1.3; }
.store-card p { font-size: 14.5px; line-height: 1.62; color: var(--body); }
.store-card__price { font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--brass-ink); }
.store-card .btn { min-height: 48px; font-size: 11px; }
.store-card .btn[aria-disabled="true"],
.store-card .btn[aria-disabled="true"]:hover { cursor: default; background: transparent; border-color: var(--rule); color: var(--muted); }

/* Checklist */
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.checks li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
  font-size: 16px; line-height: 1.6; color: var(--ink);
}
.section--ink .checks li { border-bottom-color: var(--rule-ink); color: var(--stone); }
.checks svg { flex-shrink: 0; margin-top: 5px; }
@media (max-width: 720px) { .checks { grid-template-columns: minmax(0, 1fr); } }

/* Cards */
.card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 34px 32px 38px; background: var(--stone-field);
  border: 1px solid var(--rule); border-top: 2px solid var(--brass);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(17,17,17,.08); }
.card h3 { font-size: 20px; line-height: 1.3; }
.card p  { font-size: 15px; line-height: 1.72; color: var(--body); }
/* Headline statement inside a card (About: vision / mission / purpose). */
.card p.card__statement { font-size: 17px; line-height: 1.6; font-style: italic; color: var(--ink); }

/* Press logos — a paged carousel, four to a page on desktop. Dots appear only
   when there is more than one page, so adding logos activates them by itself.
   Without JS it stays a horizontally scrollable, swipeable row. */
.press { display: flex; flex-direction: column; gap: 26px; }
.press__viewport {
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  /* Room for the hover lift: overflow-x also clips the y axis, which was
     cutting the top edge off the gold ring. */
  padding: 10px 0;
}
.press__viewport::-webkit-scrollbar { display: none; }
.press__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 22px) / 4); gap: 22px;
}
.press__item { scroll-snap-align: start; }
.press__item img {
  width: 100%; aspect-ratio: 5 / 2; object-fit: contain;
  padding: 12px; background: var(--stone-field); border: 1px solid var(--rule);
  filter: grayscale(1); opacity: .6;
  transition: filter .35s ease, opacity .35s ease, transform .35s ease,
              border-color .35s ease, box-shadow .35s ease;
}
.press__item:hover img, .press__item:focus-within img {
  filter: none; opacity: 1; transform: translateY(-4px);
  border-color: var(--brass); box-shadow: 0 14px 34px rgba(17, 17, 17, .12);
}
.press__dots { display: none; justify-content: center; align-items: center; gap: 12px; }
.press[data-paged] .press__dots { display: flex; }
.press__dot {
  position: relative; width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%; background: var(--rule); cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.press__dot::before { content: ''; position: absolute; inset: -13px; }  /* hit area */
.press__dot[aria-current="true"] { background: var(--brass); transform: scale(1.35); }

@media (max-width: 1100px) { .press__track { grid-auto-columns: calc((100% - 2 * 22px) / 3); } }
@media (max-width: 760px)  { .press__track { grid-auto-columns: calc((100% - 22px) / 2); } }
@media (max-width: 420px)  { .press__track { grid-auto-columns: 100%; } }

/* ------------------------------------------------------------------ table -- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ptable { width: 100%; min-width: 900px; border-collapse: collapse; border-top: 1px solid var(--ink); }
.ptable th, .ptable td { padding: 20px 18px; text-align: center; border-bottom: 1px solid var(--rule-faint); vertical-align: middle; }
.ptable th[scope="row"], .ptable td:first-child { text-align: left; padding-left: 0; font-size: 15.5px; color: var(--body); font-weight: 400; }
.ptable thead th { padding: 30px 18px; border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule-faint); }
.ptable .plan-name { display: block; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.plan-duration { display: block; margin-top: 8px; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; color: var(--brass-ink); }
.ptable .plan-price { display: block; margin-top: 10px; font-family: var(--sans); font-size: 29px; font-weight: 700; letter-spacing: -.025em; line-height: 1; color: var(--ink); }
.ptable .featured { background: var(--ink); border-top: 2px solid var(--brass); }
.ptable .featured .plan-name { color: var(--brass-light); }
.ptable .featured .plan-price { color: #FFF; }
.ptable tbody .featured { background: var(--ink); border-top: 0; border-bottom-color: var(--rule-ink); }
.ptable .count { font-family: var(--sans); font-size: 17px; font-weight: 700; }
.ptable .featured .count, .ptable .featured { color: var(--stone); }
.ptable .no { color: #C4C0B8; }
.ptable .featured .no { color: #4A4A48; }
.ptable tbody tr:last-child td, .ptable tbody tr:last-child th { border-bottom: 1px solid var(--ink); }
.ptable tfoot td { padding: 26px 18px 30px; border-bottom: 0; }
.ptable tfoot td:first-child { padding-left: 0; }
.ptable tfoot .featured { border-top: 0; }
.ptable tfoot .btn { min-height: 48px; padding-left: 12px; padding-right: 12px; font-size: 11px; }
.badge {
  display: inline-block; margin-left: 10px; padding: 4px 9px; background: var(--stone-deep);
  font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); white-space: nowrap;
}

/* Mobile plan cards — replace the table below 900px */
.plan-cards { display: none; flex-direction: column; gap: 18px; }
.plan-card { display: flex; flex-direction: column; gap: 18px; padding: 28px 24px 30px; background: var(--stone-field); border: 1px solid var(--rule); border-top: 2px solid var(--rule); }
.plan-card--muted { border-top-color: var(--rule); }
.plan-card--featured { background: var(--ink); color: var(--stone); border-color: var(--ink); border-top-color: var(--brass); position: relative; }
.plan-card h3 { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.plan-card--featured h3 { color: var(--brass-light); }
.plan-card .plan-duration { margin-top: 8px; }
.plan-card .price { font-family: var(--sans); font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.plan-card--featured .price { color: #FFF; }
.plan-card ul { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--rule); }
.plan-card--featured ul { border-top-color: var(--rule-ink); }
.plan-card li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; }
.plan-card li svg { flex-shrink: 0; margin-top: 4px; }
.plan-flag {
  position: absolute; top: 0; right: 22px; padding: 6px 12px;
  background: var(--brass); color: #FFF;
  font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}

@media (max-width: 900px) {
  .table-scroll { display: none; }
  .plan-cards { display: flex; }
}

/* Package narrative blocks */
.package { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; padding: 44px 44px 48px; background: var(--stone-field); border: 1px solid var(--rule); border-left: 2px solid var(--brass); }
.package--ink { background: var(--ink); color: var(--stone); border-color: var(--ink); border-left-color: var(--brass); }
.package__label { display: flex; flex-direction: column; gap: 10px; }
.package__label h3 { font-size: 24px; }
.package--ink .package__label h3 { color: #FFF; }
.package__label span { font-size: 14px; color: var(--muted); line-height: 1.6; }
.package--ink .package__label span { color: var(--on-ink); }
.package__body { display: flex; flex-direction: column; gap: 18px; font-size: 16.5px; line-height: 1.78; color: var(--body); }
.package--ink .package__body { color: var(--on-ink-soft); }
.package__body strong { color: var(--ink); font-weight: 600; }
.package--ink .package__body strong { color: #FFF; }
.package__outcome { padding-top: 8px; border-top: 1px solid var(--rule-soft); }
.package--ink .package__outcome { border-top-color: var(--rule-ink); }
@media (max-width: 980px) { .package { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 30px 24px 32px; } }

/* ------------------------------------------------------------------ forms -- */

.form { display: flex; flex-direction: column; gap: 26px; padding: 48px; background: var(--stone-field); border: 1px solid var(--rule); color: var(--ink); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.field .req { color: var(--brass); }
.field input, .field select, .field textarea {
  min-height: 54px; padding: 15px 18px;
  width: 100%; min-width: 0; max-width: 100%;
  background: var(--stone); border: 1px solid var(--rule); border-radius: 0;
  color: var(--ink); font-family: var(--sans); font-size: 15.5px; line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #9A9892; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--stone-field);
  border-color: var(--brass); box-shadow: 0 0 0 3px rgba(164,111,35,.16);
}
.form__note { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
[data-enquiry-form] { scroll-margin-top: 110px; }
.form__status { padding: 14px 18px; border-left: 2px solid var(--brass); background: var(--stone); font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.form__status[data-state="error"] { border-left-color: #A33A2B; }
.form__status--on-ink { background: transparent; border: 1px solid #4A4137; border-left: 2px solid var(--brass); color: var(--on-ink-soft); }
@media (max-width: 720px) { .form { padding: 28px 22px 32px; } .form__row { grid-template-columns: minmax(0, 1fr); } }

.contact-map { position: relative; width: 100%; height: 220px; overflow: hidden; background: var(--stone-deep); }
.contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.contact-map__directions { position: absolute; left: 14px; bottom: 14px; min-height: 44px; padding: 11px 18px; box-shadow: 0 7px 24px rgba(8,8,8,.22); }

/* Contact details list */
.contact-list { display: flex; flex-direction: column; }
.contact-list li { display: flex; gap: 20px; align-items: flex-start; padding: 24px 0; border-top: 1px solid var(--rule); }
.contact-list li:last-child { border-bottom: 1px solid var(--rule); }
.contact-list svg { flex-shrink: 0; margin-top: 4px; color: var(--brass); }
.contact-list .label { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.contact-list .value { display: block; font-size: 16.5px; color: var(--ink); overflow-wrap: anywhere; }
.contact-list .value a { color: var(--ink); }
.contact-list .value a:hover { color: var(--brass-ink); }

/* --------------------------------------------------------- legal pages -- */
/* Terms & Conditions and Transaction & Payment Policy: a readable column of
   numbered sections, with a contents list that stays in view on desktop. */

.legal { max-width: 760px; }
.legal__section {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 34px; border-top: 1px solid var(--rule); scroll-margin-top: 120px;
}
.legal__section h2 { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.3; color: var(--ink); }
.legal ul, .legal ol { display: flex; flex-direction: column; gap: 8px; padding-left: 1.4em; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li::marker { color: var(--brass); }
.legal .contact-list { padding-left: 0; gap: 0; list-style: none; }
.legal > .legal__section:first-child { padding-top: 0; border-top: 0; }
.legal-contact { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.legal-aside__date { font-size: 15px; line-height: 1.6; color: var(--body); }
.legal-aside__date strong { color: var(--ink); font-weight: 600; }
.legal-toc { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.legal-toc a { padding: 8px 0; border-bottom: 1px solid var(--rule-faint); font-size: 14.5px; line-height: 1.45; color: var(--body); }
.legal-toc a:hover { color: var(--brass-ink); }
/* Sticky only where the whole aside (title, 14 links, policy link) fits in view. */
@media (min-width: 981px) and (min-height: 900px) {
  .legal-aside { position: sticky; top: 118px; }
}
/* Stacked (tablet/phone): skip the contents list, the sections follow directly. */
@media (max-width: 980px) { .legal-toc { display: none; } }

/* ------------------------------------------------------- editorial cards -- */

.article { display: flex; flex-direction: column; gap: 16px; color: var(--ink); }
.article:hover { color: var(--ink); }
.article__img {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3/2; overflow: hidden;
  background: var(--stone-deep); background-size: cover; background-position: center;
  border: 1px solid var(--rule);
}
.article__img span {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #A8A49C;
}
.article__date { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.article h3 { font-size: 20px; line-height: 1.32; }
.article:hover h3 { color: var(--brass-ink); }
.article p { font-size: 15px; line-height: 1.7; color: var(--body); }
.article--published { padding-bottom: 34px; border-bottom: 1px solid var(--rule); }
.article--published .article__img { aspect-ratio: 16/9; }

/* Full Insight articles */
.insight-post__header { padding: clamp(54px, 7vw, 92px) 0 46px; background: var(--stone-deep); border-bottom: 1px solid var(--rule); }
.insight-post__heading { display: flex; flex-direction: column; gap: 20px; max-width: 1040px; }
.insight-post__heading h1 { max-width: 1000px; font-size: clamp(32px, 5vw, 64px); line-height: 1.04; letter-spacing: -.04em; }
.insight-post__meta { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.insight-post__meta time { color: var(--ink-soft); }
.insight-post__featured { width: min(100% - 40px, 1200px); height: clamp(300px, 52vw, 680px); margin: 52px auto 0; object-fit: cover; object-position: center; border: 1px solid var(--rule); }
.insight-post__featured--portrait { object-position: center 32%; }
.insight-post__body { display: flex; flex-direction: column; gap: 22px; width: min(100% - 40px, 800px); margin: 0 auto; padding: 64px 0 88px; color: var(--body); font-size: 17px; line-height: 1.82; }
.insight-post__body h2 { margin-top: 30px; color: var(--ink); font-size: clamp(24px, 3vw, 34px); line-height: 1.2; letter-spacing: -.025em; }
.insight-post__body h3 { margin-top: 18px; color: var(--ink); font-size: 21px; line-height: 1.3; }
.insight-post__body strong { color: var(--ink); font-weight: 700; }
.insight-post__body ul { display: flex; flex-direction: column; gap: 10px; padding-left: 24px; list-style: disc; }
.insight-post__body blockquote { margin: 4px 0; padding: 22px 28px; border-left: 3px solid var(--brass); background: var(--stone-deep); color: var(--ink); font-size: 20px; line-height: 1.6; }
.insight-post__body .article-emphasis { padding: 22px 0 22px 24px; border-left: 2px solid var(--brass); color: var(--ink); font-weight: 600; }
.insight-post__back { padding: 32px 0; border-top: 1px solid var(--rule); }
@media (max-width: 720px) {
  .insight-post__header { padding: 42px 0 34px; }
  .insight-post__featured { width: 100%; height: 72vw; margin-top: 30px; border-left: 0; border-right: 0; }
  .insight-post__body { width: min(100% - 40px, 800px); padding: 46px 0 64px; font-size: 16px; line-height: 1.78; }
  .insight-post__body h2 { margin-top: 22px; }
  .insight-post__body blockquote { padding: 18px 20px; font-size: 18px; }
}

/* Lead article on Insight */
.article--feature {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; align-items: center;
  padding-bottom: 56px; border-bottom: 1px solid var(--ink);
}
.article--feature h2 { font-size: clamp(24px, 2.9vw, 38px); line-height: 1.18; }
.article--feature:hover h2 { color: var(--brass-ink); }
@media (max-width: 900px) { .article--feature { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 36px; } }

/* ---------------------------------------------------------------- footer -- */

.footer { background: var(--ink-deep); color: var(--on-ink); }
.footer__main {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.2fr; gap: 56px;
  padding-top: 88px; padding-bottom: 64px;
}
.footer h2 { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #FFF; margin-bottom: 22px; }
.footer p { font-size: 15px; line-height: 1.75; }
.footer img.mark { height: 36px; width: auto; margin-bottom: 20px; }
.footer ul { display: flex; flex-direction: column; gap: 10px; }
.footer ul a { color: var(--on-ink); font-size: 15px; display: inline-flex; align-items: center; min-height: 32px; }
.footer ul a:hover { color: var(--brass-light); }
.footer address { font-style: normal; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.footer address a { color: var(--on-ink); }
.footer address a:hover { color: var(--brass-light); }
.footer__contact a { display: flex; align-items: flex-start; gap: 12px; }
.footer__contact svg { flex: none; margin-top: 5px; color: var(--brass-rich); }
.footer__contact span { min-width: 0; }
.footer__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  padding-top: 26px; padding-bottom: 32px; border-top: 1px solid #1F1F1D; font-size: 13px;
}
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__legal a { color: var(--on-ink); }
.footer__legal a:hover { color: var(--brass-light); }
.social { display: flex; gap: 10px; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid #24241F; color: var(--on-ink);
  transition: all .22s ease;
}
.social a:hover { border-color: var(--brass); color: var(--brass-light); }

@media (max-width: 1100px) { .footer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; } }
@media (max-width: 640px) {
  .footer__main { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 56px; padding-bottom: 40px; }
  .footer__bar { justify-content: flex-start; }
}

/* --------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal-ready] [data-reveal] { opacity: 1 !important; transform: none !important; }
}