/* ==========================================================================
   MASHMAN design system (shared)
   One file, byte-identical on every property rebuilt to the umbrella
   standard. Reference implementation: mashmancg.com. Per-property values
   (marks, signature visuals, nav face) live in that site's property.css.
   Grounds: white #FFFFFF and Ink #0A0A0A only. Type on dark is pure white.
   Accent: Platinum #C8C5BE only. Zero border-radius. Hairline rules.
   ========================================================================== */

:root{
  /* Grounds */
  --ink:#0A0A0A;
  --white:#FFFFFF;
  --panel:#131316;
  --panel-deep:#0E0E11;

  /* Accent + support */
  --platinum:#C8C5BE;
  --steel:#8E8B84;
  --graphite:#86837C;
  --slate:#6E6B66;

  /* Rules */
  --rule-dark:#26262A;
  --rule-light:#DDD8CE;

  /* Type on white */
  --ink-body:#3E3E3E;
  --ink-label:#5C584E;

  --display:'Montserrat', sans-serif;
  --body:'Inter', sans-serif;

  --ease:cubic-bezier(0.22, 1, 0.36, 1);
  --gutter:clamp(20px, 5vw, 64px);
  --maxw:1280px;
}

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

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

body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--body);
  font-weight:300;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%; display:block; border:0;}
a{color:inherit;}

::selection{background:var(--platinum); color:var(--ink);}

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

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

section{padding:clamp(72px, 10vw, 132px) 0;}
.pt-0{padding-top:0;}
.pb-0{padding-bottom:0;}

/* Ground treatments */
.s-ink{background:var(--ink); color:var(--white);}
.s-white{background:var(--white); color:var(--ink);}
.s-panel{background:var(--panel); color:var(--white);}

.s-white p,.cta p{color:var(--ink-body);}
.s-white .eyebrow{color:var(--ink-label);}
.s-white .eyebrow::before{background:var(--ink-label);}
.s-white h1,.s-white h2,.s-white h3,.s-white h4{color:var(--ink);}

/* --------------------------------------------------------------- type */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  margin:0;
  letter-spacing:-0.025em;
  line-height:1.08;
  color:var(--white);
}

h1{font-size:clamp(38px, 6.4vw, 84px); line-height:1.04; letter-spacing:-0.03em; font-weight:800;}
h2{font-size:clamp(30px, 4.2vw, 54px);}
h3{font-size:clamp(19px, 1.7vw, 23px); line-height:1.22; letter-spacing:-0.015em; font-weight:600;}
h4{font-size:16px; line-height:1.3; letter-spacing:-0.01em; font-weight:600;}

h1 em,h2 em,h3 em{
  font-style:normal;
  color:var(--platinum);
  font-weight:300;
}
.s-white h1 em,.s-white h2 em,.s-white h3 em{color:var(--slate);}

p{margin:0 0 20px; max-width:64ch;}
p:last-child{margin-bottom:0;}

.lede{
  font-size:clamp(16.5px, 1.55vw, 19.5px);
  line-height:1.72;
  font-weight:300;
  color:var(--white);
  max-width:60ch;
}
.s-white .lede{color:var(--ink);}

.dim{color:var(--steel);}
.s-white .dim{color:var(--ink-body);}
.fine{font-size:13.5px; line-height:1.7; color:var(--graphite);}
.s-white .fine,.cta .fine{color:var(--ink-label);}

strong,b{font-weight:600; color:var(--white);}
.s-white strong,.s-white b{color:var(--ink);}

/* Eyebrow label */
.eyebrow{
  font-family:var(--display);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--platinum);
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 26px;
  line-height:1;
}
.eyebrow::before{
  content:"";
  width:34px;
  height:1px;
  background:var(--platinum);
  flex:0 0 34px;
}
.eyebrow.no-rule{gap:0;}
.eyebrow.no-rule::before{display:none;}

.section-head{margin-bottom:clamp(40px, 5vw, 64px); max-width:900px;}
.section-head p{margin-top:22px;}

/* --------------------------------------------------------------- rules */

.hr{height:1px; background:var(--rule-dark); border:0; margin:0;}
.s-white .hr{background:var(--rule-light);}

/* --------------------------------------------------------------- buttons */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-size:11.5px; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase; text-decoration:none;
  padding:17px 30px; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  text-indent:0.2em; /* offsets the trailing space letter-spacing adds after the last glyph */
  text-align:center;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}

/* Self-contained button variants. Each declares background, colour and border in
   every state, so a button never depends on its parent section's class.
   -dark / -outline-dark sit on WHITE grounds. -light / -outline-light on INK. */

.btn-dark,.btn-dark:link,.btn-dark:visited{background:var(--ink); color:var(--white); border-color:var(--ink);}
.btn-dark:hover,.btn-dark:focus-visible,.btn-dark:active{background:var(--slate); color:var(--white); border-color:var(--slate);}

.btn-light,.btn-light:link,.btn-light:visited{background:var(--white); color:var(--ink); border-color:var(--white);}
.btn-light:hover,.btn-light:focus-visible,.btn-light:active{background:var(--platinum); color:var(--ink); border-color:var(--platinum);}

.btn-outline-dark,.btn-outline-dark:link,.btn-outline-dark:visited{background:transparent; color:var(--ink); border-color:var(--ink-label);}
.btn-outline-dark:hover,.btn-outline-dark:focus-visible,.btn-outline-dark:active{background:var(--ink); color:var(--white); border-color:var(--ink);}

.btn-outline-light,.btn-outline-light:link,.btn-outline-light:visited{background:transparent; color:var(--white); border-color:var(--steel);}
.btn-outline-light:hover,.btn-outline-light:focus-visible,.btn-outline-light:active{background:var(--white); color:var(--ink); border-color:var(--white);}

.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px;}

/* Inline text link */
.tlink{
  font-family:var(--display);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--platinum);
  border-bottom:1px solid var(--rule-dark);
  padding-bottom:5px;
  display:inline-block;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.tlink:hover{border-color:var(--platinum);}
.s-white .tlink{color:var(--ink); border-color:var(--rule-light);}
.s-white .tlink:hover{border-color:var(--ink);}

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

.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:900;
  background:rgba(10,10,10,0.82);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--rule-dark);
  transition:background .4s var(--ease);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  height:76px;
}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; flex:0 0 auto;}
.brand-icon{height:30px; width:auto; aspect-ratio:926/986;}
.brand-logo{height:15px; width:auto;}
.brand-div{width:1px; height:24px; background:var(--rule-dark);}
.brand-name{
  font-family:var(--display);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--steel);
  white-space:nowrap;
}

.nav{display:flex; align-items:center; gap:26px;}
.nav a{
  position:relative;
  font-family:var(--body);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--steel);
  text-decoration:none;
  padding:6px 0;
  transition:color .35s var(--ease);
  white-space:nowrap;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0; right:100%; bottom:0;
  height:1px;
  background:var(--platinum);
  transition:right .45s var(--ease);
}
.nav a:hover{color:var(--white);}
.nav a:hover::after{right:0;}
.nav a[aria-current="page"]{color:var(--white);}
.nav a[aria-current="page"]::after{right:0;}

