/* ---------------------------------------------------------------------------
   Personal Branding Agencies — site.css

   Typography follows the MASHMAN family standard: Montserrat for display,
   headlines, labels and eyebrows; Inter for body copy, nav and small UI text.

   Per-property font role decision (playbook 2): PBA uses INTER for nav and
   MONTSERRAT for the wordmark. A directory is a utility people navigate
   constantly, so the nav should be quiet and functional; the masthead carries
   the identity. Held consistently across every page of this property.

   Palette note: the gold accent (#F3C228) is specific to this property and is
   a deliberate departure from the MASHMAN "no chromatic accent" rule, kept at
   Isaac's direction so the directory reads as its own thing. Logged as an open
   item in canonical-facts.json rather than silently applied either way.
--------------------------------------------------------------------------- */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/montserrat-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/montserrat-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/montserrat-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;
  src:url('/assets/fonts/montserrat-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;
  src:url('/assets/fonts/montserrat-latin-900-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:700;font-display:swap;
  src:url('/assets/fonts/montserrat-latin-700-italic.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:800;font-display:swap;
  src:url('/assets/fonts/montserrat-latin-800-italic.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:900;font-display:swap;
  src:url('/assets/fonts/montserrat-latin-900-italic.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2')}

:root{
  --black:#0A0A0A;
  --ink:#1A1A1A;
  --grey-70:#4A4A4A;
  --grey-55:#6B6B6B;
  --grey-40:#8A8A8A;
  --grey-15:#E4E4E4;
  --paper:#FFFFFF;
  --off:#F7F7F7;
  /* Accent: gold. #F3C228 is only 2.35:1 on white, so like any light accent it cannot
     carry text or borders on a light ground. It is used as a fill, and as text on dark
     grounds. Light grounds step down the same hue until contrast passes. Verified
     numerically in validate.py; do not swap these by eye. */
  --gold:#F3C228;        /* fills, and accent TEXT on dark grounds only */
  --gold-line:#FCEFC5;   /* decorative hairline tint on paper */
  --gold-edge:#AE860A;   /* visible borders on paper, 3.4:1 */
  --gold-deep:#8C6C08;   /* accent TEXT on paper, 4.9:1 */
  --gold-on-dark:#F2BA0D;/* accent TEXT on ink, 11.1:1 */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.65;
}
h1,h2,h3,h4,h5,h6,.eyebrow,.wordmark .mark,.wordmark .sub,.btn,.chip,.tag,
.vnum,.stat .n,.stat .l,.crumb,.ribbon,.badge,.rank-num,.rank-chip,
.price,.per,.hot-tag,.sample-pill,.navdrop-trigger,.result-count,
.stat-card .n,.stat-card .l,.admin-table th,.rn b,.rn,.verified,.vet-line,
.form-note,.req,.more,.backlink,.legal,.fcol h2,label,legend,caption,.pt,
.menu-toggle,.skip-link,.demo-flag{
  font-family:'Montserrat',system-ui,sans-serif;
}
nav a,.navdrop-panel a,body,p,li,td,input,select,textarea,.blurb,.lede,
.meta,.help,.dim,.quickmeta{font-family:'Inter',system-ui,sans-serif}
.navdrop-trigger{font-family:'Inter',system-ui,sans-serif}
nav#nav a{font-family:'Inter',system-ui,sans-serif}

a{color:inherit}
a:hover{color:var(--black)}
img{max-width:100%;height:auto}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:15px}
:focus-visible{outline:2px solid var(--black);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--black);
  color:#fff;padding:12px 20px;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none}
.skip-link:focus{left:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.dim{color:var(--grey-40)}

/* ---------- ticker ---------- */
.ticker-wrap{background:var(--black);color:#fff;overflow:hidden;white-space:nowrap}
.ticker{display:inline-block;padding:8px 0;animation:ticker 44s linear infinite;
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  font-family:'Montserrat',sans-serif}
.ticker span{margin:0 26px;color:#9A9A9A}
.ticker b{color:var(--gold-on-dark);font-weight:700}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--black)}
.header-inner{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;
  align-items:center;justify-content:space-between;gap:28px;min-height:82px}
.wordmark{display:flex;flex-direction:column;line-height:1.35;text-decoration:none}
.wordmark .mark{font-weight:800;font-size:16px;letter-spacing:.11em;text-transform:uppercase}
.wordmark .sub{font-weight:500;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey-55);margin-top:3px}
/* Nav sits on a taller header with real separation between items. The previous
   12.5px at weight 500 with 24px gaps read as one undifferentiated strip: items were
   too small to scan and too close to tell apart. Each item now has its own padding
   box, an underline that grows on hover, and a solid rule under the current page, so
   position is legible without relying on a weight change alone. */
nav#nav{display:flex;gap:4px;align-items:center}
nav#nav>a,.navdrop-trigger{font-size:14px;font-weight:500;letter-spacing:.01em;
  color:var(--grey-70);text-decoration:none;background:none;border:none;
  padding:9px 13px;display:inline-flex;align-items:center;gap:5px;position:relative;
  line-height:1.2;white-space:nowrap;transition:color .15s}
nav#nav>a::after,.navdrop-trigger::after{content:"";position:absolute;left:13px;
  right:13px;bottom:2px;height:1.5px;background:var(--black);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
nav#nav>a:hover,.navdrop-trigger:hover{color:var(--black)}
nav#nav>a:hover::after,.navdrop-trigger:hover::after,
.navdrop:focus-within .navdrop-trigger::after{transform:scaleX(1)}
nav#nav>a[aria-current],.navdrop-trigger.active{color:var(--black);font-weight:600}
nav#nav>a[aria-current]::after,.navdrop-trigger.active::after{transform:scaleX(1);
  background:var(--gold-edge);height:2px}
.navcta{margin-left:12px;padding:12px 22px!important;font-weight:700!important;
  color:#fff!important;font-size:12px!important;letter-spacing:.12em!important}
.navcta::after{display:none}
.caret{font-size:9px;opacity:.6;transition:transform .18s}
.navdrop:hover .caret,.navdrop.open .caret{transform:translateY(1px)}

/* Accessible dropdown (playbook 5.1): hover + focus-within + .open, no gap */
.navdrop{position:relative}
.navdrop-panel{position:absolute;top:100%;right:0;min-width:238px;background:#fff;
  border:1px solid var(--black);padding:8px 0;display:none;z-index:70;
  box-shadow:0 8px 0 rgba(10,10,10,.04)}
.navdrop:hover .navdrop-panel,
.navdrop:focus-within .navdrop-panel,
.navdrop.open .navdrop-panel{display:block}
.navdrop-panel a{display:block;padding:10px 18px;font-size:13.5px;color:var(--grey-70);
  text-decoration:none}
.navdrop-panel a:hover{background:var(--off);color:var(--black)}
.navdrop-panel a[aria-current]{color:var(--black);font-weight:600}
.menu-toggle{display:none;background:none;border:1px solid var(--black);
  width:40px;height:40px;font-size:17px;line-height:1}

/* ---------- type ---------- */
/* Leading was 1.06, which made stacked uppercase lines touch, and the outline
   treatment made it worse: -webkit-text-stroke draws half the stroke OUTSIDE the
   glyph, so stroked lines collided before solid ones did. Leading is now 1.16 on
   h1 and the outline resets the negative tracking it inherits. */
/* Headlines are bold Montserrat. The original collision was NOT the weight: it was the
   -webkit-text-stroke outline treatment, which draws half its stroke OUTSIDE each glyph
   and so made stacked uppercase lines touch at tight leading. The outline is gone, the
   weight is back, and leading is 1.22, which clears descenders at 900 weight.
   Verified by measuring real rendered line boxes with Montserrat actually loaded. */
h1{font-weight:900;font-size:clamp(29px,4.9vw,52px);line-height:1.22;
  letter-spacing:-.015em;text-transform:uppercase;margin-bottom:20px;
  overflow-wrap:break-word}
h2{font-weight:800;font-size:clamp(21px,2.9vw,31px);line-height:1.26;
  letter-spacing:-.01em;text-transform:uppercase;margin-bottom:14px;
  overflow-wrap:break-word}
h3{font-weight:700;font-size:16px;line-height:1.4;letter-spacing:.01em;margin-bottom:7px}

/* THE POINT TREATMENT
   A headline states the subject, then makes the point. The second clause is italic:
   same family, same weight, same colour, so the emphasis is carried by the cut of the
   type rather than by a second colour or a decorative effect. Use it on the clause
   that lands the argument, never on the whole headline, and never more than once in
   a heading. Class name kept as .outline so existing markup does not change. */
.outline{font-style:italic}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--grey-55);margin-bottom:16px}
.lede{color:var(--grey-70);font-size:16px;max-width:64ch;margin-bottom:14px}
p{margin-bottom:14px}
p:last-child{margin-bottom:0}

