/* ============================================================
   THINK CLEVER* — design system
   ============================================================ */
:root{
  --paper:    #F3F4EF;
  --paper-2:  #EAECE3;
  --ink:      #14181A;
  --ink-65:   rgba(20,24,26,.65);
  --ink-40:   rgba(20,24,26,.42);
  --line:     rgba(20,24,26,.14);
  --line-soft:rgba(20,24,26,.07);
  --heat:     #FF3B00;
  --cool:     #2B49FF;
  --green:    #0E9F6E;
  --amber:    #E8830C;
  --paper-on-ink: rgba(243,244,239,.92);
  --line-on-ink:  rgba(243,244,239,.16);

  --disp: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --body: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gut: clamp(20px, 4.5vw, 72px);
  --maxw: 1480px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden}

::selection{background:var(--heat);color:var(--paper)}

a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}

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

.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.ast{color:var(--heat);font-style:normal}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

.grid-bg{
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:56px 56px;
}

section[id]{scroll-margin-top:84px}

/* ============================================================
   LOADER
   ============================================================ */
#loader{
  position:fixed;inset:0;z-index:200;
  background:var(--ink);color:var(--paper-on-ink);
  display:flex;align-items:center;justify-content:center;
}
.ld-inner{width:min(420px,78vw)}
.ld-mark{font-family:var(--disp);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;margin-bottom:2.4rem}
.ld-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem;color:rgba(243,244,239,.6)}
#ldPct{color:var(--paper-on-ink);font-size:.9rem}
.ld-bar{height:2px;background:var(--line-on-ink);overflow:hidden}
#ldFill{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--cool),#00C16E,#FFD000,var(--heat))}

/* ============================================================
   HEADER + NAV
   ============================================================ */
#hd{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem var(--gut);
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
#hd.scrolled{
  background:rgba(243,244,239,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
  padding-block:.65rem;
}
.brand{font-family:var(--disp);font-weight:800;font-size:1.22rem;letter-spacing:-.02em;display:inline-flex;align-items:baseline;white-space:nowrap;position:relative;z-index:160}
.brand b{font-weight:400}
body.menu-open .brand{color:var(--paper)}

#hd nav.desk{display:flex;gap:2rem;align-items:center}
#hd .nav-item{position:relative}
#hd a.top{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-65);padding:.55rem 0;position:relative;display:inline-block}
#hd a.top::after{content:"";position:absolute;left:0;bottom:.25rem;width:0;height:1px;background:var(--heat);transition:width .25s ease}
#hd a.top:hover,#hd a.top.on{color:var(--ink)}
#hd a.top:hover::after,#hd a.top.on::after{width:100%}

.drop{
  position:absolute;top:100%;left:-1.2rem;min-width:260px;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 40px -20px rgba(20,24,26,.35);
  padding:.5rem 0;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.nav-item:hover .drop,.nav-item:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.7rem 1.2rem;font-size:.88rem}
.drop a:hover{background:var(--paper-2)}
.drop a .mono{color:var(--ink-40);font-size:.62rem}

.hd-right{display:flex;align-items:center;gap:.8rem}

/* burger + mobile nav */
#burger{display:none;flex-direction:column;gap:5px;padding:.7rem .4rem;z-index:160;position:relative}
#burger i{display:block;width:24px;height:2px;background:var(--ink);transition:transform .3s ease,opacity .3s ease,background .3s ease}
body.menu-open #burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open #burger i:nth-child(2){opacity:0}
body.menu-open #burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.menu-open #burger i{background:var(--paper)}

#mnav{
  position:fixed;inset:0;z-index:150;background:var(--ink);color:var(--paper-on-ink);
  display:flex;flex-direction:column;justify-content:center;padding:5.5rem var(--gut) 2rem;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
  overflow-y:auto;
}
body.menu-open #mnav{opacity:1;visibility:visible}
/* When the menu is open, lift the header above the overlay so the burger works
   as the close (X), and hide the logo + CTA so only the X shows on the panel. */
