/* Immortal Power, concept rebuild */

:root{
  --ink:#0A0A0B;
  --ink-2:#101013;
  --ink-3:#17171c;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(10,10,11,.14);
  --bone:#F2EFE9;
  --bone-2:#E3DED4;
  --red:#C8102E;
  --red-hi:#E4162F;
  /* small red text on dark surfaces only. #C8102E scores 3.36:1 on --ink,
     which fails WCAG AA under 24px. This clears 4.5:1 on ink, ink-2 and ink-3
     (5.40 / 5.18 / 4.87). Keep --red for fills, big type, and anything on bone. */
  --red-txt:#FF2D4A;
  --txt:#EDEBE7;
  --mut:rgba(237,235,231,.60);
  --mut-ink:rgba(10,10,11,.62);
  --nav-h:74px;
  --gut:clamp(20px,5vw,72px);
  --max:1320px;
  --ease:cubic-bezier(.16,.84,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--nav-h) + 14px)}
a,button{-webkit-tap-highlight-color:rgba(200,16,46,.22)}
body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.62;
  font-variation-settings:'wdth' 100,'wght' 400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

::selection{background:var(--red);color:#fff}

/* ---------- type ---------- */
.d1,.d2,.d3,.d4{
  font-family:"Archivo",sans-serif;
  text-transform:uppercase;
  font-variation-settings:'wdth' 116,'wght' 800;
  line-height:.9;
  letter-spacing:-.014em;
  margin:0;
}
.d1{font-size:clamp(44px,7.6vw,104px)}
.d2{font-size:clamp(31px,4.1vw,58px)}
.d3{font-size:clamp(25px,3.1vw,44px)}
.d4{font-size:clamp(19px,1.7vw,25px);font-variation-settings:'wdth' 110,'wght' 750;line-height:1.06}

.serif{font-family:"Instrument Serif",Georgia,serif;text-transform:none;font-style:italic;font-variation-settings:normal;letter-spacing:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.22em;
  font-variation-settings:'wdth' 100,'wght' 650;
  color:var(--mut);margin:0 0 22px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--red);flex:none}
.eyebrow.on-bone{color:var(--mut-ink)}

.lede{font-size:clamp(16.5px,1.35vw,20px);line-height:1.6;color:var(--mut);max-width:56ch}
.lede.on-bone{color:var(--mut-ink)}
.red{color:var(--red)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
.pad{padding-block:clamp(72px,9vw,132px)}
.bone{background:var(--bone);color:var(--ink)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.bone .rule{background:var(--line-2)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 26px;border:0;cursor:pointer;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 700;
  background:var(--red);color:#fff;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),background .25s;
}
.btn span{position:relative;z-index:1}
.btn .arw{position:relative;z-index:1;transition:transform .35s var(--ease)}
.btn:hover{background:var(--red-hi)}
.btn:hover .arw{transform:translateX(5px)}
.btn.ghost{background:transparent;color:var(--txt);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--txt);background:rgba(255,255,255,.05)}
.bone .btn.ghost{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(10,10,11,.24)}
.bone .btn.ghost:hover{background:rgba(10,10,11,.05);box-shadow:inset 0 0 0 1px var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .3s,backdrop-filter .3s,box-shadow .3s,height .3s;
}
.hdr.stuck{background:rgba(10,10,11,.82);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--line);height:62px}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:24px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.mark{
  width:38px;height:38px;flex:none;border-radius:50%;
  background-image:url("https://images.squarespace-cdn.com/content/v1/68b5da23b3b25c383c771091/5af921c5-1117-4d2d-8780-0ccf4afad9ab/Logo+Website.png");
  background-repeat:no-repeat;
  background-size:189px 48px;
  background-position:-1px -6px;
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
}
.brand b{
  font-size:16px;text-transform:uppercase;letter-spacing:.04em;
  font-variation-settings:'wdth' 112,'wght' 800;line-height:1;
}
.brand small{display:block;font-size:9.5px;letter-spacing:.24em;color:var(--mut);margin-top:3px;font-variation-settings:'wdth' 100,'wght' 500}