.pagehead{padding:52px 24px 34px}
.pagehead.narrow{max-width:680px;text-align:center;padding:88px 24px}
.pagehead.narrow .lede{margin-left:auto;margin-right:auto}

/* ---------- breadcrumb ---------- */
.crumb{margin-bottom:26px}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-40)}
.crumb a{text-decoration:none;color:var(--grey-40)}
.crumb a:hover{color:var(--black)}
.crumb li[aria-current]{color:var(--grey-70)}
.crumb-sep{color:var(--grey-15)}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:1px solid var(--black);background:var(--black);
  color:#fff;padding:13px 26px;font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;text-align:center;
  transition:background .15s,color .15s}
.btn:hover{background:#fff;color:var(--black)}
.btn.ghost{background:transparent;color:var(--black)}
.btn.ghost:hover{background:var(--black);color:#fff}

/* ---------- hero ---------- */
.hero{border-bottom:1px solid var(--black);position:relative;overflow:hidden}
.hero-inner{max-width:1180px;margin:0 auto;padding:76px 24px 60px;text-align:center;
  position:relative}
.hero h1{max-width:16ch;margin-left:auto;margin-right:auto}
.hero .lede{margin:0 auto 18px}
.seal{position:absolute;top:34px;right:20px;width:112px;height:112px;
  pointer-events:none;color:var(--black)}
.seal .spin{animation:spin 26s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:1040px){.seal{display:none}}
.vet-line{display:inline-flex;align-items:center;gap:9px;margin-bottom:30px;
  border:1px solid var(--gold-edge);padding:8px 20px;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
/* The check sits on white almost everywhere, so it takes the deep value. On dark
   grounds it is overridden below. */
.ck{width:14px;height:14px;fill:var(--gold-deep);flex-shrink:0}
.verify .ck,.cta .ck,.rank-hero .ck{fill:var(--gold)}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.hero-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-top:56px;
  border-top:1px solid var(--grey-15);padding-top:40px}
.stat{padding:0 52px}
.stat:last-child{border-right:none}
.stat .n{font-family:'Montserrat',sans-serif;font-weight:800;font-size:52px;line-height:1;
  color:var(--gold-deep);margin-bottom:6px}
.stat .l{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);margin-bottom:0}

/* ---------- thesis ---------- */
.thesis{border-bottom:1px solid var(--black);background:var(--off)}
.thesis-inner{padding:56px 24px;display:flex;flex-wrap:wrap;gap:52px;align-items:center}
.thesis-inner>div{flex:1 1 420px}
.quote{flex:1 1 340px;border-left:3px solid var(--gold-edge);padding:6px 0 6px 24px}
.quote p{font-size:16.5px;font-weight:500;line-height:1.55}
.attr{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey-55);font-family:'Montserrat',sans-serif}

/* ---------- bands ---------- */
.band{padding:64px 24px}
.band-head{display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:14px;margin-bottom:26px}
.more,.backlink a{font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;border-bottom:1px solid var(--black);text-decoration:none}
.backlink{margin:44px 0 64px}
/* Vertical-only, same reasoning as .integrity above: a horizontal 0 in this
   shorthand silently overrode .wrap's side padding on every "wrap note-band"
   section, five of them across the site, pushing text flush against the edge. */
.note-band{padding-top:44px;padding-bottom:64px;border-top:1px solid var(--grey-15);margin-top:44px}
.note-band p{max-width:72ch;color:var(--grey-70);font-size:14.5px}
/* Was bare text links with no container at all, so a single unranked agency (the
   common case early on) rendered as one lone underlined word with nothing marking
   it as part of a list, reading as a stray link rather than structured content. Each
   entry now gets a bordered pill so it's unambiguous this is a list even at n=1. */
.plain{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:14px}
.plain li{border:1px solid var(--grey-15);background:var(--off);padding:6px 14px}
.plain a{font-size:13.5px;font-weight:500}

/* ---------- cards (flex-wrap, not grid auto-fit — playbook 6.2) ---------- */
.grid{display:flex;flex-wrap:wrap;gap:22px}
/* The hidden attribute must beat the display rule below, or filtering silently does
   nothing: the result count updates while every card stays on screen. Any element
   given display: by a class needs this companion rule. */
[hidden]{display:none !important}
.card{flex:1 1 320px;border:1px solid var(--black);background:#fff;padding:26px;
  display:flex;flex-direction:column;gap:12px;position:relative}
.card.founder{border-width:2px}
.card.featured{border-width:2px}
/* The ribbon was absolutely positioned over the top-right of the card. In a
   four-across row it wrapped to two lines and covered the agency name. It is now a
   full-width bar in normal flow, bled to the card edges with negative margins, so it
   can never overlap content at any width. */
.ribbon{display:block;margin:-26px -26px 4px;padding:8px 26px;
  background:var(--gold);color:var(--black);text-align:center;
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.4}
.card-top{display:flex;align-items:flex-start;gap:13px}
.avatar{width:50px;height:50px;border:1.5px solid var(--black);display:inline-flex;
  align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;
  font-weight:800;font-size:16px;flex-shrink:0;overflow:hidden;background:#fff}
.avatar.haslogo{padding:5px}
.avatar.haslogo img{width:100%;height:100%;object-fit:contain;display:block}
.avatar.lg{width:72px;height:72px;font-size:23px}
.card-id{flex:1;min-width:0}
.card h3{margin-bottom:3px}
.card h3 a{text-decoration:none}
.card h3 a:hover{border-bottom:1px solid var(--black)}
.meta{font-size:12.5px;color:var(--grey-55);margin-bottom:0}
.rank-chip{border:1px solid var(--black);padding:3px 8px;font-size:9.5px;
  font-weight:800;letter-spacing:.08em;flex-shrink:0}
.verified{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:0}
.rating{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  margin-bottom:0}
.rating .stars{color:var(--gold-deep);letter-spacing:1px}
.rating .count{color:var(--grey-55);font-weight:400;font-size:12px}
.rating.norate{font-size:12px;color:var(--grey-40);font-weight:500;font-style:italic}
.blurb{font-size:13.5px;color:var(--grey-70);line-height:1.6;margin-bottom:0}
.quickmeta{font-size:11.5px;color:var(--grey-55);font-weight:500;margin-bottom:0}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.tag{border:1px solid var(--grey-15);padding:4px 10px;font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--grey-70)}
.price-tier{font-size:12px;font-weight:600;color:var(--grey-55);margin-bottom:0}
.pt{color:var(--black);letter-spacing:1px}
.pt .dim{color:var(--grey-15)}
.card-cta{margin-top:6px;padding:11px 18px;font-size:11px}
.sample-pill{display:inline-block;margin-left:8px;background:var(--grey-15);
  color:var(--grey-70);font-size:8.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 7px;vertical-align:middle}
