/* ==========================================================================
   CVYSM — pages.css
   Page-level components: the interior page header, anchored service blocks,
   index cards, size ladders and the closing CTA band.

   Load order: base → glass → site → pages → motion
   ========================================================================== */

/* ======================= interior page header =======================
   Every page except the home hero opens with this, so the transition from the
   home hero into an interior page reads as one continuous type system. */
.page-head{
  padding:calc(var(--chrome-h) + clamp(52px,8vw,104px)) 0 clamp(36px,5vw,64px);
  background:var(--paper);
}
.page-head .eyebrow{margin-bottom:22px}
.page-head h1{
  font-size:clamp(32px,6.4vw,74px);
  font-weight:500;line-height:1.02;letter-spacing:-.005em;
  text-transform:uppercase;color:var(--fg);
  max-width:18ch;text-wrap:balance;
}
.page-head .lede{margin-top:clamp(20px,2.6vw,32px);max-width:46ch}
.page-head .head-meta{
  margin-top:clamp(26px,3.4vw,40px);padding-top:22px;
  border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);
}
.page-head .head-meta div{min-width:130px}
.page-head .head-meta .k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--label-c);margin:0 0 7px;
}
.page-head .head-meta .v{font-size:14.5px;color:var(--fg);margin:0}

/* a compact variant for pages that are mostly a single block */
.page-head--tight{padding-bottom:clamp(20px,3vw,34px)}

/* ======================= anchored service blocks ======================= */
.svc{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(24px,4vw,64px);
  padding:clamp(34px,4.6vw,62px) 0;
  border-top:1px solid var(--hair);
  scroll-margin-top:calc(var(--chrome-h) + 20px);
}
.svc:last-of-type{border-bottom:1px solid var(--hair)}
/* .sec already draws a full-bleed rule at the top of every section. Without this
   the first block added a second, inset rule ~45px below it at a different
   width — two hairlines that close together read as a rendering fault, and it
   sat directly above the "01". Item separators stay inset; the section boundary
   stays full-bleed, which is what the rest of the site does. */
.svc:first-of-type{border-top:0}
@media(max-width:840px){.svc{grid-template-columns:1fr;gap:18px}}
.svc-head{position:relative}
.svc-head .n{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--fg);
  text-transform:uppercase;margin:0 0 16px;display:block;
}
.svc-head h2{
  font-size:clamp(22px,2.9vw,36px);font-weight:500;line-height:1.06;
  text-transform:uppercase;margin:0 0 14px;text-wrap:balance;
}
.svc-head p{margin:0;color:var(--mute);font-size:14.5px;line-height:1.62;max-width:40ch}
.svc-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.6vw,38px)}
@media(max-width:640px){.svc-body{grid-template-columns:1fr}}
.svc-body h3{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--label-c);font-weight:500;margin:0 0 14px;
}
.svc-body ul li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:14px;color:var(--body);padding:6px 0;line-height:1.5;
}
.svc-body ul li::before{
  content:"";flex:0 0 auto;width:5px;height:5px;margin-top:8px;background:var(--ink);
}
.svc-body .when{
  font-size:14px;color:var(--mute);line-height:1.62;max-width:44ch;
}
.svc-body .when + .when{margin-top:14px}

/* ======================= index cards (home + hubs) ======================= */
.idx{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);
}
@media(max-width:900px){.idx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.idx{grid-template-columns:1fr}}
.idx a{
  display:flex;flex-direction:column;gap:10px;
  padding:clamp(18px,2vw,26px);
  border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--paper);
  transition:border-color var(--t-fast) ease,background var(--t-fast) ease,transform var(--t) var(--e-out);
  min-height:100%;
}
.idx a:hover{border-color:rgba(10,10,10,.3);background:#fff;transform:translateY(-2px)}
.idx .n{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--label-c);
}
.idx h3{font-size:clamp(18px,1.8vw,22px);font-weight:500;margin:0}
.idx p{margin:0;font-size:13.5px;color:var(--mute);line-height:1.55}
.idx .go{
  margin-top:auto;padding-top:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg);display:inline-flex;align-items:center;gap:7px;
}
.idx a:hover .go .arw{transform:translateX(3px)}
.idx .go .arw{transition:transform var(--t) var(--e-out)}

/* ======================= roster strip (home) =======================
   A row of faces rather than a list of names: the home page is otherwise all type
   and the mark, and this is the one place it can show who the work is for. */
/* six athletes, so six across on wide screens and a tidy 3 x 2 below that
   rather than a ragged 4 + 2 */
.strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);margin-top:clamp(24px,3vw,38px);
}
@media(max-width:900px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The home strip is two labelled rows, not one row of six: professionals first,
   then the college and NIL athletes. Four columns for both means the cards are
   the same width and the shorter college row lines up under the first two pros
   rather than floating in its own scale. */
.strip-group{
  margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--label-c);
}
.strip + .strip-group{margin-top:clamp(28px,3.6vw,46px)}
.strip-group + .strip{margin-top:14px}
.strip a{display:flex;flex-direction:column}
.strip-face{
  position:relative;display:block;width:100%;aspect-ratio:4/5;
  overflow:hidden;border-radius:var(--r-sm);
  border:1px solid var(--hair);background:var(--plate);
  margin-bottom:13px;
}
.strip-face img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--e-out);
}
.strip a:hover .strip-face img{transform:scale(1.03)}
/* no portrait yet: the monogram plate on the same dark ground as the photographs */
.strip-face--pending{display:grid;place-items:center}
.strip-face--pending .logo--mono{
  position:absolute;width:112%;opacity:.10;transform:translateY(5%);
  transition:transform var(--t-slow) var(--e-out),opacity var(--t-slow) ease;
}
.strip a:hover .strip-face--pending .logo--mono{transform:translateY(5%) scale(1.04);opacity:.18}
.strip .nm{display:block;font-size:clamp(15px,1.6vw,18px);font-weight:500;color:var(--fg)}
.strip .rl{display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--label-c)}

/* ======================= size ladder (the mark) ======================= */
.ladder{
  display:flex;align-items:flex-end;gap:clamp(20px,3.4vw,48px);
  padding-top:clamp(22px,3vw,36px);border-top:1px solid var(--hair);
  flex-wrap:wrap;
}
.ladder figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.ladder img{filter:invert(1)}
.ladder figcaption{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--label-c);
}
.ladder .sq{
  display:grid;place-items:center;border:1px solid var(--hair-2);
  border-radius:var(--r-xs);background:var(--paper);
}

/* ======================= closing CTA band ======================= */
.band{
  background:var(--ink);color:var(--on-ink);
  padding:clamp(48px,6.5vw,88px) 0;
}
.band .in{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,4vw,56px);flex-wrap:wrap;
}
.band h2{
  font-size:clamp(24px,3.6vw,46px);font-weight:500;line-height:1.04;
  text-transform:uppercase;color:var(--on-ink);margin:0;max-width:20ch;
}
.band p{color:var(--on-ink-mute);margin:14px 0 0;max-width:40ch;font-size:14.5px}

/* ======================= next / prev page ======================= */
.pager{
  border-top:1px solid var(--hair);
  display:grid;grid-template-columns:1fr 1fr;
}
.pager a{
  padding:clamp(24px,3vw,38px) 0;
  display:flex;flex-direction:column;gap:8px;
  transition:background var(--t-fast) ease;
}
.pager a:hover{background:var(--paper-2)}
.pager a + a{border-left:1px solid var(--hair);padding-left:clamp(18px,2.4vw,32px);align-items:flex-end;text-align:right}
.pager .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--label-c)}
.pager .t{font-size:clamp(18px,2.2vw,26px);font-weight:500;color:var(--fg)}

/* ======================= 404 ======================= */
.notfound{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;background:var(--paper);
  padding:calc(var(--chrome-h) + 40px) var(--gut) 60px}
.notfound .logo--mono{width:64px;margin:0 auto 28px;filter:invert(1)}
.notfound .code{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--label-c);margin-bottom:16px}
.notfound h1{margin-bottom:18px;font-size:clamp(28px,4.4vw,54px);text-transform:uppercase}
.notfound p{color:var(--mute);margin:0 auto 30px;max-width:44ch}
.notfound .links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ======================= the agent (firm page) =======================
   The founder gets a portrait on the same ground as the roster, so the person
   and the clients read as one visual set. */
.agent-grid{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(26px,4.6vw,72px);align-items:start;
}
@media(max-width:840px){.agent-grid{grid-template-columns:1fr;gap:26px}}
.agent-photo{
  position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--r-sm);border:1px solid var(--hair);background:var(--plate);
}
.agent-photo img{width:100%;height:100%;object-fit:cover;display:block}
.h2-agent{
  font-size:clamp(30px,4.6vw,58px);font-weight:500;line-height:1.02;
  text-transform:uppercase;margin:0 0 10px;
}
.agent-role{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--label-c);margin:0 0 26px;
}
/* the claim is his own line, so it gets display treatment */
.agent-claim{
  font-family:var(--display);font-size:clamp(19px,2.3vw,28px);line-height:1.2;
  color:var(--fg);margin:0 0 24px;padding-left:18px;border-left:2px solid var(--ink);
  max-width:30ch;
}
.agent-grid .specs{margin-top:30px}