.header-cta{
  padding:11px 20px;
  font-size:9.5px;
  letter-spacing:0.14em;
  text-indent:0.14em;
}

.nav-toggle{
  display:none;
  background:none; border:0; padding:8px; cursor:pointer;
  flex-direction:column; gap:5px;
}
.nav-toggle span{display:block; width:22px; height:1px; background:var(--white);}

.mobile-nav{
  display:none;
  border-top:1px solid var(--rule-dark);
  background:var(--ink);
  padding:8px var(--gutter) 26px;
}
.mobile-nav.open{display:block;}
/* The menu lives in the fixed header, so it scrolls on its own when it is taller than the screen. */
.mobile-nav.open{max-height:calc(100vh - 77px); max-height:calc(100dvh - 77px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
.mobile-nav a{
  display:block;
  padding:16px 0;
  font-family:var(--body);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--white);
  text-decoration:none;
  border-bottom:1px solid var(--rule-dark);
}
.mobile-nav .btn{margin-top:22px; width:100%;}

/* --------------------------------------------------------------- hero */

.hero{
  position:relative;
  min-height:clamp(600px, 92vh, 940px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:150px;
  padding-bottom:0;
  overflow:hidden;
  background:var(--ink);
}
.hero-mark{
  position:absolute;
  top:50%; right:-6%;
  transform:translateY(-52%);
  width:min(58vw, 720px);
  height:auto;
  aspect-ratio:926/986;
  opacity:0.085;
  pointer-events:none;
  user-select:none;
}
.hero-grid{
  position:absolute; inset:0;
  pointer-events:none;
  background-image:linear-gradient(to right, var(--rule-dark) 1px, transparent 1px);
  background-size:calc(100% / 6) 100%;
  opacity:0.5;
}
.hero-inner{position:relative; z-index:2; padding-bottom:clamp(56px, 8vw, 96px); width:100%;}
.hero h1{max-width:16ch; margin-bottom:34px;}
.hero .lede{max-width:56ch;}

.hero-meta{
  position:relative; z-index:2;
  border-top:1px solid var(--rule-dark);
}
.hero-meta .wrap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px;
  padding-top:22px; padding-bottom:22px;
  font-family:var(--display);
  font-size:10.5px; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--graphite);
}
.hero-meta strong{color:var(--platinum); font-weight:600;}

/* --------------------------------------------------------------- stat strip */

.stats{
  display:flex;
  flex-wrap:wrap;
  border-top:1px solid var(--rule-dark);
  border-left:1px solid var(--rule-dark);
}
.stats > .stat{flex:1 1 190px;}
.s-white .stats{border-color:var(--rule-light);}
.stat{
  padding:34px 30px;
  border-right:1px solid var(--rule-dark);
  border-bottom:1px solid var(--rule-dark);
}
.s-white .stat{border-color:var(--rule-light);}
.stat-big{
  font-family:var(--display);
  font-size:clamp(30px, 3.4vw, 44px);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1;
  color:var(--white);
  margin-bottom:12px;
}
.s-white .stat-big{color:var(--ink);}
.stat-label{
  font-family:var(--display);
  font-size:10px; font-weight:600;
  letter-spacing:0.19em; text-transform:uppercase;
  color:var(--graphite);
  line-height:1.5;
}
.s-white .stat-label{color:var(--ink-label);}

/* --------------------------------------------------------------- grids */

/* Flexbox rather than CSS Grid auto-fit: grid's auto-fit leaves phantom
   empty tracks (visible as blank boxes) whenever the item count isn't an
   exact multiple of however many columns fit at a given width. Flex-wrap
   just wraps and lets the last row's items grow to fill it, so there is
   never an empty cell regardless of item count or viewport width. */
.grid{display:flex; flex-wrap:wrap; gap:1px; background:var(--rule-dark);}
.s-white .grid{background:var(--rule-light);}
.grid > .cell{flex:1 1 var(--cell-min, 260px);}
.grid.cols2{--cell-min:320px;}
.grid.cols3{--cell-min:280px;}
.grid.cols4{--cell-min:230px;}

.cell{background:var(--ink); padding:clamp(30px, 3.4vw, 46px);}
.s-white .cell{background:var(--white);}
.s-panel .cell,.cell.panel{background:var(--panel);}

.cell-num{
  font-family:var(--display);
  font-size:10.5px; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--platinum);
  margin-bottom:20px;
}
.s-white .cell-num{color:var(--ink-label);}
.cell h3{margin-bottom:14px;}
.cell p{font-size:15px; line-height:1.75; color:var(--steel); margin-bottom:0;}
.s-white .cell p{color:var(--ink-body);}

/* Split feature block */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px, 6vw, 90px);
  align-items:center;
}
.split.narrow{grid-template-columns:0.85fr 1.15fr;}

/* Image well */
.well{
  position:relative;
  aspect-ratio:4/5;
  background:var(--panel);
  border:1px solid var(--rule-dark);
  overflow:hidden;
}
.s-white .well{background:var(--white); border-color:var(--rule-light);}
.well img{width:100%; height:100%; object-fit:cover;}
.well-label{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display);
  font-size:10px; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--graphite);
  text-align:center; padding:20px;
}

/* --------------------------------------------------------------- numbered list */

.steps{border-top:1px solid var(--rule-dark);}
.s-white .steps{border-color:var(--rule-light);}
.step{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:clamp(20px, 4vw, 56px);
  padding:clamp(30px, 3.6vw, 46px) 0;
  border-bottom:1px solid var(--rule-dark);
  align-items:start;
}
.s-white .step{border-color:var(--rule-light);}
.step-n{
  font-family:var(--display);
  font-size:13px; font-weight:700;
  letter-spacing:0.16em;
  color:var(--platinum);
  padding-top:6px;
}
.s-white .step-n{color:var(--slate);}
.step h3{margin-bottom:12px;}
.step p{font-size:15px; color:var(--steel); margin-bottom:0; max-width:66ch;}
.s-white .step p{color:var(--ink-body);}

/* --------------------------------------------------------------- pillars */