body.menu-open #hd{z-index:200;background:transparent;box-shadow:none}
body.menu-open #hd .brand,
body.menu-open #hd .hd-right .btn{opacity:0;visibility:hidden;pointer-events:none}
#mnav a.big{font-family:var(--disp);font-weight:800;font-size:clamp(1.7rem,7.5vw,2.6rem);letter-spacing:-.02em;padding:.5rem 0;border-bottom:1px solid var(--line-on-ink);display:flex;justify-content:space-between;align-items:baseline}
#mnav a.big .mono{color:rgba(243,244,239,.45)}
#mnav .sub{display:flex;flex-direction:column;margin:.3rem 0 .2rem;border-bottom:1px solid var(--line-on-ink);padding-bottom:.6rem}
#mnav .sub a{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(243,244,239,.6);padding:.45rem 0}
#mnav .mnav-foot{margin-top:2.2rem;display:flex;flex-direction:column;gap:.3rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:rgba(243,244,239,.6)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--heat);color:#fff;
  padding:1rem 1.7rem;border-radius:999px;
  transition:background .25s ease,color .25s ease,transform .25s ease;
  will-change:transform;
}
.btn .dot{width:7px;height:7px;border-radius:50%;background:#fff;transition:transform .25s ease,background .25s ease}
.btn:hover{background:var(--ink);color:#fff}
.btn:hover .dot{background:var(--heat);transform:scale(1.4)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost .dot{background:var(--heat)}
.btn--ghost:hover{background:var(--heat);color:#fff;box-shadow:inset 0 0 0 1px var(--heat)}
.btn--ghost:hover .dot{background:#fff}
.btn--sm{padding:.7rem 1.25rem}
.btn--inkbg{background:var(--heat);color:#fff}
.btn--inkbg .dot{background:#fff}
.btn--inkbg:hover{background:var(--paper);color:var(--ink)}
.btn--inkbg:hover .dot{background:var(--heat)}

/* ============================================================
   HOME HERO
   ============================================================ */
#hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:7.5rem var(--gut) 2.2rem;
  overflow:hidden;
}
#heat{position:absolute;inset:0;z-index:5;pointer-events:none}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin-inline:auto}

.eyebrow{display:flex;align-items:center;gap:.9rem;color:var(--ink-65);margin-bottom:clamp(1.2rem,3vh,2.4rem)}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--heat);flex:0 0 auto}

.h1{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(3.1rem, 12.5vw, 11.5rem);
  line-height:.92;letter-spacing:-.035em;
  text-transform:uppercase;
  margin-bottom:clamp(1.4rem,3.2vh,2.6rem);
}
.lw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.li,.cli{display:inline-block;will-change:transform}

.hero-sub{max-width:56ch;color:var(--ink-65);font-size:clamp(1rem,1.25vw,1.18rem);margin-bottom:2.2rem}
.hero-sub strong{color:var(--ink);font-weight:600}

.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:clamp(2.6rem,7vh,5rem)}

.hero-foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:1.6rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:1.3rem;
}
.fig-chip{display:flex;flex-direction:column;gap:.3rem;color:var(--ink-65);max-width:34ch;letter-spacing:.06em;line-height:1.7;text-transform:none}
.fig-chip .fig-top{color:var(--ink);text-transform:uppercase}
.fig-chip .fig-top .ast{animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
#evt{color:var(--heat)}

.hero-stats{display:flex;gap:clamp(1.4rem,3vw,3.2rem);flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:.15rem}
.stat .num{font-family:var(--disp);font-weight:800;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.02em;line-height:1}
.stat .lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-65)}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{padding:9.5rem var(--gut) clamp(2.6rem,6vh,4.5rem);position:relative;overflow:hidden}
.page-hero .ph-inner{max-width:var(--maxw);margin-inline:auto}
.crumb{display:flex;gap:.8rem;align-items:center;color:var(--ink-65);margin-bottom:1.4rem;flex-wrap:wrap}
.crumb a:hover{color:var(--heat)}
.crumb .sep{color:var(--ink-40)}
.h1--page{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(2.7rem,7.5vw,6.2rem);
  line-height:.96;letter-spacing:-.03em;text-transform:uppercase;
  margin-bottom:1.6rem;
}
.page-intro{max-width:62ch;color:var(--ink-65);font-size:clamp(1rem,1.25vw,1.18rem)}
.page-intro strong{color:var(--ink);font-weight:600}

/* vitals bar (case studies) */
.vitals{border-block:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);margin-top:2.6rem}
.vital{padding:1.1rem 1.2rem 1.2rem;border-right:1px solid var(--line)}
.vital:last-child{border-right:0}
.vital .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);display:block;margin-bottom:.3rem}
.vital .v{font-size:.95rem;font-weight:500}

/* ============================================================
   MARQUEE
   ============================================================ */
.marq{overflow:hidden;border-block:1px solid var(--line);background:var(--paper)}
.marq-track{display:flex;width:max-content;animation:marq 32s linear infinite}
.marq span{display:flex;align-items:center;gap:2.4rem;padding:1.05rem 1.2rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--ink-65)}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marq-track{animation:none}}

/* ============================================================
   SECTIONS (shared)
   ============================================================ */
.sec{padding-block:clamp(5rem,11vh,9rem)}
.sec--tight{padding-block:clamp(3.4rem,7vh,5.5rem)}
.sec-head{margin-bottom:clamp(2.6rem,6vh,4.5rem);max-width:920px}
.sec-eyebrow{display:flex;align-items:center;gap:.9rem;color:var(--ink-65);margin-bottom:1.1rem}
.sec-eyebrow::before{content:"";width:34px;height:1px;background:var(--heat);flex:0 0 auto}
.h2{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.02;letter-spacing:-.025em}
.h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.02em;line-height:1.15}
.sec-sub{max-width:62ch;color:var(--ink-65);margin-top:1.1rem}

/* prose blocks */
.prose{max-width:70ch;color:var(--ink-65)}
.prose p{margin-bottom:1.1rem}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}
.two-col{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.sticky-label{position:sticky;top:110px}

/* ============================================================
   ROW LISTS (services, features)
   ============================================================ */
.svc-list{border-top:1px solid var(--line)}
.svc{
  display:grid;grid-template-columns:130px 1.1fr 1.4fr auto;gap:1.6rem;align-items:center;
  padding:2rem 1rem;border-bottom:1px solid var(--line);
  position:relative;transition:background .3s ease,color .3s ease;
}
a.svc:hover,a.svc:focus-visible{background:var(--ink);color:var(--paper)}
a.svc:hover .svc-slug,a.svc:focus-visible .svc-slug{color:var(--heat)}
a.svc:hover .svc-desc,a.svc:focus-visible .svc-desc{color:var(--paper-on-ink)}
a.svc:hover .svc-arrow,a.svc:focus-visible .svc-arrow{transform:translateX(0) rotate(0);opacity:1}
.svc-slug{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--ink-65)}
.svc-title{font-family:var(--disp);font-weight:700;font-size:clamp(1.25rem,2.1vw,1.7rem);letter-spacing:-.02em;line-height:1.1}
.svc-desc{color:var(--ink-65);font-size:.95rem;max-width:48ch;transition:color .3s ease}
.svc-arrow{font-family:var(--disp);font-size:1.5rem;opacity:.25;transform:translateX(-8px) rotate(-45deg);transition:transform .3s ease,opacity .3s ease}