.demo-flag{border-left:3px solid var(--gold-edge);background:var(--off);padding:14px 18px;
  font-size:13px;color:var(--grey-70);margin-bottom:24px}

/* ---------- toolbar ---------- */
.toolbar{padding-bottom:26px}
.searchbar{display:flex;border:1.5px solid var(--black);margin-bottom:18px;max-width:560px}
.searchbar input{flex:1;border:none;padding:14px 16px;min-width:0}
.searchbar input:focus{outline:none}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{border:1px solid var(--grey-15);background:#fff;padding:7px 15px;font-size:11px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-70)}
.chip:hover{border-color:var(--black);color:var(--black)}
.chip.active{background:var(--black);border-color:var(--black);color:#fff}
.result-count{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey-55);margin-bottom:0}
.empty{border:1px dashed var(--grey-40);padding:56px 24px;text-align:center;
  color:var(--grey-70);font-size:14.5px}
.empty strong{display:block;font-size:15px;margin-bottom:5px;color:var(--black)}

/* ---------- verify ---------- */
.verify{background:var(--black);color:#fff;padding:76px 0}
.verify h2,.verify h3{color:#fff}
.verify .eyebrow{color:var(--gold-on-dark)}
.verify .lede{color:#B8B5AE;margin-bottom:44px}
.verify .lede a,.verify .disclaimer a{color:#fff}
.vgrid{display:flex;flex-wrap:wrap;gap:1px;background:#2A2A2A;margin-bottom:40px}
.vcell{flex:1 1 280px;background:var(--black);padding:28px 24px}
.vnum{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-on-dark);margin-bottom:11px}
.vcell p{font-size:13.5px;color:#B8B5AE;line-height:1.65;margin-bottom:0}
.disclaimer{font-size:12px;color:#9A9A9A;max-width:76ch;line-height:1.75;
  border-top:1px solid #2A2A2A;padding-top:20px;margin-bottom:0}

/* ---------- ethics ---------- */
.ethics-wrap{padding-bottom:20px}
.ethics{list-style:none;counter-reset:e;margin-bottom:56px}
.ethics li{counter-increment:e;display:grid;grid-template-columns:46px 1fr;
  column-gap:24px;padding:22px 0;border-bottom:1px solid var(--grey-15);
  align-items:start}
/* Right-aligned in a fixed grid column so numerals of different widths (I vs VII)
   all end on the same line, which keeps every row's body text at an identical
   indent. Everything that is not the marker goes to column 2 and stacks. */
.ethics li::before{content:counter(e,upper-roman);font-family:'Montserrat',sans-serif;
  font-weight:800;font-size:13px;color:var(--gold-deep);grid-column:1;
  text-align:right;padding-top:3px;font-variant-numeric:tabular-nums}
.ethics li>*{grid-column:2;min-width:0}
.ethics h3{text-transform:uppercase;font-size:12.5px;letter-spacing:.08em;margin-bottom:5px}
.ethics p{font-size:14.5px;color:var(--grey-70);margin-bottom:0}
.faq{margin-bottom:20px}
.faq-item{padding:20px 0;border-bottom:1px solid var(--grey-15)}
.faq-item p{font-size:14.5px;color:var(--grey-70);margin-bottom:0}

/* ---------- press ---------- */
.press-grid{display:flex;flex-wrap:wrap;gap:44px;padding-bottom:20px}
.press-block{flex:1 1 380px}
.press-block h2{font-size:13px;letter-spacing:.1em;padding-bottom:10px;
  border-bottom:1px solid var(--grey-15);margin-bottom:14px}
.press-block h3{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  margin:22px 0 7px;color:var(--grey-55)}
.press-block p{font-size:14px;color:var(--grey-70)}

/* ---------- plans ---------- */
.plan-grid{display:flex;flex-wrap:wrap;gap:22px;padding-bottom:20px}
.plan{flex:1 1 300px;border:1px solid var(--black);padding:30px 26px;position:relative;
  display:flex;flex-direction:column}
.plan.hot{border-width:2px}
.hot-tag{display:block;margin:-30px -26px 20px;padding:8px 26px;background:var(--gold);
  color:var(--black);text-align:center;font-size:9px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.4}
.plan h2{font-size:13px;letter-spacing:.14em;margin-bottom:12px}
.price{font-family:'Montserrat',sans-serif;font-weight:800;font-size:38px;
  line-height:1;margin-bottom:5px}
.per{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey-55);margin-bottom:22px}
.plan ul{list-style:none;margin-bottom:24px;flex:1}
.plan li{font-size:13.5px;padding:8px 0 8px 22px;position:relative;color:var(--grey-70);
  border-bottom:1px solid var(--grey-15)}
.plan li.yes::before{content:"+";position:absolute;left:0;font-weight:800;color:var(--black)}
.plan li.no{color:var(--grey-40)}
.plan li.no::before{content:"\2013";position:absolute;left:0;font-weight:800;
  color:var(--grey-40)}
/* Only vertical padding is set here, deliberately never a horizontal value: a
   shorthand like "padding:36px 0 64px" zeroes out the sides, and since this class
   is always combined as class="wrap integrity" on the same element, that 0
   completely overrode .wrap's own 24px side padding, pushing text flush against
   the viewport edge. Same bug existed in .note-band, fixed the same way below. */
.integrity{padding-top:36px;padding-bottom:64px;border-top:1px solid var(--grey-15);margin-top:36px}
.integrity p{max-width:74ch;font-size:14px;color:var(--grey-70)}

/* ---------- agency page ---------- */
.fp-head{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.fp-badges{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.badge{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--gold-edge);
  padding:6px 13px;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep)}
.badge.dark{border-color:var(--black);background:var(--black);color:#fff}
.fp-meta{font-size:13.5px;color:var(--grey-55);margin-bottom:6px}
.fp-blurb{font-size:16.5px;line-height:1.75;max-width:70ch;margin-bottom:34px;
  color:var(--grey-70)}
.fp-details{border-top:1px solid var(--black);margin-bottom:40px}
.detail-row{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--grey-15);
  font-size:14px}
.detail-row dt{font-family:'Montserrat',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:10px;letter-spacing:.14em;width:170px;flex-shrink:0;padding-top:3px;
  color:var(--grey-55)}
.detail-row dd{flex:1;min-width:0}
.signed{color:var(--gold-deep);font-weight:600}
.fp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.fp-report{border-left:3px solid var(--gold-edge);background:var(--off);padding:24px 26px;
  margin-bottom:20px}
.fp-report h2{font-size:13px;letter-spacing:.1em;margin-bottom:9px}
.fp-report p{font-size:14px;color:var(--grey-70);max-width:70ch}
.tst{margin-bottom:40px}
.testimonial{border:1px solid var(--grey-15);border-left:3px solid var(--gold-edge);
  padding:22px 24px;margin-bottom:13px}
.testimonial p{font-size:14.5px;line-height:1.7;margin-bottom:11px}
.testimonial figcaption{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey-55)}

/* ---------- rankings ---------- */
.rank-hero{background:var(--black);color:#fff;padding:56px 0 48px}
.rank-hero h1,.rank-hero h2{color:#fff}
.rank-hero .eyebrow{color:var(--gold-on-dark)}
.rank-hero .lede{color:#B8B5AE}
.rank-hero .lede a{color:#fff}
.rank-hero .crumb ol,.rank-hero .crumb a{color:#9A9A9A}
.rank-hero .crumb a:hover,.rank-hero .crumb li[aria-current]{color:#fff}
.rank-list{padding:44px 24px 20px}
.ranks{list-style:none}
.rank-row{display:flex;align-items:center;gap:18px;border:1px solid var(--black);
  padding:17px 22px;margin-bottom:12px}
.rank-row.podium{border-width:2px}
.rank-num{font-family:'Montserrat',sans-serif;font-weight:800;font-size:27px;width:52px;
  flex-shrink:0}
.rank-row.podium .rank-num{color:var(--gold-deep)}
.rank-id{flex:1;min-width:0}
.rank-id a{font-weight:700;font-size:15.5px;text-decoration:none}
.rank-id a:hover{border-bottom:1px solid var(--black)}
.rf-meta{display:block;font-size:11.5px;color:var(--grey-55);margin-top:2px}
.rank-nums{display:flex;gap:26px;flex-shrink:0}
.rn{text-align:center;font-family:'Montserrat',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey-55)}
.rn b{display:block;font-size:18px;color:var(--ink);margin-bottom:1px}
.admin-note{font-size:12.5px;color:var(--grey-55);max-width:76ch;margin-top:26px}
@media (max-width:680px){.rank-nums{display:none}.rank-num{width:38px;font-size:22px}}

/* ---------- forms ---------- */
.form-wrap{padding-bottom:64px;max-width:720px}
.report-grid{display:flex;flex-wrap:wrap;gap:48px;padding-bottom:64px}
.report-how{flex:1 1 320px}
.report-grid form{flex:1 1 420px}
.stack{border:1.5px solid var(--black);padding:32px}
.stack h2{font-size:12.5px;letter-spacing:.14em;padding-bottom:11px;
  border-bottom:1px solid var(--grey-15);margin:26px 0 18px}
.stack h2:first-of-type{margin-top:0}
.field{margin-bottom:15px}
.frow{display:flex;gap:14px;flex-wrap:wrap}
.frow .field{flex:1 1 180px}
label{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:6px}
.req{color:var(--gold-deep)}
input,select,textarea{width:100%;border:1px solid var(--grey-15);padding:12px 14px;
  background:var(--off);border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--black);outline:none;
  background:#fff}
.searchbar{border-color:var(--black)}
.help{display:block;font-size:11.5px;color:var(--grey-55);margin-top:5px;line-height:1.5}
.pledge{border:1.5px solid var(--gold-edge);padding:20px;margin:24px 0}
.pledge legend{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:0 8px}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.check:last-child{margin-bottom:0}
.check input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--gold-deep)}
.check label{font-size:13px;line-height:1.6;text-transform:none;letter-spacing:0;
  font-weight:400;font-family:'Inter',sans-serif;margin-bottom:0}
.form-note{font-size:11.5px;color:var(--grey-55);margin-top:14px}
.steps{padding-left:20px;margin-bottom:16px}
.steps li{font-size:14px;color:var(--grey-70);margin-bottom:9px;padding-left:6px}
/* Honeypot: removed from the a11y tree AND unreachable by keyboard (playbook 5) */
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}

/* ---------- admin ---------- */
.stat-cards{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px}
.stat-card{flex:1 1 180px;border:1px solid var(--black);padding:22px}
.stat-card .n{font-family:'Montserrat',sans-serif;font-weight:800;font-size:30px;
  line-height:1;margin-bottom:5px}
.stat-card .of{font-size:17px;color:var(--grey-40)}
.stat-card .l{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-55);margin-bottom:0}
.table-wrap{overflow-x:auto;margin-bottom:24px}
.admin-table{width:100%;border-collapse:collapse;min-width:680px;font-size:13.5px}
.admin-table th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-55);padding:11px 12px;
  border-bottom:1.5px solid var(--black)}
.admin-table td{padding:12px;border-bottom:1px solid var(--grey-15)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--off);padding:2px 6px}

/* ---------- CTA ---------- */
.cta{background:var(--black);color:#fff;padding:72px 0}
.cta h2{color:#fff}
.cta-inner{text-align:center;max-width:720px}
.cta p{color:#B8B5AE;font-size:15px;margin-bottom:26px}
.cta .btn{background:#fff;border-color:#fff;color:var(--black)}
.cta .btn:hover{background:transparent;color:#fff}
.cta .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.cta .btn.ghost:hover{background:#fff;color:var(--black)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--black)}
.footer-inner{max-width:1180px;margin:0 auto;padding:48px 24px;display:flex;
  justify-content:space-between;gap:36px;flex-wrap:wrap}
footer .wordmark .mark{font-size:14px}
.footer-cols{display:flex;gap:56px;flex-wrap:wrap}
.fcol h2{font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grey-55);margin-bottom:13px}
.fcol a{display:block;font-size:13.5px;color:var(--grey-70);margin-bottom:9px;
  text-decoration:none}
.fcol a:hover{color:var(--black)}
.legal{max-width:1180px;margin:0 auto;padding:0 24px 34px}
.legal p{font-size:11px;color:var(--grey-55);line-height:1.7;margin-bottom:7px}
.legal-fine{max-width:92ch}
.mcg{font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:900px){
  nav#nav{display:none}
  nav#nav.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;align-items:flex-start;padding:22px 24px;
    border-bottom:1px solid var(--black);gap:18px}
  nav#nav.open .navdrop{width:100%}
  nav#nav.open .navdrop-panel{position:static;border:none;padding:8px 0 0 14px;
    display:block;min-width:0}
  .menu-toggle{display:block}
  .navcta{width:100%}
  .stat{padding:0 20px}
  .detail-row{flex-direction:column;gap:3px}
  .detail-row dt{width:auto}
}
@media (max-width:520px){
  .stack{padding:22px 18px}
  .hero-inner{padding:52px 20px 44px}
}
/* At very narrow widths the wordmark wraps to two lines; uppercase Montserrat with
   positive tracking needs more leading there than it does on one line. */
@media (max-width:360px){
  .wordmark .mark{font-size:14px;letter-spacing:.08em;line-height:1.45}
  .wordmark .sub{font-size:8.5px;line-height:1.5}
  .header-inner{padding:0 16px;gap:12px}
  .wrap,.legal{padding-left:16px;padding-right:16px}
}

/* ---------- admin publish form ---------- */
.publish{padding:40px 0;border-top:1px solid var(--gold-line);margin-top:36px}
.publish-intro{max-width:74ch;font-size:14px;color:var(--grey-70)}
.publish .stack{margin-top:22px;max-width:760px}
.publish h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-55);margin:26px 0 14px;padding-bottom:9px;
  border-bottom:1px solid var(--gold-line)}
.publish h3:first-of-type{margin-top:0}
.publish-result{margin-top:16px;font-size:13.5px;padding:12px 16px;max-width:760px}
.publish-result:empty{display:none}
.publish-result.working{border-left:3px solid var(--gold-edge);background:var(--off);
  color:var(--grey-70)}
.publish-result.good{border-left:3px solid var(--black);background:var(--off);
  color:var(--ink);font-weight:500}
.publish-result.bad{border-left:3px solid var(--gold-deep);background:var(--off);
  color:var(--gold-deep);font-weight:500}

/* ---------- admin moderation queue ---------- */
.modqueue{padding:36px 0;border-top:1px solid var(--gold-line);margin-top:32px}
.modlist{margin-top:20px;display:flex;flex-direction:column;gap:14px;max-width:820px}
.modcard{border:1px solid var(--black);padding:20px 22px}
.modhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--grey-15)}
.modhead h3{margin-bottom:0}
.modrating{font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.1em;color:var(--gold-deep);white-space:nowrap}
.modcard p{font-size:14px;color:var(--grey-70)}
.modline strong{color:var(--ink)}
.modmeta{font-size:12px;color:var(--grey-55);margin-top:10px}
.modactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.modactions .btn{padding:10px 18px;font-size:11px}
.modnotice{border-left:3px solid var(--gold-edge);background:var(--off);padding:12px 16px;
  font-size:13.5px;color:var(--grey-70)}

/* ---------- plans: unavailable tiers ---------- */
.launch-notice{border:1px solid var(--black);border-left:4px solid var(--gold);
  padding:22px 26px;margin-bottom:28px;max-width:80ch}
.launch-notice h2{font-size:13px;letter-spacing:.12em;margin-bottom:10px}
.launch-notice p{font-size:14px;color:var(--grey-70);margin-bottom:0}
.plan-pending{font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
  border:1px solid var(--gold-edge);display:inline-block;padding:4px 10px;margin-bottom:18px}
.btn[disabled]{background:var(--grey-15);border-color:var(--grey-15);color:var(--grey-55);
  cursor:not-allowed}
.btn[disabled]:hover{background:var(--grey-15);color:var(--grey-55)}

/* ---------- agency page: review CTA ---------- */
.fp-review{border-left:3px solid var(--gold-edge);background:var(--off);padding:24px 26px;
  margin-bottom:16px}
.fp-review h2{font-size:13px;letter-spacing:.1em;margin-bottom:9px}
.fp-review p{font-size:14px;color:var(--grey-70);max-width:70ch;margin-bottom:14px}

/* ---------- SEO landing pages ---------- */
.landing-count{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
  border-top:1px solid var(--gold-line);padding-top:14px;display:inline-block}
.landing-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.landing-links a{border:1px solid var(--grey-15);padding:8px 15px;font-size:12.5px;
  font-weight:500;color:var(--grey-70);text-decoration:none;transition:border-color .15s}
.landing-links a:hover{border-color:var(--black);color:var(--black)}
.browse-wrap{padding-bottom:72px}
.browse-wrap section{margin-bottom:44px}
.browse-wrap h2{font-size:13px;letter-spacing:.14em;padding-bottom:11px;
  border-bottom:1px solid var(--black);margin-bottom:18px}
.ln-grid{display:flex;flex-wrap:wrap;gap:10px}
.ln-grid a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--grey-15);padding:14px 18px;min-width:230px;flex:1 1 230px;
  text-decoration:none;transition:border-color .15s}