.pillars{
  display:flex;
  flex-wrap:wrap;
  gap:1px;
  background:var(--rule-dark);
  border:1px solid var(--rule-dark);
}
.pillars > .pillar{flex:1 1 190px;}
.pillar{
  position:relative;
  background:var(--ink);
  padding:40px 24px 74px;
  overflow:hidden;
  isolation:isolate;
  transition:background .55s var(--ease);
}
/* Oversized ghost numeral, outlined rather than filled */
.pillar::before{
  content:attr(data-n);
  position:absolute;
  right:2px; bottom:6px;
  z-index:-1;
  font-family:var(--display);
  font-size:clamp(72px, 7vw, 92px); font-weight:800; line-height:1;
  letter-spacing:-0.04em;
  /* Solid ghost fill rather than -webkit-text-stroke: the stroke property is
     non-standard and outlines inner counters as well as outer contours, which
     leaves stray trace lines on glyphs such as 3 and 4. */
  color:var(--white);
  opacity:0.07;
  pointer-events:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.pillar:hover{background:var(--panel);}
.pillar:hover::before{opacity:0.13; transform:translateY(-5px);}

.pillar-n{
  font-family:var(--display);
  font-size:10.5px; font-weight:700; letter-spacing:0.22em;
  color:var(--platinum);
  margin-bottom:22px;
}
.pillar-rule{
  width:26px; height:1px; background:var(--platinum);
  margin-bottom:20px;
  transition:width .55s var(--ease);
}
.pillar:hover .pillar-rule{width:58px;}
.pillar h3{
  font-size:17.5px; letter-spacing:-0.015em; line-height:1.28;
  color:var(--white); position:relative;
}
/* Pillars keep the Ink ground even inside a white section */
.s-white .pillar,.s-white .pillar h3{color:var(--white);}
.s-white .pillar-n{color:var(--platinum);}

@media (prefers-reduced-motion: reduce){
  .pillar::before,.pillar-rule{transition:none;}
}

/* --------------------------------------------------------------- quote */

.pullquote{
  border-left:1px solid var(--platinum);
  padding-left:clamp(24px, 3vw, 44px);
  max-width:820px;
}
.pullquote p{
  font-family:var(--display);
  font-size:clamp(20px, 2.5vw, 30px);
  font-weight:300;
  line-height:1.42;
  letter-spacing:-0.02em;
  color:var(--white);
  max-width:none;
}
.s-white .pullquote p{color:var(--ink);}
.pullquote cite{
  display:block;
  margin-top:24px;
  font-family:var(--display);
  font-size:10.5px; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--graphite);
  font-style:normal;
}

/* --------------------------------------------------------------- accordion */

.qa{border-top:1px solid var(--rule-dark);}
.s-white .qa{border-color:var(--rule-light);}
.qa details{border-bottom:1px solid var(--rule-dark);}
.s-white .qa details{border-color:var(--rule-light);}
.qa summary{
  list-style:none;
  cursor:pointer;
  padding:26px 44px 26px 0;
  position:relative;
  font-family:var(--display);
  font-size:clamp(16px, 1.5vw, 18.5px);
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.4;
  color:var(--white);
  transition:color .35s var(--ease);
}
.s-white .qa summary{color:var(--ink);}
.qa summary::-webkit-details-marker{display:none;}
.qa summary:hover{color:var(--platinum);}
.s-white .qa summary:hover{color:var(--slate);}
.qa summary::after{
  content:"";
  position:absolute; right:6px; top:34px;
  width:11px; height:11px;
  border-right:1px solid var(--platinum);
  border-bottom:1px solid var(--platinum);
  transform:rotate(45deg);
  transition:transform .4s var(--ease);
}
.s-white .qa summary::after{border-color:var(--slate);}
.qa details[open] summary::after{transform:rotate(-135deg); top:38px;}
.qa-body{padding:0 0 30px;}
.qa-body p{font-size:15.5px; color:var(--steel); max-width:74ch;}
.s-white .qa-body p{color:var(--ink-body);}

/* --------------------------------------------------------------- prose (legal) */

.prose{max-width:760px;}
.prose h2{font-size:clamp(21px, 2vw, 26px); margin:52px 0 18px;}
.prose h2:first-child{margin-top:0;}
.prose p{font-size:15.5px; color:var(--steel);}
/* For a centered closing line that may wrap: balances line lengths instead of
   leaving one long line and one short ragged scrap, which is what plain
   text-align:center produces on a multi-line sentence. Degrades gracefully
   (falls back to normal wrapping) in browsers that don't support text-wrap. */
.prose .centered-note{
  text-align:center;
  text-wrap:balance;
}
.s-white .prose p{color:var(--ink-body);}
.prose ul{margin:0 0 22px; padding-left:20px;}
.prose li{font-size:15.5px; line-height:1.8; color:var(--steel); margin-bottom:9px;}
.s-white .prose li{color:var(--ink-body);}
.prose a{color:var(--platinum); text-decoration:underline; text-underline-offset:3px;}
.s-white .prose a{color:var(--ink);}

/* --------------------------------------------------------------- page hero */

.page-hero{
  position:relative;
  overflow:hidden;
  padding-top:clamp(150px, 18vw, 210px);
  padding-bottom:clamp(56px, 7vw, 86px);
  border-bottom:1px solid var(--rule-dark);
  background:var(--ink);
}
.page-hero .wrap{position:relative; z-index:2;}

/* Brand Mark watermark. White on Ink grounds, black on white grounds. */
.page-mark{
  position:absolute;
  top:50%; right:-5%;
  transform:translateY(-50%);
  width:min(46vw, 480px);
  height:auto;
  aspect-ratio:926/986;
  opacity:0.085;
  pointer-events:none;
  user-select:none;
  z-index:1;
}
.cta{position:relative; overflow:hidden;}
.cta .wrap{position:relative; z-index:2;}
.cta-mark{
  position:absolute;
  top:50%; left:6%;
  transform:translateY(-50%);
  width:min(40vw, 430px);
  height:auto;
  aspect-ratio:926/986;
  opacity:0.05;
  pointer-events:none;
  user-select:none;
  z-index:1;
}
@media (max-width:880px){
  .page-mark{width:62vw; right:-16%; opacity:0.07;}
  .cta-mark{width:58vw; left:-8%; opacity:0.04;}
}
.page-hero h1{max-width:19ch; margin-bottom:28px;}

/* --------------------------------------------------------------- CTA */

.cta{
  background:var(--white);
  color:var(--ink);
  text-align:center;
}
.cta h2{max-width:22ch; margin:0 auto 26px; color:var(--ink);}
.cta p{margin-left:auto; margin-right:auto; color:var(--ink-body); max-width:56ch;}
.cta .btn-row{justify-content:center;}
.cta .eyebrow{justify-content:center; color:var(--ink-label);}
.cta .eyebrow::before{background:var(--ink-label);}

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