/* non-link feature rows */
.feat-list{border-top:1px solid var(--line)}
.feat{display:grid;grid-template-columns:110px 1fr 1.6fr;gap:1.6rem;padding:1.7rem .6rem;border-bottom:1px solid var(--line);align-items:baseline}
.feat .no{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--ink-40)}
.feat h3{font-family:var(--disp);font-weight:700;font-size:1.15rem;letter-spacing:-.015em}
.feat p{color:var(--ink-65);font-size:.94rem}

/* ============================================================
   PLATFORMS
   ============================================================ */
.plat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.plat{
  border:1px solid var(--line);background:var(--paper-2);padding:1.5rem;
  display:flex;flex-direction:column;gap:.6rem;min-height:175px;
  transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
}
.plat:hover{transform:translateY(-5px);background:var(--paper);box-shadow:0 16px 36px -22px rgba(20,24,26,.35)}
.plat h3{font-family:var(--disp);font-weight:700;font-size:1.3rem;letter-spacing:-.015em}
.plat p{color:var(--ink-65);font-size:.88rem}
.plat .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);margin-top:auto}
.plat--primary{grid-column:span 2;background:var(--ink);color:var(--paper-on-ink);border-color:var(--ink)}
.plat--primary:hover{background:var(--ink)}
.plat--primary p{color:rgba(243,244,239,.65);max-width:46ch}
.plat--primary .tag{color:var(--heat)}

.partner-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1.4rem}
.partner-card{border:1px solid var(--line);background:var(--paper-2);padding:2rem;display:flex;flex-direction:column;gap:1rem;transition:transform .3s ease,box-shadow .3s ease,background .3s ease}
.partner-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -30px rgba(20,24,26,.35);background:var(--paper)}
.partner-card__logo{display:flex;align-items:center;justify-content:center;min-height:90px;border:1px solid var(--line);background:var(--paper);padding:1rem}
.partner-card__logo img{max-height:56px;max-width:100%;object-fit:contain}
.partner-card__copy{display:flex;flex-direction:column;gap:.9rem;min-height:0}
.partner-card h3{font-family:var(--disp);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;line-height:1.1}
.partner-card .role{font-family:var(--mono);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-40);display:block}
.partner-card p{color:var(--ink-65);font-size:.95rem;line-height:1.8;margin:0}
.partner-card .partner-link{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);transition:color .3s ease}
.partner-card:hover .partner-link{color:var(--heat)}
.brand-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;align-items:center}
.brand-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:110px;padding:1rem;border:1px solid var(--line);background:var(--paper-2);transition:transform .3s ease,border-color .3s ease}
.brand-logo:hover{transform:translateY(-3px);border-color:var(--heat)}
.brand-logo figure{max-width:100%;max-height:64px;display:flex;align-items:center;justify-content:center}
.brand-logo img{max-width:100%;max-height:64px;object-fit:contain}
.brand-logo span{margin-top:.9rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-65)}

.split-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem;align-items:center;}
.split-grid--image-left{direction:rtl;}
.split-grid--image-left .split-copy{direction:ltr;}
.split-copy{max-width:44rem;}
.split-media{border:1px solid var(--line);background:var(--paper);box-shadow:0 24px 60px -38px rgba(20,24,26,.15);overflow:hidden;}
.split-media img{display:block;width:100%;height:auto;}

.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;}
.feature-card{border:1px solid var(--line);background:var(--paper-2);padding:2rem;display:flex;flex-direction:column;gap:1.2rem;transition:transform .3s ease,box-shadow .3s ease,background .3s ease;}
.feature-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px -22px rgba(20,24,26,.18);background:var(--paper);}
.feature-card__accent{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--heat);}

.testimonial-slider{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(360px,100%),1fr);gap:1.2rem;overflow-x:auto;padding-bottom:.2rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.testimonial-card{scroll-snap-align:start;border:1px solid var(--line);background:var(--paper-2);padding:2rem;min-width:320px;display:flex;flex-direction:column;gap:1rem;transition:transform .3s ease,box-shadow .3s ease;}
.testimonial-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(20,24,26,.2);}
.testimonial-card__logo{margin:0 0 1rem;display:block;}
.testimonial-card__quote{font-family:var(--disp);font-weight:600;font-size:1.05rem;line-height:1.5;color:var(--ink);margin:0;}
.testimonial-card__name{font-family:var(--disp);font-weight:700;font-size:1rem;}
.testimonial-card__role{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40);}

.tabs{border:1px solid var(--line);background:var(--paper);padding:1.6rem;}
.tabs-nav{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.5rem;}
.tabs-nav .btn{padding:.8rem 1.1rem;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.tabs-nav .btn.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.tab-panel{display:none;}
.tab-panel.is-on{display:block;}
.tab-panel__media{margin-top:1.4rem;border:1px solid var(--line);overflow:hidden;}

.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}
.gallery-card{border:1px solid var(--line);overflow:hidden;background:var(--paper);}
.gallery-card img{display:block;width:100%;height:auto;}
.gallery-card figcaption{padding:.9rem 1rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-65);}

/* ============================================================
   LAB (dark proof section) + counters
   ============================================================ */
.sec--lab{background:var(--ink);color:var(--paper-on-ink)}
.sec--lab .sec-eyebrow{color:rgba(243,244,239,.55)}
.sec--lab .h2 em{font-style:normal;color:var(--heat)}
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}

