/* ============================================================
   LAMBENT INTEGRATED SOLUTIONS
   Design system: dark industrial ground, imulsion light
   through seams. Light bleeds; it never decorates.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Ground — gunmetal, not pure black */
  --ink-900:#06080B;
  --ink-800:#0A0D12;   /* page */
  --ink-700:#0F131A;   /* raised band */
  --ink-600:#141923;   /* card */
  --ink-500:#1B212C;   /* card hover */
  --line:#212833;      /* hairline */
  --line-soft:#171D26;

  /* Imulsion */
  --glow:#FFB627;
  --glow-hot:#FFD98A;
  --glow-deep:#B86A12;
  --glow-06:rgba(255,182,39,.06);
  --glow-12:rgba(255,182,39,.12);
  --glow-20:rgba(255,182,39,.20);
  --glow-40:rgba(255,182,39,.40);

  /* Text */
  --text:#F4F2EE;
  --text-2:#B4BAC4;
  --text-3:#848C98;

  /* Type */
  --display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Space — 4pt rhythm */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Motion — power2.out ≈ this curve. One rhythm everywhere. */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.55,0,1,.45);
  --t-fast:180ms;
  --t-base:280ms;
  --t-slow:520ms;

  --radius:14px;
  --radius-sm:9px;
  --maxw:1140px;

  color-scheme:dark;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dd,dl{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

html{
  scroll-behavior:smooth;
  /* nav clearance for in-page anchors */
  scroll-padding-top:96px;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  color:var(--text-2);
  background:var(--ink-800);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- 3. GRAIN — weathered industrial texture ---------- */
/* Static, GPU-cheap, pointer-transparent. Sits above ground, below content. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. TYPOGRAPHY ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--text);
  line-height:1.08;
  letter-spacing:-.032em;
  font-weight:700;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,6.2vw,4.4rem)}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.02em;line-height:1.25}
h4{font-size:1.02rem;letter-spacing:-.01em;line-height:1.35}
p{text-wrap:pretty;max-width:68ch}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--glow);
  display:flex;
  align-items:center;
  gap:var(--s3);
}
/* stencil tick before label — equipment-plate cue */
.eyebrow::before{
  content:'';
  width:22px;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow));
  flex:none;
}
.lead{font-size:clamp(1.05rem,1.7vw,1.22rem);line-height:1.6;color:var(--text-2)}
.muted{color:var(--text-3)}
.hot{color:var(--glow)}
strong{color:var(--text);font-weight:600}

/* Numerals never jitter */
.num,.price,td,.stat{font-variant-numeric:tabular-nums}

/* ---------- 5. LAYOUT ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--s5);
  position:relative;
  z-index:2;
}
@media (min-width:768px){ .wrap{padding-inline:var(--s6)} }

section{position:relative;padding-block:clamp(var(--s8),11vw,var(--s10))}
.band{background:var(--ink-700)}

.sec-head{max-width:50rem;margin-bottom:var(--s7)}
.sec-head h2{margin-top:var(--s4)}
.sec-head p{margin-top:var(--s4)}

/* ---------- 6. THE SEAM — signature device ---------- */
/* A hairline that is dark at the edges and lit at the centre,
   as though light is escaping through a crack in the plate. */
.seam{
  position:relative;
  height:1px;
  border:0;
  margin:0;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--line) 18%,
    var(--glow-40) 50%,
    var(--line) 82%,
    transparent 100%);
}
.seam::after{
  content:'';
  position:absolute;
  left:50%;
  top:-2px;
  width:min(340px,50vw);
  height:5px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,var(--glow-20),transparent 72%);
  filter:blur(3px);
  pointer-events:none;
}

/* Section edge seam, used as a top border on bands */
.band::before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 20%,var(--glow-20) 50%,var(--line) 80%,transparent);
}

/* ---------- 7. BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s2);
  min-height:52px;
  padding:0 var(--s6);
  border-radius:var(--radius-sm);
  font-family:var(--body);
  font-size:.97rem;
  font-weight:600;
  letter-spacing:-.005em;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  background:none;
  position:relative;
  transition:transform var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             box-shadow var(--t-base) var(--ease);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn:active{transform:translateY(1px)}

/* Primary — the lit one */
.btn-glow{
  background:var(--glow);
  color:#0A0D12;          /* 10.9:1 on amber */
  box-shadow:0 0 0 rgba(255,182,39,0), 0 8px 24px rgba(0,0,0,.4);
}
.btn-glow:hover{
  background:var(--glow-hot);
  box-shadow:0 0 34px var(--glow-20), 0 10px 28px rgba(0,0,0,.45);
}

/* Secondary — dark plate with a lit top seam */
.btn-plate{
  background:var(--ink-600);
  color:var(--text);
  border-color:var(--line);
  overflow:hidden;
}
.btn-plate::before{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--glow-20),transparent);
  opacity:0;
  transition:opacity var(--t-base) var(--ease);
}
.btn-plate:hover{background:var(--ink-500);border-color:#2C3542}
.btn-plate:hover::before{opacity:1}

.btn-block{width:100%}

/* Visible focus for every interactive thing */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--glow);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute;left:var(--s4);top:-100px;z-index:200;
  background:var(--glow);color:#0A0D12;padding:var(--s3) var(--s5);
  border-radius:var(--radius-sm);font-weight:600;text-decoration:none;
  transition:top var(--t-fast) var(--ease);
}
.skip:focus{top:var(--s4)}

/* ---------- 8. NAV ---------- */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  transition:background-color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(10,13,18,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.nav-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s5);
  min-height:74px;
}
.brand{
  display:flex;align-items:center;gap:var(--s3);
  text-decoration:none;flex:none;
}
.brand-mark{width:30px;height:30px;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-name{
  font-family:var(--display);font-weight:700;font-size:1.04rem;
  letter-spacing:-.025em;color:var(--text);
}
.brand-sub{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-3);
}
.nav-links{display:none;gap:var(--s6);align-items:center}
@media (min-width:900px){ .nav-links{display:flex} }
.nav-links a{
  text-decoration:none;font-size:.93rem;font-weight:500;color:var(--text-2);
  position:relative;padding-block:var(--s2);
  transition:color var(--t-fast) var(--ease);
}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--glow);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--ease);
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:none}
@media (min-width:560px){ .nav-cta{display:inline-flex;min-height:44px;padding-inline:var(--s5);font-size:.9rem} }