.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav a{
  font-size:12px;text-transform:uppercase;letter-spacing:.15em;
  font-variation-settings:'wdth' 100,'wght' 600;color:var(--mut);
  position:relative;padding-block:6px;transition:color .2s;
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--txt)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.hdr .btn{padding:13px 20px;font-size:11px}

/* gap:6 + 2px bars puts the rows exactly 8px apart, so the open state can
   translate the outer two by 8px and land them on top of each other. */
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0;place-items:center;align-content:center;gap:6px}
.burger i{display:block;width:22px;height:2px;background:var(--txt);transition:transform .3s var(--ease),opacity .2s}
.nav-open .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-open .burger i:nth-child(2){opacity:0}
.nav-open .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- hero ---------- */
.navcta{display:none}
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;padding-top:var(--nav-h)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;filter:grayscale(.35) contrast(1.08) brightness(.78);transform:scale(1.06);animation:slowzoom 22s var(--ease) forwards}
@keyframes slowzoom{to{transform:scale(1)}}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,10,11,.86) 0%,rgba(10,10,11,.28) 34%,rgba(10,10,11,.72) 74%,var(--ink) 100%),
    linear-gradient(90deg,rgba(10,10,11,.88) 0%,rgba(10,10,11,.30) 62%,rgba(10,10,11,.05) 100%);
}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero-copy{padding-block:clamp(40px,7vw,80px) clamp(28px,4vw,44px)}
.hero .d1{max-width:14ch}
.hero .d1 em{font-style:normal;display:block}
.hero .lede{margin:26px 0 34px;max-width:44ch}

.rail{
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.rail div{padding:24px 0 30px;border-left:1px solid var(--line);padding-left:22px;display:flex;flex-direction:column;justify-content:space-between}
.rail div:first-child{border-left:0;padding-left:0}
.rail b{display:block;font-size:clamp(24px,2.5vw,34px);font-variation-settings:'wdth' 114,'wght' 800;line-height:1;letter-spacing:-.02em}
.rail span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-top:9px}

/* ---------- marquee ---------- */
.mq{background:var(--red);color:#fff;overflow:hidden;padding:15px 0;border-block:1px solid rgba(0,0,0,.18)}
.mq-in{display:flex;width:max-content;animation:mqroll 34s linear infinite}
.mq span{
  font-size:clamp(15px,1.6vw,21px);text-transform:uppercase;
  font-variation-settings:'wdth' 112,'wght' 800;letter-spacing:.02em;
  padding-inline:26px;white-space:nowrap;display:flex;align-items:center;gap:26px;
}
.mq span::after{content:"";width:7px;height:7px;background:rgba(255,255,255,.7);border-radius:50%}
@keyframes mqroll{to{transform:translateX(-50%)}}

/* ---------- section head ---------- */
.shead{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.62fr 1fr;gap:clamp(24px,4vw,60px);align-items:end;margin-bottom:clamp(38px,5vw,66px)}
.shead .d2{max-width:none}
.shead .lede{margin:0}

/* ---------- numbered rows ---------- */
.rows{border-top:1px solid var(--line-2)}
.row{
  display:grid;grid-template-columns:88px 1fr 1.1fr;gap:clamp(18px,3vw,46px);
  padding:clamp(26px,3.4vw,44px) 0;border-bottom:1px solid var(--line-2);align-items:start;
}
.row .num{
  font-size:clamp(40px,4.4vw,64px);line-height:.8;
  font-variation-settings:'wdth' 116,'wght' 800;
  color:transparent;-webkit-text-stroke:1.4px rgba(10,10,11,.32);
}
.row p{margin:0;color:var(--mut-ink);font-size:15.5px}
.dark .rows{border-color:var(--line)}
.dark .row{border-color:var(--line)}
.dark .row .num{-webkit-text-stroke-color:rgba(255,255,255,.28)}
.dark .row p{color:var(--mut)}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.split.rev .fig{order:2}
.fig{position:relative;overflow:hidden;background:var(--ink-3)}
.fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 1.1s var(--ease)}
.fig:hover img{transform:scale(1.045)}
.fig.tall img{aspect-ratio:3/4}
.fig .tag{
  position:absolute;left:0;bottom:0;background:var(--red);color:#fff;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:10px 16px;
  font-variation-settings:'wdth' 100,'wght' 700;
}