.count-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line-on-ink)}
.count{padding:clamp(1.4rem,2.6vw,2.4rem);border-right:1px solid var(--line-on-ink);border-bottom:1px solid var(--line-on-ink)}
.count:nth-child(2n){border-right:0}
.count:nth-last-child(-n+2){border-bottom:0}
.count .num{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,4.6vw,4.2rem);letter-spacing:-.03em;line-height:1;display:block}
.count .num .ast{font-size:.5em;vertical-align:.7em}
.count .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(243,244,239,.55);display:block;margin-top:.6rem;line-height:1.7}

/* light counters (case results) */
.count-grid--light{border-color:var(--line)}
.count-grid--light .count{border-color:var(--line)}
.count-grid--light .count .lbl{color:var(--ink-65)}
.count-grid--3{grid-template-columns:repeat(3,1fr)}
.count-grid--3 .count{border-bottom:0;border-right:1px solid var(--line)}
.count-grid--3 .count:last-child{border-right:0}

.lab-card{border:1px solid var(--line-on-ink);padding:clamp(1.4rem,2.6vw,2.2rem);background:rgba(243,244,239,.03)}
.lab-meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:rgba(243,244,239,.55);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2rem}
.lab-meta b{color:var(--paper-on-ink);font-weight:500}
.bars{display:flex;gap:clamp(1.6rem,4vw,3.4rem);align-items:flex-end;height:230px;border-bottom:1px solid var(--line-on-ink);padding:0 .4rem}
.bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:.7rem;max-width:170px}
.bar i{display:block;width:100%;transform-origin:bottom;transform:scaleY(0)}
.bar--a i{height:58%;background:repeating-linear-gradient(-45deg,rgba(243,244,239,.34) 0 4px,transparent 4px 9px);box-shadow:inset 0 0 0 1px rgba(243,244,239,.3)}
.bar--b i{height:88%;background:linear-gradient(180deg,var(--heat),#FF7A00)}
.bar-lbl{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:rgba(243,244,239,.65)}
.bar--b .bar-lbl{color:var(--paper-on-ink)}
.win-tag{display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--heat);border:1px solid var(--heat);border-radius:999px;padding:.15rem .55rem;margin-left:.4rem;opacity:0;transform:translateY(4px)}
.lab-note{margin-top:1.6rem;color:rgba(243,244,239,.65);font-size:.92rem;max-width:46ch}
.lab-note b{color:var(--paper-on-ink);font-weight:600}

/* ============================================================
   PROCESS
   ============================================================ */
#process{overflow:hidden}
.proc-pin{display:flex;flex-direction:column;justify-content:center}
.proc-track{display:flex;gap:clamp(1.2rem,2.5vw,2.2rem);padding-inline:var(--gut);will-change:transform}
.step{
  flex:0 0 auto;width:clamp(300px,34vw,460px);
  border:1px solid var(--line);background:var(--paper);
  padding:clamp(1.5rem,2.4vw,2.3rem);
  display:flex;flex-direction:column;gap:1.1rem;min-height:330px;
}
.step-top{display:flex;justify-content:space-between;align-items:baseline}
.step-no{font-family:var(--disp);font-weight:800;font-size:clamp(2.2rem,3.4vw,3.2rem);letter-spacing:-.03em;line-height:1}
.step-no .ast{font-size:.45em;vertical-align:.8em}
.step-tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.step h3{font-family:var(--disp);font-weight:700;font-size:1.45rem;letter-spacing:-.02em}
.step p{color:var(--ink-65);font-size:.95rem;max-width:40ch}
.step-meter{margin-top:auto;height:3px;background:var(--line-soft);overflow:hidden}
.step-meter i{display:block;height:100%;width:0;background:var(--heat)}

/* compact numbered steps */
.mini-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.mini-step{border:1px solid var(--line);padding:1.5rem;background:var(--paper)}
.mini-step .no{font-family:var(--disp);font-weight:800;font-size:1.8rem;letter-spacing:-.02em;display:block;margin-bottom:.7rem}
.mini-step .no .ast{font-size:.5em;vertical-align:.8em}
.mini-step h3{font-family:var(--disp);font-weight:700;font-size:1.1rem;margin-bottom:.4rem}
.mini-step p{color:var(--ink-65);font-size:.9rem}

/* ============================================================
   WORK CARDS
   ============================================================ */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.work-more{display:flex;justify-content:center;margin-top:2.6rem}
.case{
  border:1px solid var(--line);background:var(--paper-2);
  padding:1.6rem;display:flex;flex-direction:column;gap:1.4rem;
  transition:transform .35s ease,box-shadow .35s ease,background .35s ease;
  position:relative;
}
.case:hover{transform:translateY(-6px);box-shadow:0 18px 40px -22px rgba(20,24,26,.35);background:var(--paper)}
.case-meta{display:flex;justify-content:space-between;color:var(--ink-40)}
.case-viz{position:relative;padding:1.2rem 0 .4rem}
.case-viz svg{width:100%;height:84px;overflow:visible}
.case-viz polyline{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke:var(--acc,var(--heat))}
.case-metric{font-family:var(--disp);font-weight:800;font-size:clamp(2.1rem,3vw,2.8rem);letter-spacing:-.03em;line-height:1}
.case-metric small{display:block;font-family:var(--mono);font-weight:400;font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-65);margin-top:.5rem}
.case h3{font-family:var(--disp);font-weight:700;font-size:1.35rem;letter-spacing:-.015em;margin-top:auto}
.case p{color:var(--ink-65);font-size:.92rem}
.case .go{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:1rem;transition:color .3s ease}
.case:hover .go{color:var(--heat)}