/* ---------- 9. HERO ---------- */
.hero{
  padding-top:clamp(120px,17vw,190px);
  padding-bottom:clamp(var(--s8),10vw,var(--s9));
  overflow:hidden;
  isolation:isolate;
}
/* Imulsion pool — the light behind the plate */
.hero-glow{
  position:absolute;
  top:-14%;
  left:50%;
  width:min(1000px,125vw);
  aspect-ratio:1.5/1;
  transform:translate(-50%,0) translateY(var(--drift,0px));
  background:
    radial-gradient(ellipse 48% 42% at 50% 46%,rgba(255,182,39,.17),transparent 68%),
    radial-gradient(ellipse 30% 26% at 50% 40%,rgba(255,217,138,.13),transparent 72%);
  filter:blur(28px);
  pointer-events:none;
  z-index:0;
  will-change:transform;
}
/* The fissure — a vertical crack of light down the hero */
.hero-fissure{
  position:absolute;
  top:0;left:50%;
  width:1px;height:min(460px,52vh);
  transform:translateX(-50%);
  background:linear-gradient(180deg,var(--glow-40),var(--glow-12) 45%,transparent);
  pointer-events:none;z-index:0;
}
.hero-fissure::after{
  content:'';position:absolute;inset:0;left:-2px;width:5px;
  background:linear-gradient(180deg,var(--glow-20),transparent 60%);
  filter:blur(4px);
}
.hero-in{position:relative;z-index:2;max-width:max(52rem,62%)}
.hero h1{margin-top:var(--s5)}
.hero h1 em{
  font-style:normal;
  color:var(--glow);
  /* letters lit from behind */
  text-shadow:0 0 38px var(--glow-40);
}
.hero .lead{margin-top:var(--s5);max-width:44rem}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7);
}
.hero-price{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--s3);
  margin-top:var(--s6);padding:var(--s3) var(--s5);
  border:1px solid var(--line);border-radius:100px;
  background:var(--ink-700);
  font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;color:var(--text-2);
}
.hero-price b{color:var(--glow);font-weight:500}
.hero-price .dot{width:3px;height:3px;border-radius:50%;background:var(--text-3);flex:none}

/* ---------- 10. PROOF STRIP ---------- */
.proof{border-block:1px solid var(--line-soft);background:var(--ink-900);position:relative}
.proof-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line-soft);
  margin-inline:calc(var(--s5) * -1);
}
@media (min-width:768px){
  .proof-grid{grid-template-columns:repeat(4,1fr);margin-inline:calc(var(--s6) * -1)}
}
.proof-cell{
  background:var(--ink-900);
  padding:var(--s6) var(--s5);
  display:flex;flex-direction:column;gap:var(--s2);
  text-align:center;align-items:center;
}
.proof-cell b{
  font-family:var(--display);font-size:.98rem;font-weight:700;
  color:var(--text);letter-spacing:-.015em;
}
.proof-cell span{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-3);
}
.proof section{padding-block:0}

/* ---------- 11. PLATE (card) — dark form, lit seam on top ---------- */
.plate{
  position:relative;
  background:var(--ink-600);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--s6);
  overflow:hidden;
  transition:transform var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             background-color var(--t-base) var(--ease);
}
.plate::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow-40) 50%,transparent);
  opacity:0;transition:opacity var(--t-slow) var(--ease);
}
.plate:hover{transform:translateY(-4px);border-color:#2B3441;background:var(--ink-500)}
.plate:hover::before{opacity:1}

/* ---------- 12. INCLUDES GRID ---------- */
.inc-grid{
  display:grid;gap:var(--s3);
  grid-template-columns:1fr;
}
@media (min-width:640px){ .inc-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .inc-grid{grid-template-columns:repeat(3,1fr)} }
.inc{
  display:flex;gap:var(--s4);align-items:flex-start;
  padding:var(--s5);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);
  background:var(--ink-700);
  transition:border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease);
}
.inc:hover{border-color:var(--line);background:var(--ink-600)}
.inc-ico{
  flex:none;width:34px;height:34px;border-radius:8px;
  display:grid;place-items:center;
  background:var(--glow-06);
  border:1px solid var(--glow-12);
  color:var(--glow);
}
.inc-ico svg{width:17px;height:17px}
.inc h4{margin-bottom:var(--s1)}
.inc p{font-size:.9rem;line-height:1.55;color:var(--text-3)}

/* ---------- 13. PRICING ---------- */
.price-grid{
  display:grid;gap:var(--s4);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:860px){ .price-grid{grid-template-columns:repeat(2,1fr)} }
.tier{padding:var(--s7) var(--s6)}
.tier.is-lit{
  border-color:var(--glow-20);
  background:linear-gradient(180deg,rgba(255,182,39,.05),transparent 42%),var(--ink-600);
}
.tier.is-lit::before{opacity:1}
.tier-tag{
  position:absolute;top:var(--s5);right:var(--s5);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--glow);background:var(--glow-06);
  border:1px solid var(--glow-20);border-radius:100px;
  padding:5px var(--s3);
}
.tier h3{font-size:1.05rem;color:var(--text-2);font-weight:600;letter-spacing:0}
.price{
  display:flex;align-items:baseline;gap:var(--s2);
  margin-top:var(--s4);
  font-family:var(--display);font-size:clamp(2.6rem,5.5vw,3.5rem);
  font-weight:800;letter-spacing:-.04em;color:var(--text);line-height:1;
}
.price small{font-family:var(--body);font-size:.92rem;font-weight:500;color:var(--text-3);letter-spacing:0}
.tier > p{margin-top:var(--s4);font-size:.95rem;color:var(--text-3)}
.tier .seam{margin-block:var(--s6)}
.tier ul{display:flex;flex-direction:column;gap:var(--s3)}
.tier li{display:flex;gap:var(--s3);align-items:flex-start;font-size:.93rem;line-height:1.5}
.tier li svg{flex:none;width:16px;height:16px;margin-top:4px;color:var(--glow)}
.tier li.off{color:var(--text-3)}
.tier li.off svg{color:var(--text-3);opacity:.55}
.tier .btn{margin-top:var(--s7)}
.price-note{
  margin-top:var(--s6);font-size:.87rem;color:var(--text-3);
  text-align:center;max-width:none;
}

