/* ==========================================================================
   SENTINEL CREATIVE MARKETING
   Editorial system — warm paper canvas, ink sections, one variable family.

   Type: Archivo Variable. Display uses the width axis expanded (112–118%)
   at heavy weight; body runs at normal width. One file, whole hierarchy.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* surfaces */
  --paper:#F7F5F0;
  --paper-2:#EFEBE2;
  --paper-3:#E7E2D6;
  --ink:#14110F;
  --ink-2:#1F1B18;
  --ink-3:#2C2723;

  /* type on paper */
  --text:#14110F;
  --text-2:#4A443D;
  --text-3:#8A8078;

  /* type on ink */
  --on-ink:#F4F1EA;
  --on-ink-2:#B0A89E;
  --on-ink-3:#7D7570;

  /* lines */
  --rule:#DCD5C8;
  --rule-2:#C7BFAF;
  --rule-ink:#3A342E;

  --accent:#B8472D;
  --accent-2:#983A24;
  --accent-wash:rgba(184,71,45,.07);
  --live:#4C7A52;

  --font:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1280px;
  --narrow:820px;
  --gutter:clamp(20px,5vw,64px);
  --nav-h:96px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  font-variation-settings:'wght' 400,'wdth' 100;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* paper grain — tactile, kills the flat-template read */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--accent);color:var(--paper);}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px;}

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

/* ---------- 2. LAYOUT ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2;}
.narrow{max-width:var(--narrow);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2;}
section{position:relative;}
.sec{padding:clamp(72px,10vw,140px) 0;}
.sec-sm{padding:clamp(52px,6vw,84px) 0;}
.rule-top{border-top:1px solid var(--rule);}

/* inverted sections */
.ink{background:var(--ink);color:var(--on-ink);}
.ink h1,.ink h2,.ink h3,.ink h4{color:var(--on-ink);}
.ink p{color:var(--on-ink-2);}
.ink .rule-top,.ink .rule{border-color:var(--rule-ink);}
.ink .kicker{color:var(--on-ink-3);}
.ink .lede{color:var(--on-ink-2);}

.paper-2{background:var(--paper-2);}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--paper);padding:14px 22px;
  font-size:13px;font-variation-settings:'wght' 600;
}
.skip-link:focus{left:0;}

/* ---------- 3. TYPE ---------- */
h1,h2,h3,h4{
  font-family:var(--font);
  line-height:1.02;
  letter-spacing:-.025em;
  font-variation-settings:'wght' 680,'wdth' 116;
  text-wrap:balance;
}
h1{font-size:clamp(3rem,8.4vw,7.2rem);letter-spacing:-.035em;}
h2{font-size:clamp(2.1rem,5.2vw,4.1rem);letter-spacing:-.03em;}
h3{font-size:clamp(1.25rem,2.1vw,1.7rem);letter-spacing:-.02em;font-variation-settings:'wght' 620,'wdth' 108;line-height:1.14;}
h4{font-size:1.08rem;letter-spacing:-.012em;font-variation-settings:'wght' 620,'wdth' 104;line-height:1.25;}

p{max-width:64ch;}
strong,b{font-variation-settings:'wght' 620,'wdth' 100;}
em{font-style:italic;}

.kicker{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-variation-settings:'wght' 600,'wdth' 100;
  color:var(--text-3);display:block;margin-bottom:22px;
}
.kicker-rule{
  display:flex;align-items:center;gap:14px;
}
.kicker-rule::after{content:"";height:1px;flex:1;background:var(--rule);}
.ink .kicker-rule::after{background:var(--rule-ink);}

.lede{
  font-size:clamp(1.08rem,1.7vw,1.32rem);
  line-height:1.55;color:var(--text-2);max-width:52ch;
  font-variation-settings:'wght' 400,'wdth' 100;
}
.muted{color:var(--text-3);}
.accent{color:var(--accent);}

/* display numeral */
.numeral{
  font-variation-settings:'wght' 500,'wdth' 78;
  font-size:clamp(3.4rem,7vw,6rem);line-height:.86;
  letter-spacing:-.04em;color:var(--accent);display:block;
}

.section-head{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);align-items:end;
  margin-bottom:clamp(40px,5vw,72px);
}
.section-head .tag{color:var(--text-2);font-size:.98rem;max-width:42ch;}
.ink .section-head .tag{color:var(--on-ink-2);}
@media (max-width:880px){
  .section-head{grid-template-columns:1fr;align-items:start;gap:18px;}
}

/* ---------- 4. HEADER ---------- */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:200;
  transition:background .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
/* The frosted layer lives on a pseudo-element, NOT on header.site itself.
   backdrop-filter makes an element a containing block for fixed-position
   descendants, and the mobile drawer is a fixed child of this header. With
   the filter on the header, the drawer's `top:var(--nav-h); bottom:0`
   resolved against the 96px header box instead of the viewport, so the
   moment the page scrolled and .scrolled was added the drawer computed to
   zero height — it opened only at the very top of the page. Keeping the
   filter one level down preserves the effect and leaves the viewport as the
   drawer's containing block. Do not move background/backdrop-filter back
   onto header.site. */
header.site::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:transparent;
  transition:background .35s var(--ease);
}
header.site.scrolled::before{
  background:rgba(247,245,240,.88);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
header.site.scrolled{
  border-bottom-color:var(--rule);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;height:var(--nav-h);}

.brand{display:flex;align-items:center;gap:15px;flex:none;}
.brand-word{
  font-size:21px;letter-spacing:-.02em;line-height:1;
  font-variation-settings:'wght' 690,'wdth' 110;
}
.brand-word small{
  display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-3);margin-top:5px;
  font-variation-settings:'wght' 500,'wdth' 100;
}

nav.primary > ul{list-style:none;display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);}
nav.primary > ul > li > a{
  font-size:14px;color:var(--text-2);position:relative;padding:4px 0;
  font-variation-settings:'wght' 500,'wdth' 100;
  transition:color .25s var(--ease);white-space:nowrap;display:inline-flex;
}
nav.primary > ul > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--out);
}
nav.primary > ul > li > a:hover,nav.primary > ul > li > a.active{color:var(--text);}
nav.primary > ul > li > a:hover::after,
nav.primary > ul > li > a.active::after{transform:scaleX(1);transform-origin:left;}

.nav-right{display:flex;align-items:center;gap:16px;flex:none;}

.menu-toggle{
  display:none;background:none;border:none;cursor:pointer;
  width:40px;height:40px;position:relative;flex:none;
}
.menu-toggle span{
  position:absolute;left:8px;right:8px;height:1.6px;background:var(--ink);
  transition:transform .35s var(--ease),opacity .2s;
}
.menu-toggle span:nth-child(1){top:14px;}
.menu-toggle span:nth-child(2){top:20px;}
.menu-toggle span:nth-child(3){top:26px;}
body.nav-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.nav-open .menu-toggle span:nth-child(2){opacity:0;}
body.nav-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width:1000px){
  /* drawer + mega-menu rules live in section 23 */
  .menu-toggle{display:block;}
}
@media (max-width:560px){
  .nav-right .btn{display:none;}
}