/* big alternating rows on Work page */
.wcase{
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.6rem,4vw,4rem);
  align-items:center;border-top:1px solid var(--line);padding-block:clamp(2.4rem,6vh,4.2rem);
}
.wcase:nth-child(even) .wcase-viz{order:2}
.wcase-meta{display:flex;gap:1.4rem;color:var(--ink-40);margin-bottom:1rem;flex-wrap:wrap}
.wcase h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,3.8vw,3rem);letter-spacing:-.025em;line-height:1;margin-bottom:1rem}
.wcase p{color:var(--ink-65);max-width:52ch;margin-bottom:1.6rem}
.wcase .wstats{display:flex;gap:2.2rem;margin-bottom:1.8rem;flex-wrap:wrap}

/* abstract browser frame */
.browser{border:1px solid var(--line);background:var(--paper);box-shadow:0 24px 60px -34px rgba(20,24,26,.4)}
.browser .bar-top{display:flex;gap:6px;align-items:center;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.browser .bar-top i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.browser .bar-top i:first-child{background:var(--acc,var(--heat))}
.browser .bar-top .url{margin-left:.6rem;flex:1;height:18px;border:1px solid var(--line-soft);border-radius:9px;display:flex;align-items:center;padding:0 .7rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:var(--ink-40);text-transform:lowercase}
.browser .body{padding:1.4rem;display:flex;flex-direction:column;gap:.9rem;min-height:260px}
.sk{background:var(--paper-2);border-radius:3px}
.sk--hero{height:84px;background:linear-gradient(120deg,var(--paper-2) 55%,color-mix(in srgb,var(--acc,var(--heat)) 18%,var(--paper-2)))}
.sk--line{height:12px;width:72%}
.sk--line.s{width:45%}
.sk-row{display:flex;gap:.9rem}
.sk-row .sk{flex:1;height:64px}
.browser svg{width:100%;height:70px;overflow:visible;margin-top:auto}
.browser polyline{fill:none;stroke:var(--acc,var(--heat));stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   EXPERIMENT LOG (case studies)
   ============================================================ */
.xlog-wrap{overflow-x:auto}
.xlog{width:100%;border-collapse:collapse;border:1px solid var(--line)}
.xlog th{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);font-weight:500}
.xlog td{padding:1.05rem 1.1rem;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:.92rem}
.xlog tr:last-child td{border-bottom:0}
.xlog .xid{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--ink-40);white-space:nowrap}
.xlog .hyp{color:var(--ink-65);max-width:52ch}
.xlog .hyp b{color:var(--ink);font-weight:600}
.chip{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:.25rem .7rem;white-space:nowrap}
.chip--win{color:var(--green);border:1px solid rgba(14,159,110,.45)}
.chip--flat{color:var(--ink-40);border:1px solid var(--line)}
.chip--learn{color:var(--amber);border:1px solid rgba(232,131,12,.45)}

/* quote */
.quote{border-left:3px solid var(--acc,var(--heat));padding:.4rem 0 .4rem 1.8rem;max-width:62ch}
.quote p{font-family:var(--disp);font-weight:500;font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.35;letter-spacing:-.01em;margin-bottom:1rem}
.quote cite{font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-65)}

/* next / prev case */
.next-case{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.next-case a{padding:clamp(1.8rem,4vh,3rem) var(--gut);display:flex;flex-direction:column;gap:.5rem;transition:background .3s ease,color .3s ease}
.next-case a:hover{background:var(--ink);color:var(--paper)}
.next-case a:hover .mono{color:var(--heat)}
.next-case a .mono{color:var(--ink-40);transition:color .3s ease}
.next-case a .t{font-family:var(--disp);font-weight:800;font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:-.02em}
.next-case a:first-child{border-right:1px solid var(--line)}
.next-case a.next{text-align:right;align-items:flex-end}

/* ============================================================
   BLOG
   ============================================================ */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.post{border:1px solid var(--line);background:var(--paper-2);padding:1.6rem;display:flex;flex-direction:column;gap:1rem;min-height:280px;transition:transform .35s ease,background .35s ease,box-shadow .35s ease}
.post:hover{transform:translateY(-6px);background:var(--paper);box-shadow:0 18px 40px -22px rgba(20,24,26,.35)}
.post .pmeta{display:flex;justify-content:space-between;color:var(--ink-40)}
.post h3{font-family:var(--disp);font-weight:700;font-size:1.3rem;letter-spacing:-.015em;line-height:1.2}
.post p{color:var(--ink-65);font-size:.92rem}
.post .go{margin-top:auto;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);border-top:1px solid var(--line);padding-top:1rem;transition:color .3s ease}
.post:hover .go{color:var(--heat)}
.post--feature{grid-column:span 3;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;min-height:0}
.post--feature h3{font-size:clamp(1.6rem,3vw,2.4rem)}
.post--feature .go{margin-top:1.4rem}

/* ============================================================
   CONTACT + FORM
   ============================================================ */
.h2--cta{font-family:var(--disp);font-weight:800;font-size:clamp(2.8rem,8.5vw,7.5rem);text-transform:uppercase;line-height:.96;letter-spacing:-.03em}
.contact-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:2.5rem;flex-wrap:wrap;margin-top:3rem}
.contact-note{color:var(--ink-65);max-width:40ch}
.contact-links{display:flex;flex-direction:column;gap:.5rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.05em}
.contact-links a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:.2rem;width:fit-content;transition:border-color .25s ease,color .25s ease}
.contact-links a:hover{color:var(--heat);border-color:var(--heat)}