/* ======================= the agent (home) =======================
   A compact version of the firm-page section: enough to meet the person before
   the closing call to action, without repeating the biography. */
.founder{
  display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;
}
@media(max-width:720px){.founder{grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:22px}}
.founder-photo{
  position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--r-sm);border:1px solid var(--hair);background:var(--plate);
}
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block}
.founder h2{font-size:clamp(23px,3.2vw,40px);line-height:1.06;margin-bottom:18px;text-wrap:balance}
.founder p{color:var(--mute);max-width:52ch}
.founder p + p{margin-top:16px}
.founder .inline{color:var(--fg)}

/* the agent's signature, sitting under his credentials the way a signed letter
   would. Scaled to its trimmed ink bounds so it aligns with the type column
   rather than floating inside a mostly empty scan. */
.agent-sig{
  display:block;width:clamp(150px,17vw,196px);height:auto;
  margin-top:clamp(24px,3vw,34px);opacity:.92;
}
@media(max-width:840px){.agent-sig{width:150px}}

/* ======================= wallpaper download (the mark) ======================= */
.wp-dl{
  margin-top:clamp(22px,3vw,32px);
  display:flex;align-items:center;gap:clamp(14px,2vw,22px);flex-wrap:wrap;
}
.wp-dl-note{
  margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--label-c);
}

/* ======================= FAQ ======================= */
/* Mirrors .svc deliberately: .sec already draws the full-bleed rule at the top of
   the section, so the first entry must not add a second, inset one. That is the
   exact doubling that had to be fixed on Services. */
.faq > article{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(16px,3vw,46px);
  padding:clamp(22px,2.7vw,32px) 0;
  border-top:1px solid var(--hair);
  scroll-margin-top:calc(var(--chrome-h) + 20px);
}
.faq > article:first-child{border-top:0}
.faq > article:last-child{border-bottom:1px solid var(--hair)}
@media(max-width:760px){.faq > article{grid-template-columns:1fr;gap:12px}}
.faq h2{
  font-size:clamp(16px,1.75vw,21px);font-weight:500;line-height:1.16;
  text-transform:uppercase;margin:0;max-width:32ch;text-wrap:balance;
}
.faq p{margin:0;color:var(--mute);font-size:14.5px;line-height:1.68;max-width:62ch}
.faq p + p{margin-top:12px}

/* ======================= legal / prose pages ======================= */
.legal{max-width:70ch}
.legal section + section{
  margin-top:clamp(26px,3.4vw,42px);padding-top:clamp(26px,3.4vw,42px);
  border-top:1px solid var(--hair);
}
.legal h2{
  font-size:clamp(18px,2.1vw,24px);font-weight:500;line-height:1.14;
  text-transform:uppercase;margin:0 0 12px;text-wrap:balance;
}
.legal p,.legal li{color:var(--body);font-size:14.5px;line-height:1.72}
.legal p{margin:0}
.legal p + p{margin-top:12px}
.legal ul{margin:12px 0 0;padding-left:18px}
.legal li{margin-bottom:7px}
.legal .updated{
  margin-top:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--label-c);
}

/* ======================= module tiles =======================
   The alternate home page: instead of one continuous editorial scroll, a grid of
   large square glass tiles, each navigating to a page or a section.

   These are NOT a second glass implementation. `.modtile` is applied alongside
   the existing `.glass`, so a tile inherits the real pane, the conic rim whose
   hot spot tracks the pointer, and the pointer radial sheen from effects.js.
   All this adds is the square shape and the internal layout. */
.modgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
}
@media(max-width:620px){.modgrid{grid-template-columns:1fr}}
.modtile{
  display:flex;flex-direction:column;justify-content:space-between;
  aspect-ratio:1/1;
  padding:clamp(22px,2.8vw,40px);
  text-decoration:none;color:inherit;
  transition:translate var(--t) var(--e-out),box-shadow var(--t) var(--e-out);
}
/* NOTE: the lift uses `translate`, not `transform`.
   motion.css loads after this file and defines `.rv.in{transform:none}` for the
   scroll reveal. That has equal specificity to a single-class `:hover` rule, so
   source order wins and a `transform:translateY()` here is silently overridden —
   the rule matches, the declaration is simply lost. The standalone `translate`
   property is separate from `transform` and survives it. This bit the tiles
   before it was caught; it will bite any hover transform on a .rv element. */