/* ---------- 14. THE WORK ---------- */
.work{display:grid;gap:var(--s7);align-items:center;grid-template-columns:1fr}
@media (min-width:960px){ .work{grid-template-columns:1.15fr .85fr;gap:var(--s8)} }

/* Browser chrome around the screenshot */
.frame{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--ink-600);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75);
  position:relative;
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease);
}
.frame:hover{transform:translateY(-5px);box-shadow:0 40px 90px -20px rgba(0,0,0,.85),0 0 60px -30px var(--glow-20)}
.frame-bar{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);
  background:var(--ink-700);
  border-bottom:1px solid var(--line);
}
.frame-dots{display:flex;gap:6px;flex:none}
.frame-dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.frame-url{
  flex:1;font-family:var(--mono);font-size:.66rem;color:var(--text-3);
  background:var(--ink-800);border:1px solid var(--line-soft);
  border-radius:100px;padding:5px var(--s3);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.frame-shot{display:block;width:100%;height:auto;background:#FBF8F2}

.work-meta{display:flex;flex-direction:column;gap:var(--s5)}
.work-tags{display:flex;flex-wrap:wrap;gap:var(--s2)}
.tag{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);border:1px solid var(--line);border-radius:100px;
  padding:5px var(--s3);background:var(--ink-700);
}
.work-list{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s1)}
.work-list li{display:flex;gap:var(--s3);font-size:.93rem;line-height:1.5}
.work-list svg{flex:none;width:15px;height:15px;margin-top:5px;color:var(--glow)}

/* ---------- 15. STEPS ---------- */
.steps{display:grid;gap:var(--s4);grid-template-columns:1fr;counter-reset:step}
@media (min-width:820px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{padding:var(--s6)}
.step-n{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;
  color:var(--glow);margin-bottom:var(--s4);display:block;
}
.step h3{margin-bottom:var(--s3)}
.step p{font-size:.93rem;color:var(--text-3);line-height:1.6}

/* ---------- 16. OWNERSHIP FEATURE ---------- */
.own{
  position:relative;overflow:hidden;
  border:1px solid var(--glow-20);
  border-radius:var(--radius);
  background:
    radial-gradient(ellipse 70% 120% at 50% 0%,rgba(255,182,39,.10),transparent 62%),
    var(--ink-700);
  padding:clamp(var(--s7),6vw,var(--s9)) var(--s6);
  text-align:center;
}
.own::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow),transparent);
}
.own .eyebrow{justify-content:center}
.own h2{margin-top:var(--s4);max-width:22ch;margin-inline:auto}
.own p{margin:var(--s5) auto 0;max-width:56ch}

/* ---------- 17. ABOUT ---------- */
.about{display:grid;gap:var(--s7);grid-template-columns:1fr}
@media (min-width:880px){ .about{grid-template-columns:.85fr 1.15fr;gap:var(--s8)} }
.about-card{padding:var(--s7) var(--s6);align-self:start}
.about-card .seam{margin-block:var(--s5)}
.about-stat{display:flex;flex-direction:column;gap:2px}
.about-stat b{font-family:var(--display);font-size:1.5rem;color:var(--glow);letter-spacing:-.03em}
.about-stat span{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.about-body p + p{margin-top:var(--s5)}
.about-sig{
  margin-top:var(--s6);font-family:var(--mono);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}

/* ---------- 18. FAQ ---------- */
.faq{max-width:52rem;border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) 0;
  min-height:56px;
  cursor:pointer;
  list-style:none;
  font-family:var(--display);font-weight:600;font-size:1.02rem;
  letter-spacing:-.015em;color:var(--text);
  transition:color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--glow)}
.faq-ico{
  flex:none;width:22px;height:22px;position:relative;
  transition:transform var(--t-base) var(--ease);
}
.faq-ico::before,.faq-ico::after{
  content:'';position:absolute;top:50%;left:50%;
  width:12px;height:1.5px;border-radius:2px;background:var(--glow);
  transform:translate(-50%,-50%);
  transition:transform var(--t-base) var(--ease),opacity var(--t-base) var(--ease);
}
.faq-ico::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] .faq-ico::after{transform:translate(-50%,-50%) rotate(0deg);opacity:0}
.faq-a{padding:0 0 var(--s6);max-width:62ch}
.faq-a p{font-size:.95rem;color:var(--text-3);line-height:1.65}
.faq-a p + p{margin-top:var(--s4)}
details[open] .faq-a{animation:fadeUp var(--t-base) var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ---------- 19. CONTACT + FORM ---------- */
.contact{display:grid;gap:var(--s7);grid-template-columns:1fr}
@media (min-width:920px){ .contact{grid-template-columns:.9fr 1.1fr;gap:var(--s8)} }
.contact-side{display:flex;flex-direction:column;gap:var(--s6);align-self:start}
.contact-ways{display:flex;flex-direction:column;gap:var(--s3)}
.way{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s4) var(--s5);min-height:64px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--ink-700);text-decoration:none;
  transition:border-color var(--t-base) var(--ease),background-color var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.way:hover{border-color:var(--glow-20);background:var(--ink-600);transform:translateX(3px)}
.way-ico{
  flex:none;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  background:var(--glow-06);border:1px solid var(--glow-12);color:var(--glow);
}
.way-ico svg{width:17px;height:17px}
.way-txt{display:flex;flex-direction:column;min-width:0}
.way-txt span{font-family:var(--mono);font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;color:var(--text-3)}
.way-txt b{font-size:.97rem;font-weight:600;color:var(--text);overflow-wrap:anywhere}