.site-footer{background:var(--panel-deep); border-top:1px solid var(--rule-dark);}
.footer-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(30px, 4vw, 60px);
  padding:clamp(56px, 7vw, 84px) 0 clamp(40px, 5vw, 60px);
}
.footer-brand-mark{display:flex; align-items:center; gap:13px; margin-bottom:22px;}
.footer-brand-mark .brand-icon{height:22px; width:auto; aspect-ratio:926/986;}
.footer-brand-mark .brand-logo{height:22px; width:auto; margin-bottom:0;}
.footer-brand p{font-size:14px; color:var(--graphite); max-width:34ch; margin-bottom:22px;}
.f-title{
  font-family:var(--display);
  font-size:10px; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--platinum);
  margin-bottom:20px;
}
.f-links{list-style:none; margin:0; padding:0;}
.f-links li{margin-bottom:12px;}
.f-links a{
  font-size:14px; color:var(--graphite); text-decoration:none;
  transition:color .35s var(--ease);
}
.f-links a:hover{color:var(--white);}
.footer-bottom{
  border-top:1px solid var(--rule-dark);
  padding:26px 0 34px;
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between;
}
.footer-bottom p{font-size:12.5px; color:var(--graphite); margin:0; max-width:none;}
.footer-legal{display:flex; gap:24px; flex-wrap:wrap;}
.footer-legal a{font-size:12.5px; color:var(--graphite); text-decoration:none;}
.footer-legal a:hover{color:var(--white);}

/* --------------------------------------------------------------- reveal */

/* Hidden-until-revealed styles apply only once JavaScript has added the
   `js` class to <html>, so nothing is ever hidden without JavaScript. */
.js .rv{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.js .rv.in{opacity:1; transform:none;}
.rv-d1{transition-delay:.09s;}
.rv-d2{transition-delay:.18s;}
.rv-d3{transition-delay:.27s;}

/* --------------------------------------------------------------- responsive */

@media (max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .split,.split.narrow{grid-template-columns:1fr; gap:38px;}
  .hero-mark{width:70vw; opacity:0.07;}
}

/* Header: on desktop the Brand Mark plus the MCG lettered logo carry the
   identity (the firm name alongside them would need more width than the
   1280px container leaves next to the nav and the call to action). Below
   1100px the nav moves into the menu, where the full name returns until
   phone widths. */
@media (min-width:1101px){
  .brand-name,.brand-div{display:none;}
  .mobile-nav,.mobile-nav.open{display:none;}
}
/* While the menu is open the page behind it stays still (site.js sets menu-open). */
@media (max-width:1100px){
  html.menu-open,html.menu-open body{overflow:hidden;}
}
@media (max-width:1200px){
  .nav{gap:20px;}
}
@media (max-width:1100px){
  .nav,.header-cta{display:none;}
  .nav-toggle{display:flex;}
}
@media (max-width:620px){
  .brand-name,.brand-div{display:none;}
}
@media (max-width:880px){
  .hero-grid{background-size:calc(100% / 3) 100%;}
}

@media (max-width:620px){
  .footer-top{grid-template-columns:1fr; gap:38px;}
  .step{grid-template-columns:1fr; gap:12px;}
  .step-n{padding-top:0;}
  .btn{width:100%;}
  .btn-row{flex-direction:column;}
  .hero-meta .wrap{flex-direction:column; align-items:flex-start; gap:8px;}
}

/* --------------------------------------------------------------- a11y */

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

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--white); color:var(--ink);
  padding:12px 20px; z-index:1000;
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase; text-decoration:none;
}
.skip:focus{left:var(--gutter); top:14px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .rv{opacity:1 !important; transform:none !important; transition:none !important;}
  *{animation:none !important; transition:none !important;}
}

@media print{
  .site-header,.mobile-nav,.hero-mark,.hero-grid{display:none !important;}
  body{background:#fff; color:#000;}
}

/* --------------------------------------------------- flex-gap fallbacks
   Modern browsers use the `gap` declarations above. These margin fallbacks
   keep spacing intact in older rendering engines that ignore flex gap. */
@supports not (gap: 1px){
  .nav a + a, .nav a + .nav-item{margin-left:26px;}
  .brand > * + *{margin-left:13px;}
  .btn-row > * + *{margin-left:14px;}
  .eyebrow::before{margin-right:14px;}
  .footer-legal a + a{margin-left:24px;}
  .site-header .wrap > * + *{margin-left:28px;}
}

/* --------------------------------------------------------------- inline links */

.ilink{
  color:var(--platinum);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .35s var(--ease);
}
.ilink:hover{color:var(--white);}
.s-white .ilink,.cta .ilink{color:var(--ink); text-decoration-color:var(--ink-label);}
.s-white .ilink:hover,.cta .ilink:hover{color:var(--slate);}

/* Retailer availability strip */
.retailers{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--rule-light);
  margin-top:34px;
}
.s-ink .retailers{border-color:var(--rule-dark);}
.retailers a{
  font-family:var(--display);
  font-size:10.5px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; text-decoration:none;
  color:var(--ink-label);
  padding:16px 22px 16px 0;
  transition:color .35s var(--ease);
}
.retailers a:hover{color:var(--ink);}
.s-ink .retailers a{color:var(--graphite);}
.s-ink .retailers a:hover{color:var(--white);}

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

.form{max-width:620px; margin:0 auto; text-align:left;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:560px){ .form-row{grid-template-columns:1fr;} }

.field{margin-bottom:16px;}
.field label{
  display:block;
  font-family:var(--display);
  font-size:10px; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-label);
  margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--body);
  font-size:15px; font-weight:300;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--slate);
  border-radius:0;
  padding:14px 15px;
  transition:border-color .35s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field textarea{min-height:120px; resize:vertical; line-height:1.65;}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-label) 50%),linear-gradient(135deg,var(--ink-label) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:42px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ink);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-label);}

.form .btn{width:100%; margin-top:8px;}
.form-note{
  font-size:12.5px; line-height:1.6; color:var(--ink-label);
  margin-top:16px; max-width:none;
}

/* Honeypot: hidden from people, visible to bots */
.hp{position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden;}

/* Footer subscribe */
.subscribe{display:flex; gap:0; margin-top:6px; max-width:340px;}
.subscribe input{
  flex:1 1 auto; min-width:0;
  font-family:var(--body); font-size:14px; font-weight:300;
  color:var(--white); background:transparent;
  border:1px solid var(--rule-dark); border-right:0; border-radius:0;
  padding:12px 14px;
}
.subscribe input::placeholder{color:var(--graphite);}
.subscribe input:focus{outline:none; border-color:var(--steel);}
.subscribe button{
  flex:0 0 auto;
  font-family:var(--display); font-size:10px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink); background:var(--white);
  border:1px solid var(--white); border-radius:0;
  padding:12px 18px; cursor:pointer;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.subscribe button:hover{background:var(--platinum); border-color:var(--platinum);}

/* --------------------------------------------------------------- accessibility utilities */

.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;
}

/* Visible focus is preserved sitewide via :focus-visible (see below); this
   block exists so any element given .sr-only never accidentally loses
   focusability or a visible focus ring if it becomes interactive. */

/* --------------------------------------------------------------- nav dropdown */