/* ---------- program cards ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.card{position:relative;overflow:hidden;background:var(--ink-3);display:block;min-height:clamp(380px,42vw,540px);isolation:isolate}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.5) brightness(.62);transition:transform 1.2s var(--ease),filter .6s}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.18) 0%,rgba(10,10,11,.42) 40%,rgba(10,10,11,.86) 72%,rgba(10,10,11,.95) 100%);z-index:1}
.card:hover img{transform:scale(1.06);filter:grayscale(0) brightness(.7)}
.card-body{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,3vw,40px);color:var(--txt)}
.card-body .d3{color:var(--txt);font-size:clamp(23px,2.5vw,36px)}
.card-body p{color:rgba(237,235,231,.76);font-size:15px;margin:14px 0 22px;max-width:44ch}
.card-link{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-variation-settings:'wdth' 100,'wght' 700;color:#fff}
.card-link i{width:26px;height:1px;background:var(--red);display:block;transition:width .4s var(--ease)}
.card:hover .card-link i{width:46px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.step{border-top:2px solid var(--red);padding-top:22px}
.step b{display:block;font-size:12px;letter-spacing:.2em;color:var(--red-txt);margin-bottom:14px;font-variation-settings:'wdth' 100,'wght' 700}
.step p{color:var(--mut);font-size:15px;margin:12px 0 0}
.bone .step p{color:var(--mut-ink)}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.tier{background:var(--ink);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;position:relative;transition:background .3s}
.tier:hover{background:var(--ink-3)}
.tier.hot{background:var(--ink-3)}
.tier .flag{position:absolute;top:0;right:0;background:var(--red);color:#fff;font-size:10px;letter-spacing:.16em;padding:6px 12px;text-transform:uppercase;font-variation-settings:'wdth' 100,'wght' 700}
.tier h3{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);font-variation-settings:'wdth' 100,'wght' 650}
.tier .amt{font-size:clamp(36px,3.6vw,52px);font-variation-settings:'wdth' 114,'wght' 800;line-height:1;letter-spacing:-.03em;margin:22px 0 4px}
.tier .amt sup{font-size:.42em;vertical-align:super;font-variation-settings:'wdth' 100,'wght' 600;letter-spacing:0}
.tier .per{font-size:13px;color:var(--mut);margin:0 0 20px}
.tier .each{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red-txt);font-variation-settings:'wdth' 100,'wght' 700;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}

.incl{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);margin-top:clamp(28px,3vw,44px)}
.incl li{list-style:none;font-size:14px;color:var(--mut);padding-top:16px;border-top:1px solid var(--line)}
.incl li b{display:block;color:var(--txt);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;font-variation-settings:'wdth' 100,'wght' 700}
.incl{padding:0;margin-inline:0}

/* ---------- quotes ---------- */
.quotes{columns:3;column-gap:clamp(16px,2vw,26px)}
.q{
  break-inside:avoid;margin:0 0 clamp(16px,2vw,26px);
  background:var(--ink-3);padding:clamp(24px,2.4vw,34px);
  border-left:2px solid var(--red);
}
.bone .q{background:#fff;border-left-color:var(--red)}
.q p{margin:0 0 20px;font-size:15.5px;line-height:1.62}
.bone .q p{color:rgba(10,10,11,.82)}
.q .who{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:16px}
.bone .q .who{border-color:var(--line-2)}
.q .who b{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-variation-settings:'wdth' 100,'wght' 700}
.q .who span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.bone .q .who span{color:var(--mut-ink)}
.stars{color:var(--red-txt);letter-spacing:.14em;font-size:12px;margin-bottom:14px}
/* --red-txt is tuned for the dark surfaces and goes washy on bone.
   Anywhere these labels land on a light section, fall back to the brand red. */
.bone .stars,.bone .step b,.bone .tier .each,.bone .res a .go{color:var(--red)}

/* ---------- testimonial carousel ---------- */
.qwrap{position:relative}
.qrail{
  display:flex;gap:clamp(14px,1.6vw,22px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  padding-bottom:6px;scrollbar-width:none;
}
.qrail::-webkit-scrollbar{display:none}
.qrail .q{
  flex:0 0 clamp(268px,32%,400px);margin:0;
  scroll-snap-align:start;display:flex;flex-direction:column;
}
.qrail .q p{flex:1}
.qnav{display:flex;gap:8px;margin-top:22px}
.qnav button{
  width:46px;height:46px;flex:none;cursor:pointer;
  background:transparent;color:var(--txt);
  border:1px solid var(--line);
  display:grid;place-items:center;
  transition:background .25s,border-color .25s,opacity .25s;
}
.bone .qnav button{color:var(--ink);border-color:var(--line-2)}
.qnav button:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.qnav button:disabled{opacity:.3;cursor:default}
.qnav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.qcount{margin-left:auto;align-self:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.bone .qcount{color:var(--mut-ink)}

/* ---------- resources ---------- */
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.res a{background:var(--ink);padding:clamp(26px,2.8vw,38px);display:flex;flex-direction:column;min-height:270px;transition:background .3s}
.res a:hover{background:var(--ink-3)}
.res a p{color:var(--mut);font-size:14.5px;margin:14px 0 0}
.res a .go{margin-top:auto;padding-top:26px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--red-txt);font-variation-settings:'wdth' 100,'wght' 700}

/* ---------- cta band ---------- */
.cta{position:relative;overflow:hidden;text-align:center}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.32)}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink),rgba(10,10,11,.55) 45%,var(--ink))}
.cta .wrap{position:relative;z-index:2}
.cta .btns{justify-content:center;margin-top:32px}
.cta .lede{margin:20px auto 0;text-align:center}