.form-plate{padding:clamp(var(--s6),4vw,var(--s7))}
.field{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s5)}
.row2{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:560px){ .row2{grid-template-columns:1fr 1fr} }
label{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--text-3);
}
label .req{color:var(--glow);margin-left:3px}
input,textarea{
  width:100%;
  min-height:52px;               /* ≥44px touch target */
  padding:var(--s3) var(--s4);
  font-size:16px;                /* prevents iOS zoom */
  font-family:var(--body);
  color:var(--text);
  background:var(--ink-800);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
textarea{min-height:130px;resize:vertical;line-height:1.6;padding-top:var(--s3)}
input::placeholder,textarea::placeholder{color:#5A626E}
input:hover,textarea:hover{border-color:#2C3542}
input:focus,textarea:focus{
  outline:none;
  border-color:var(--glow);
  box-shadow:0 0 0 3px var(--glow-12);
  background:var(--ink-700);
}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#F0614B}
.err{
  display:none;font-size:.8rem;color:#FF8D79;
  font-family:var(--body);letter-spacing:0;text-transform:none;
}
.err.show{display:flex;gap:6px;align-items:center}
.form-foot{margin-top:var(--s6)}
.form-note{margin-top:var(--s4);font-size:.8rem;color:var(--text-3);text-align:center}
.form-status{
  display:none;margin-bottom:var(--s5);padding:var(--s4) var(--s5);
  border-radius:var(--radius-sm);font-size:.9rem;line-height:1.5;
  border:1px solid var(--glow-20);background:var(--glow-06);color:var(--text);
}
.form-status.show{display:block}
.form-status.is-err{border-color:#7A2E22;background:rgba(240,97,75,.08)}
.btn[aria-busy="true"]{opacity:.65;pointer-events:none}

/* ---------- 20. FOOTER ---------- */
.foot{
  border-top:1px solid var(--line-soft);
  background:var(--ink-900);
  padding-block:var(--s8) var(--s6);
  position:relative;
}
.foot::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow-20) 50%,transparent);
}
.foot-top{
  display:flex;flex-wrap:wrap;gap:var(--s6);
  justify-content:space-between;align-items:flex-start;
}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s5)}
.foot-links a{
  font-size:.88rem;color:var(--text-3);text-decoration:none;
  transition:color var(--t-fast) var(--ease);
}
.foot-links a:hover{color:var(--glow)}
.foot-bot{
  margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:var(--s4);
  justify-content:space-between;align-items:center;
}
.foot-bot p{font-family:var(--mono);font-size:.66rem;letter-spacing:.09em;color:#5F6875}

/* ---------- 21. REVEAL ---------- */
/* Standard tier: 520ms, y24, 60ms stagger. transform+opacity only. */
.rv{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
  transition-delay:var(--d,0ms);
}
.rv.in{opacity:1;transform:none}

/* ---------- 22. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* Render the final state, never a stuck invisible element */
  .rv{opacity:1 !important;transform:none !important}
  .hero-glow{transform:translate(-50%,0) !important}
  .plate:hover,.frame:hover,.way:hover{transform:none !important}
}

/* ---------- 23. PRINT ---------- */
@media print{
  body{background:#fff;color:#000}
  .nav,.hero-glow,.hero-fissure,body::before{display:none}
  .plate,.tier{border:1px solid #ccc;background:#fff}
  h1,h2,h3,h4,.brand-name{color:#000}
}

/* ---------- 24. CASE-STUDY MINIATURE ---------- */
/* A live, weightless rendering of the built site inside the browser frame.
   Replace with a real screenshot when one exists. */
.shot{
  background:#FBF8F2;
  color:#1C2B22;
  padding:14px 16px 20px;
  font-size:10px;
  line-height:1.45;
  container-type:inline-size;
}
.shot-nav{
  display:flex;align-items:center;gap:10px;
  padding-bottom:12px;border-bottom:1px solid #E8E0D2;
}
.shot-logo{height:17px;width:auto;flex:none}
.shot-menu{display:flex;gap:9px;flex:1}
.shot-menu i{display:block;width:26px;height:3px;border-radius:2px;background:#C8BFAE}
.shot-menu i:nth-child(2){width:21px}
.shot-menu i:nth-child(3){width:30px}
.shot-menu i:nth-child(4){width:18px}
.shot-btn{
  flex:none;background:#B07D2B;color:#fff;font-weight:600;
  font-size:8px;padding:5px 9px;border-radius:4px;white-space:nowrap;
}
.shot-body{display:flex;gap:14px;padding-top:16px;align-items:stretch}
.shot-copy{flex:1.35;min-width:0}
.shot-eyebrow{
  font-size:6.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#8A7F6B;margin-bottom:7px;
}
.shot-h1{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(15px,3.1cqi,25px);
  line-height:1.14;letter-spacing:-.015em;color:#1C2B22;
  margin-bottom:8px;font-weight:700;
}
.shot-h1 em{color:#B07D2B;font-style:italic}
.shot-p{font-size:8px;line-height:1.55;color:#5E5748;margin-bottom:11px;max-width:34em}
.shot-cta{
  display:inline-block;font-size:8px;font-weight:600;color:#fff;
  background:#9B3A31;padding:6px 11px;border-radius:100px;margin-right:6px;
}
.shot-cta.alt{background:#2E5E41}
.shot-aside{
  flex:.85;min-width:0;border-radius:8px;
  background:linear-gradient(150deg,#D9CDB6,#B9A886);
  position:relative;min-height:96px;
}
.shot-badge{
  position:absolute;left:9px;bottom:9px;right:9px;
  background:#B07D2B;color:#fff;font-size:8px;font-weight:600;
  padding:6px 8px;border-radius:5px;
}
@media (max-width:520px){
  .shot-aside{display:none}
  .shot-btn{display:none}
}

/* ---------- 25. SMALL-SCREEN CORRECTIONS ---------- */
/* The header must always carry an action. On a phone the descriptor
   line is what gives way, not the button. */
.nav-cta{
  display:inline-flex;
  min-height:44px;
  padding-inline:var(--s4);
  font-size:.87rem;
}
@media (min-width:560px){
  .nav-cta{padding-inline:var(--s5);font-size:.9rem}
}
@media (max-width:419px){
  .brand-sub{display:none}
  .nav-in{gap:var(--s3)}
}

/* The person's name should outrank their own statistics. */
.about-card h3{font-size:1.65rem;letter-spacing:-.03em}

/* ---------- 26. A11Y CORRECTIONS ---------- */
/* Include-grid cards are h3 (they sit under the section h2 — no level
   may be skipped), but they keep the smaller visual weight. */
.inc h3{
  font-size:1.02rem;
  letter-spacing:-.01em;
  line-height:1.35;
  margin-bottom:var(--s1);
}

/* WCAG 2.2 AA asks 24x24 CSS px for pointer targets. Footer links were
   landing at 23px on line-height alone. */
.foot-links a{display:inline-block;padding-block:6px}
.foot-bot a{display:inline-block;padding-block:5px}

/* ---------- 27. LONG CONTACT VALUES ---------- */
/* A 29-character address wrapped mid-word on a narrow phone. Shrink it
   slightly so it stays on one line; anywhere-wrap remains the fallback. */
@media (max-width:480px){
  .way-txt b{font-size:.88rem}
}

/* ---------- 28. FREE AUDIT ---------- */
.audit{
  position:relative;
  display:grid;
  gap:var(--s7);
  grid-template-columns:1fr;
  align-items:center;
  padding:clamp(var(--s7),5vw,var(--s8));
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    radial-gradient(ellipse 60% 100% at 8% 0%,rgba(255,182,39,.07),transparent 60%),
    var(--ink-700);
  overflow:hidden;
}
@media (min-width:900px){
  .audit{grid-template-columns:1.1fr .9fr;gap:var(--s8)}
}
.audit::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow-40) 35%,var(--glow-20) 65%,transparent);
}
.audit h2{margin-top:var(--s4);font-size:clamp(1.6rem,3.1vw,2.2rem)}
.audit .lead{margin-top:var(--s5)}
.audit-form{
  padding:var(--s6);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--ink-800);
}
.audit-form .field:last-of-type{margin-bottom:var(--s6)}
.audit-form .form-note{margin-top:var(--s4)}

/* ---------- 29. LANGUAGE TOGGLE ---------- */
.nav-right{display:flex;align-items:center;gap:var(--s3);flex:none}
.lang{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding-inline:var(--s3);
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--text-2);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--ink-700);
  transition:color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease);
}
.lang:hover{
  color:var(--glow);
  border-color:var(--glow-20);
  background:var(--glow-06);
}
@media (max-width:419px){
  .lang{min-width:40px;padding-inline:var(--s2)}
}

/* ---------- 30. NAV FITS BOTH LANGUAGES ---------- */
/* Spanish labels run ~35% longer than the English ones. Without this the
   items wrap inside the bar and the header grows a second line. */
.nav-links{gap:var(--s5)}
.nav-links a{white-space:nowrap}

/* Show the inline menu only once both languages genuinely fit. Below it,
   the header still carries the logo, the language toggle and the CTA. */
@media (min-width:900px) and (max-width:979px){
  .nav-links{display:none}
}

/* ---------- 31. SERVICE PAGES ---------- */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-3);
  margin-bottom:var(--s5);
}
.crumbs a{color:var(--text-3);text-decoration:none;padding-block:5px;transition:color var(--t-fast) var(--ease)}
.crumbs a:hover{color:var(--glow)}
.crumbs span[aria-current]{color:var(--text-2)}
.crumbs .sep{opacity:.5}