.nav-item{position:relative;}
.nav-item > .nav-drop-trigger{
  all:unset;
  cursor:pointer;
  position:relative;
  font-family:var(--body);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--steel);
  padding:6px 0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:color .35s var(--ease);
}
.nav-item:hover > .nav-drop-trigger,
.nav-item:focus-within > .nav-drop-trigger,
.nav-item.open > .nav-drop-trigger{color:var(--white);}
.nav-item > .nav-drop-trigger::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--platinum);
  transition:right .45s var(--ease);
}
.nav-item:hover > .nav-drop-trigger::after,
.nav-item:focus-within > .nav-drop-trigger::after,
.nav-item.open > .nav-drop-trigger::after{right:0;}

.nav-drop-caret{
  width:6px; height:6px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
  flex:0 0 auto;
}
.nav-item.open .nav-drop-caret,
.nav-item:focus-within .nav-drop-caret{transform:rotate(-135deg);}

.nav-drop-panel{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:250px;
  background:var(--panel);
  border:1px solid var(--rule-dark);
  padding:8px 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  z-index:950;
}
.nav-item:hover .nav-drop-panel,
.nav-item:focus-within .nav-drop-panel,
.nav-item.open .nav-drop-panel{
  opacity:1; visibility:visible;
  transform:translateY(0);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;
}
.nav-drop-panel a{
  display:block;
  padding:11px 20px;
  font-family:var(--body);
  font-size:13px;
  font-weight:400;
  color:var(--steel);
  text-decoration:none;
  white-space:nowrap;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav-drop-panel a:hover, .nav-drop-panel a:focus-visible{
  color:var(--white); background:var(--panel-deep);
}

.mobile-nav .nav-group-label{
  padding:16px 0 4px;
  font-family:var(--display);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--graphite);
}

/* --------------------------------------------------------------- article images */

/* Small images with text wrapping around them (portraits, marks). */
.article-float{
  float:right;
  width:clamp(190px, 32vw, 280px);
  margin:6px 0 22px 26px;
  border:1px solid var(--rule-light);
}
.article-float.left{float:left; margin:6px 26px 22px 0;}
.article-float img{width:100%; height:auto; display:block;}
.article-float figcaption{
  font-size:12px; line-height:1.5; color:var(--ink-label);
  padding:9px 11px; font-family:var(--body);
}

/* Full-width standalone screenshots, no text wrap. */
.article-figure{margin:34px 0; clear:both;}
.article-figure img{
  width:100%; height:auto; display:block;
  border:1px solid var(--rule-light);
}
.article-figure figcaption{
  font-size:12.5px; color:var(--ink-label); margin-top:9px; text-align:center;
}

.prose ol{margin:0 0 22px; padding-left:22px;}
.prose ol li{font-size:15.5px; line-height:1.75; color:var(--steel); margin-bottom:14px;}
.s-white .prose ol li{color:var(--ink-body);}
.prose ol li b{color:var(--ink);}

@media (max-width:640px){
  .article-float{float:none; width:100%; margin:22px 0;}
}

/* --------------------------------------------------------------- lockup
   MCG Brand Mark alongside the lettered logo, with a property label. */
.lockup{display:flex; align-items:center; gap:16px; margin-bottom:34px;}
.lockup .brand-icon{height:44px; width:auto; aspect-ratio:926/986;}
.lockup .brand-logo{height:20px; width:auto;}
.lockup-div{width:1px; height:30px; background:var(--rule-dark);}
.lockup-label{
  font-family:var(--display); font-size:10.5px; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--steel);
}

/* --------------------------------------------------------------- pillar weight */
.pillar-w{
  font-family:var(--display); font-size:clamp(28px, 2.6vw, 34px); font-weight:300;
  letter-spacing:-0.03em; line-height:1; color:var(--platinum);
  margin-top:18px; position:relative;
}

/* --------------------------------------------------------------- composite scale
   Five bands on a 0 to 100 strip. Segment widths are proportional to each
   band's range; tones step from Rule Light to Ink. */
.band-scale{margin:0 0 44px;}
.band-scale-bar{display:flex; height:8px; gap:2px;}
.band-scale-bar span{display:block; height:100%;}
.band-scale-ticks{position:relative; height:22px; margin-top:10px;}
.band-scale-ticks span{
  position:absolute; top:0; transform:translateX(-50%);
  font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.08em;
  color:var(--ink-label);
}
.band-scale-ticks span:first-child{transform:none;}
.band-scale-ticks span:last-child{transform:translateX(-100%);}
.tone-1{background:var(--rule-light);}
.tone-2{background:var(--platinum);}
.tone-3{background:var(--steel);}
.tone-4{background:var(--slate);}
.tone-5{background:var(--ink);}
.bands .cell{position:relative; padding-top:clamp(38px, 3.8vw, 52px);}
.bands .cell::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--tone, var(--rule-light));}
.bands .cell:nth-child(1){--tone:var(--rule-light);}
.bands .cell:nth-child(2){--tone:var(--platinum);}
.bands .cell:nth-child(3){--tone:var(--steel);}
.bands .cell:nth-child(4){--tone:var(--slate);}
.bands .cell:nth-child(5){--tone:var(--ink);}
.grid.cols5{--cell-min:200px;}

/* --------------------------------------------------------------- note panel */
.note-panel{
  border-top:1px solid var(--rule-light); border-bottom:1px solid var(--rule-light);
  padding:clamp(28px, 3.4vw, 40px) 0; max-width:900px;
}
.s-ink .note-panel{border-color:var(--rule-dark);}
.note-panel h3{margin-bottom:14px;}
.note-panel p{font-size:15.5px;}

/* Bullet list inside cells */
.cell-list{list-style:none; margin:14px 0 0; padding:0;}
.cell-list li{font-size:15px; line-height:1.7; color:var(--steel); padding:9px 0; border-top:1px solid var(--rule-dark);}
.s-white .cell-list li{color:var(--ink-body); border-color:var(--rule-light);}

/* ==========================================================================
   Motion system
   CSS and a small amount of vanilla JS (assets/site.js). Only transform and
   opacity animate. Everything hidden-until-revealed is scoped to html.js, all
   of it is off under prefers-reduced-motion, and none of it prints.
   ========================================================================== */

/* ---------------------------------------------------- living heroes
   A slow-drifting Platinum glow and a faint 56px lattice that fades out from
   the top right corner, behind every hero. */
.hero::before,.page-hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(1100px, 130vw); aspect-ratio:1/1;
  left:-18%; top:-45%;
  background:radial-gradient(closest-side, rgba(200,197,190,0.13), rgba(200,197,190,0.05) 45%, rgba(200,197,190,0) 100%);
  animation:glow-drift 26s var(--ease) infinite alternate;
  will-change:transform;
}
.hero::after,.page-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 100% 0%, #000 0%, rgba(0,0,0,0.35) 45%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 90% at 100% 0%, #000 0%, rgba(0,0,0,0.35) 45%, transparent 75%);
}
.hero-inner,.hero-meta,.hero-grid,.hero-mark{z-index:1;}
.hero-inner,.hero-meta{z-index:2;}
@keyframes glow-drift{
  0%  {transform:translate3d(0,0,0) scale(1);}
  50% {transform:translate3d(9%,6%,0) scale(1.06);}
  100%{transform:translate3d(18%,-3%,0) scale(0.97);}
}