/* ---------- 5. BUTTONS & LINKS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:14.5px;font-variation-settings:'wght' 560,'wdth' 100;
  padding:15px 30px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:color .32s var(--ease),border-color .32s var(--ease),transform .3s var(--out);
  line-height:1;background:none;color:var(--text);text-align:center;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  transform:translateY(101%);transition:transform .42s var(--out);
}
.btn:hover::before{transform:translateY(0);}
.btn:active{transform:scale(.98);}
.btn .ar{transition:transform .32s var(--out);display:inline-block;}
.btn:hover .ar{transform:translateX(4px);}

.btn-solid{background:var(--ink);color:var(--paper);}
.btn-solid::before{background:var(--accent);}
.btn-solid:hover{color:var(--paper);}

.btn-line{border-color:var(--rule-2);color:var(--text);}
.btn-line::before{background:var(--ink);}
.btn-line:hover{color:var(--paper);border-color:var(--ink);}

.btn-accent{background:var(--accent);color:var(--paper);}
.btn-accent::before{background:var(--ink);}
.btn-accent:hover{color:var(--paper);}

.ink .btn-solid{background:var(--paper);color:var(--ink);}
.ink .btn-solid::before{background:var(--accent);}
.ink .btn-solid:hover{color:var(--paper);}
.ink .btn-line{border-color:var(--rule-ink);color:var(--on-ink);}
.ink .btn-line::before{background:var(--paper);}
.ink .btn-line:hover{color:var(--ink);border-color:var(--paper);}

.btn-sm{padding:11px 22px;font-size:13px;}
.btn-block{width:100%;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(28px,4vw,44px);}

/* text link with sweep underline */
.tlink{
  display:inline-flex;align-items:center;gap:8px;position:relative;
  font-size:14.5px;font-variation-settings:'wght' 560,'wdth' 100;
  color:var(--text);padding-bottom:3px;
}
.tlink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.4px;
  background:currentColor;transform-origin:right;transform:scaleX(1);
  transition:transform .4s var(--out);
}
.tlink:hover::after{transform:scaleX(0);transform-origin:left;}
.tlink .ar{transition:transform .32s var(--out);}
.tlink:hover .ar{transform:translateX(5px);}
.tlink-accent{color:var(--accent);}
.ink .tlink{color:var(--on-ink);}

/* ---------- 6. HERO ---------- */
.hero{padding:calc(var(--nav-h) + clamp(56px,11vw,132px)) 0 clamp(56px,8vw,104px);}
.hero-h1{
  margin-bottom:clamp(32px,4vw,52px);
  text-wrap:wrap;                       /* explicit line breaks, no balancing */
  font-size:clamp(2.9rem,8.8vw,7.6rem);
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,5vw,64px);align-items:start;
}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:20px;}}
.hero h1 .line{display:block;overflow:hidden;}
.hero h1 .line > span{display:block;}
.hero-side{display:flex;flex-direction:column;gap:20px;}
.hero-side .lede{font-size:clamp(1.05rem,1.45vw,1.22rem);max-width:46ch;}

.hero-meta{
  display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(40px,6vw,72px);
  border-top:1px solid var(--rule);
}
.hero-meta > div{
  flex:1 1 180px;padding:22px 26px 22px 0;border-right:1px solid var(--rule);
}
.hero-meta > div:last-child{border-right:none;}
.hero-meta span{
  display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:9px;font-variation-settings:'wght' 600,'wdth' 100;
}
.hero-meta b{
  font-size:clamp(1.15rem,1.9vw,1.5rem);letter-spacing:-.025em;
  font-variation-settings:'wght' 620,'wdth' 110;
}
@media (max-width:620px){
  .hero-meta > div{flex:1 1 100%;border-right:none;border-bottom:1px solid var(--rule);padding-right:0;}
  .hero-meta > div:last-child{border-bottom:none;}
}

/* page hero (inner) */
.page-hero{padding:calc(var(--nav-h) + clamp(48px,7vw,92px)) 0 clamp(34px,4vw,56px);}
.page-hero h1{font-size:clamp(2.5rem,6.4vw,5.4rem);margin-bottom:26px;}
.page-hero.ink{background:var(--ink);}

.crumbs{
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:26px;
  font-size:12px;color:var(--text-3);font-variation-settings:'wght' 500,'wdth' 100;
}
.crumbs a{transition:color .2s;}
.crumbs a:hover{color:var(--accent);}
.crumbs .sep{opacity:.4;}
.ink .crumbs{color:var(--on-ink-3);}

/* ---------- 7. MARQUEE ---------- */
.marquee{
  overflow:hidden;max-width:100vw;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:17px 0;display:flex;user-select:none;
}
.ink .marquee,.marquee.on-ink{border-color:var(--rule-ink);}
.marquee ul{
  list-style:none;display:flex;align-items:center;gap:52px;flex:none;
  padding-right:52px;animation:slide 34s linear infinite;
}
.marquee li{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  font-variation-settings:'wght' 560,'wdth' 100;color:var(--text-2);
  display:flex;align-items:center;gap:52px;
}
.marquee li::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;}
.ink .marquee li{color:var(--on-ink-2);}
@keyframes slide{to{transform:translateX(-100%);}}
.marquee:hover ul{animation-play-state:paused;}

/* ---------- 8. MISSION ---------- */
h2.mission-quote{text-transform:none;}
.mission-quote{
  font-size:clamp(1.7rem,4vw,3.15rem);line-height:1.12;letter-spacing:-.03em;
  font-variation-settings:'wght' 500,'wdth' 104;max-width:22ch;
}
.mission-quote em{font-style:normal;color:var(--accent);}
.mission-grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(30px,6vw,86px);align-items:start;
}
@media (max-width:900px){.mission-grid{grid-template-columns:1fr;gap:26px;}}
.mission-body p + p{margin-top:16px;}
.signature{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--rule-ink);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  font-variation-settings:'wght' 600,'wdth' 100;
}

/* ---------- 9. PROMO ROTATOR (vertical) ---------- */
.promo{padding:clamp(28px,3.5vw,52px) 0 clamp(56px,7vw,96px);}
.promo-top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:26px;
}
.promo-top .kicker{margin-bottom:0;}
.promo-shell{
  display:grid;grid-template-columns:minmax(0,1fr) 232px;
  border-top:1px solid var(--rule-ink);border-bottom:1px solid var(--rule-ink);
}
.promo-view{display:grid;overflow:hidden;min-height:250px;position:relative;}
.promo-slide{
  grid-area:1/1;padding:clamp(30px,4vw,48px) clamp(28px,4vw,56px) clamp(30px,4vw,48px) 0;
  display:flex;flex-direction:column;justify-content:center;
  gap:16px;align-items:flex-start;
  opacity:0;transform:translateY(46px);pointer-events:none;
  transition:transform .8s var(--out),opacity .55s var(--out);
}
.promo-slide.is-active{opacity:1;transform:none;pointer-events:auto;}
.promo-num{
  position:absolute;right:clamp(24px,4vw,56px);top:50%;transform:translateY(-50%);
  font-size:clamp(5rem,13vw,11rem);line-height:.8;letter-spacing:-.06em;
  font-variation-settings:'wght' 600,'wdth' 74;
  color:var(--on-ink);opacity:.055;pointer-events:none;user-select:none;
}
@media (max-width:900px){.promo-num{display:none;}}
.promo-slide.is-exit{opacity:0;transform:translateY(-46px);}
.promo-badge{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  font-variation-settings:'wght' 620,'wdth' 100;
  display:inline-flex;align-items:center;gap:10px;
}
.promo-badge::before{content:"";width:22px;height:1px;background:var(--accent);}
.promo-slide h3{
  font-size:clamp(1.5rem,3.3vw,2.7rem);letter-spacing:-.03em;
  font-variation-settings:'wght' 620,'wdth' 112;max-width:22ch;line-height:1.06;
}
.promo-slide p{font-size:1.02rem;max-width:56ch;color:var(--on-ink-2);}

.promo-rail{
  border-left:1px solid var(--rule-ink);
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:22px 0 22px 24px;
}
.promo-tab{
  background:none;border:none;cursor:pointer;text-align:left;padding:9px 0;
  display:flex;align-items:center;gap:13px;color:var(--on-ink-3);
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-variation-settings:'wght' 560,'wdth' 100;transition:color .28s var(--ease);
}
.promo-tab i{
  width:26px;height:2px;background:var(--rule-ink);display:block;flex:none;
  position:relative;overflow:hidden;border-radius:2px;
}
.promo-tab:hover{color:var(--on-ink-2);}
.promo-tab.is-active{color:var(--on-ink);}
.promo-tab.is-active i::after{
  content:"";position:absolute;inset:0;background:var(--accent);border-radius:2px;
  transform-origin:left;transform:scaleX(0);
  animation:fill var(--promo-dur,7s) linear forwards;
}
@keyframes fill{to{transform:scaleX(1);}}
.promo-paused .promo-tab.is-active i::after{animation-play-state:paused;}
.promo-ctrl{
  margin-top:16px;background:none;border:1px solid var(--rule-ink);color:var(--on-ink-3);
  border-radius:999px;padding:8px 15px;cursor:pointer;align-self:flex-start;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:'wght' 560,'wdth' 100;transition:all .25s var(--ease);
}
.promo-ctrl:hover{border-color:var(--accent);color:var(--accent);}

