/* ==========================================================================
   Mashman Consulting Group
   Design system: canonical-facts.json v3.1
   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;}
.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 h4{
  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 h4{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);}
.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 */

.rv{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.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;}
}

@media (max-width:880px){
  .nav,.header-cta{display:none;}
  .nav-toggle{display:flex;}
  .brand-name{display:none;}
  .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);
}