.ln-grid a:hover{border-color:var(--black)}
.ln-name{font-size:14px;font-weight:500;color:var(--ink)}
.ln-count{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:800;
  color:var(--gold-deep);border:1px solid var(--gold-line);padding:2px 8px}

/* ---------- AI disclosure: permanent listing section ---------- */
.ai-disclosure{border:1px solid var(--black);border-left:4px solid var(--gold);
  padding:26px 28px;margin-bottom:40px}
.ai-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid var(--grey-15)}
.ai-head h2{font-size:13px;letter-spacing:.14em;margin-bottom:0}
.ai-badge{font-family:'Montserrat',sans-serif;font-size:9px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;
  border:1px solid var(--gold-edge);color:var(--gold-deep);white-space:nowrap}
.ai-badge.pending{border-color:var(--grey-40);color:var(--grey-55)}
.ai-intro{font-size:13px;color:var(--grey-55);line-height:1.7;margin-bottom:16px;max-width:76ch}
.ai-text{font-size:15px;line-height:1.8;color:var(--ink);max-width:74ch;
  padding-left:18px;border-left:2px solid var(--gold-line)}
.ai-text.missing{color:var(--grey-55);font-style:italic;border-left-color:var(--grey-15)}
.ai-permanence{font-size:12px;color:var(--grey-55);line-height:1.65;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--grey-15);max-width:76ch}