.form-card{border:1px solid var(--line);background:var(--paper);padding:clamp(1.6rem,3vw,2.6rem)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-65)}
.field input,.field select,.field textarea{
  font:inherit;color:var(--ink);background:transparent;
  border:1px solid var(--line);padding:.85rem 1rem;border-radius:0;
  transition:border-color .25s ease;width:100%;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--heat)}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:1.6rem}
.form-hint{font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;color:var(--ink-40);max-width:40ch}
#formStatus{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;color:var(--green)}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{background:var(--ink);color:var(--paper-on-ink)}
.cta-band .h2{font-size:clamp(2.2rem,6vw,5rem);text-transform:uppercase;line-height:.98}
.cta-band .inner{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.cta-band p{color:rgba(243,244,239,.6);max-width:44ch;margin-top:.9rem}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid var(--line);padding:3.4rem var(--gut) 2.4rem}
.foot-cols{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.4rem;margin-bottom:2.8rem}
.foot-def{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--ink-65);max-width:42ch;line-height:1.8;text-transform:none;margin-top:1rem}
.foot-def b{color:var(--ink);font-weight:500}
.foot-h{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40);margin-bottom:1rem}
.foot-cols nav{display:flex;flex-direction:column;gap:.45rem}
.foot-cols nav a{font-size:.92rem;color:var(--ink-65);width:fit-content}
.foot-cols nav a:hover{color:var(--heat)}
.foot-base{max-width:var(--maxw);margin-inline:auto;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.6rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;color:var(--ink-40);text-transform:uppercase}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1023px){
  .proc-track{flex-direction:column;padding-inline:0}
  .step{width:100%;min-height:0}
  .lab-grid{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .sticky-label{position:static}
  .plat-grid{grid-template-columns:repeat(2,1fr)}
  .wcase{grid-template-columns:1fr}
  .wcase:nth-child(even) .wcase-viz{order:0}
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .post--feature{grid-column:span 2;grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  #hd nav.desk{display:none}
  #burger{display:flex}
  .svc{grid-template-columns:1fr;gap:.55rem;padding:1.6rem .2rem}
  .svc-arrow{position:absolute;right:.4rem;top:1.5rem}
  .svc-desc{max-width:60ch}
  .feat{grid-template-columns:1fr;gap:.45rem;padding:1.5rem .2rem}
  .vitals{grid-template-columns:1fr 1fr}
  .vital:nth-child(2){border-right:0}
  .vital:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .mini-steps{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .xlog th:nth-child(1),.xlog td:nth-child(1){display:none}
}
@media (max-width:640px){
  #hd .btn--sm{padding:.6rem .95rem}
  .work-grid{grid-template-columns:1fr}
  .count-grid{grid-template-columns:1fr 1fr}
  .count-grid--3{grid-template-columns:1fr}
  .count-grid--3 .count{border-right:0;border-bottom:1px solid var(--line)}
  .count-grid--3 .count:last-child{border-bottom:0}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .bars{height:180px}
  .plat-grid{grid-template-columns:1fr}
  .plat--primary{grid-column:span 1}
  .post-grid{grid-template-columns:1fr}
  .post--feature{grid-column:span 1}
  .next-case{grid-template-columns:1fr}
  .next-case a:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .next-case a.next{align-items:flex-start;text-align:left}
  .foot-cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .fig-chip .fig-top .ast{animation:none}
  .case,.btn,.svc,.plat,.post{transition:none}
}


/* ------------------------------------------------------------
   LOADER FAILSAFE (no-JS / broken-JS): auto-dismiss after 7s.
   Normal JS flow hides the loader at ~2.5s, long before this.
   ------------------------------------------------------------ */
@keyframes tc-loader-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
#loader{animation:tc-loader-failsafe .6s ease 7s forwards}
@keyframes tc-unlock{to{overflow:visible}}
body.locked{animation:tc-unlock 0s 7s forwards}

/* ============================================================
   CASE STUDY IMAGERY (v1.0.4)
   ============================================================ */
.case-hero-media{padding:0 var(--gut) clamp(2rem,5vh,3.4rem)}
.case-hero-media .chm-inner{max-width:var(--maxw);margin-inline:auto}
.case-hero-media figure{border:1px solid var(--line);background:var(--paper);box-shadow:0 28px 70px -38px rgba(20,24,26,.45)}
.case-hero-media img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line)}
.case-hero-media figcaption{padding:.8rem 1.1rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-65)}

.feat.has-media{align-items:start}
.feat-media{grid-column:1/-1;margin:0;margin-top:.9rem;border:1px solid var(--line);background:var(--paper-2)}
.feat-media img{width:100%;height:auto;display:block}

.case-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.case-gallery figure{margin:0;border:1px solid var(--line);background:var(--paper-2);transition:transform .35s ease,box-shadow .35s ease}
.case-gallery figure:hover{transform:translateY(-5px);box-shadow:0 18px 40px -22px rgba(20,24,26,.35)}
.case-gallery img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
.case-gallery figcaption{padding:.7rem 1rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-65);border-top:1px solid var(--line)}
/* odd image count: first spans full width for editorial rhythm */
.case-gallery figure:first-child:nth-last-child(odd){grid-column:1/-1}
.case-gallery figure:first-child:nth-last-child(odd) img{aspect-ratio:21/9}
@media (max-width:640px){
  .case-gallery{grid-template-columns:1fr}
  .case-gallery figure:first-child:nth-last-child(odd){grid-column:auto}
  .case-gallery figure:first-child:nth-last-child(odd) img{aspect-ratio:16/10}
}
@media (prefers-reduced-motion: reduce){.case-gallery figure{transition:none}}

/* ============================================================
   LEAD CAPTURE (v1.1.0) — pill, popup, capacity bar
   ============================================================ */