/* ---------- footer ---------- */
.ftr{background:var(--ink-2);border-top:1px solid var(--line);padding-block:clamp(48px,6vw,80px) 30px}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px)}
.ftr .ftrh{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:0 0 18px;font-variation-settings:'wdth' 100,'wght' 650}
.ftr p,.ftr li{margin:0 0 8px;font-size:14.5px;color:var(--mut)}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr a:hover{color:var(--txt)}
.ftr .logo-lockup{background:var(--bone);padding:14px 18px;display:inline-block;margin-bottom:20px}
/* reserve the box so the footer doesn't jump when the logo lands */
.ftr .logo-lockup img{width:210px;aspect-ratio:750/191;object-fit:contain}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:40px;height:40px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,box-shadow .25s}
.socials a:hover{background:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.socials svg{width:17px;height:17px;fill:currentColor}
.ftr-btm{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:clamp(36px,4vw,56px);padding-top:22px;font-size:12px;color:var(--mut)}

/* ---------- page hero (inner pages) ---------- */
.phero{padding-top:calc(var(--nav-h) + clamp(56px,7vw,96px));padding-bottom:clamp(40px,5vw,72px);position:relative;overflow:hidden}
.phero-bg{position:absolute;inset:0;z-index:0}
.phero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.34)}
.phero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.85),rgba(10,10,11,.55) 50%,var(--ink))}
.phero .wrap{position:relative;z-index:1}
.phero .lede{margin-top:22px;max-width:52ch}
.phero .d1{font-size:clamp(40px,6.3vw,84px)}

/* ---------- contact ---------- */
.cgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,72px)}
.field{margin-bottom:18px}
.field label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:9px;font-variation-settings:'wdth' 100,'wght' 650}
.field input,.field textarea{
  width:100%;background:var(--ink-3);border:1px solid var(--line);color:var(--txt);
  padding:15px 16px;font:inherit;font-size:15px;transition:border-color .25s,background .25s;
}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--red);background:#131318}
.field textarea{min-height:150px;resize:vertical}
.field input.bad,.field textarea.bad{border-color:var(--red-txt);background:rgba(200,16,46,.07)}
.field .err{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--red-txt);min-height:0}
.field .err:empty{display:none}
/* honeypot. off screen rather than display:none so bots still fill it. */
.gotcha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{margin:18px 0 0;font-size:13.5px;line-height:1.5}
.formnote:empty{display:none}
.formnote.bad{color:var(--red-txt)}
.formnote.good{color:var(--txt);border-left:2px solid var(--red);padding-left:14px}
button[type="submit"]:disabled{opacity:.55;cursor:default}
:focus-visible{outline:2px solid var(--red-txt);outline-offset:3px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.info li{list-style:none;padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:baseline}
.info{padding:0;margin:0;border-top:1px solid var(--line)}
.info b{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);font-variation-settings:'wdth' 100,'wght' 650}
.info span{font-size:15.5px}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px)}
.gal img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(.6) brightness(.85);transition:filter .5s,transform .9s var(--ease)}
/* position + isolation force a paint layer so the hover scale can't bleed past the crop */
.gal a{overflow:hidden;display:block;position:relative;isolation:isolate}
.gal a:hover img{filter:none;transform:scale(1.05)}
.gal .w2{grid-column:span 2}
.gal-3{grid-template-columns:repeat(3,1fr)}
/* these three illustrate the actual steps, so keep them in colour and keep faces in frame */
.gal-3 img{aspect-ratio:4/3;filter:none;object-position:50% 35%}