/* ---------------------------------------------------- staggered reveals
   site.js marks grids and lists as .stagger and numbers each child in --i. */
.js .rv.stagger{opacity:1; transform:none;}
.js .stagger > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease) calc(var(--i, 0) * 70ms),
             transform .7s var(--ease) calc(var(--i, 0) * 70ms),
             color .35s var(--ease), background-color .45s var(--ease);
}
.js .stagger.in > *{opacity:1; transform:none;}
/* Grids and pillars draw their hairlines with the container background, so
   the cells stay put and their contents cascade instead. */
.js .grid.stagger > *,.js .pillars.stagger > *{opacity:1; transform:none;}
.js .grid.stagger > * > *,.js .pillars.stagger > * > *{
  opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease) calc(var(--i, 0) * 70ms),
             transform .7s var(--ease) calc(var(--i, 0) * 70ms),
             width .55s var(--ease);
}
.js .grid.stagger.in > * > *,.js .pillars.stagger.in > * > *{opacity:1; transform:none;}

/* ---------------------------------------------------- hover feedback */
.cell{position:relative;}
@media (hover:hover){
  .grid > .cell{transition:transform .45s var(--ease), background-color .45s var(--ease);}
  .grid > .cell::after{
    content:""; position:absolute; left:0; right:0; top:0; height:1px;
    background:var(--platinum); transform:scaleX(0); transform-origin:left;
    transition:transform .55s var(--ease);
  }
  .s-white .grid > .cell::after{background:var(--slate);}
  .grid > .cell:hover{transform:translateY(-3px); z-index:1;}
  .grid > .cell:hover::after{transform:scaleX(1);}
}
.btn-dark,.btn-light{position:relative; overflow:hidden; isolation:isolate;}
.btn-dark::after,.btn-light::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.22) 50%, transparent 75%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease);
}
.btn-light::after{background:linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.55) 50%, transparent 75%);}
.btn-dark:hover::after,.btn-light:hover::after,
.btn-dark:focus-visible::after,.btn-light:focus-visible::after{transform:translateX(120%);}

/* ---------------------------------------------------- the four laws
   A connecting line draws down the list and each law's marker lands in turn,
   because the laws build on each other. */
.laws{position:relative;}
.laws::before{
  content:""; position:absolute; left:3px; top:0; bottom:0; width:1px;
  background:var(--platinum); transform-origin:top;
}
.js .laws::before{transform:scaleY(0); transition:transform 1.8s var(--ease) .15s;}
.js .laws.in::before{transform:scaleY(1);}
.laws .step{position:relative; padding-left:34px;}
.laws .step::before{
  content:""; position:absolute; left:0; top:calc(clamp(30px, 3.6vw, 46px) + 8px);
  width:7px; height:7px; background:var(--platinum); transform:rotate(45deg);
}
.js .laws .step::before{opacity:0; transform:rotate(45deg) scale(0.2); transition:opacity .5s var(--ease) calc(var(--i, 0) * 380ms + 300ms), transform .5s var(--ease) calc(var(--i, 0) * 380ms + 300ms);}
.js .laws.in .step::before{opacity:1; transform:rotate(45deg) scale(1);}
.js .laws.stagger > *{transition-delay:calc(var(--i, 0) * 380ms + 200ms);}

/* ---------------------------------------------------- the hierarchy
   Six tiers as a rising skyline: each tier's column is one sixth taller than
   the last, and the columns rise in sequence as the section enters view. */
.tiers{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, 1fr); border-left:1px solid var(--rule-dark);}
.tier{border-right:1px solid var(--rule-dark); padding:0 clamp(12px, 1.3vw, 20px) 8px; display:flex; flex-direction:column;}
.tier-bar{height:clamp(150px, 17vw, 230px); display:flex; align-items:flex-end; margin:0 calc(-1 * clamp(12px, 1.3vw, 20px)) 26px; border-bottom:1px solid var(--rule-dark);}
.tier-bar span{
  display:block; width:100%; height:calc(var(--h) / 6 * 100%);
  background:linear-gradient(to top, var(--panel), rgba(200,197,190,0.10));
  border-top:1px solid var(--platinum);
  transform-origin:bottom;
}
.tier:last-child .tier-bar span{background:linear-gradient(to top, var(--panel), rgba(200,197,190,0.22));}
.js .tiers .tier-bar span{transform:scaleY(0); transition:transform 1.1s var(--ease) calc(var(--i, 0) * 140ms);}
.js .tiers.in .tier-bar span{transform:scaleY(1);}
.tier .cell-num{margin-bottom:12px;}
.tier h3{font-size:clamp(15.5px, 1.35vw, 18px); margin-bottom:10px;}
.tier p{font-size:13.5px; line-height:1.7; color:var(--steel); margin:0;}
.tier-reach{margin-top:auto; padding-top:14px; font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--graphite);}
@media (max-width:1100px){
  .tiers{grid-template-columns:1fr; border-left:0; border-top:1px solid var(--rule-dark);}
  .tier{border-right:0; border-bottom:1px solid var(--rule-dark); padding:22px 0 24px;}
  .tier-bar{height:6px; margin:0 0 18px; border-bottom:0; align-items:stretch; background:var(--panel);}
  .tier-bar span{width:calc(var(--h) / 6 * 100%); height:100%; border-top:0; background:var(--platinum); transform-origin:left;}
  .tier:last-child .tier-bar span{background:var(--white);}
  .js .tiers .tier-bar span{transform:scaleX(0);}
  .js .tiers.in .tier-bar span{transform:scaleX(1);}
  .tier p{font-size:15px; max-width:64ch;}
  .tier-reach{padding-top:10px;}
}

/* ---------------------------------------------------- reading progress */
.read-progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:1001; pointer-events:none;}
.read-progress span{display:block; height:100%; background:var(--platinum); transform:scaleX(0); transform-origin:left;}

/* ---------------------------------------------------- reduced motion and print */
@media (prefers-reduced-motion: reduce){
  .hero::before,.page-hero::before{animation:none;}
  .js .stagger > *,.js .stagger > * > *,
  .js .tiers .tier-bar span,.js .laws::before,.js .laws .step::before{opacity:1 !important; transform:none !important;}
  .js .laws .step::before{transform:rotate(45deg) !important;}
  .grid > .cell:hover{transform:none;}
  .btn-dark::after,.btn-light::after{display:none;}
  .read-progress{display:none;}
}
@media print{
  .hero::before,.hero::after,.page-hero::before,.page-hero::after,.read-progress,
  .btn-dark::after,.btn-light::after{display:none !important;}
  .rv,.stagger > *,.stagger > * > *,.tiers .tier-bar span,.laws::before,.laws .step::before{opacity:1 !important; transform:none !important; transition:none !important;}
  .laws .step::before{transform:rotate(45deg) !important;}
}