/* Compact hero for sub-pages — shorter than home, same light. */
.hero-sub{padding-top:clamp(108px,14vw,150px);padding-bottom:clamp(var(--s7),7vw,var(--s8))}
.hero-sub h1{font-size:clamp(2rem,4.8vw,3.3rem)}
.hero-sub .hero-in{max-width:46rem}

/* "Is this you?" qualifier list */
.qual{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media (min-width:720px){ .qual{grid-template-columns:1fr 1fr;gap:var(--s3) var(--s6)} }
.qual li{
  display:flex;gap:var(--s3);align-items:flex-start;
  font-size:.97rem;line-height:1.55;color:var(--text-2);
}
.qual li svg{flex:none;width:17px;height:17px;margin-top:4px;color:var(--glow)}

/* Compact price recap */
.price-strip{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s5);
  padding:var(--s6);
  border:1px solid var(--glow-20);
  border-radius:var(--radius);
  background:
    radial-gradient(ellipse 70% 130% at 0% 0%,rgba(255,182,39,.08),transparent 60%),
    var(--ink-600);
  position:relative;overflow:hidden;
}
.price-strip::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,var(--glow-40),transparent 70%);
}
.price-strip-nums{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s5)}
.price-strip b{
  font-family:var(--display);font-size:1.9rem;font-weight:800;
  letter-spacing:-.035em;color:var(--text);
}
.price-strip small{font-size:.9rem;color:var(--text-3)}
.price-strip .or{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}

/* ---------- 32. FOOTER SERVICE LINKS ---------- */
.foot-services{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s3) var(--s5);
  margin-top:var(--s6);
  padding-top:var(--s5);
  border-top:1px solid var(--line-soft);
}
.foot-services-label{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--glow);
  margin-right:var(--s2);
}
.foot-services a{
  display:inline-block;
  padding-block:6px;
  font-size:.86rem;
  color:var(--text-3);
  text-decoration:none;
  transition:color var(--t-fast) var(--ease);
}
.foot-services a:hover{color:var(--text)}

/* Inline links in the contact column sat at 17px on line-height alone. */
.contact-side p a{display:inline-block;padding-block:5px}

/* ============================================================
   33. REVISION PASS — contrast, spacing, tiered pricing
   ============================================================ */

/* --- Hero headline contrast ---
   The accent sat on top of the amber glow, which raised the local
   background luminance and ate the contrast on a phone. Two fixes:
   lift the accent to the hot tone, and pull the glow back underneath it. */
.hero h1 em{
  color:var(--glow-hot);
  text-shadow:0 0 26px rgba(255,182,39,.28), 0 2px 18px rgba(0,0,0,.55);
}
.hero-glow{
  background:
    radial-gradient(ellipse 48% 42% at 50% 46%,rgba(255,182,39,.12),transparent 68%),
    radial-gradient(ellipse 30% 26% at 50% 40%,rgba(255,217,138,.09),transparent 72%);
}

/* --- Hero rhythm --- buttons were floating too far from the sentence. */
.hero-actions{margin-top:var(--s6)}
.hero-price{margin-top:var(--s5)}

/* --- Launch-rate banner --- */
.launch{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s3) var(--s5);
  padding:var(--s4) var(--s6);
  margin-bottom:var(--s6);
  border:1px solid var(--glow-20);
  border-radius:100px;
  background:var(--glow-06);
  overflow:hidden;
}
@media (max-width:640px){ .launch{border-radius:var(--radius);padding:var(--s5)} }
.launch-tag{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.18em;
  text-transform:uppercase;color:#0A0D12;background:var(--glow);
  padding:5px var(--s3);border-radius:100px;flex:none;
}
.launch p{font-size:.92rem;color:var(--text-2);margin:0;max-width:none}
.launch b{color:var(--text)}