/* MCG's own disclosure on the vetting standard page */
.ai-reference{padding:48px 24px 44px;border-top:1px solid var(--grey-15);margin-top:8px}
.ai-quote{border-left:3px solid var(--gold);padding:4px 0 4px 24px;margin:20px 0 16px;
  max-width:74ch}
.ai-quote p{font-size:15.5px;line-height:1.8;color:var(--ink);margin-bottom:14px}
.ai-quote p:last-child{margin-bottom:0}
.ai-contact{font-size:13.5px;color:var(--grey-70);max-width:74ch}

/* ---------- brand mark in the wordmark lockup ---------- */
.wordmark{flex-direction:row;align-items:center;gap:14px}
.wm-text{display:flex;flex-direction:column;line-height:1.35}
/* Measured: the image and the text block already share a vertical midpoint, so this
   is a size change, not an alignment correction. At 44px the lockup read as a smudge
   next to 16px caps. */
.brandmark{width:56px;height:auto;flex-shrink:0;display:block}
footer .brandmark{width:60px;opacity:.9}
@media (max-width:360px){.brandmark{width:44px}}

/* ---------- brand mark as a background plate ----------
   The mark is set very low in opacity behind dark sections. It is decorative only:
   it carries no information, is not announced to assistive technology, and the
   sections read identically with images disabled. */
/* The plate is NOT used on .verify. That section is a grid of opaque .vcell tiles
   sitting on top of it, so only the 1px gaps between tiles let it through, which read
   as stray grey wedges rather than a mark. The CTA section directly below already
   carries the mark, so removing it here loses nothing. */
.cta,.rank-hero{position:relative;overflow:hidden}
.cta::before,.rank-hero::before{
  content:"";position:absolute;pointer-events:none;
  background-image:url("/assets/brand/pba-mark-plate.png");
  background-repeat:no-repeat;background-size:contain;background-position:center;
  /* Centred on both axes so the whole mark reads as a mark. It was previously
     offset past the top-right corner, which cropped it to an unrecognisable
     fragment. The mark's aspect is 950:627, so every size below holds ~1.515:1
     to avoid distorting it.

     Opacity is 0.07. White at that alpha over ink lifts the ground to about
     #1B1B1B, where the lowest-contrast text in these sections (the #9A9A9A fine
     print) still measures 6.12:1, comfortably past AA. Verified numerically
     rather than judged by eye. */
  opacity:.07;
  left:50%;top:50%;
}
/* The mark's detached dot sits at the very top-right of its own bounding box. If the
   plate is scaled so its width fills the section, the dot lands outside the section's
   vertical bounds and gets clipped away by overflow:hidden, which is why the circle
   was missing. Sizes below keep the whole box inside the section. */