body.lead-open{overflow:hidden}

.lead-pill{position:fixed;left:1.1rem;bottom:1.1rem;z-index:120;display:flex;align-items:center;gap:.3rem}
.lead-pill-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:.8rem 1.2rem;border-radius:999px;
  box-shadow:0 14px 34px -16px rgba(20,24,26,.5);cursor:pointer;
  transition:background .25s ease,transform .25s ease;
}
.lead-pill-btn:hover{background:var(--heat);transform:translateY(-2px)}
.lead-pill-x{width:30px;height:30px;border-radius:50%;background:var(--paper);color:var(--ink-65);box-shadow:inset 0 0 0 1px var(--line);font-size:1rem;line-height:1;cursor:pointer}
.lead-pill-x:hover{color:var(--heat)}

.lead-overlay{
  position:fixed;inset:0;z-index:170;
  background:rgba(20,24,26,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:1rem;
}
.lead-overlay.is-open{display:flex}
.lead-dialog{
  position:relative;width:min(680px,100%);max-height:92vh;overflow-y:auto;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 40px 90px -40px rgba(20,24,26,.6);
  padding:clamp(1.4rem,3vw,2.4rem);
}
.lead-close{position:absolute;top:.8rem;right:.9rem;font-size:1.5rem;line-height:1;color:var(--ink-40);padding:.4rem;cursor:pointer;z-index:2}
.lead-close:hover{color:var(--heat)}

.lead-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem;padding-right:2.2rem}
.lead-step-no{color:var(--ink-40);white-space:nowrap}
.lead-progress{flex:1;height:2px;background:var(--line-soft);overflow:hidden}
.lead-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--cool),#00C16E,#FFD000,var(--heat));transition:width .4s ease}

.lead-step{display:none}
.lead-step.is-on{display:block;animation:leadIn .35s ease}
@keyframes leadIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.lead-h{font-family:var(--disp);font-weight:800;font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:-.02em;line-height:1.1;margin-bottom:.5rem}
.lead-sub{color:var(--ink-65);margin-bottom:1.4rem;font-size:.95rem}

.lead-opts{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.2rem}
.lead-opts--row{flex-direction:row;flex-wrap:wrap}
.lead-opt{
  text-align:left;border:1px solid var(--line);background:var(--paper-2);
  padding:1rem 1.2rem;cursor:pointer;display:flex;flex-direction:column;gap:.15rem;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;flex:1 1 auto;min-width:150px;
}
.lead-opt:hover,.lead-opt:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-2px)}
.lead-opt:hover .mono,.lead-opt:focus-visible .mono{color:var(--heat)}
.lead-opt .mono{color:var(--ink-40);font-size:.62rem}
.lead-opt b{font-family:var(--disp);font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.lead-opt span:last-child{font-size:.85rem;color:inherit;opacity:.7}

.lead-proof{color:var(--ink-65);font-size:.66rem;letter-spacing:.06em;text-transform:none;border-top:1px solid var(--line);padding-top:1rem}

.lead-url{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.2rem;max-width:420px}
.lead-url label{font-size:.64rem;letter-spacing:.1em;color:var(--ink-65)}
.lead-url input{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);padding:.85rem 1rem}
.lead-url input:focus{outline:none;border-color:var(--heat)}
.lead-url .btn{align-self:flex-start}

.lead-back{color:var(--ink-40);cursor:pointer;padding:.4rem 0;font-size:.66rem;letter-spacing:.1em}
.lead-back:hover{color:var(--heat)}

.lead-reco{color:var(--ink-65);margin-bottom:.9rem;font-size:.66rem}
.lead-offer{border:1px solid var(--line);background:var(--paper-2);padding:1.3rem;margin-bottom:1rem}
.lead-offer-head{margin-bottom:.8rem}
.lead-tag{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem;margin-bottom:.6rem;color:var(--ink-65)}
.lead-tag--free{color:var(--heat);border-color:var(--heat)}
.lead-ul{list-style:none;margin:0 0 1.1rem;display:flex;flex-direction:column;gap:.45rem}
.lead-ul li{padding-left:1.2rem;position:relative;font-size:.92rem;color:var(--ink-65)}
.lead-ul li::before{content:"*";position:absolute;left:0;color:var(--heat);font-weight:700}

.cap{margin-bottom:1.1rem}
.cap-bar{height:6px;background:var(--line-soft);overflow:hidden;margin-bottom:.5rem}
.cap-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--heat),#FF7A00);transition:width .6s ease}
.cap-line{font-size:.66rem;letter-spacing:.07em;color:var(--ink-65);text-transform:none}
.cap-line b{color:var(--heat);font-weight:600}
.cap-line--full{color:var(--amber)}

.lead-cal{margin:1rem 0;min-height:540px}
.lead-cal .calendly-inline-widget{min-height:540px}
.lead-switch{margin-bottom:.4rem}
.lead-switch-btn{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--cool);cursor:pointer;text-transform:none;border-bottom:1px solid currentColor;padding-bottom:.1rem}
.lead-switch-btn:hover{color:var(--heat)}
.lead-fine{color:var(--ink-40);font-size:.6rem;letter-spacing:.06em;text-transform:none;margin-bottom:.8rem}

@media (max-width:640px){
  .lead-pill{left:.7rem;bottom:.7rem;right:.7rem}
  .lead-pill-btn{font-size:.6rem;padding:.7rem 1rem;flex:1;justify-content:center}
  .lead-dialog{max-height:96vh;padding:1.2rem}
  .lead-opts--row .lead-opt{min-width:100%}
  .lead-cal{min-height:480px}
}
@media (prefers-reduced-motion: reduce){
  .lead-step.is-on{animation:none}
  .lead-opt,.lead-pill-btn,.cap-bar i,.lead-progress i{transition:none}
}