/* ---------- prose ---------- */
.prose{max-width:70ch}
.prose h2{font-size:clamp(19px,1.7vw,25px);text-transform:uppercase;font-variation-settings:'wdth' 110,'wght' 750;letter-spacing:-.01em;margin:44px 0 12px;line-height:1.1}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--mut);margin:0 0 16px}
.prose .pull{
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-size:clamp(21px,2.2vw,30px);line-height:1.35;color:var(--txt);
  border-left:2px solid var(--red);padding-left:24px;margin:34px 0;
}
.bone .prose p{color:var(--mut-ink)}
.bone .prose .pull{color:var(--ink)}
.prose a{color:var(--txt);border-bottom:1px solid var(--red-txt);transition:color .2s,border-color .2s}
.prose a:hover{color:var(--red-txt)}

/* ---------- legal pages ---------- */
.draftnote{
  border:1px solid var(--line);border-left:3px solid var(--red);
  background:var(--ink-2);padding:22px 24px;margin-bottom:clamp(38px,5vw,58px);max-width:70ch;
}
.draftnote b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-txt);margin-bottom:10px;font-variation-settings:'wdth' 100,'wght' 700}
.draftnote p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mut)}

/* ---------- 404 ---------- */
.nf{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-bottom:clamp(60px,8vw,110px)}
.nflinks{
  list-style:none;padding:18px 0 0;margin:34px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:0 30px;
}
.nflinks a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:12px;text-transform:uppercase;letter-spacing:.15em;
  font-variation-settings:'wdth' 100,'wght' 600;color:var(--mut);transition:color .2s;
}
.nflinks a:hover{color:var(--txt)}