.cta::before{width:520px;height:343px;transform:translate(-50%,-50%) rotate(-4deg)}
.rank-hero::before{width:560px;height:370px;transform:translate(-50%,-50%) rotate(-6deg)}
.cta>*,.rank-hero>*{position:relative;z-index:1}
@media (max-width:900px){
  .cta::before{width:440px;height:290px}
  .rank-hero::before{width:400px;height:264px}
}
@media (max-width:520px){
  .cta::before,.rank-hero::before{width:320px;height:211px;opacity:.06}
}

/* ---------- founder self-vetting note ---------- */
.founder-note{border:1px solid var(--black);border-left:4px solid var(--gold);
  background:var(--off);padding:24px 28px;margin-bottom:34px}
.founder-note h2{font-size:13px;letter-spacing:.14em;margin-bottom:11px}
.founder-note p{font-size:14px;color:var(--grey-70);max-width:74ch;line-height:1.75}

/* ---------- admin record table controls ---------- */
.admin-table td.acts{white-space:nowrap}
.mini{display:inline-block;font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--grey-15);
  background:#fff;color:var(--grey-70);padding:5px 10px;margin-right:5px;
  text-decoration:none;cursor:pointer;transition:border-color .15s,color .15s}
.mini:hover{border-color:var(--black);color:var(--black)}
.mini.danger:hover{border-color:var(--gold-edge);color:var(--gold-deep)}
.mini.muted{border-style:dashed;color:var(--grey-40);cursor:default}
.mini.muted:hover{border-color:var(--grey-15);color:var(--grey-40)}
.st{font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase}
.st.on{color:var(--gold-deep)}
.st.off{color:var(--grey-40)}

/* ---------- ranking method page ---------- */
.no-effect{padding:32px 0;border-top:1px solid var(--grey-15);
  border-bottom:1px solid var(--grey-15);margin-bottom:8px}
.no-effect h2{font-size:13px;letter-spacing:.14em;margin-bottom:12px}
.no-effect p{font-size:14.5px;color:var(--grey-70);max-width:76ch}
.no-effect .legal-list{margin:14px 0 18px;max-width:70ch}

/* ---------- legal and policy documents ----------
   These were missing entirely: an earlier edit batch aborted before appending them,
   so /terms/, /privacy/, /disclaimers/ and /guidelines/ rendered unstyled, which is
   why headings sat directly on top of their body copy. */
/* The document used to be a bare .wrap narrowed with max-width. Because .wrap sets
   margin:0 auto, narrowing it CENTERED the text, and pinning it left with margin-left:0
   then dragged it flush against the viewport edge, out of line with the page heading
   above it. Neither was right. It now sits in an explicit grid inside a normal .wrap,
   so it inherits the same left edge as every other element on the page. */
.legal-layout{display:grid;grid-template-columns:212px minmax(0, 78ch);gap:0 56px;
  padding-bottom:76px;align-items:start}
.legal-doc{min-width:0}
.legal-toc{position:sticky;top:96px;border-right:1px solid var(--grey-15);padding-right:24px}
.toc-head{font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grey-40);margin-bottom:12px}
.legal-toc ol{list-style:none;counter-reset:t}
.legal-toc li{counter-increment:t;margin-bottom:9px;display:flex;gap:9px;align-items:baseline}
.legal-toc li::before{content:counter(t,decimal-leading-zero);font-family:'Montserrat',sans-serif;
  font-size:9px;font-weight:700;color:var(--grey-40);flex-shrink:0;
  font-variant-numeric:tabular-nums}
.legal-toc a{font-size:12.5px;color:var(--grey-55);line-height:1.5}
.legal-toc a:hover{color:var(--black)}
.legal-block{scroll-margin-top:96px}
@media (max-width:1000px){
  .legal-layout{grid-template-columns:1fr;gap:0}
  .legal-toc{position:static;border-right:none;border-bottom:1px solid var(--grey-15);
    padding-right:0;padding-bottom:20px;margin-bottom:8px}
  .legal-toc ol{display:flex;flex-wrap:wrap;gap:6px 22px}
  .legal-toc li{margin-bottom:0}
}
.legal-block{padding:34px 0;border-bottom:1px solid var(--grey-15)}
.legal-block:last-child{border-bottom:none}
.legal-block h2{font-size:13.5px;letter-spacing:.12em;margin-bottom:20px;
  padding-bottom:12px;border-bottom:1px solid var(--gold-line)}
.legal-block h3{font-size:13px;margin-top:22px;margin-bottom:8px}
.legal-block p{font-size:14.5px;color:var(--grey-70);line-height:1.8;margin-bottom:16px}
.legal-block p:last-child{margin-bottom:0}
.legal-block a{font-weight:500;border-bottom:1px solid var(--grey-15)}
.legal-block a:hover{border-color:var(--black)}
.legal-block strong{color:var(--ink);font-weight:600}
.legal-list{list-style:none;margin:6px 0 18px}
.legal-list li{font-size:14.5px;color:var(--grey-70);line-height:1.75;
  padding:11px 0 11px 26px;position:relative;border-bottom:1px solid var(--grey-15)}
.legal-list li:last-child{border-bottom:none}
.legal-list li::before{content:"";position:absolute;left:2px;top:20px;width:10px;
  height:1.5px;background:var(--gold-edge)}
.legal-updated{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grey-40);margin-top:14px}

/* Numbered process steps inside a legal document. Same right-aligned marker rule as
   .ethics so every step's body text starts at an identical x position. */
.guideline-steps{margin:6px 0 0}
.guideline-steps li{border-bottom:1px solid var(--grey-15);padding:20px 0}
.guideline-steps li:last-child{border-bottom:none}
.guideline-steps h3{margin-top:0;text-transform:uppercase;font-size:12.5px;
  letter-spacing:.08em;margin-bottom:8px}
.guideline-steps p{font-size:14.5px;color:var(--grey-70);line-height:1.8;margin-bottom:0}

/* ---------- directory filter controls ---------- */
.filterset{margin-bottom:16px}
.filter-label{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--grey-55);margin-bottom:9px}
.filter-label .dim{font-weight:500;letter-spacing:.08em;text-transform:none;
  font-size:10.5px;margin-left:8px}
.chip[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:#fff}
.filterbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;border-top:1px solid var(--grey-15);padding-top:14px;margin-top:4px}
.clear-filters{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;background:none;border:none;
  color:var(--gold-deep);border-bottom:1px solid var(--gold-edge);padding:2px 0}
.clear-filters:hover{color:var(--black);border-color:var(--black)}
.form-intro{font-size:14px;color:var(--grey-70);margin-bottom:20px;max-width:70ch}

/* ---------- plan-differentiated listing sections ---------- */
.plan-note{border-left:3px solid var(--gold-edge);background:var(--off);padding:14px 18px;
  font-size:13px;color:var(--grey-70);margin-bottom:28px;max-width:76ch;line-height:1.7}