/* ==========================================================================
   Insights: article template, research components, category filter
   ========================================================================== */

/* Byline row: author, date, reading time, category */
.article-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;
  font-family:var(--display); font-size:10.5px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-label);
  padding-bottom:22px; margin-bottom:36px; border-bottom:1px solid var(--rule-light);
  max-width:none;
}
.article-meta a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule-light);}
.article-meta a:hover{border-color:var(--ink);}

/* Pull quote inside an article */
.prose .pullquote{margin:40px 0;}
.prose .pullquote p{font-size:clamp(19px, 2.1vw, 25px); color:var(--ink);}

/* Data callout: one large figure and a one-line finding */
.data-callout{
  margin:40px 0; padding:28px 0 26px;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--rule-light);
}
.data-callout .figure{
  font-family:var(--display); font-size:clamp(52px, 7vw, 84px); font-weight:800;
  letter-spacing:-0.04em; line-height:1; color:var(--ink); margin-bottom:14px;
}
.data-callout .finding{font-size:17px; line-height:1.55; color:var(--ink); margin-bottom:10px; max-width:52ch;}
.data-callout .source{font-size:12.5px; color:var(--ink-label); margin:0;}

/* Charts: the <table> is the accessible, no-JS source; site.js draws the SVG */
.chart{margin:40px 0;}
.chart figcaption{margin-bottom:18px;}
.chart .chart-title{font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); margin:0 0 6px;}
.chart .chart-note{font-size:12.5px; color:var(--ink-label); margin:0;}
.chart svg{display:block; width:100%; height:auto; overflow:visible;}
.chart svg .track{fill:var(--rule-light);}
.chart svg .bar{fill:var(--ink); transform-box:fill-box; transform-origin:left;}
.chart svg .lbl{font-family:var(--body); font-size:13px; fill:var(--ink-body);}
.chart svg .val{font-family:var(--display); font-size:12px; font-weight:600; fill:var(--ink);}
.chart svg .axis{stroke:var(--rule-light); stroke-width:1;}
.chart svg .line{fill:none; stroke:var(--ink); stroke-width:1.5;}
.chart svg .dot{fill:var(--ink);}
.js .chart.rv svg .bar{transform:scaleX(0); transition:transform 1s var(--ease) calc(var(--i, 0) * 90ms + 200ms);}
.js .chart.rv.in svg .bar{transform:scaleX(1);}
.js .chart.rv svg .line{opacity:0; transition:opacity 1s var(--ease) .2s;}
.js .chart.rv svg .dot,.js .chart.rv svg .val{opacity:0; transition:opacity .5s var(--ease) calc(var(--i, 0) * 90ms + 500ms);}
.js .chart.rv.in svg .line,.js .chart.rv.in svg .dot,.js .chart.rv.in svg .val{opacity:1;}
.chart table{width:100%; border-collapse:collapse; font-size:14px;}
.chart th,.chart td{text-align:left; padding:8px 0; border-bottom:1px solid var(--rule-light); color:var(--ink-body);}
.chart.is-drawn table{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}

/* Publication rule: a figure without an adequate sample is never shown */
.is-blocked > :not(.blocked-note){display:none !important;}
.blocked-note{
  font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--ink); border:1px solid var(--ink); padding:14px 16px; margin:0;
}

/* How This Was Measured */
.measured{border:1px solid var(--rule-light); padding:clamp(22px, 3vw, 32px); margin:44px 0;}
.measured h2,.prose .measured h2{font-size:12px; letter-spacing:0.22em; text-transform:uppercase; margin:0 0 18px; color:var(--ink);}
.measured dl{margin:0; display:grid; grid-template-columns:max-content 1fr; gap:10px 22px;}
.measured dt{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-label); padding-top:3px;}
.measured dd{margin:0; font-size:15px; line-height:1.6; color:var(--ink-body);}
@media (max-width:560px){ .measured dl{grid-template-columns:1fr; gap:4px;} .measured dd{margin-bottom:12px;} }

/* Related links back to the audit */
.related{border-top:1px solid var(--ink); margin-top:52px; padding-top:22px;}
.related .eyebrow{margin-bottom:16px;}
.related ul{list-style:none; margin:0; padding:0;}
.prose .related li{margin:0; border-bottom:1px solid var(--rule-light);}
.related a{display:block; padding:14px 0; color:var(--ink); text-decoration:none; font-family:var(--display); font-weight:600; font-size:15px;}
.related a:hover{color:var(--slate);}

/* Placeholder content: only ever inside the template or a draft */
[data-placeholder]{outline:1px dashed var(--slate); outline-offset:6px; position:relative;}
[data-placeholder]::before{
  content:"Placeholder"; position:absolute; top:-10px; right:0; transform:translateY(-100%);
  font-family:var(--display); font-size:9.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--white); background:var(--slate); padding:3px 7px;
}

/* Category filter on /insights (shown only once JavaScript runs) */
.filter-bar{display:flex; flex-wrap:wrap; gap:0; margin:0 0 34px; border-bottom:1px solid var(--rule-light);}
.filter-bar[hidden]{display:none;}
.filter-bar button{
  all:unset; cursor:pointer;
  font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-label); padding:14px 0; margin-right:30px; margin-bottom:-1px;
  border-bottom:1px solid transparent; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.filter-bar button:hover{color:var(--ink);}
.filter-bar button[aria-pressed="true"]{color:var(--ink); border-color:var(--ink);}
.filter-bar button:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.grid [hidden]{display:none !important;}
.filter-empty{padding:30px 0 0;}

/* --------------------------------------------------------------- definition box
   The one-paragraph answer at the top of a pillar article. */
.definition{border-top:1px solid var(--ink); border-bottom:1px solid var(--rule-light); padding:26px 0 24px; margin:0 0 40px;}
.definition-label{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label); margin:0 0 12px;}
.prose .definition-text{font-family:var(--display); font-size:clamp(18px, 1.9vw, 22px); font-weight:400; line-height:1.55; letter-spacing:-0.01em; color:var(--ink); margin:0; max-width:none;}

/* --------------------------------------------------------------- table of contents */
.toc{border:1px solid var(--rule-light); padding:22px 26px; margin:0 0 48px;}
.toc-label{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label); margin:0 0 12px;}
.prose .toc ol{margin:0; padding-left:20px; columns:2 260px; column-gap:34px;}
.prose .toc li{font-size:14.5px; margin-bottom:6px; break-inside:avoid;}
.prose .toc a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule-light);}
.prose .toc a:hover{border-color:var(--ink);}
.prose [id]{scroll-margin-top:96px;}
section[id]{scroll-margin-top:76px;}

/* --------------------------------------------------------------- author box */
.author-box{display:flex; gap:22px; align-items:flex-start; border-top:1px solid var(--ink); margin-top:56px; padding-top:26px;}
.author-box img{width:96px; height:120px; object-fit:cover; flex:0 0 96px; filter:grayscale(1);}
.author-box .author-name{font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); margin:0 0 6px;}
.prose .author-box p{font-size:14.5px;}
@media (max-width:520px){ .author-box{flex-direction:column;} }