.modtile:hover,.modtile:focus-visible{
  translate:0 -4px;
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.95),
    inset 0 -1px 0 0 rgba(10,10,10,.04),
    0 2px 4px -2px rgba(10,10,10,.12),
    0 34px 60px -30px rgba(10,10,10,.34);
}
.modtile .mt-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.modtile .mt-num{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--label-c);
}
.modtile .mt-arw{
  font-size:15px;color:var(--fg);opacity:.5;
  transition:transform var(--t) var(--e-out),opacity var(--t) var(--e-out);
}
.modtile:hover .mt-arw,.modtile:focus-visible .mt-arw{transform:translateX(5px);opacity:1}
.modtile .mt-body h2{
  font-size:clamp(22px,2.6vw,34px);font-weight:500;line-height:1.08;
  text-transform:uppercase;margin:0;text-wrap:balance;
}
.modtile .mt-body p{
  margin:14px 0 0;color:var(--mute);font-size:14.5px;line-height:1.62;max-width:34ch;
}
/* The fill: what goes in the middle of the square. A 530px tile with only a
   label and a heading leaves about 300px of dead glass, which reads as a
   mistake rather than as restraint. Each tile fills its middle with the thing it
   is actually about — portraits for the players, names for the council, the
   four service areas for the services — so the square is composed rather than
   mostly empty. */
.mt-fill{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;padding:clamp(14px,1.8vw,24px) 0}
/* a row of portraits — stretched to occupy the whole fill zone, so the square is
   composed rather than carrying a band of dead glass between heading and label */
.mt-faces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,.9vw,12px);flex:1 1 auto;min-height:0}
.mt-faces img{width:100%;height:100%;min-height:0;object-fit:cover;display:block;border-radius:var(--r-xs);
  border:1px solid var(--hair);filter:grayscale(1) contrast(1.06)}
/* Rows inside a tile are set in display type, not tiny mono.
   Four short lines of 10px mono spread down a 300px zone reads as a broken
   table: the eye sees four items and a lot of nothing between them. At display
   size the same spread reads as a composed column. Roles stay mono, but sit
   under the name rather than beside it so the hierarcy is visible. */
.mt-list{
  list-style:none;margin:0;padding:0;flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:space-evenly;
}
.mt-list li{
  font-family:var(--display);font-weight:500;text-transform:uppercase;
  font-size:clamp(16px,1.65vw,22px);line-height:1.1;color:var(--fg);
  padding:clamp(8px,1vw,13px) 0;border-top:1px solid var(--hair);
}
.mt-list li:first-child{border-top:0;padding-top:0}
.mt-list li:last-child{padding-bottom:0}
.mt-list .mt-role{
  display:block;margin-top:7px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--label-c);
}
/* three large words for the house, spread down the zone */
.mt-words{
  list-style:none;margin:0;padding:0;flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:space-evenly;
}
.mt-words li{
  font-family:var(--display);font-weight:500;line-height:1.06;text-transform:uppercase;
  color:var(--fg);font-size:clamp(20px,2.2vw,30px);letter-spacing:.01em;
}
.mt-words li span{color:var(--label-c);font-size:.55em;letter-spacing:.18em;margin-left:10px}

/* ======================= the arms of the house =======================
   Five arms, each with what it is, what it proves, and the wound it answers.
   Laid out as a table-like row rather than a card grid: the fourth column is the
   point of the whole thing, and putting it beside the others lets it be read
   against them. Four columns on desktop, two on tablet, one on phones. */
.arms{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.arm{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,.95fr) minmax(0,1.15fr) minmax(0,1.05fr);
  gap:clamp(14px,2.2vw,38px);
  align-items:baseline;
  padding:clamp(20px,2.5vw,32px) 0;
  border-bottom:1px solid var(--hair);
}
@media(max-width:1020px){.arm{grid-template-columns:1fr 1fr;row-gap:12px}}
@media(max-width:620px){.arm{grid-template-columns:1fr}}
.arm-name{
  font-family:var(--display);font-weight:500;text-transform:uppercase;
  font-size:clamp(19px,2.2vw,28px);line-height:1.08;color:var(--fg);margin:0;
}
.arm-role{
  margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--label-c);line-height:1.6;
}
.arm-proves{margin:0;color:var(--body);font-size:14.5px;line-height:1.6}
/* the wound is the reason the arm exists; set apart in italic so it reads as
   the quiet line rather than as another feature */
.arm-wound{margin:0;color:var(--mute);font-size:14px;line-height:1.6;font-style:italic}
/* the smaller destinations beneath the grid */
.modlinks{
  display:flex;flex-wrap:wrap;gap:clamp(10px,1.6vw,22px);
  margin-top:clamp(22px,2.8vw,34px);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
}
.modlinks a{color:var(--label-c);transition:color var(--t-fast) ease}
.modlinks a:hover,.modlinks a:focus-visible{color:var(--fg)}