.plan-chip{display:inline-block;font-family:'Montserrat',sans-serif;font-size:9px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:var(--black);
  color:#fff;padding:4px 9px;margin-right:9px}
.ext-bio,.svc-detail{margin-bottom:40px}
.ext-bio h2,.svc-detail h2{font-size:13px;letter-spacing:.14em;padding-bottom:11px;
  border-bottom:1px solid var(--black);margin-bottom:18px}
.ext-bio p{font-size:15px;line-height:1.85;color:var(--grey-70);max-width:74ch;
  margin-bottom:14px}
.svc-list{list-style:none}
.svc-list li{padding:18px 0;border-bottom:1px solid var(--grey-15)}
.svc-list li:last-child{border-bottom:none}
.svc-list h3{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.svc-list p{font-size:14px;color:var(--grey-70);line-height:1.75;max-width:74ch;margin-bottom:0}

/* ---------- Professional tier: black gradient ribbon with gold text ---------- */
.ribbon.pro{background:linear-gradient(135deg,#0A0A0A 0%,#242424 55%,#0A0A0A 100%);
  color:var(--gold-on-dark)}

/* ---------- uniform card heights ----------
   Cards previously grew to fit whatever length of bio an agency wrote, so one long
   entry stretched every card in its row. Cards now show the capped tagline only, and
   the block is clamped as a second line of defence. Full bios live on the agency's
   own page. */
.blurb{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(1.6em * 3)}
.grid-featured .card{flex:1 1 260px}
.fp-note{font-size:12.5px;color:var(--grey-55);line-height:1.7;max-width:78ch;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--grey-15)}

/* ---------- paid-tier media links ---------- */
.media-block{margin-bottom:40px}
.media-block h2{font-size:13px;letter-spacing:.14em;padding-bottom:11px;
  border-bottom:1px solid var(--black);margin-bottom:16px}
.media-list{list-style:none}
.media-list li{display:flex;align-items:baseline;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--grey-15);flex-wrap:wrap}
.media-list li:last-child{border-bottom:none}
.media-kind{font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey-55);width:92px;flex-shrink:0}
.media-link{font-size:14.5px;font-weight:500;border-bottom:1px solid var(--gold-edge)}
.media-link:hover{border-color:var(--black)}
.tagcount{font-family:'Montserrat',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.1em;color:var(--grey-40);margin-left:6px}
.tagcount.over{color:var(--gold-deep)}

/* ---------- admin: controlled-value checkbox sets ---------- */
.checkset{border:1px solid var(--grey-15);padding:18px 20px;margin-bottom:16px}
.checkset legend{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:0 8px}
.checkset .help{margin-bottom:14px}
.checkgrid{display:flex;flex-wrap:wrap;gap:8px 20px}
.checkbox{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:400;
  text-transform:none;letter-spacing:0;font-family:'Inter',sans-serif;margin-bottom:0;
  min-width:170px;cursor:pointer}
.checkbox input{width:17px;height:17px;flex-shrink:0;accent-color:var(--gold-deep);
  margin:0}

/* ---------- home: scope line ---------- */
.scope-line{font-size:14px;color:var(--grey-55);max-width:62ch;margin:0 auto 22px;
  line-height:1.7;padding-top:14px;border-top:1px solid var(--gold-line)}

/* ---------- listing: manage your listing ---------- */
.fp-manage{border-left:3px solid var(--black);background:var(--off);padding:24px 26px;
  margin-bottom:16px}
.fp-manage h2{font-size:13px;letter-spacing:.1em;margin-bottom:9px}
.fp-manage p{font-size:14px;color:var(--grey-70);max-width:70ch;margin-bottom:14px}

/* ---------- update hub ---------- */
.upd-list{list-style:none;margin-bottom:8px}
.upd-list li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--grey-15)}
.upd-list li a{font-size:15px;font-weight:600;border-bottom:1px solid var(--gold-edge)}
.upd-list li a:hover{border-color:var(--black)}
.upd-meta{font-size:12.5px;color:var(--grey-55)}
.update-plan{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey-55);margin-top:6px}
.update-note{border:1px solid var(--grey-15);border-left:3px solid var(--gold-edge);
  padding:22px 26px;margin-top:32px;max-width:76ch}
.update-note h2{font-size:12.5px;letter-spacing:.12em;margin-bottom:10px}
.update-note p{font-size:14px;color:var(--grey-70);margin-bottom:16px}

/* ---------- footer social list (text only, no links until accounts exist) ---------- */
.social-list{font-size:13.5px;color:var(--grey-70);line-height:2;margin-bottom:8px}
.social-note{font-size:11px;color:var(--grey-40);font-style:italic;margin-bottom:0}

/* ---------- verification and ownership notices ---------- */
.manage-warning,.form-warning{border-left:3px solid var(--gold-edge);background:#fff;
  padding:12px 16px;font-size:13px;color:var(--grey-70);line-height:1.7;margin-bottom:16px}
.form-warning{background:var(--off);margin-bottom:20px}
.privacy-note{border-left:3px solid var(--black);background:var(--off);padding:14px 18px;
  font-size:13px;color:var(--grey-70);line-height:1.7;margin:4px 0 16px;max-width:74ch}

/* ---------- admin: payment settings panel ---------- */
.paysettings{border:1px solid var(--black);border-left:4px solid var(--gold);
  padding:28px 30px;margin-bottom:44px;background:var(--off)}
.paysettings h2{font-size:14px;letter-spacing:.12em;margin-bottom:10px}
.paysettings .stack{margin-top:18px}
.plan-live{font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px}

/* =====================================================================
   FOUNDER TREATMENT
   The founder ribbon is black on white, not gold. Gold is the paid-placement
   colour on this site, and the founder listing is explicitly not for sale, so
   sharing a colour with the paid tiers would say the opposite of what it means.
   ===================================================================== */
.ribbon.founder{background:var(--black);color:#fff}

.founder-card{display:grid;grid-template-columns:120px 1fr;gap:0 32px;
  border:1px solid var(--black);border-top:4px solid var(--black);padding:32px 34px;
  margin-bottom:52px;background:#fff;align-items:start}
.fc-mark{display:flex;justify-content:center}
.fc-ribbon{display:inline-block;background:var(--black);color:#fff;
  font-family:'Montserrat',sans-serif;font-size:9px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 11px;margin-bottom:12px}
.founder-card h3{font-size:23px;margin-bottom:6px}
.founder-card h3 a{border-bottom:2px solid transparent;transition:border-color .2s}
.founder-card h3 a:hover{border-color:var(--black)}
.fc-meta{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey-55);margin-bottom:14px}
.fc-tag{font-size:15.5px;line-height:1.7;color:var(--ink);margin-bottom:14px;max-width:70ch}
.fc-note{font-size:13px;line-height:1.75;color:var(--grey-55);max-width:74ch;
  padding-top:14px;border-top:1px solid var(--grey-15);margin-bottom:20px}
@media (max-width:720px){
  .founder-card{grid-template-columns:1fr;gap:20px}
  .fc-mark{justify-content:flex-start}
}

/* =====================================================================
   LISTING SIDE CARDS
   Three panels sat in a row with identical borders, weights and buttons, so they
   read as one undifferentiated block. Each now states who it is for, and each
   carries a different left rule and ground, so the eye can tell them apart before
   reading a word.
   ===================================================================== */
.side-card{border:1px solid var(--grey-15);border-left:4px solid var(--grey-15);
  padding:24px 26px;margin-bottom:18px;background:#fff;
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease}
.side-card:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(10,10,10,.07)}
.sc-kind{font-family:'Montserrat',sans-serif;font-size:9px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:9px;color:var(--grey-40)}
.side-card h2{font-size:16px;letter-spacing:0;text-transform:none;margin-bottom:10px;
  font-family:'Montserrat',sans-serif;font-weight:800}