@media (max-width:900px){
  .promo-shell{grid-template-columns:1fr;}
  .promo-slide{padding-right:0;min-height:0;}
  .promo-view{min-height:264px;}
  .promo-rail{
    border-left:none;border-top:1px solid var(--rule-ink);padding:16px 0;
    flex-direction:row;align-items:center;justify-content:space-between;gap:12px;
  }
  .promo-tab{padding:4px 0;}
  .promo-tab span{display:none;}
  .promo-tab i{width:34px;}
  .promo-rail > div{display:flex;gap:10px;}
  .promo-ctrl{margin-top:0;}
}

/* ---------- 10. EDITORIAL ROWS ---------- */
.rows{border-top:1px solid var(--rule);}
.row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(20px,3.5vw,52px);align-items:baseline;
  padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--rule);
  position:relative;transition:padding-left .4s var(--out);
}
.rows.hoverable .row::before{
  content:"";position:absolute;inset:0 calc(-0.5 * var(--gutter));background:var(--paper-2);
  opacity:0;transition:opacity .35s var(--ease);z-index:-1;border-radius:4px;
}
.rows.hoverable .row:hover::before{opacity:1;}
.rows.hoverable .row:hover{padding-left:14px;}
.row-idx{
  font-size:11px;letter-spacing:.13em;color:var(--text-3);
  font-variation-settings:'wght' 600,'wdth' 100;min-width:26px;padding-top:6px;
}
.row-main h3,.row-main h4{
  font-size:1.08rem;letter-spacing:-.012em;line-height:1.25;
  font-variation-settings:'wght' 620,'wdth' 104;margin-bottom:8px;
}
.row-main p{font-size:.96rem;color:var(--text-2);max-width:68ch;}
.row-price{text-align:right;min-width:150px;}
.row-price b{
  display:block;font-size:clamp(1.3rem,2.2vw,1.75rem);letter-spacing:-.03em;
  font-variation-settings:'wght' 620,'wdth' 106;line-height:1.1;
}
.row-price span{
  display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-3);margin-top:7px;font-variation-settings:'wght' 560,'wdth' 100;
}
.row-price .free{color:var(--accent);}
@media (max-width:760px){
  .row{grid-template-columns:auto minmax(0,1fr);gap:16px;}
  .row-price{grid-column:2;text-align:left;min-width:0;margin-top:12px;}
  .row-price b{display:inline;}
  .row-price span{display:inline;margin-left:9px;}
}

/* group heading inside a row list */
.row-group{
  padding:clamp(34px,4vw,52px) 0 14px;border-bottom:1px solid var(--rule);
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.row-group h3{font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.028em;}
.row-group span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
  font-variation-settings:'wght' 560,'wdth' 100;}

/* ---------- 11. CARD GRID (editorial, borderless) ---------- */
.cards{display:grid;gap:clamp(24px,3vw,44px);}
.cards-2{grid-template-columns:repeat(2,1fr);}
.cards-3{grid-template-columns:repeat(3,1fr);}
.cards-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1040px){.cards-4{grid-template-columns:repeat(2,1fr);}.cards-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:660px){.cards-4,.cards-3,.cards-2{grid-template-columns:1fr;}}

.card{
  display:flex;flex-direction:column;gap:12px;
  padding-top:22px;border-top:1.5px solid var(--ink);
  transition:border-color .3s var(--ease);
}
.card:hover{border-top-color:var(--accent);}
.ink .card{border-top-color:var(--on-ink);}
.ink .card:hover{border-top-color:var(--accent);}
.card .code{
  font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--text-3);
  font-variation-settings:'wght' 600,'wdth' 100;
}
.ink .card .code{color:var(--on-ink-3);}
.card p{font-size:.95rem;color:var(--text-2);flex:1;}
.card .price{
  margin-top:8px;font-size:1.28rem;letter-spacing:-.025em;
  font-variation-settings:'wght' 620,'wdth' 106;
}
.card .price small{
  display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-3);margin-top:6px;font-variation-settings:'wght' 560,'wdth' 100;
}
a.card:hover h3{color:var(--accent);}
.card h3{transition:color .25s var(--ease);}

.add-btn{
  margin-top:12px;background:none;border:1px solid var(--rule-2);border-radius:999px;
  padding:11px 18px;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:space-between;gap:10px;width:100%;color:var(--text);
  font-size:12.5px;font-variation-settings:'wght' 560,'wdth' 100;
  transition:all .26s var(--ease);
}
.add-btn:hover{border-color:var(--ink);background:var(--ink);color:var(--paper);}
.add-btn.added{border-color:var(--accent);background:var(--accent);color:var(--paper);}
.ink .add-btn{border-color:var(--rule-ink);color:var(--on-ink);}
.ink .add-btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
/* The featured tier paints itself ink but is not inside an .ink section, so it
   never picked up the rule above and the label rendered invisible. */
.tier.featured .add-btn{border-color:var(--rule-ink);color:var(--on-ink);}
.tier.featured .add-btn .lbl{color:inherit;}
.tier.featured .add-btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.tier.featured .add-btn.added{background:var(--accent);border-color:var(--accent);color:var(--paper);}

/* ---------- 12. STAT STRIP ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);}
@media (max-width:780px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{border-top:1px solid var(--rule);padding-top:18px;}
.ink .stat{border-top-color:var(--rule-ink);}
.stat b{
  display:block;font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.04em;
  font-variation-settings:'wght' 600,'wdth' 92;margin-bottom:10px;
}
.stat b span{font-variation-settings:inherit;font-size:inherit;letter-spacing:inherit;}
.stat > span{
  font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--text-3);
  font-variation-settings:'wght' 560,'wdth' 100;
}
.ink .stat > span{color:var(--on-ink-3);}

/* ---------- 13. TIERS ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,36px);align-items:start;}
@media (max-width:1000px){.tiers{grid-template-columns:1fr;}}
.tier{
  display:flex;flex-direction:column;padding:clamp(28px,3vw,38px);
  border-radius:20px;background:var(--paper-2);height:100%;
  border:1px solid transparent;transition:border-color .3s var(--ease);
}
.tier:hover{border-color:var(--rule-2);}
.tier.featured{background:var(--ink);color:var(--on-ink);border-color:var(--ink);}
.tier.featured h3,.tier.featured .tier-amt{color:var(--on-ink);}
.tier.featured p,.tier.featured li{color:var(--on-ink-2);}
.tier.featured .tier-price,.tier.featured li::before{border-color:var(--rule-ink);}
.tier{position:relative;}
/* The flag sits ABOVE the tier name, in flow. It used to float over the card
   corner, which collided with "Momentum" — a single word too wide to wrap out
   of the way however much padding was reserved. */
.tier-flag{
  /* .tier is a flex column, so inline-block still stretches to full width —
     align-self is what actually shrink-wraps the pill to its label. */
  display:inline-block;align-self:flex-start;margin-bottom:14px;
  background:var(--accent);color:var(--paper);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px;
  font-variation-settings:'wght' 620,'wdth' 100;
}
/* Same height reserved on the unflagged cards so all three names align.
   28px flag box + 14px margin = 42px; keep these two in step if either moves. */
.tier:not(.featured)::before{content:"";display:block;height:42px;}
@media (max-width:1000px){.tier:not(.featured)::before{display:none;}}
.tier-name{font-size:clamp(1.4rem,2.3vw,1.85rem);letter-spacing:-.03em;
  font-variation-settings:'wght' 640,'wdth' 110;margin-bottom:6px;}
.tier-for{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
  font-variation-settings:'wght' 560,'wdth' 100;margin-bottom:26px;}