/* ==========================================================================
   Umbrella components
   Used by the MASHMAN properties that share this file. Nothing here changes
   an existing component; each rule adds a variant or a new block.
   ========================================================================== */

/* Measured body copy, 60 to 65 characters a line */
.measure{max-width:720px;}
.hero-extra{margin-top:40px;}
/* Vertical rhythm for mixed blocks in one container: paragraphs keep their
   own spacing; anything else is set apart from what precedes it. */
.flow > * + :not(p){margin-top:clamp(36px, 4.5vw, 56px);}
.flow > :not(p) + p{margin-top:clamp(28px, 3.5vw, 40px);}
.split.wide{grid-template-columns:1.15fr 0.85fr;}
.split.top{align-items:start;}
@media (max-width:1024px){ .split.wide{grid-template-columns:1fr;} }

/* Published artwork (a book cover) shown whole: never cropped or restyled */
.cover{width:100%; max-width:320px; height:auto; border:1px solid var(--rule-dark);}
.s-white .cover,.cta:not(.s-ink) .cover{border-color:var(--rule-light);}

/* Closing section on an Ink ground */
.cta.s-ink{background:var(--ink); color:var(--white); border-top:1px solid var(--rule-dark);}
.cta.s-ink h2{color:var(--white);}
.cta.s-ink p{color:var(--steel);}
.cta.s-ink .eyebrow{color:var(--platinum);}
.cta.s-ink .eyebrow::before{background:var(--platinum);}
.cta.s-ink .ilink{color:var(--platinum); text-decoration-color:var(--steel);}
.cta.s-ink .ilink:hover{color:var(--white);}
.cta.s-ink .fine{color:var(--graphite);}

/* Signature line: a property's doctrine as two terms and an arrow */
.signature{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  font-family:var(--display); font-size:11px; font-weight:700;
  letter-spacing:0.26em; text-transform:uppercase; line-height:1.2;
  color:var(--platinum); margin:0 0 6px;
}
.signature svg{flex:0 0 auto; width:28px; height:11px; color:var(--platinum);}
.s-white .signature,.s-white .signature svg{color:var(--ink-label);}
.signature-lg{
  font-size:clamp(34px, 7vw, 84px); font-weight:800;
  letter-spacing:-0.03em; gap:clamp(14px, 2.6vw, 34px);
  color:var(--white); margin:0 0 clamp(36px, 5vw, 56px);
}
.signature-lg .from{color:var(--graphite);}
.signature-lg .arrow{color:var(--platinum); font-weight:300;}
.s-white .signature-lg{color:var(--ink);}
.s-white .signature-lg .from{color:var(--ink-label);}
.s-white .signature-lg .arrow{color:var(--slate);}
.js .signature.rv .arrow,.js .signature.rv svg{transform:translateX(-14px); opacity:0; transition:transform 1s var(--ease) .35s, opacity 1s var(--ease) .35s;}
.js .signature.rv.in .arrow,.js .signature.rv.in svg{transform:none; opacity:1;}

/* Hero motif: a property's own line drawing in place of the lattice */
.motif{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.motif svg{width:100%; height:100%; stroke:rgba(255,255,255,0.075);}
.cta:not(.s-ink) .motif svg,.s-white .motif svg{stroke:rgba(10,10,10,0.07);}

/* Specification list: label and value on one hairline row */
.specs{margin:0; border-top:1px solid var(--rule-dark);}
.specs > div{display:flex; flex-wrap:wrap; gap:6px 28px; padding:17px 0; border-bottom:1px solid var(--rule-dark);}
.specs dt{
  flex:0 0 190px; padding-top:3px;
  font-family:var(--display); font-size:10.5px; font-weight:600;
  letter-spacing:0.19em; text-transform:uppercase; color:var(--graphite);
}
.specs dd{flex:1 1 260px; margin:0; font-size:15px; line-height:1.7; color:var(--white);}
.s-white .specs,.s-white .specs > div{border-color:var(--rule-light);}
.s-white .specs dt{color:var(--ink-label);}
.s-white .specs dd{color:var(--ink);}

/* A labelled group inside a form */
.form-legend{
  font-family:var(--display); font-size:10.5px; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-label);
  margin:10px 0 16px; padding-top:22px; border-top:1px solid var(--rule-light);
}

/* Footer name set as type, for properties whose logo is the mark alone */
.footer-name{
  font-family:var(--display); font-size:11.5px; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--white);
}

/* A dropdown dismissed with Escape stays closed until the pointer or focus
   leaves it (hover and focus-within would otherwise hold it open). */
.nav-item.dismissed .nav-drop-panel{opacity:0; visibility:hidden; transform:translateY(-4px);}
.nav-item.dismissed .nav-drop-caret{transform:rotate(45deg);}

/* --------------------------------------------------------------- site search
   The header button (added by site.js). The dialog it opens is styled in
   search.css, loaded with the search itself. */
.ss-group{display:flex; align-items:center; gap:14px; flex:0 0 auto;}
.ss-btn{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:38px; height:38px; margin:0; padding:0;
  background:transparent; border:1px solid var(--rule-dark); border-radius:0;
  color:var(--steel); cursor:pointer;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.ss-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;}
.ss-btn:hover,.ss-btn:focus-visible{color:var(--white); border-color:var(--steel);}
.ss-btn:focus-visible{outline:2px solid var(--platinum); outline-offset:2px;}
@media (max-width:1100px){
  .ss-group{margin-left:auto;}
  .site-header .wrap > .ss-group + .nav-toggle{margin-left:-14px;}
}
@media print{ .ss-group{display:none !important;} }
/* MCG's nav is the longest in the family. Between the menu breakpoint and
   1280px the header tightens its spacing a little so the nav, search, and
   the call to action all fit on one line. */
@media (min-width:1101px) and (max-width:1279px){
  .site-header .wrap{gap:18px;}
  .nav{gap:14px;}
  .nav a,.nav-item > .nav-drop-trigger{letter-spacing:0.1em;}
  .ss-group{gap:10px;}
  .ss-btn{width:34px; height:34px;}
  .header-cta{padding:11px 15px; letter-spacing:0.12em; text-indent:0.12em;}
}
/* With UnrivaledMCG in the nav, the widest desktop layout also tightens a
   little so the nav and the call to action keep one line. */
@media (min-width:1280px){ .nav{gap:22px;} }
@media (min-width:1101px) and (max-width:1279px){
  .site-header .wrap{gap:14px;}
  .nav{gap:12px;}
}
/* A dropdown holding the current page reads as current too. */
.nav-item.is-current > .nav-drop-trigger{color:var(--white);}
.nav-item.is-current > .nav-drop-trigger::after{right:0;}