/* ===========================================================================
   Associate Owners Group
   ---------------------------------------------------------------------------
   Concept: the architecture of ownership. AOG builds structure so the people
   who write the business own it — so the page is drawn like structure:
   a visible grid, blueprint-style monospace annotations, hard rules, and
   weight where it matters.

   Palette is AOG's own. The brand yellow leads (which is also why the logo
   finally sits in its own page), against a near-black and clean cool greys.
   Type is a wide grotesque, deliberately engineered rather than literary.
   =========================================================================== */

:root {
  /* --- AOG brand ------------------------------------------------------- */
  --gun:     #2B3439;   /* Gunmetal — the brand dark */
  --gun-d:   #212A2E;   /* one step down, for layering */
  --gun-l:   #3A464C;   /* one step up, for hover/edges */
  --gold:    #F0B743;   /* Gold — the single accent */
  --gold-d:  #D89F2E;

  --white:  #FFFFFF;
  --grey-1: #F3F4F5;
  --grey-2: #E3E5E7;
  --grey-3: #8D959B;
  --slate:  #4A545B;

  --rule:      #DDE0E2;
  --rule-dark: rgba(255,255,255,.13);

  /* Proxima Nova is the brand face. It is a licensed Adobe Fonts family, so
     it is listed first and takes over automatically once the kit is loaded;
     Figtree is the closest free stand-in until then. */
  /* proxima-nova is the family name Adobe Fonts serves; "Proxima Nova" is the
     desktop font name, so designers with it installed locally see it too.
     Both are listed, then Figtree as the free stand-in. */
  --display: proxima-nova, "Proxima Nova", "Figtree", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --body:    proxima-nova, "Proxima Nova", "Figtree", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --gutter: clamp(20px, 4vw, 56px);
  --maxw:   1320px;
  --band:   clamp(72px, 7vw, 116px);
  --hdr:    116px;
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--slate);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,video,iframe,svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