.tier.featured .tier-for{color:var(--on-ink-3);}
.tier-price{padding:22px 0;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);margin-bottom:24px;}
.tier-from{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);
  display:block;margin-bottom:8px;font-variation-settings:'wght' 600,'wdth' 100;}
.tier.featured .tier-from{color:var(--on-ink-3);}
.tier-amt{font-size:clamp(2.5rem,4.4vw,3.4rem);letter-spacing:-.045em;line-height:1;
  font-variation-settings:'wght' 620,'wdth' 96;}
.tier-per{font-size:15px;color:var(--text-3);margin-left:5px;
  font-variation-settings:'wght' 500,'wdth' 100;}
.tier-terms{display:block;margin-top:12px;font-size:12px;color:var(--text-3);line-height:1.5;}
.tier.featured .tier-terms,.tier.featured .tier-per{color:var(--on-ink-3);}
.tier-sum{font-size:.95rem;color:var(--text-2);margin-bottom:26px;}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px;flex:1;}
.tier li{font-size:.92rem;color:var(--text-2);padding-left:20px;position:relative;line-height:1.5;}
.tier li::before{
  content:"";position:absolute;left:0;top:9px;width:9px;height:1.5px;background:var(--accent);
}
.tier li.off{opacity:.62;color:var(--text-3);}
/* Not-included rows must READ as not-included, not merely look faded — a
   skimmer who reads a 45%-opacity line as included buys the wrong tier. */
.tier li.off::before{background:var(--text-3);opacity:.7;}
.tier li.off::after{content:"not included";display:inline;margin-left:6px;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);white-space:nowrap;
  font-variation-settings:'wght' 600,'wdth' 92;}
.tier.featured li.off{color:var(--on-ink-3);}
.tier.featured li.off::after{color:var(--on-ink-3);}
.tier li b{color:var(--text);}
.tier.featured li b{color:var(--on-ink);}

/* compare table */
.table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--rule);}
table.compare{width:100%;border-collapse:collapse;min-width:760px;font-size:.92rem;}
table.compare th,table.compare td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--rule);}
table.compare thead th{
  background:var(--ink);color:var(--on-ink);position:sticky;top:0;
  font-size:13px;letter-spacing:-.01em;font-variation-settings:'wght' 620,'wdth' 106;
  vertical-align:bottom;
}
table.compare thead th small{
  display:block;font-size:11px;color:var(--on-ink-3);margin-top:5px;
  letter-spacing:.06em;font-variation-settings:'wght' 500,'wdth' 100;
}
table.compare thead th:not(:first-child),table.compare td{text-align:center;}
table.compare tbody th{
  font-variation-settings:'wght' 450,'wdth' 100;color:var(--text);text-align:left;
}
table.compare td{color:var(--text-2);font-size:13px;font-variation-settings:'wght' 520,'wdth' 100;}
table.compare tr.group th{
  background:var(--paper-2);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-variation-settings:'wght' 620,'wdth' 100;padding:12px 20px;
}
table.compare .yes{color:var(--accent);font-size:15px;}
table.compare .no{color:var(--text-3);}
table.compare tbody tr:hover th,table.compare tbody tr:hover td{background:var(--paper-2);}

/* ---------- 14. FAQ ---------- */
.faq{border-top:1px solid var(--rule);}
.faq-item{border-bottom:1px solid var(--rule);}
.ink .faq,.ink .faq-item{border-color:var(--rule-ink);}
.faq-q{
  width:100%;background:none;border:none;cursor:pointer;color:var(--text);
  display:flex;align-items:flex-start;justify-content:space-between;gap:28px;
  padding:clamp(22px,2.6vw,30px) 0;text-align:left;
  font-size:clamp(1.05rem,1.85vw,1.4rem);letter-spacing:-.022em;line-height:1.22;
  font-variation-settings:'wght' 580,'wdth' 106;
  transition:color .25s var(--ease);
}
.ink .faq-q{color:var(--on-ink);}
.faq-q:hover{color:var(--accent);}
.faq-ic{
  flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--rule-2);
  position:relative;margin-top:2px;transition:all .32s var(--ease);
}
.ink .faq-ic{border-color:var(--rule-ink);}
.faq-ic::before,.faq-ic::after{
  content:"";position:absolute;background:currentColor;
  left:50%;top:50%;transition:transform .35s var(--ease);
}
.faq-ic::before{width:11px;height:1.5px;transform:translate(-50%,-50%);}
.faq-ic::after{width:1.5px;height:11px;transform:translate(-50%,-50%);}
.faq-q:hover .faq-ic{border-color:var(--accent);transform:rotate(90deg);}
.faq-item.open .faq-ic{background:var(--accent);border-color:var(--accent);color:var(--paper);transform:rotate(180deg);}
.faq-item.open .faq-ic::after{transform:translate(-50%,-50%) scaleY(0);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);}
.faq-a-in{padding:0 60px 30px 0;color:var(--text-2);font-size:1rem;line-height:1.72;}
.ink .faq-a-in{color:var(--on-ink-2);}
.faq-a-in p + p{margin-top:15px;}
.faq-a-in ul{margin:15px 0 0 20px;display:flex;flex-direction:column;gap:9px;}
.faq-a-in a{color:var(--accent);border-bottom:1px solid var(--accent-wash);transition:border-color .2s;}
.faq-a-in a:hover{border-bottom-color:var(--accent);}
.faq-a-in strong{color:var(--text);}
.ink .faq-a-in strong{color:var(--on-ink);}
@media (max-width:640px){.faq-a-in{padding-right:0;}}

/* answer-first block */
.answer{
  padding:clamp(28px,3.5vw,40px);border-radius:18px;background:var(--paper-2);
  border-left:3px solid var(--accent);
}
.ink .answer{background:var(--ink-2);}
.answer .kicker{margin-bottom:12px;color:var(--accent);}
.answer p{
  font-size:clamp(1.08rem,1.8vw,1.28rem);line-height:1.58;color:var(--text);max-width:72ch;
  font-variation-settings:'wght' 450,'wdth' 100;
}
.ink .answer p{color:var(--on-ink);}

/* ---------- 15. CONTACT ---------- */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(36px,6vw,88px);align-items:start;
}
@media (max-width:940px){.contact-grid{grid-template-columns:1fr;gap:44px;}}
.info-row{
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--rule);
}
.info-row dt{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--text-3);
  font-variation-settings:'wght' 600,'wdth' 100;}
.info-row dd{text-align:right;font-size:.98rem;font-variation-settings:'wght' 520,'wdth' 100;}
.info-row a{border-bottom:1px solid var(--rule-2);transition:border-color .2s,color .2s;}
.info-row a:hover{color:var(--accent);border-bottom-color:var(--accent);}

form.scm{display:flex;flex-direction:column;gap:26px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
@media (max-width:600px){.row2{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--text-3);
  font-variation-settings:'wght' 600,'wdth' 100;}
.field input,.field textarea{
  background:transparent;border:none;border-bottom:1.5px solid var(--rule-2);
  padding:11px 0;font-family:var(--font);font-size:1.05rem;color:var(--text);
  transition:border-color .28s var(--ease);width:100%;
  font-variation-settings:'wght' 450,'wdth' 100;
}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent);}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3);}
.field textarea{min-height:120px;resize:vertical;}
.checks{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px;}
.chk{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--rule-2);border-radius:999px;padding:9px 16px;
  font-size:13px;color:var(--text-2);transition:all .24s var(--ease);
  font-variation-settings:'wght' 500,'wdth' 100;
}
.chk:hover{border-color:var(--ink);color:var(--text);}
.chk input{accent-color:var(--accent);width:14px;height:14px;cursor:pointer;}
.chk:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--paper);}
.form-note{font-size:12.5px;color:var(--text-3);line-height:1.6;}

/* ---------- 16. CTA BAND ---------- */
.cta-band{padding:clamp(64px,9vw,128px) 0;}
.cta-band h2{margin-bottom:20px;max-width:16ch;}
.cta-band p{max-width:48ch;}
.cta-band .inner{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,5vw,72px);align-items:end;
}
@media (max-width:880px){.cta-band .inner{grid-template-columns:1fr;gap:24px;align-items:start;}}