.side-card p{font-size:14px;color:var(--grey-70);line-height:1.75;max-width:72ch;
  margin-bottom:16px}
.side-card .btn{margin-bottom:0}

.side-card.owner{border-left-color:var(--black);background:var(--off)}
.side-card.owner .sc-kind{color:var(--black)}
.side-card.client{border-left-color:var(--gold-edge)}
.side-card.client .sc-kind{color:var(--gold-deep)}
.side-card.concern{border-left-color:var(--grey-40);background:#fcfcfc}
.side-card.owner:hover{border-color:var(--black)}
.side-card.client:hover{border-color:var(--gold-edge)}
.side-card.concern:hover{border-color:var(--grey-40)}

/* =====================================================================
   MOTION AND INTERACTION
   Every transition below is disabled wholesale in the reduced-motion block at the
   end of this file. Motion is used to show state and hierarchy, never to decorate:
   nothing moves unless the user is pointing at it or has just acted on it.
   ===================================================================== */

/* Directory cards lift slightly and firm up their border. transform and box-shadow
   are the only two properties animated because they are compositor-driven: animating
   width, top or margin here would relayout the whole grid on every hover. */
.card{transition:transform .24s cubic-bezier(.2,.7,.3,1),
                  box-shadow .24s ease, border-color .24s ease}
.card:hover{transform:translateY(-4px);border-color:var(--black);
  box-shadow:0 10px 30px rgba(10,10,10,.09)}
.card:focus-within{transform:translateY(-4px);box-shadow:0 10px 30px rgba(10,10,10,.09)}
.card h3 a{background-image:linear-gradient(var(--gold-edge),var(--gold-edge));
  background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .28s ease}
.card:hover h3 a{background-size:100% 2px}
.card .avatar{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.card:hover .avatar{transform:scale(1.05)}

/* Buttons: a small press response so a tap feels acknowledged on touch devices,
   where there is no hover state to rely on. */
.btn{transition:background-color .18s ease,color .18s ease,border-color .18s ease,
                transform .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn[disabled]:hover,.btn[disabled]:active{transform:none}

/* Filter chips: the state change is the point, so it gets a quick, definite move. */
.chip{transition:background-color .16s ease,color .16s ease,border-color .16s ease,
                 transform .14s ease}
.chip:hover{transform:translateY(-1px);border-color:var(--black)}
.chip:active{transform:translateY(0)}

/* Nav and footer links: underline grows from the left rather than appearing. */
.nav a:not(.btn){background-image:linear-gradient(var(--gold-edge),var(--gold-edge));
  background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .24s ease,color .2s ease}
.nav a:not(.btn):hover{background-size:100% 2px}
.fcol a{transition:color .18s ease,padding-left .18s ease}
.fcol a:hover{padding-left:4px}

/* Rows in the ranking and records tables highlight on hover so the eye can hold a
   line across a wide table. */
.rank-row,.upd-list li,.admin-table tbody tr{transition:background-color .18s ease}
.rank-row:hover,.upd-list li:hover,.admin-table tbody tr:hover{background:var(--off)}

/* Criterion tiles on the dark band. */
.vcell{transition:background-color .25s ease}
.vcell:hover{background:#141414}

/* Reveal on scroll. Applied by JS only, so with JS off nothing is ever hidden:
   the class that hides these elements is added by script, not present in the HTML. */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* Focus states must remain instant and obvious. Keyboard users need to see exactly
   where they are, and a transition on the ring makes that harder, not prettier. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;
  transition:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    animation-iteration-count:1 !important;transition-duration:.001ms !important;
    scroll-behavior:auto !important}
  .card:hover,.side-card:hover,.btn:hover,.chip:hover{transform:none}
  .reveal{opacity:1;transform:none}
}
header{transition:box-shadow .25s ease,border-color .25s ease}
header.scrolled{box-shadow:0 1px 16px rgba(10,10,10,.08);border-bottom-color:var(--grey-15)}

/* ---------- agency-page banners: tier colors matching the directory ribbon ----------
   Both instances (the badge row under the name, and the plan-note chip further down)
   previously used .badge.dark / plain black regardless of tier, so Featured and
   Professional read identically in black and white despite the directory itself
   correctly distinguishing them in gold vs black-gradient. Fixed to match exactly. */
.badge.featured,.plan-chip.featured{background:var(--gold);color:var(--black);border-color:var(--gold)}
.badge.pro,.plan-chip.pro{background:linear-gradient(135deg,#0A0A0A 0%,#242424 55%,#0A0A0A 100%);
  color:var(--gold-on-dark);border-color:#0A0A0A}

/* ---------- filter carousels ----------
   Built to actually scroll: without overflow-x set, the track just wrapped or
   silently overflowed the viewport with nothing for the JS arrows to move. */
.carousel{display:flex;align-items:center;gap:6px}
.carousel-track{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding:2px 2px 8px}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track .chip{flex:0 0 auto;white-space:nowrap}
.car-arrow{flex:0 0 auto;width:30px;height:30px;border:1px solid var(--grey-15);
  background:#fff;font-size:16px;line-height:1;cursor:pointer;color:var(--ink);
  transition:border-color .15s,opacity .15s}
.car-arrow:hover{border-color:var(--black)}
.car-arrow:disabled{opacity:.25;cursor:default}
.car-arrow:disabled:hover{border-color:var(--grey-15)}
@media (max-width:600px){
  .car-arrow{display:none}
  .carousel-track{-webkit-overflow-scrolling:touch}
}

/* ---------- required-field validation ---------- */
.field-error{display:block;color:#B3261E;font-family:'Inter',sans-serif;font-size:12px;
  font-weight:600;margin-top:5px}
input.invalid,select.invalid,textarea.invalid{border-color:#B3261E !important;
  background:#FDF3F2}
.checkset.invalid{border-color:#B3261E}
.checkset.invalid legend{color:#B3261E}

/* ---------- brand kit (private, noindex) ---------- */
.asset-list{list-style:none;max-width:560px;margin-bottom:8px}
.asset-list li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--grey-15)}
.asset-list li a{font-family:'Inter',monospace;font-size:13.5px;font-weight:600;
  border-bottom:1px solid var(--gold-edge)}
.asset-list li a:hover{border-color:var(--black)}
.asset-desc{font-size:12.5px;color:var(--grey-55);text-align:right}
.phrase-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.phrase-card{border:1px solid var(--grey-15);background:var(--off);padding:20px 22px}
.phrase-label{font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.phrase-text{font-size:14px;line-height:1.7;color:var(--ink)}
@media (max-width:760px){.phrase-grid{grid-template-columns:1fr}}

/* ---------- unranked rows: same structure as ranked, no score to show ---------- */
.rank-row.unranked .rank-num{color:var(--grey-40);font-weight:400}
.unranked-label{display:block;font-size:12px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--grey-55);align-self:center}