h1,h2,h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: .95;
  color: var(--gun);
  text-wrap: balance;
}
h1 { font-size: clamp(42px, 6.4vw, 104px); font-weight: 700; letter-spacing: -.04em; }
h2 { font-size: clamp(30px, 3.8vw, 58px); }
h3 { font-size: clamp(18px, 1.4vw, 21px); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.band { padding: var(--band) 0; }
.dark { background: var(--gun); color: rgba(255,255,255,.66); }
.dark h1,.dark h2,.dark h3 { color: var(--white); }
.tint { background: var(--grey-1); }

/* --- Blueprint label: monospace, boxed index number ----------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gun);
}
.dark .tag, .hero .tag { color: var(--gold); }
.tag b { font-weight: 500; padding: 5px 7px; background: var(--gold); color: var(--gun); }
.dark .tag b { background: var(--gold); color: var(--gun); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  font: 600 12.5px/1 var(--body);
  letter-spacing: .04em;
  border: 1.5px solid transparent; cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.btn:active { transform: translateY(1px); }
.btn--y { background: var(--gold); color: var(--gun); border-color: var(--gold); }
.btn--y:hover { background: var(--gold-d); border-color: var(--gold-d); }
.btn--line { color: var(--gun); border-color: var(--gun); }
.btn--line:hover { background: var(--gun); color: var(--white); }
.btn--linew { color: var(--white); border-color: rgba(255,255,255,.4); }
.btn--linew:hover { background: var(--white); color: var(--gun); border-color: var(--white); }
.btn i { font-style: normal; transition: transform .18s; }
.btn:hover i { transform: translateX(3px); }

/* --- Header --------------------------------------------------------------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 90; height: var(--hdr); display: flex; align-items: center;
       transition: background-color .25s, border-color .25s; border-bottom: 1px solid transparent; }
.hdr.stuck { background: rgba(43,52,57,.95); backdrop-filter: blur(8px); border-bottom-color: var(--rule-dark); }
.hdr .wrap { display: flex; align-items: center; gap: 26px; }
.hdr__logo { flex: none; }
.hdr__logo img { width: 240px; height: 57px; object-fit: contain; object-position: left center; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 32px; }
.nav a { font: 500 16px/1 var(--body); color: rgba(255,255,255,.88); }
/* .nav a is more specific than .btn--y, so without this the header CTA
   inherits the nav's white text and lands at 1.8:1 on the gold. */
.nav a.btn { font: 600 14.5px/1 var(--body); letter-spacing: .03em; padding: 17px 28px; }
.nav a.btn--y { color: var(--gun); }
.nav a.btn--y:hover { color: var(--gun); }
.nav a:hover { color: var(--gold); }
.burger { display: none; margin-left: auto; width: 46px; height: 46px; padding: 10px; background: none; border: 0; cursor: pointer; }
.burger i { display: block; height: 2.5px; background: #fff; margin: 5px 0; transition: transform .22s, opacity .22s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Hero: typographic, no stock photography ------------------------------ */
.hero {
  position: relative; background: var(--gun); color: #fff;
  padding: calc(var(--hdr) + clamp(64px,9vw,124px)) 0 clamp(76px,9vw,124px); overflow: hidden;
}
/* Structural grid, drawn not decorated. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--rule-dark) 1px, transparent 1px),
    linear-gradient(var(--rule-dark) 1px, transparent 1px);
  background-size: clamp(60px,8vw,110px) clamp(60px,8vw,110px);
  mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 12%, #000 0%, transparent 72%);
  opacity: .8;
}

.hero .wrap { position: relative; z-index: 2; }

/* Two columns: the argument on the left, the Heroes film beside it. The film
   leads the page rather than waiting three sections down. */
.hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero__copy { min-width: 0; }
.hero__film { margin: 0; min-width: 0; }
.hero__film video {
  width: 100%; aspect-ratio: 16/9; display: block; background: #000;
  border: 1px solid var(--rule-dark);
}
.hero__film figcaption {
  margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.62);
}
.hero__film figcaption span {
  display: inline-block; margin-right: 8px; padding: 4px 7px;
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  background: var(--gold); color: var(--gun);
}
/* .hero sets its own dark ground rather than using .dark, so the heading
   colour has to be stated here — inheriting the global dark h1 puts black
   type on a black background. */
.hero h1 { max-width: 18ch; color: var(--white); font-size: clamp(38px, 4.4vw, 72px); }
.hero h1 span { color: var(--gold); }
.hero__lede {
  max-width: 44ch; margin: 22px 0 30px;
  font-size: clamp(16px,1.35vw,19px); color: rgba(255,255,255,.72);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__lede { margin-bottom: 34px; }





/* --- Section head --------------------------------------------------------- */
.head { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px 56px; align-items: end; margin-bottom: 46px; }
.head p { font-size: 16.5px; }
.head--solo { grid-template-columns: 1fr; max-width: 58ch; }

/* --- The model diagram: the page's one real idea -------------------------- */
.model { border: 1.5px solid var(--gun); background: var(--white); }
.model__row { display: grid; grid-template-columns: repeat(4,1fr); }
.model__in { padding: 26px 24px; border-right: 1.5px solid var(--gun); border-bottom: 1.5px solid var(--gun); }
.model__in:last-child { border-right: 0; }
.model__k { min-height: 1em; }
.model__in h3 { margin-bottom: 7px; }
.model__in p { font-size: 14px; color: var(--slate); }
.model__k { display: block; margin-bottom: 14px; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--grey-3); }
.model__core {
  background: var(--gold); color: var(--gun);
  padding: 30px 24px; text-align: center; border-bottom: 1.5px solid var(--gun);
}
.model__core strong { display: block; font: 700 clamp(20px,2.2vw,30px)/1.05 var(--display); letter-spacing: -.03em; }
.model__core span { display: block; margin-top: 9px; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.model__out { background: var(--gun); color: #fff; padding: 28px 24px; text-align: center; }
.model__out strong { display: block; font: 700 clamp(19px,2vw,27px)/1.1 var(--display); letter-spacing: -.03em; color: #fff; }
.model__out span { display: block; margin-top: 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.model__flow { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0; font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--grey-3); border-bottom: 1.5px solid var(--gun); }
.model__flow::before,.model__flow::after { content:""; height:1px; width: clamp(24px,6vw,90px); background: var(--grey-2); }

/* --- Pillars -------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5px; background: var(--rule-dark); border: 1.5px solid var(--rule-dark); }
.pillar { background: var(--gun); padding: 34px 30px 36px; position: relative; transition: background-color .25s; }
.pillar:hover { background: var(--gun-d); }
.pillar__n { font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--gold); }
.pillar h3 { margin: 16px 0 10px; }
.pillar p { font-size: 15px; }

/* --- Rule list ------------------------------------------------------------ */
.rules li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: baseline;
            padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.dark .rules li { border-color: var(--rule-dark); }
.rules li span { font: 500 11px/1 var(--mono); color: var(--gun); letter-spacing: .1em; }
.dark .rules li span { color: var(--gold); }

/* --- Media split ---------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1.12fr .88fr; gap: 48px; align-items: center; }
/* Border follows the band, so the player frames correctly whether the
   section is light or dark — previously set by an inline override. */
.split__v { position: relative; aspect-ratio: 16/9; background: #000; border: 1.5px solid var(--rule); }
.dark .split__v { border-color: var(--rule-dark); }
.split__v iframe,
.split__v video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }

/* --- Team ----------------------------------------------------------------- */
.team { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.who { background: var(--white); }
.who img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.who__b { padding: 18px 20px 22px; border-top: 3px solid var(--gold); }
.who__b h3 { font-size: 18px; }
.who__b span { display: block; margin-top: 5px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--grey-3); }

/* --- Logos ---------------------------------------------------------------- */
.logos { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.logos div { background: var(--white); aspect-ratio: 16/7; display: flex; align-items: center; justify-content: center; padding: 18px; }
.logos img { max-height: 100%; width: auto; object-fit: contain; }

/* --- Feature -------------------------------------------------------------- */
.feature { display: grid; grid-template-columns: .8fr 1.2fr; gap: 46px; align-items: center; }
.feature__i { background: var(--gun-l); border: 1.5px solid var(--rule-dark); }
.feature__i img { width: 100%; max-height: 520px; object-fit: contain; margin: 0 auto; }
.feature__when { margin: 18px 0; font: 500 11.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

/* --- News ----------------------------------------------------------------- */
.news { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.post { background: var(--white); padding: 26px 24px 28px; display: flex; flex-direction: column; transition: background-color .2s; }
.post:hover { background: var(--grey-1); }
/* The lead card spans two columns, so the grid holds n+1 cells for n cards.
   A gap-free grid needs n+1 divisible by both 3 (wide) and 2 (mid), i.e.
   n = 5 or 11. The home page runs 5; changing that count reopens the tail. */
.post--big { grid-column: span 2; }
.post time { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--grey-3); }
.post h3 { margin: 12px 0 9px; }
.post--big h3 { font-size: clamp(21px,2vw,30px); }
.post p { font-size: 14.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.post__go { margin-top: auto; padding-top: 16px; font: 600 11.5px/1 var(--body); color: var(--gun); }

/* --- Closer --------------------------------------------------------------- */
.closer { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.closer h2 span { color: var(--gold); }
.closer p { max-width: 42ch; margin-top: 14px; }
.closer__c { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Footer --------------------------------------------------------------- */
.ftr { background: var(--gun-d); color: rgba(255,255,255,.6); padding: 60px 0 0; }
.ftr__g { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 34px; padding-bottom: 44px; }
.ftr h4 { margin: 0 0 15px; font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.ftr li { margin-bottom: 9px; font-size: 14.5px; }
.ftr a:hover { color: var(--gold); }
.ftr__logo img { width: 178px; height: 42px; object-fit: contain; object-position: left center; }
.ftr__note { margin-top: 15px; max-width: 30ch; font-size: 14.5px; }
.ftr__bar { border-top: 1px solid var(--rule-dark); padding: 18px 0; font: 400 12.5px/1.5 var(--mono); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* --- Focus -----------------------------------------------------------------
   Explicit rather than left to the browser: the default ring is a dark blue
   that all but disappears against the gunmetal bands. :focus-visible so it
   shows for keyboards without ringing every mouse click. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}
.dark :focus-visible, .hero :focus-visible, .phead :focus-visible, .hdr :focus-visible, .ftr :focus-visible {
  outline-color: var(--gold);
}
.marquee__item :focus-visible { outline-offset: 1px; }

/* Skip link — first tab stop, hidden until focused. */
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 12px 18px; background: var(--gold); color: var(--gun);
  font: 600 13px/1 var(--body); transition: top .15s;
}
.skip:focus { top: 16px; }

/* --- Reveal (gated on .js so content is never hidden without it) ---------- */
.js .r { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .r.on { opacity: 1; transform: none; }

/* --- Responsive ----------------------------------------------------------- */
/* The nav needs ~731px at 16px type and the logo another 240px, so with the
   gutters the header stops fitting around 1110px. Collapse point raised from
   1060px when the header type grew. */
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: block; }
  .nav.open { display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
              position: fixed; inset: var(--hdr) 0 auto; background: var(--gun);
              padding: 24px var(--gutter) 30px; border-bottom: 1px solid var(--rule-dark); }
  .team { grid-template-columns: repeat(2,1fr); }
  .logos { grid-template-columns: repeat(3,1fr); }
  .news { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .hero h1 { max-width: 20ch; }
}

@media (max-width: 820px) {
  .head, .split, .feature, .closer { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .model__row { grid-template-columns: 1fr 1fr; }
  .model__in:nth-child(2n) { border-right: 0; }
  .model__in { border-right: 0; }
  .feature__i { order: -1; }
  .ftr__g { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  /* 240px of logo plus the burger leaves only ~29px slack at 375px. */
  .hdr__logo img { width: 196px; height: 46px; }
  .logos { grid-template-columns: repeat(2,1fr); }
  .news { grid-template-columns: 1fr; }
  .post--big { grid-column: span 1; }
  .team { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .js .r { opacity: 1; transform: none; transition: none; }
}


/* ═══ The Thesis / Heroes ════════════════════════════════════════════════ */
.thesis { background: var(--grey-1); }
.thesis__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 26px 56px; align-items: end; margin-bottom: 44px; }
.thesis__grid h2 span { color: var(--gold-d); }
.thesis__body { font-size: 17px; }
.thesis__body strong { color: var(--gun); font-weight: 600; }

/* The shift, as a ledger of three moves. */
.shift { border-top: 2px solid var(--gun); padding-top: 26px; margin-bottom: 48px; }
.shift__lede { max-width: 62ch; margin-bottom: 22px; font-size: 16.5px; }
.shift__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.shift__list li {
  background: var(--white); display: grid;
  grid-template-columns: auto 1fr auto auto 1fr; gap: 14px; align-items: center;
  padding: 20px 22px;
}
.shift__list span { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--grey-3); }
.shift__list b { font: 600 clamp(17px,1.7vw,22px)/1.15 var(--display); letter-spacing: -.02em; color: var(--gun); }
.shift__list i { font-style: normal; color: var(--gold-d); font-size: 18px; }

/* Heroes film */
.heroes { margin: 0; border: 1px solid var(--rule); background: var(--gun); }
.heroes video { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; display: block; }
.heroes figcaption { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--white); border-top: 1px solid var(--rule); }
.heroes figcaption p { margin: 0; font-size: 15px; }
.tag--plain { margin: 0; }

@media (max-width: 820px) {
  .thesis__grid { grid-template-columns: 1fr; }
  .shift__list li { grid-template-columns: auto 1fr; row-gap: 6px; }
  .shift__list i { display: none; }
}

/* ═══ Interior pages ═════════════════════════════════════════════════════ */

/* Compact page header — the full hero belongs to the home page only. */
.phead { position: relative; background: var(--gun); color: rgba(255,255,255,.72);
         padding: calc(var(--hdr) + clamp(48px,6vw,86px)) 0 clamp(48px,6vw,86px); overflow: hidden; }
.phead::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--rule-dark) 1px, transparent 1px),
    linear-gradient(var(--rule-dark) 1px, transparent 1px);
  background-size: clamp(60px,8vw,110px) clamp(60px,8vw,110px);
  mask-image: radial-gradient(120% 100% at 82% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 100% at 82% 0%, #000 0%, transparent 70%);
}
.phead__mark { position: absolute; right: clamp(-30px,1vw,40px); top: 50%; transform: translateY(-50%);
               width: min(380px, 34vw); opacity: .055; pointer-events: none; }
.phead .wrap { position: relative; z-index: 2; }
.phead .tag { color: var(--gold); }
.phead h1 { color: var(--white); font-size: clamp(34px, 4.6vw, 68px); max-width: 22ch; }
.phead__lede { max-width: 54ch; margin-top: 20px; font-size: clamp(15.5px,1.2vw,18px); color: rgba(255,255,255,.72); }

/* Article prose — press releases */
.prose { max-width: 68ch; font-size: 17px; line-height: 1.72; }
.prose p { margin: 0 0 1.15em; }
.prose p:first-of-type { font-size: 19px; color: var(--gun); }
.prose h2, .prose h3 { margin: 1.8em 0 .5em; }
.prose a { color: var(--gold-d); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--gun); }
.article__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
                 padding-bottom: 22px; margin-bottom: 34px; border-bottom: 2px solid var(--gun);
                 font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--grey-3); }
.backlink { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px;
            font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gun); }
.backlink:hover { color: var(--gold-d); }

/* Press index */
.postlist { border-top: 2px solid var(--gun); }
.postlist a { display: grid; grid-template-columns: 168px 1fr auto; gap: 26px; align-items: baseline;
              padding: 24px 0; border-bottom: 1px solid var(--rule); transition: background-color .2s; }
.postlist a:hover { background: var(--grey-1); }
.postlist time { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-d); }
.postlist h2 { font-size: clamp(18px,1.6vw,22px); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.postlist span { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grey-3); white-space: nowrap; }

/* Two-column content + form */
.withform { display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: start; }
.formcard { background: var(--white); border: 1.5px solid var(--gun); padding: 8px; }
.formcard iframe { width: 100%; border: 0; display: block; }
.deflist div { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.deflist dt { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--grey-3); }
.deflist dd { margin: 8px 0 0; font-size: 16.5px; color: var(--gun); }
.deflist a { color: var(--gun); }
.deflist a:hover { color: var(--gold-d); }

@media (max-width: 980px) {
  .withform { grid-template-columns: 1fr; }
  .formcard { max-width: 520px; }
  .postlist a { grid-template-columns: 1fr; gap: 8px; }
  .postlist span { display: none; }
}

/* ═══ Family of companies — continuous marquee ═══════════════════════════
   A loop rather than a grid, so no company reads as first or last. The
   track holds the list twice and slides exactly one copy's width, which
   makes the seam invisible; the second copy is aria-hidden so screen
   readers and search engines see each company once.
   ═══════════════════════════════════════════════════════════════════════ */
.marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  /* Fade the edges so logos enter and leave rather than popping. */
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.dark .marquee { border-color: var(--rule-dark); }

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-dur, 78s) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__item {
  flex: 0 0 auto;
  /* Fixed height, auto width. Logos are normalised to a common optical
     height and the tile widens to suit, which is the only way a 6:1 mark
     and a 1:1 mark read as the same size. max-width guards the extremes. */
  height: 104px;
  min-width: 152px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 30px;
  background: var(--white);
  border-right: 1px solid var(--rule);
}
/* Heights per shape bucket, assigned in build.py from each file's intrinsic
   ratio. Equal height would give a 7:1 wordmark ~10x the ink of a stacked
   crest; these even out the optical weight instead. */
.marquee__item img { height: 46px; width: auto; max-width: 196px; object-fit: contain; }
.marquee__item--wide img     { height: 38px; max-width: 250px; }
.marquee__item--squarish img { height: 54px; }
.marquee__item--stacked img  { height: 66px; }

@keyframes marquee { to { transform: translateX(-50%); } }

/* Without animation it becomes a plain scrollable strip — still no first
   or last visually, and reachable by keyboard and trackpad. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .marquee__track { animation: none; }
}