/* ---------- 17. FOOTER ---------- */
footer.site{background:var(--ink);color:var(--on-ink);padding:clamp(56px,7vw,96px) 0 34px;}
.foot-mark{
  font-size:clamp(3.2rem,13vw,10.5rem);line-height:.82;letter-spacing:-.05em;
  font-variation-settings:'wght' 660,'wdth' 118;
  margin-bottom:clamp(36px,5vw,62px);color:var(--on-ink);
}
.foot-cols{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(26px,4vw,48px);
  padding-bottom:44px;border-bottom:1px solid var(--rule-ink);
}
@media (max-width:880px){.foot-cols{grid-template-columns:1fr 1fr;gap:34px;}}
@media (max-width:520px){.foot-cols{grid-template-columns:1fr;}}
.foot-about p{font-size:.93rem;color:var(--on-ink-2);max-width:32ch;}
.foot-about .slogan{
  margin-top:18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-variation-settings:'wght' 620,'wdth' 100;
}
.foot-col .foot-head{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-ink-3);
  margin-bottom:17px;font-variation-settings:'wght' 600,'wdth' 100;
}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;}
.foot-col a,.foot-col span{font-size:.92rem;color:var(--on-ink-2);transition:color .22s;}
.foot-col a:hover{color:var(--accent);}
.foot-bottom{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:26px;font-size:12px;color:var(--on-ink-3);
}

/* ---------- 18. INQUIRY CART ---------- */
.cart-fab{
  position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:180;
  background:var(--accent);color:var(--paper);border:none;border-radius:999px;
  cursor:pointer;padding:15px 24px;display:flex;align-items:center;gap:11px;
  font-size:13.5px;font-variation-settings:'wght' 580,'wdth' 100;
  box-shadow:0 14px 34px rgba(20,17,15,.24);
  transform:translateY(130px);opacity:0;
  transition:transform .5s var(--out),opacity .3s,background .25s;
}
.cart-fab.show{transform:none;opacity:1;}
.cart-fab:hover{background:var(--ink);}
.cart-fab b{
  background:var(--paper);color:var(--accent);border-radius:999px;
  min-width:21px;height:21px;display:grid;place-items:center;font-size:11.5px;
  font-variation-settings:'wght' 680,'wdth' 100;
}

.modal-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(20,17,15,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal-box{
  background:var(--paper);border-radius:22px;padding:clamp(28px,4vw,44px);
  max-width:520px;width:100%;position:relative;max-height:86vh;overflow-y:auto;
  transform:translateY(18px) scale(.97);transition:transform .38s var(--out);
}
.modal-overlay.open .modal-box{transform:none;}
.modal-box h3{font-size:1.5rem;margin-bottom:9px;}
.modal-box > p{color:var(--text-2);font-size:.95rem;}
.modal-close{
  position:absolute;top:16px;right:16px;background:none;border:1px solid var(--rule);
  border-radius:50%;width:34px;height:34px;color:var(--text-3);cursor:pointer;
  font-size:17px;line-height:1;transition:all .24s;
}
.modal-close:hover{border-color:var(--accent);color:var(--accent);}
.modal-actions{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap;}
.cart-list{list-style:none;margin:22px 0 4px;border-top:1px solid var(--rule);}
.cart-list li{
  padding:13px 0;border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-size:.94rem;font-variation-settings:'wght' 500,'wdth' 100;
}
.cart-list li button{
  background:none;border:none;color:var(--text-3);cursor:pointer;
  font-size:18px;line-height:1;padding:2px 5px;transition:color .2s;
}
.cart-list li button:hover{color:var(--accent);}
.cart-empty{color:var(--text-3);font-size:.94rem;padding:20px 0 4px;}

/* ---------- 19. REVEAL ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .85s var(--out),transform .85s var(--out);}
.rv.in{opacity:1;transform:none;}
.rv-1{transition-delay:.08s;}
.rv-2{transition-delay:.16s;}
.rv-3{transition-delay:.24s;}
.rv-4{transition-delay:.32s;}

/* hero line mask reveal */
.hero h1 .line > span{
  transform:translateY(100%);opacity:0;
  animation:lineUp .95s var(--out) forwards;
}
.hero h1 .line:nth-child(1) > span{animation-delay:.08s;}
.hero h1 .line:nth-child(2) > span{animation-delay:.18s;}
.hero h1 .line:nth-child(3) > span{animation-delay:.28s;}
@keyframes lineUp{to{transform:none;opacity:1;}}
@media (prefers-reduced-motion: reduce){
  .hero h1 .line > span{transform:none;opacity:1;animation:none;}
}

/* ---------- 20. MISC ---------- */
.note{
  padding:clamp(22px,2.6vw,30px);border-radius:16px;background:var(--accent-wash);
  display:flex;gap:18px;align-items:flex-start;
}
.note .kicker{margin-bottom:0;color:var(--accent);flex:none;padding-top:3px;}
.note p{font-size:.95rem;color:var(--text-2);}
.ink .note{background:var(--ink-2);}
.ink .note p{color:var(--on-ink-2);}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start;}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:32px;}}

.checklist{list-style:none;display:flex;flex-direction:column;gap:15px;}
.checklist li{padding-left:24px;position:relative;color:var(--text-2);font-size:.98rem;line-height:1.6;}
.checklist li::before{content:"";position:absolute;left:0;top:10px;width:11px;height:1.5px;background:var(--accent);}
.checklist li b{color:var(--text);}
.ink .checklist li{color:var(--on-ink-2);}
.ink .checklist li b{color:var(--on-ink);}

.pills{display:flex;flex-wrap:wrap;gap:9px;}
.pill{
  border:1px solid var(--rule-2);border-radius:999px;padding:9px 16px;
  font-size:12.5px;color:var(--text-2);transition:all .24s var(--ease);
  font-variation-settings:'wght' 520,'wdth' 100;
}
.pill:hover{border-color:var(--ink);color:var(--text);background:var(--paper-2);}
.ink .pill{border-color:var(--rule-ink);color:var(--on-ink-2);}
.ink .pill:hover{border-color:var(--paper);color:var(--on-ink);background:transparent;}

.factlist{border-top:1px solid var(--rule);}
.factlist div{
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--rule);
}
.factlist dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
  font-variation-settings:'wght' 600,'wdth' 100;flex:none;}
.factlist dd{text-align:right;font-size:.95rem;font-variation-settings:'wght' 520,'wdth' 100;}

.steps{display:flex;flex-direction:column;}
.step{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,72px);
  padding:clamp(34px,4.5vw,60px) 0;border-top:1px solid var(--rule);align-items:start;
}
.ink .step{border-top-color:var(--rule-ink);}
.step-body h3{margin-bottom:14px;font-size:clamp(1.5rem,2.8vw,2.1rem);}
.step-body > p{color:var(--text-2);margin-bottom:24px;}
@media (max-width:720px){
  .step{grid-template-columns:1fr;gap:18px;}
  .numeral{font-size:3rem;}
}
.step-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px;}
@media (max-width:620px){.step-cols{grid-template-columns:1fr;}}

/* ==========================================================================
   21. LOGO MARK
   ========================================================================== */
/* Animate the <svg> element, never the <path>: the path carries potrace's own
   transform matrix, and a CSS transform-origin on it corrupts that matrix. */
.mark{
  height:52px;width:auto;flex:none;color:var(--ink);display:block;
  transition:transform .5s var(--out);will-change:transform;
}
.brand:hover .mark{transform:scale(1.07) rotate(-3deg);}
.ink .mark,footer.site .mark{color:var(--on-ink);}

/* ==========================================================================
   22. SERVICE GLYPHS
   ========================================================================== */
.glyph{
  width:30px;height:30px;flex:none;color:var(--accent);overflow:visible;
}
.glyph *{
  transition:stroke-dashoffset .8s var(--out),opacity .4s var(--ease),transform .5s var(--out);
  transform-origin:50% 50%;
}
.glyph-lg{width:44px;height:44px;stroke-width:1.75;}
.card:hover .glyph *,.mega-item:hover .glyph *{transform:scale(1.1);}
.svc-hero-glyph{width:clamp(56px,7vw,92px);height:auto;color:var(--accent);margin-bottom:26px;}