/* --- Three tiers --- */
.price-grid.is-three{grid-template-columns:1fr}
@media (min-width:760px){ .price-grid.is-three{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1060px){ .price-grid.is-three{grid-template-columns:repeat(3,1fr)} }
.price-grid.is-three .tier{padding:var(--s7) var(--s5)}

.tier-meta{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);margin-top:var(--s3);
}
.price-was{
  font-family:var(--body);font-size:1rem;font-weight:500;
  color:var(--text-3);text-decoration:line-through;
  text-decoration-color:rgba(132,140,152,.6);
  letter-spacing:0;margin-left:var(--s1);
}
.price sub{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--glow);
  vertical-align:middle;bottom:0;margin-left:var(--s2);
}

/* --- Deposit line — the thing that protects your evenings --- */
.deposit{
  display:flex;align-items:flex-start;gap:var(--s3);
  margin-top:var(--s6);padding:var(--s5);
  border:1px solid var(--line);border-left:2px solid var(--glow);
  border-radius:var(--radius-sm);
  background:var(--ink-700);
}
.deposit svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--glow)}
.deposit p{font-size:.93rem;line-height:1.55;color:var(--text-2);margin:0}
.deposit b{color:var(--text)}

/* --- Care plan row --- */
.care{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s5);margin-top:var(--s4);padding:var(--s6);
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--ink-600);
}
.care-l h3{margin-bottom:var(--s2)}
.care-l p{font-size:.9rem;color:var(--text-3);margin:0}
.care-r{display:flex;flex-wrap:wrap;gap:var(--s5)}
.care-fig{display:flex;flex-direction:column;gap:2px}
.care-fig b{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;color:var(--glow)}
.care-fig span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}

/* --- Add-ons --- */
.addons{
  display:grid;gap:0;grid-template-columns:1fr;
  margin-top:var(--s5);
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
@media (min-width:820px){ .addons{grid-template-columns:1fr 1fr} }
.addon{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line-soft);
  background:var(--ink-700);
  transition:background-color var(--t-fast) var(--ease);
}
.addon:hover{background:var(--ink-600)}
@media (min-width:820px){
  .addon:nth-child(odd){border-right:1px solid var(--line-soft)}
}
.addon-name{font-size:.93rem;color:var(--text-2);line-height:1.4}
.addon-name small{display:block;font-size:.76rem;color:var(--text-3);margin-top:2px}
.addon-price{
  font-family:var(--mono);font-size:.88rem;font-weight:500;
  color:var(--glow);flex:none;
}

/* --- Audit capacity cap --- */
.audit-cap{
  display:flex;align-items:flex-start;gap:var(--s3);
  margin-top:var(--s6);padding:var(--s4) var(--s5);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--ink-800);
  font-size:.88rem;line-height:1.55;color:var(--text-3);
}
.audit-cap svg{flex:none;width:17px;height:17px;margin-top:3px;color:var(--glow)}
.audit-cap b{color:var(--text-2)}

/* ============================================================
   34. CARE PLAN v2, PAYMENT PLAN, SAMPLE BLOCK
   ============================================================ */

/* --- Care plan, rebuilt as a real list of things --- */
.care{display:block}
.care-head{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:var(--s5);margin-bottom:var(--s5);
}
.care-price{display:flex;flex-wrap:wrap;gap:var(--s5);flex:none}
.care-list{
  display:grid;gap:var(--s3);grid-template-columns:1fr;
  padding-top:var(--s5);border-top:1px solid var(--line);
}
@media (min-width:780px){ .care-list{grid-template-columns:1fr 1fr;gap:var(--s3) var(--s6)} }
.care-list li{display:flex;gap:var(--s3);align-items:flex-start;font-size:.93rem;line-height:1.5}
.care-list svg{flex:none;width:16px;height:16px;margin-top:4px;color:var(--glow)}
.care-list b{color:var(--text)}

/* The line that makes the plan make sense */
.care-alt{
  margin-top:var(--s5);padding-top:var(--s5);
  border-top:1px solid var(--line);
  font-size:.9rem;color:var(--text-3);
}
.care-alt b{color:var(--text-2)}

/* --- Payment plan --- */
.pay{
  display:grid;gap:var(--s4);grid-template-columns:1fr;
  margin-top:var(--s4);
}
@media (min-width:720px){ .pay{grid-template-columns:1fr 1fr} }
.pay-opt{
  padding:var(--s6);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--ink-600);
}
.pay-opt.is-lit{border-color:var(--glow-20)}
.pay-opt h4{font-size:1rem;margin-bottom:var(--s2)}
.pay-opt .pay-terms{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;
  color:var(--glow);margin-bottom:var(--s3);
}
.pay-opt p{font-size:.9rem;color:var(--text-3);line-height:1.55;margin:0}
.pay-eg{
  margin-top:var(--s4);padding-top:var(--s4);
  border-top:1px solid var(--line-soft);
  font-size:.84rem;color:var(--text-3);
}
.pay-eg b{color:var(--text-2);font-variant-numeric:tabular-nums}

/* --- "This site is the sample" --- */
.sample{
  position:relative;overflow:hidden;
  border:1px solid var(--glow-20);
  border-radius:var(--radius);
  background:
    radial-gradient(ellipse 80% 130% at 100% 0%,rgba(255,182,39,.09),transparent 62%),
    var(--ink-600);
  padding:clamp(var(--s6),4.5vw,var(--s8));
}
.sample::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow-40) 70%,var(--glow));
}
.sample h2{margin-top:var(--s4);font-size:clamp(1.5rem,3vw,2.1rem)}
.sample-grid{
  display:grid;gap:var(--s4);grid-template-columns:repeat(2,1fr);
  margin-top:var(--s6);
}
@media (min-width:720px){ .sample-grid{grid-template-columns:repeat(4,1fr)} }
.sample-fig{
  padding:var(--s4);border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--ink-700);
}
.sample-fig b{
  display:block;font-family:var(--display);font-size:1.25rem;font-weight:700;
  letter-spacing:-.03em;color:var(--text);
}
.sample-fig span{
  display:block;margin-top:2px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);
}
.sample-total{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3) var(--s5);
  margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--line);
}
.sample-total .big{
  font-family:var(--display);font-size:clamp(1.8rem,4vw,2.4rem);font-weight:800;
  letter-spacing:-.035em;color:var(--glow);
}
.sample-total .was{font-size:1rem;color:var(--text-3);text-decoration:line-through}
.sample-total .lbl{font-size:.9rem;color:var(--text-3)}

/* ============================================================
   35. LAUNCH RATE AS A TEMPORARY OFFER
   The standard price is the price. The launch rate sits under it as a
   clearly separable line, so ending the offer is a delete, not a rewrite.
   ============================================================ */