/* ============================================================
   LEAD CAPTURE v1.1.1 — fixes + step-2 selection + form styling
   ============================================================ */
/* Global guard: the hidden attribute always wins, whatever else applies. */
[hidden]{display:none!important}

/* Step 2: selected qualifier state (persistent, not just hover) */
.lead-opt.is-sel,
.lead-opt.is-sel:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lead-opt.is-sel .mono{color:var(--heat)}
.lead-opt.is-sel b::after{content:" ✓";color:var(--heat)}

.lead-opt-note{color:var(--ink-40);font-size:.6rem;letter-spacing:.06em;text-transform:none}

.lead-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.2rem;flex-wrap:wrap}
.btn[disabled]{opacity:.35;pointer-events:none;cursor:not-allowed}

/* ---------------- embedded forms (WPForms / CF7), popup + contact page */
.lead-form{margin:1rem 0 .4rem}
.lead-form form{margin:0}
/* Answer fields carried into the enquiry form from the popup questions — hidden
   from the visitor, populated by audit.js, included in the confirmation email. */
.wpforms-field.tc-a{display:none !important}
.lead-form label,
.form-card .wpforms-field label,
.form-card .wpcf7 form>label,
.form-card .wpcf7 form p{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-65);display:block;margin-bottom:.45rem;
}
.lead-form input[type="text"],.lead-form input[type="email"],.lead-form input[type="url"],
.lead-form input[type="tel"],.lead-form input[type="number"],.lead-form textarea,.lead-form select,
.form-card .wpforms-field input[type="text"],.form-card .wpforms-field input[type="email"],
.form-card .wpforms-field input[type="url"],.form-card .wpforms-field input[type="tel"],
.form-card .wpforms-field textarea,.form-card .wpforms-field select,
.form-card .wpcf7 input[type="text"],.form-card .wpcf7 input[type="email"],
.form-card .wpcf7 input[type="url"],.form-card .wpcf7 input[type="tel"],
.form-card .wpcf7 textarea,.form-card .wpcf7 select{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:0;
  padding:.85rem 1rem;margin-bottom:.9rem;box-shadow:none;
  transition:border-color .2s ease;
}
.lead-form input:focus,.lead-form textarea:focus,.lead-form select:focus,
.form-card .wpforms-field input:focus,.form-card .wpforms-field textarea:focus,
.form-card .wpcf7 input:focus,.form-card .wpcf7 textarea:focus{
  outline:none;border-color:var(--heat);
}
.lead-form textarea,.form-card .wpcf7 textarea,.form-card .wpforms-field textarea{min-height:110px;resize:vertical}

/* submit buttons -> design-system pill */
.lead-form input[type="submit"],.lead-form button[type="submit"],.lead-form .wpforms-submit,
.form-card .wpforms-submit,.form-card .wpcf7 input[type="submit"]{
  display:inline-flex;align-items:center;gap:.6rem;width:auto;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--heat);color:#fff;border:1px solid var(--heat);border-radius:999px;
  padding:.95rem 1.7rem;cursor:pointer;margin-bottom:0;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.lead-form input[type="submit"]:hover,.lead-form .wpforms-submit:hover,
.form-card .wpforms-submit:hover,.form-card .wpcf7 input[type="submit"]:hover{
  background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px);
}
/* WPForms "modern" markup colours its submit button via CSS variables — point
   those at the orange CTA so the form button matches the rest of the site. */
.lead-form .wpforms-container,.form-card .wpforms-container{
  --wpforms-button-background-color:var(--heat);
  --wpforms-button-text-color:#fff;
  --wpforms-button-border-color:var(--heat);
}
.lead-form .wpforms-form button[type="submit"],.lead-form .wpforms-form .wpforms-submit,
.form-card .wpforms-form button[type="submit"],.form-card .wpforms-form .wpforms-submit{
  background-color:var(--heat)!important;color:#fff!important;border-color:var(--heat)!important;
}
.lead-form .wpforms-form button[type="submit"]:hover,.lead-form .wpforms-form .wpforms-submit:hover,
.form-card .wpforms-form button[type="submit"]:hover,.form-card .wpforms-form .wpforms-submit:hover{
  background-color:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important;
}

/* validation + response messaging, both libraries */
.lead-form .wpcf7-not-valid-tip,.form-card .wpcf7-not-valid-tip,
.lead-form .wpforms-error,.form-card label.wpforms-error{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--heat);
  text-transform:none;margin:-.5rem 0 .8rem;display:block;
}
.lead-form .wpcf7 form .wpcf7-response-output,.form-card .wpcf7 form .wpcf7-response-output{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  border:1px solid var(--line);margin:1rem 0 0;padding:.8rem 1rem;color:var(--ink-65);
}
.lead-form .wpcf7 form.sent .wpcf7-response-output,.form-card .wpcf7 form.sent .wpcf7-response-output{border-color:var(--green);color:var(--green)}
.lead-form .wpcf7 form.invalid .wpcf7-response-output,.form-card .wpcf7 form.invalid .wpcf7-response-output{border-color:var(--heat);color:var(--heat)}
.lead-form .wpforms-confirmation-container-full,.form-card .wpforms-confirmation-container-full{
  background:transparent;border:1px solid var(--green);padding:1rem 1.2rem;
  font-family:var(--mono);font-size:.7rem;color:var(--green);
}
.lead-form .wpforms-field{padding:0 0 .2rem}
.lead-form div.wpforms-container-full{margin:0}