/* ---------- footer legal row ---------- */
/* negative margin pulls the row back in so the bigger tap target adds no height */
.ftr-btm .legal{display:flex;gap:20px;margin:-11px 0}
.ftr-btm .legal a{display:inline-flex;align-items:center;min-height:44px;transition:color .2s}
.ftr-btm .legal a:hover{color:var(--txt)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .quotes{columns:2}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .incl{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .res{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav{
    position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--ink);padding:8px var(--gut) 30px;
    border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--ease);
  }
  .nav a{width:100%;padding:17px 0;border-bottom:1px solid var(--line);font-size:15px;letter-spacing:.1em}
  .nav a::after{display:none}
  .nav .navcta{display:inline-flex;width:auto;margin-top:22px;border-bottom:0;padding:15px 24px;font-size:12px;letter-spacing:.16em}
  .nav-open .nav{clip-path:inset(0 0 0 0)}
  .nav-open .hdr{background:var(--ink)}
  .nav-open{overflow:hidden}
  .burger{display:grid}
  .hdr .btn:not(.navcta){display:none}
  .hero-copy{max-width:none}
  .rail{grid-template-columns:1fr 1fr}
  .rail div{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .rail div:nth-child(-n+2){border-top:0}
  .rail div:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
  .shead{grid-template-columns:1fr;align-items:start}
  .row{grid-template-columns:60px 1fr;row-gap:10px}
  .row .num{grid-row:span 2}
  .split,.cards,.steps,.cgrid{grid-template-columns:1fr}
  .split.rev .fig{order:0}
  .quotes{columns:1}
  .tiers{grid-template-columns:1fr}
  .incl{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .info li{grid-template-columns:1fr;gap:6px}
  /* the wide tile carries an inline 2/1 ratio, so squeezing it into one column
     left an 84px black gap under it. Let it keep the full row instead. */
  .gal .w2{grid-column:span 2}
}

/* ---------- phones ---------- */
@media (max-width:560px){
  :root{--gut:22px;--nav-h:66px}
  body{font-size:16px;line-height:1.6}

  /* type: floors must stay low enough that the longest word still fits at 320px */
  .d1{font-size:clamp(25px,8.4vw,104px);letter-spacing:-.02em}
  .d2{font-size:clamp(21px,6.9vw,58px);letter-spacing:-.02em}
  .d3{font-size:22px}
  .d4{font-size:18px}
  .phero .d1{font-size:clamp(23px,8vw,84px)}
  .lede{font-size:16.5px;line-height:1.58}
  .eyebrow{font-size:11px;letter-spacing:.2em;margin-bottom:16px}
  .eyebrow::before{width:24px}

  .pad{padding-block:64px}
  .hero-copy{padding-block:34px 26px}
  .hero .lede{margin:20px 0 28px}
  .phero{padding-top:calc(var(--nav-h) + 46px);padding-bottom:38px}

  /* full-width stacked buttons, thumb sized */
  .btns{flex-direction:column;align-items:stretch;gap:10px}
  .btns .btn{width:100%;justify-content:center;text-align:center;padding:18px 18px;font-size:12px;letter-spacing:.12em;line-height:1.25}
  .cta .btns{align-items:stretch}

  .brand{padding-block:4px;gap:10px}
  .brand b{font-size:15px}
  .mark{width:34px;height:34px;background-size:169px 43px;background-position:-1px -5px}

  .rail div{padding:18px 0 22px}
  .rail div:nth-child(even){padding-left:18px}
  .rail b{font-size:22px}
  .rail span{font-size:10px;letter-spacing:.13em;margin-top:6px}

  .row{grid-template-columns:48px 1fr;gap:14px;padding:22px 0}
  .row .num{font-size:32px}
  .row p,.q p,.dark .row p{font-size:15.5px}

  .card{min-height:340px}
  .card-body{padding:22px}
  .split{gap:26px}
  .fig.tall img{aspect-ratio:4/5}
  .steps{gap:26px}
  .incl li{font-size:15px}
  .gal{grid-template-columns:repeat(2,1fr)}
  /* the three step photos need to stay legible, so stack them */
  .gal-3{grid-template-columns:1fr;gap:10px}
  .gal-3 img{aspect-ratio:5/4}
  /* let the next card peek so it reads as swipeable */
  .qrail{gap:12px}
  .qrail .q{flex:0 0 84%;padding:22px}
  .qnav{margin-top:18px}

  /* 16px stops iOS Safari zooming the page on focus */
  .field input,.field textarea{font-size:16px;padding:16px}
  .field textarea{min-height:132px}

  .socials a{width:44px;height:44px}
  .socials{gap:8px}
  .ftr li{margin:0}
  .ftr li a,.ftr p a{display:inline-block;padding-block:11px}
  .info li{padding:14px 0}
  .info span a{display:inline-flex;align-items:center;min-height:44px}
  .ftr .logo-lockup img{width:180px}
  .ftr-btm{font-size:11.5px;gap:6px}
}

/* ---------- sticky mobile action bar ---------- */
.mobar{display:none}
@media (max-width:860px){
  .mobar{
    display:grid;grid-template-columns:1fr 1.35fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:95;
    background:var(--line);
    border-top:1px solid rgba(255,255,255,.14);
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(105%);transition:transform .4s var(--ease);
  }
  .mobar.up{transform:none}
  .mobar a{
    display:flex;align-items:center;justify-content:center;gap:9px;
    min-height:56px;padding:0 14px;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    font-variation-settings:'wdth' 100,'wght' 700;
    background:rgba(16,16,19,.97);color:var(--txt);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  }
  .mobar a.p{background:var(--red);color:#fff}
  .mobar a:active{filter:brightness(1.18)}
  .mobar svg{width:16px;height:16px;fill:currentColor;flex:none}
  .nav-open .mobar{transform:translateY(105%)}
  .ftr{padding-bottom:96px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}