/* ==========================================================================
   23. MEGA MENU
   ========================================================================== */
nav.primary li.has-mega{position:static;}
nav.primary li.has-mega > a{display:inline-flex;align-items:center;gap:7px;}
.caret{
  width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .3s var(--ease);flex:none;
}
li.has-mega.open .caret{transform:rotate(-135deg) translateY(-1px);}

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  box-shadow:0 26px 50px -30px rgba(20,17,15,.3);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .32s var(--out),visibility .28s;
  z-index:5;
}
li.has-mega.open .mega{opacity:1;visibility:visible;transform:none;}
.mega-inner{
  max-width:var(--wrap);margin:0 auto;padding:clamp(24px,3vw,38px) var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(24px,4vw,56px);
}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 22px;}
.mega-item{
  display:flex;gap:13px;align-items:flex-start;padding:12px 14px;border-radius:12px;
  transition:background .22s var(--ease);
}
.mega-item:hover{background:var(--paper-2);}
.mega-item b{
  display:block;font-size:14.5px;letter-spacing:-.012em;color:var(--text);
  font-variation-settings:'wght' 620,'wdth' 104;line-height:1.25;
}
.mega-item em{
  display:block;font-style:normal;font-size:12.5px;color:var(--text-3);
  margin-top:3px;line-height:1.35;
  font-variation-settings:'wght' 400,'wdth' 100;
}
.mega-aside{
  border-left:1px solid var(--rule);padding-left:clamp(20px,3vw,36px);
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
.mega-aside p{font-size:13.5px;color:var(--text-2);}

.nav-foot{display:none;}

@media (max-width:1000px){
  nav.primary{
    position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
    background:var(--paper);max-height:none;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s var(--ease),transform .38s var(--out),visibility .3s;
    border-bottom:none;display:flex;flex-direction:column;
  }
  body.nav-open nav.primary{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
  body.nav-open{overflow:hidden;}
  /* With the drawer open the frosted header let scrolled page content show
     through above it, which read as a rendering glitch. Solid while open. */
  body.nav-open header.site::before{
    background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  nav.primary > ul{flex-direction:column;align-items:stretch;gap:0;padding:4px 0 0;}
  nav.primary li{border-bottom:1px solid var(--rule);}
  nav.primary > ul > li > a{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px var(--gutter);font-size:22px;letter-spacing:-.025em;
    font-variation-settings:'wght' 620,'wdth' 106;color:var(--text);
  }
  nav.primary > ul > li > a::after{display:none;}
  nav.primary > ul > li > a.active{color:var(--accent);}
  .caret{width:8px;height:8px;transform:rotate(45deg);}
  li.has-mega.open .caret{transform:rotate(-135deg);}

  .mega{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:none;background:var(--paper-2);
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease);
  }
  li.has-mega.open .mega{grid-template-rows:1fr;}
  .mega-inner{
    overflow:hidden;display:block;padding:0;max-width:none;
  }
  .mega-grid{grid-template-columns:1fr;gap:0;padding:6px 0;}
  .mega-item{border-radius:0;padding:14px var(--gutter);}
  .mega-item:hover{background:transparent;}
  .mega-aside{
    border-left:none;border-top:1px solid var(--rule);
    padding:20px var(--gutter) 24px;
  }
  .nav-foot{
    display:flex;flex-direction:column;gap:10px;margin-top:auto;
    padding:26px var(--gutter) calc(26px + env(safe-area-inset-bottom));
    border-top:1px solid var(--rule);background:var(--paper-2);
  }
  .nav-foot a{
    font-size:15px;color:var(--text-2);
    overflow-wrap:anywhere;word-break:break-word;line-height:1.4;
  }
  .nav-foot a:hover{color:var(--accent);}
}
@media (max-width:1180px) and (min-width:1001px){
  .mega-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:420px){
  .nav-cta{display:none;}
}

/* scroll progress */
.scrollbar{position:absolute;bottom:-1px;left:0;height:2px;background:var(--accent);width:0;z-index:6;}

/* ==========================================================================
   24. SERVICE PAGE FURNITURE
   ========================================================================== */
.svc-hero{padding:calc(var(--nav-h) + clamp(44px,6vw,80px)) 0 clamp(30px,4vw,52px);}
.svc-hero h1{font-size:clamp(2.4rem,6.2vw,5.2rem);margin-bottom:24px;}
.svc-meta{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;align-items:center;
}
.tier-chip{
  display:inline-flex;align-items:center;gap:8px;border-radius:999px;
  border:1px solid var(--rule-2);padding:8px 15px;font-size:12.5px;color:var(--text-2);
  font-variation-settings:'wght' 520,'wdth' 100;
}
.tier-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);}
.from-chip{
  display:inline-flex;align-items:baseline;gap:8px;border-radius:999px;
  background:var(--ink);color:var(--paper);padding:9px 18px;
  font-size:13px;font-variation-settings:'wght' 560,'wdth' 100;
}
.from-chip b{font-size:16px;font-variation-settings:'wght' 680,'wdth' 100;}
.from-chip em{font-style:normal;opacity:.65;font-size:11.5px;}

/* sticky in-page sub nav */
.subnav{
  position:sticky;top:var(--nav-h);z-index:90;
  background:rgba(247,245,240,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.subnav ul{
  list-style:none;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
}
.subnav ul::-webkit-scrollbar{display:none;}
.subnav a{
  display:block;padding:15px 14px;font-size:13.5px;white-space:nowrap;color:var(--text-3);
  border-bottom:2px solid transparent;transition:color .22s,border-color .22s;
  font-variation-settings:'wght' 540,'wdth' 100;
}
.subnav a:hover{color:var(--text);}
.subnav a.current{color:var(--text);border-bottom-color:var(--accent);}

/* includes list */
.includes{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:16px;overflow:hidden;}
@media (max-width:760px){.includes{grid-template-columns:1fr;}}
.inc{background:var(--paper);padding:clamp(22px,2.6vw,30px);transition:background .25s;}
.inc:hover{background:var(--paper-2);}
.inc h3{font-size:1.06rem;margin-bottom:9px;letter-spacing:-.012em;
  font-variation-settings:'wght' 620,'wdth' 104;}
.inc p{font-size:.93rem;color:var(--text-2);}
.inc .n{font-size:11px;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:12px;
  font-variation-settings:'wght' 600,'wdth' 100;}

/* service card with swipe */
.svc-card{
  position:relative;display:flex;flex-direction:column;gap:13px;
  padding:clamp(24px,2.6vw,32px);border-radius:18px;background:var(--paper-2);
  overflow:hidden;isolation:isolate;
  transition:transform .4s var(--out),color .35s var(--ease);
}
.svc-card::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .52s var(--out);
}
.svc-card:hover{transform:translateY(-4px);color:var(--on-ink);}
.svc-card:hover::before{transform:none;}
.svc-card:hover h3{color:var(--on-ink);}
.svc-card:hover p{color:var(--on-ink-2);}
.svc-card:hover .svc-go{color:var(--accent);}
.svc-card h3{font-size:1.22rem;transition:color .3s;}
.svc-card p{font-size:.94rem;color:var(--text-2);flex:1;transition:color .3s;}
.svc-card .svc-go{
  font-size:13px;color:var(--accent);display:inline-flex;align-items:center;gap:8px;
  font-variation-settings:'wght' 560,'wdth' 100;transition:gap .28s var(--out),color .3s;
}
.svc-card:hover .svc-go{gap:14px;}
.svc-card .glyph{color:var(--accent);}

/* industries chips */
.industries{display:flex;flex-wrap:wrap;gap:9px;}
.ind{
  border:1px solid var(--rule-2);border-radius:999px;padding:10px 18px;
  font-size:13.5px;color:var(--text-2);
  font-variation-settings:'wght' 500,'wdth' 100;
  transition:all .28s var(--ease);cursor:default;
}
.ind:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-2px);}
.ink .ind{border-color:var(--rule-ink);color:var(--on-ink-2);}
.ink .ind:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}