.tier-launch{
  display:flex;align-items:center;gap:var(--s2);
  margin-top:var(--s3);padding:var(--s2) var(--s3);
  border:1px solid var(--glow-20);border-radius:var(--radius-sm);
  background:var(--glow-06);
  font-size:.84rem;color:var(--text-2);
}
.tier-launch b{
  font-family:var(--display);font-size:1.02rem;font-weight:700;
  letter-spacing:-.02em;color:var(--glow);
}
.sample-total .lbl-launch{font-size:.86rem;color:var(--glow)}

/* ============================================================
   36. PROOF SLOTS — testimonial + PageSpeed
   ============================================================ */
.quote{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  background:radial-gradient(ellipse 60% 120% at 12% 0%,rgba(255,182,39,.07),transparent 60%),var(--ink-600);
  padding:clamp(var(--s7),5vw,var(--s8));
}
.quote::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,var(--glow-40),transparent 65%);
}
.quote blockquote{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.35;
  letter-spacing:-.02em;color:var(--text);text-wrap:balance;
}
.quote blockquote::before{content:'\201C'}
.quote blockquote::after{content:'\201D'}
.quote-by{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s6)}
.quote-by img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line)}
.quote-by .n{font-weight:600;color:var(--text);font-size:.97rem}
.quote-by .r{font-size:.86rem;color:var(--text-3);margin-top:1px}

.speed{
  display:grid;gap:var(--s3);grid-template-columns:repeat(2,1fr);
  margin-top:var(--s6);max-width:30rem;
}
@media (min-width:620px){ .speed{grid-template-columns:repeat(4,1fr)} }
.speed-fig{
  padding:var(--s4) var(--s3);text-align:center;
  border:1px solid var(--glow-20);border-radius:var(--radius-sm);
  background:var(--glow-06);
}
.speed-fig b{
  display:block;font-family:var(--display);font-size:1.5rem;font-weight:800;
  letter-spacing:-.03em;color:var(--glow);line-height:1;
}
.speed-fig span{
  display:block;margin-top:5px;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}
.speed-src{margin-top:var(--s3);font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--text-3)}

/* ============================================================
   37. BOOKING
   Plain links, no third-party script. Nothing to load, nothing
   to break, and it still works with JS off.
   ============================================================ */
.book{
  padding:var(--s5);
  border:1px solid var(--glow-20);
  border-radius:var(--radius-sm);
  background:
    radial-gradient(ellipse 80% 140% at 0% 0%,rgba(255,182,39,.08),transparent 62%),
    var(--ink-700);
}
.book-h{
  display:flex;align-items:center;gap:var(--s3);
  font-family:var(--display);font-weight:700;font-size:1rem;
  letter-spacing:-.02em;color:var(--text);
}
.book-h svg{flex:none;width:18px;height:18px;color:var(--glow)}
.book p{font-size:.88rem;color:var(--text-3);margin:var(--s2) 0 var(--s4);line-height:1.5}
.book-opts{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media (min-width:420px){ .book-opts{grid-template-columns:1fr 1fr} }
.book-opt{
  display:flex;flex-direction:column;gap:2px;
  padding:var(--s4);min-height:64px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--ink-600);text-decoration:none;
  transition:border-color var(--t-base) var(--ease),
             background-color var(--t-base) var(--ease),
             transform var(--t-base) var(--ease);
}
.book-opt:hover{border-color:var(--glow-20);background:var(--ink-500);transform:translateY(-2px)}
.book-opt b{
  font-family:var(--display);font-size:1.1rem;font-weight:700;
  letter-spacing:-.02em;color:var(--glow);
}
.book-opt span{font-size:.82rem;color:var(--text-3);line-height:1.35}
.book-note{
  margin-top:var(--s4);font-family:var(--mono);font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
}

/* ============================================================
   38. COST ESTIMATOR
   Native radios and checkboxes under styled labels: keyboard,
   focus and screen readers all work with no extra script.
   ============================================================ */
[hidden]{display:none!important}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.est{
  display:grid;gap:var(--s5);grid-template-columns:1fr;
  margin-bottom:var(--s7);
}
@media (min-width:900px){ .est{grid-template-columns:1.25fr .75fr;align-items:start} }

.est-controls{
  padding:clamp(var(--s5),3.5vw,var(--s7));
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--ink-600);
  display:flex;flex-direction:column;gap:var(--s6);
}
.est-h{margin-top:var(--s3);font-size:clamp(1.25rem,2.4vw,1.6rem)}

.est-group{border:0;margin:0;padding:0;min-width:0}
.est-group legend,.est-label{
  padding:0;margin-bottom:var(--s3);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);
}
.est-hint{font-size:.84rem;color:var(--text-3);margin:0}
.est-hint b{color:var(--glow);font-weight:500}

/* segmented control: one of several */
.seg{display:grid;gap:var(--s2);grid-template-columns:repeat(3,1fr)}
.seg-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:520px){ .seg{grid-template-columns:1fr} }

/* the input covers its label, so the whole label is the tap target */
.seg label,.chips label{position:relative;display:block;cursor:pointer}
.seg input,.chips input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
.seg span,.chips span{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);flex-wrap:wrap;
  min-height:48px;padding:var(--s2) var(--s3);text-align:center;
  font-size:.9rem;font-weight:500;color:var(--text-2);line-height:1.3;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--ink-800);
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.seg span b,.chips span b{font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--glow)}
.seg label:hover span,.chips label:hover span{border-color:#2C3542;color:var(--text)}
.seg input:checked + span,.chips input:checked + span{
  border-color:var(--glow);color:var(--text);
  background:linear-gradient(180deg,rgba(255,182,39,.10),rgba(255,182,39,.03)),var(--ink-800);
}
.seg input:focus-visible + span,.chips input:focus-visible + span{
  outline:2px solid var(--glow);outline-offset:3px;
}

/* multi-select chips */
.chips{display:grid;gap:var(--s2);grid-template-columns:1fr}
@media (min-width:560px){ .chips{grid-template-columns:1fr 1fr} }
.chips span{justify-content:space-between;text-align:left;padding-inline:var(--s4)}
.chips input:checked + span::before{content:'\2713';color:var(--glow);font-weight:700;margin-right:auto;order:-1}
.chips input:checked + span{gap:var(--s3)}

/* stepper */
.est-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4)}
.stepper{display:flex;align-items:center;gap:var(--s2)}
.step-btn{
  width:48px;height:48px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--ink-800);color:var(--text);
  font-size:1.3rem;line-height:1;cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.step-btn:hover{border-color:var(--glow-20);background:var(--ink-500)}