/* ==========================================================================
   25. BRANCHING QUOTE FORM
   ========================================================================== */
.quote{border:1px solid var(--rule);border-radius:22px;background:var(--paper);overflow:hidden;}
.quote-bar{
  display:flex;align-items:center;gap:16px;padding:18px clamp(20px,3vw,32px);
  border-bottom:1px solid var(--rule);background:var(--paper-2);
}
.quote-steps{display:flex;gap:7px;flex:1;}
.qs{
  height:4px;flex:1;background:var(--rule-2);border-radius:99px;overflow:hidden;position:relative;
}
.qs::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--out);
}
.qs.done::after{transform:scaleX(1);}
.qs.now::after{transform:scaleX(.45);}
.quote-count{
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);
  white-space:nowrap;font-variation-settings:'wght' 600,'wdth' 100;
}
.quote-body{padding:clamp(26px,3.4vw,44px);}
.qstep{display:none;}
.qstep.active{display:block;animation:qin .45s var(--out);}
@keyframes qin{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.qstep > .kicker{margin-bottom:10px;}
.qstep h3{font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:10px;}
.qstep > p{color:var(--text-2);font-size:.97rem;margin-bottom:26px;}

.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media (max-width:640px){.opts{grid-template-columns:1fr;}}
.opts.one{grid-template-columns:1fr;}
.opt{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  border:1px solid var(--rule-2);border-radius:14px;padding:15px 17px;
  transition:all .24s var(--ease);background:var(--paper);
}
.opt:hover{border-color:var(--ink);background:var(--paper-2);}
.opt input{accent-color:var(--accent);margin-top:3px;width:15px;height:15px;cursor:pointer;flex:none;}
.opt span{font-size:.94rem;line-height:1.4;}
.opt span b{display:block;font-variation-settings:'wght' 620,'wdth' 102;}
.opt span em{display:block;font-style:normal;font-size:12.5px;color:var(--text-3);margin-top:3px;}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-wash);}

.qnav{display:flex;gap:11px;margin-top:30px;flex-wrap:wrap;align-items:center;}
.qback{
  background:none;border:none;color:var(--text-3);cursor:pointer;font-size:13.5px;
  font-variation-settings:'wght' 520,'wdth' 100;padding:10px 4px;transition:color .2s;
}
.qback:hover{color:var(--text);}
.qhint{font-size:12.5px;color:var(--text-3);margin-left:auto;}
.quote-review{
  border-top:1px solid var(--rule);margin-top:6px;padding-top:22px;
}
.quote-review dl{display:flex;flex-direction:column;gap:1px;}
.quote-review div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--rule);font-size:.92rem;}
.quote-review dt{color:var(--text-3);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:'wght' 600,'wdth' 100;flex:none;}
.quote-review dd{text-align:right;font-variation-settings:'wght' 520,'wdth' 100;}

/* ==========================================================================
   26. EYE CANDY
   ========================================================================== */
/* colour/type specimen strip */
.specimen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-ink);
  border:1px solid var(--rule-ink);border-radius:18px;overflow:hidden;}
@media (max-width:820px){.specimen{grid-template-columns:repeat(2,1fr);}}
.spec{padding:26px 22px;background:var(--ink);position:relative;min-height:172px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:background .4s var(--ease);}
.spec:hover{background:var(--ink-2);}
.spec .swatch{width:100%;height:56px;border-radius:10px;margin-bottom:auto;}
.spec b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink);
  font-variation-settings:'wght' 620,'wdth' 100;display:block;margin-top:18px;}
.spec span{font-size:11px;color:var(--on-ink-3);display:block;margin-top:5px;
  font-variation-settings:'wght' 500,'wdth' 100;letter-spacing:.06em;}
.spec .big{
  font-size:clamp(2.6rem,5vw,4rem);line-height:.9;color:var(--on-ink);
  letter-spacing:-.04em;margin-bottom:auto;
}

/* weight/width demo */
.axis-demo{display:flex;flex-direction:column;gap:2px;}
.axis-demo span{
  font-size:clamp(1.5rem,4.4vw,3.2rem);line-height:1.02;letter-spacing:-.035em;
  color:var(--on-ink);display:block;
}
.axis-demo span:nth-child(1){font-variation-settings:'wght' 300,'wdth' 76;}
.axis-demo span:nth-child(2){font-variation-settings:'wght' 450,'wdth' 92;}
.axis-demo span:nth-child(3){font-variation-settings:'wght' 600,'wdth' 108;}
.axis-demo span:nth-child(4){font-variation-settings:'wght' 800,'wdth' 122;}

/* big link list with hover arrow */
.biglinks{border-top:1px solid var(--rule);}
.biglink{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--rule);
  position:relative;transition:padding-left .4s var(--out);
}
.biglink:hover{padding-left:16px;}
.biglink h3{
  font-size:clamp(1.3rem,3vw,2.2rem);letter-spacing:-.03em;
  font-variation-settings:'wght' 620,'wdth' 110;transition:color .26s;
}
.biglink:hover h3{color:var(--accent);}
.biglink .arrow{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--rule-2);flex:none;
  display:grid;place-items:center;transition:all .32s var(--out);color:var(--text-3);
}
.biglink:hover .arrow{background:var(--accent);border-color:var(--accent);color:var(--paper);transform:rotate(-45deg);}
.ink .biglinks,.ink .biglink{border-color:var(--rule-ink);}
.ink .biglink .arrow{border-color:var(--rule-ink);color:var(--on-ink-3);}

/* ==========================================================================
   27. HERO REFINEMENTS
   ========================================================================== */
.hero-kicker{margin-bottom:clamp(20px,2.4vw,30px);}
/* No status dot. A pulsing green light is a system-status idiom — it implies
   something is live and being monitored, which is not what this line says. */
.hero-note{font-size:13px;color:var(--text-3);margin-top:16px;}
.btn-lg{padding:19px 36px;font-size:15.5px;}
/* The content column was .55fr against an empty 1.45fr, which squeezed the
   lede into five short lines while most of the row sat empty. Give the copy
   a readable measure; the remaining column is still deliberate whitespace. */
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.hero-side .lede{max-width:52ch;}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   28. EYE CANDY
   ========================================================================== */

/* --- word-by-word heading reveal ------------------------------------- */
[data-words] .w{
  display:inline-block;
  opacity:0;transform:translateY(.42em) rotate(1.2deg);
  transition:opacity .55s var(--out),transform .7s var(--out);
}
[data-words].in .w{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  [data-words] .w{opacity:1;transform:none;}
}

/* --- icons -------------------------------------------------------------
   There used to be a stroke-draw ("self-drawing") animation here. It was
   removed on purpose: an icon that has not been observed yet renders at
   stroke-dashoffset = full length, which means INVISIBLE, and a fast scroll
   catches it mid-draw, which reads as a broken or blurry icon. An icon is
   navigation, not decoration — it must be correct at frame one.
   ------------------------------------------------------------------- */
/* Any stray .draw class is now inert — never hide a glyph. */
.glyph.draw path,.glyph.draw circle,.glyph.draw rect{
  stroke-dasharray:none;stroke-dashoffset:0;
}

/* --- cursor spotlight on cards ---------------------------------------- */
.spot{position:relative;}
.spot::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
    rgba(184,71,45,.16), transparent 62%);
  opacity:0;transition:opacity .35s var(--ease);z-index:1;
}
.spot:hover::after{opacity:1;}
.svc-card > *{position:relative;z-index:2;}

/* --- magnetic buttons -------------------------------------------------- */
.btn{will-change:transform;}
.btn.mag{transition:transform .18s var(--out),color .32s var(--ease),
  border-color .32s var(--ease);}

/* --- animated signal rings behind the footer wordmark ------------------ */
footer.site{position:relative;overflow:hidden;}
.foot-rings{
  position:absolute;right:-12%;top:-30%;width:min(640px,58vw);aspect-ratio:1;
  pointer-events:none;opacity:.5;
}
.foot-rings span{
  position:absolute;inset:0;border:1px solid var(--rule-ink);border-radius:50%;
  animation:ring 7s ease-out infinite;
}
.foot-rings span:nth-child(2){animation-delay:2.3s;}
.foot-rings span:nth-child(3){animation-delay:4.6s;}
@keyframes ring{
  0%{transform:scale(.35);opacity:0;}
  18%{opacity:.85;}
  100%{transform:scale(1);opacity:0;}
}
@media (prefers-reduced-motion: reduce){.foot-rings{display:none;}}

/* --- mini process steps (homepage) ------------------------------------ */
.ministeps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);}
@media (max-width:820px){.ministeps{grid-template-columns:1fr;gap:26px;}}
.ministep{border-top:1.5px solid var(--ink);padding-top:20px;}
.ministep .numeral{font-size:clamp(2.2rem,3.6vw,3rem);margin-bottom:14px;}
.ministep h3{font-size:1.2rem;margin-bottom:9px;}
.ministep p{font-size:.95rem;color:var(--text-2);}

/* --- marquee gets a soft edge fade ------------------------------------ */
.marquee{
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}

/* --- section index numbers -------------------------------------------- */
.section-head{position:relative;}

/* --- underline sweep on the big service headings ---------------------- */
.svc-card h3{position:relative;display:inline-block;}

/* --- glyph micro-motion on hover -------------------------------------- */
.svc-card:hover .glyph{transform:translateY(-3px);}
.glyph{transition:transform .4s var(--out),color .3s var(--ease);}
.mega-item:hover .glyph{transform:translateY(-2px);}

/* ========================================================================
   29. CONFIRMATION PAGE
   The post-submit page. Deliberately plain — the visitor has already
   converted; the job here is to confirm, set expectations and give them
   somewhere to go rather than close the tab.
   ===================================================================== */
.h-sm{font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.02em;margin-bottom:18px;
  font-variation-settings:'wght' 620,'wdth' 98;}
.numlist{list-style:none;counter-reset:nl;display:flex;flex-direction:column;gap:18px;}
.numlist li{counter-increment:nl;position:relative;padding-left:44px;
  font-size:.98rem;color:var(--text-2);line-height:1.62;}
.numlist li::before{
  content:counter(nl,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-size:12px;letter-spacing:.06em;color:var(--accent);
  font-variation-settings:'wght' 680,'wdth' 88;
}
.numlist li b{color:var(--text);}
/* A long email address is a single unbreakable token on a 390px screen. */
.narrow .tlink,.note .tlink{overflow-wrap:anywhere;}

/* 404 sitemap list */
.sitelist{list-style:none;display:flex;flex-direction:column;gap:2px;}
.sitelist a{
  display:block;padding:13px 0;border-bottom:1px solid var(--rule);
  font-size:1.02rem;color:var(--text);
  font-variation-settings:'wght' 540,'wdth' 100;
}
.sitelist a:hover{color:var(--accent);}

/* ==========================================================================
   30. HOMEPAGE TRIAGE
   Symptom chips on the left, a live ordered recommendation on the right.
   The interactive half is hidden until JS confirms it works (.js-on), so a
   no-JS visitor gets the plain service list instead of dead buttons.
   ========================================================================== */
.triage-live{display:none;}
.triage.js-on .triage-live{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,52px);align-items:start;
}
.triage.js-on .triage-fallback{display:none;}

.triage-h{
  font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--text-3);
  font-variation-settings:'wght' 600,'wdth' 100;margin-bottom:18px;
}

/* A flex-wrap pill cloud left single chips stranded on their own rows, which
   reads as accidental. A fixed two-column grid makes the same pills look
   deliberate and keeps the section compact. */
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
@media (max-width:1180px){.chips{grid-template-columns:1fr;}}
@media (max-width:900px){.chips{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.chips{grid-template-columns:1fr;}}
.chip{
  display:flex;align-items:center;gap:9px;
  background:var(--paper);border:1px solid var(--rule-2);border-radius:999px;
  padding:11px 17px 11px 14px;cursor:pointer;text-align:left;
  font-size:14px;line-height:1.3;color:var(--text);
  font-variation-settings:'wght' 500,'wdth' 100;
  transition:border-color .2s var(--ease),background .2s var(--ease),
             color .2s var(--ease),transform .2s var(--out);
}
.chip:hover{border-color:var(--ink);transform:translateY(-1px);}
.chip-tick{
  flex:none;width:15px;height:15px;border-radius:50%;
  border:1.5px solid var(--rule-2);position:relative;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.chip-tick::after{
  content:"";position:absolute;left:3.5px;top:4.5px;width:6px;height:3px;
  border-left:1.5px solid var(--paper);border-bottom:1.5px solid var(--paper);
  transform:rotate(-45deg) scale(.4);opacity:0;
  transition:opacity .18s var(--ease),transform .18s var(--out);
}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--on-ink);}
.chip.is-on .chip-tick{background:var(--accent);border-color:var(--accent);}
.chip.is-on .chip-tick::after{opacity:1;transform:rotate(-45deg) scale(1);}

.triage-clear{
  margin-top:16px;background:none;border:0;padding:4px 0;cursor:pointer;
  font-size:12.5px;color:var(--text-3);text-decoration:underline;
  text-underline-offset:3px;font-variation-settings:'wght' 520,'wdth' 100;
}
.triage-clear:hover{color:var(--accent);}

.triage-card{
  background:var(--ink);color:var(--on-ink);border-radius:20px;
  padding:clamp(24px,2.6vw,34px);
}
.triage-card .kicker{color:var(--on-ink-3);}
.triage-idle{color:var(--on-ink-3);font-size:.95rem;max-width:34ch;}

.triage-steps{list-style:none;display:flex;flex-direction:column;gap:20px;margin:6px 0 0;}
.triage-steps li{display:flex;gap:14px;align-items:flex-start;}
.triage-n{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;margin-top:2px;
  background:var(--accent);color:var(--paper);font-size:12px;
  font-variation-settings:'wght' 660,'wdth' 92;
}
.triage-body{display:flex;flex-direction:column;gap:5px;min-width:0;}
a.triage-svc{
  font-size:1.08rem;color:var(--on-ink);letter-spacing:-.015em;
  font-variation-settings:'wght' 620,'wdth' 102;
}
a.triage-svc:hover{color:var(--accent);}
a.triage-svc .ar{transition:transform .25s var(--out);display:inline-block;}
a.triage-svc:hover .ar{transform:translateX(4px);}
.triage-stage{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-3);
  font-variation-settings:'wght' 600,'wdth' 100;
}
.triage-why{font-size:.9rem;color:var(--on-ink-2);line-height:1.55;}

.triage-note{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--rule-ink);
  font-size:.86rem;color:var(--on-ink-3);line-height:1.6;
}
.triage-note b{color:var(--on-ink);}
.triage-note + .triage-note{margin-top:10px;padding-top:0;border-top:0;}
.triage-tier{
  margin-top:14px;font-size:.92rem;color:var(--on-ink-2);
}
.triage-tier b{color:var(--on-ink);}
.triage-cta{margin-top:22px;}
.triage-cta .btn-solid{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.triage-cta .btn-solid:hover{background:var(--accent);color:var(--paper);border-color:var(--accent);}
.triage-fine{
  display:block;margin-top:12px;font-size:11.5px;color:var(--on-ink-3);
  line-height:1.55;
}

/* no-JS fallback */
.triage-fallback{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 clamp(24px,4vw,56px);}
.triage-fallback a{
  display:block;padding:15px 0;border-bottom:1px solid var(--rule);
  font-size:.95rem;color:var(--text-2);
}
.triage-fallback a b{color:var(--text);font-variation-settings:'wght' 600,'wdth' 100;}
.triage-fallback a:hover b{color:var(--accent);}

@media (max-width:900px){
  .triage.js-on .triage-live{grid-template-columns:1fr;}
  .triage-fallback{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .chip{font-size:13.2px;padding:10px 14px 10px 12px;}
}