.step-btn:disabled{opacity:.4;cursor:not-allowed}
.stepper output{
  min-width:2.4ch;text-align:center;font-family:var(--display);font-weight:700;
  font-size:1.3rem;color:var(--text);font-variant-numeric:tabular-nums;
}

/* the summary — sticks beside the controls on wide screens */
.est-sum{
  position:relative;overflow:hidden;
  padding:clamp(var(--s5),3vw,var(--s6));
  border:1px solid var(--glow-20);border-radius:var(--radius);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%,rgba(255,182,39,.10),transparent 65%),
    var(--ink-700);
  display:flex;flex-direction:column;gap:var(--s4);
}
.est-sum::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow-40),transparent);
}
@media (min-width:900px){ .est-sum{position:sticky;top:calc(92px + env(safe-area-inset-top,0px))} }
.est-sum-lbl{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3);margin:0;
}
.est-total{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(2.6rem,6vw,3.4rem);letter-spacing:-.04em;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.est-launch{
  margin:0;padding:var(--s2) var(--s3);
  border:1px solid var(--glow-20);border-radius:var(--radius-sm);background:var(--glow-06);
  font-size:.86rem;color:var(--text-2);
}
.est-launch b{font-family:var(--display);font-size:1.05rem;color:var(--glow);font-variant-numeric:tabular-nums}
.est-split{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
}
.est-split div{background:var(--ink-800);padding:var(--s3);display:flex;flex-direction:column;gap:2px}
.est-split span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.est-split b{font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.est-note{margin:0;font-size:.78rem;color:var(--text-3)}
.est-care{margin:0;font-size:.88rem;color:var(--text-2)}
.est-care b{color:var(--glow);font-variant-numeric:tabular-nums}
.est-inc{margin:0;padding-top:var(--s4);border-top:1px solid var(--line);font-size:.86rem;color:var(--text-2);line-height:1.5}
.est-inc span:first-child{
  display:block;margin-bottom:var(--s1);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
}
.est-fine{margin:0;font-size:.76rem;color:var(--text-3);text-align:center}

/* ============================================================
   39. BILINGUAL SECTION — the positioning
   ============================================================ */
.cmp{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:820px){ .cmp{grid-template-columns:1fr 1fr} }
.cmp-col{
  padding:clamp(var(--s5),3.5vw,var(--s7));
  border:1px solid var(--line);border-radius:var(--radius);background:var(--ink-600);
}
.cmp-col.is-lit{
  border-color:var(--glow-20);
  background:radial-gradient(ellipse 80% 90% at 0% 0%,rgba(255,182,39,.08),transparent 62%),var(--ink-600);
  position:relative;overflow:hidden;
}
.cmp-col.is-lit::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,var(--glow-40),transparent 70%);
}
.cmp-col h3{font-size:1.1rem;margin-bottom:var(--s5)}
.cmp-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s4)}
.cmp-col li{display:flex;gap:var(--s3);align-items:flex-start;font-size:.93rem;line-height:1.55;color:var(--text-2)}
.cmp-col li svg{flex:none;width:17px;height:17px;margin-top:3px}
.cmp-col.is-lit li svg{color:var(--glow)}
.cmp-col:not(.is-lit) li{color:var(--text-3)}
.cmp-col:not(.is-lit) li svg{color:var(--text-3);opacity:.7}
.cmp-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);
  margin-top:var(--s5);padding:var(--s5) var(--s6);
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--ink-700);
}
.cmp-foot p{margin:0;font-size:.92rem;color:var(--text-2);max-width:none}
.cmp-foot b{color:var(--glow)}

/* ============================================================
   40. CASE STUDY — situation / what was built / measured result
   ============================================================ */
.case{display:grid;gap:var(--s6);grid-template-columns:1fr;align-items:start}
@media (min-width:960px){ .case{grid-template-columns:1.1fr .9fr;gap:var(--s8)} }
.case + .case{margin-top:var(--s9);padding-top:var(--s8);border-top:1px solid var(--line-soft)}
.case-body{display:flex;flex-direction:column;gap:var(--s5)}
.case-steps{margin:0;display:flex;flex-direction:column;gap:var(--s5)}
.case-steps dt{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--glow);margin-bottom:var(--s2);
}
.case-steps dd{margin:0;font-size:.95rem;line-height:1.6;color:var(--text-2)}
.case-steps ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s2)}
.case-steps li{display:flex;gap:var(--s3);font-size:.93rem;line-height:1.5}
.case-steps li svg{flex:none;width:15px;height:15px;margin-top:5px;color:var(--glow)}
.case-result{grid-column:1/-1}
.case-result .speed{max-width:none;margin-top:var(--s3)}
@media (min-width:620px){ .case-result .speed{grid-template-columns:repeat(4,1fr)} }
.case-result-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s4)}
.case-result-h dt,.case-result-h .lbl{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--glow);
}

/* case-study figures: fill the row whatever the count (3 today, 4 once PageSpeed is in) */
.case-result .speed{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
@media (min-width:620px){ .case-result .speed{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} }

/* ============================================================
   41. SMALL PHONES — pull the hero up under the header
   At 360x640 the gap above the eyebrow read as an empty screen and the
   buttons fell below the fold. Touch targets stay at 48px.
   ============================================================ */
@media (max-width:480px){
  .hero{padding-top:calc(88px + env(safe-area-inset-top,0px))}
  .hero-sub{padding-top:calc(88px + env(safe-area-inset-top,0px))}
  .hero h1{margin-top:var(--s4)}
  .hero .lead{margin-top:var(--s4);font-size:1rem;line-height:1.55}
  .hero-actions{margin-top:var(--s5);gap:var(--s2)}
  .hero-actions .btn{min-height:48px}
  .hero-price{margin-top:var(--s4)}
}

/* =============== 42. About headshot =============== */
.about-photo{
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radius-sm);border:1px solid var(--line);
  margin-bottom:var(--s6);background:var(--ink-800);
  box-shadow:0 0 0 1px rgba(255,182,39,.06),0 18px 40px -24px rgba(255,182,39,.35);
}
@media (max-width:879px){ .about-photo{max-width:360px} }