:root{
  color-scheme: light;
  --ink:      #0F2436;
  --ink-soft: #1C3A55;
  --paper:    #F6F7F5;
  --white:    #FFFFFF;
  --steel:    #5E7285;
  --amber:    #E09F3E;
  --amber-dk: #C4832A;
  --amber-lt: #F0B65C;
  --amber-tx: #94600F;   /* amber dark enough for small text on light backgrounds */
  --green:    #37946E;
  --line:     #DBE0E4;

  /* dark bands: header, hero, contact, footer */
  --night:      #08141F;
  --night-2:    #0E2132;
  --night-line: rgba(255,255,255,.09);
  --mist:       #A9BED0;
  --mist-dim:   #7F96AB;
  --ok:         #4CC38A;

  --display: 'Archivo', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --wrap: 1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none !important;transition:none !important} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(224,159,62,.35)}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}
h1,h2,h3{font-family:var(--display); font-weight:800; letter-spacing:-0.022em; line-height:1.08; margin:0}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:2px}

/* section label: mono, uppercase, amber rule in front */
.eyebrow{
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
  font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber-tx);
}
.eyebrow::before{content:''; width:24px; height:2px; background:currentColor; flex:none}
.hero-band .eyebrow, .contact .eyebrow, .offer .eyebrow{color:var(--amber)}

/* faint circuit grid behind the dark bands */
.hero-band::before, .contact::before, .offer::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px; background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 72% 18%, #000 18%, transparent 72%);
          mask-image:radial-gradient(ellipse 75% 85% at 72% 18%, #000 18%, transparent 72%);
}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50; color:var(--white);
  background:rgba(8,20,31,.86); -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--night-line);
}
.bar{display:flex; align-items:center; gap:20px; height:68px}
.mark{font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.03em; text-decoration:none; white-space:nowrap}
.mark span{color:var(--amber)}
.mark{display:inline-flex; align-items:center}
.mark-icon{flex:none; margin-right:10px; border-radius:7px; box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.status{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--mist-dim); margin-right:auto; white-space:nowrap;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);position:relative;flex:none}
.dot::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--ok);
  animation:ping 2.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(2.6);opacity:0}}
nav{display:flex; gap:18px; font-size:15px}
nav a{text-decoration:none; color:var(--mist); font-weight:500; white-space:nowrap; transition:color .15s}
nav a:hover{color:var(--white)}
nav a[aria-current="page"]{color:var(--white); box-shadow:inset 0 -2px 0 var(--amber)}
.callbtn{
  background:var(--amber); color:var(--ink); text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:15px;
  padding:10px 18px; border-radius:7px; white-space:nowrap;
  box-shadow:0 6px 20px -8px rgba(224,159,62,.7); transition:background .15s;
}
.callbtn:hover{background:var(--amber-lt)}
@media(max-width:640px){ .cb-num{display:none} .bar{gap:12px} }
@media(max-width:1200px){ .status{font-size:0} .status .dot{margin-right:0} }
@media(max-width:1020px){ nav{display:none} }
/* ===== Mobile menu ===== */
.menu-btn{display:none; align-items:center; gap:7px; font-family:var(--display); font-weight:600; font-size:15px; color:var(--white); background:transparent; border:1.5px solid rgba(255,255,255,.35); border-radius:7px; padding:8px 12px; cursor:pointer}
.menu-btn svg{width:18px; height:18px; flex:none}
.menu-btn .x{display:none}
header.open .menu-btn .bars{display:none}
header.open .menu-btn .x{display:block}
@media(max-width:1020px){
  .js .menu-btn{display:inline-flex}
  .js header.open nav{display:flex; flex-direction:column; gap:0; position:absolute; top:100%; left:0; right:0; background:var(--night); border-bottom:1px solid var(--night-line); box-shadow:0 20px 30px -18px rgba(0,0,0,.6); padding:4px 24px 12px; font-size:17px}
  .js header.open nav a{padding:14px 0; color:var(--white); border-bottom:1px solid var(--night-line)}
  .js header.open nav a:last-child{border-bottom:0}
}
@media(max-width:480px){ .menu-btn .lbl{display:none} .menu-btn{padding:8px 10px} }
@media(max-width:380px){ .wrap.bar{padding:0 16px; gap:8px} .status{display:none} .callbtn{padding:10px 14px} .mark{font-size:18px; margin-right:auto} }

/* ---------- hero ---------- */
.hero-band{
  position:relative; isolation:isolate; overflow:hidden; color:var(--white);
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(224,159,62,.20), transparent 62%),
    radial-gradient(760px 520px at -8% 108%, rgba(52,118,182,.26), transparent 62%),
    var(--night);
}
.hero{padding-top:84px; padding-bottom:76px}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:56px; align-items:center}
.hero h1{font-size:clamp(2.6rem, 6vw, 4.4rem); max-width:16ch}
.hero h1 .hl{
  background:linear-gradient(95deg, var(--amber-lt), var(--amber) 55%, var(--amber-dk));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.caret{display:inline-block; width:.42em; height:.82em; margin-left:.1em; vertical-align:-.04em; background:var(--amber); animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero .lede{font-size:clamp(1.05rem,2.1vw,1.24rem); color:var(--mist); max-width:56ch; margin-top:22px}
.hero .lede strong{color:var(--white); font-weight:600}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.btn{
  display:inline-block; text-decoration:none; font-family:var(--display);
  font-weight:600; font-size:16px; padding:14px 24px; border-radius:8px;
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn-primary{background:var(--amber); color:var(--ink); border:1px solid var(--amber-dk); box-shadow:0 10px 28px -10px rgba(224,159,62,.65)}
.btn-primary:hover{background:var(--amber-lt)}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink); color:var(--white)}
.hero-band .btn-ghost, .offer .btn-ghost{color:var(--white); border-color:rgba(255,255,255,.32)}
.hero-band .btn-ghost:hover, .offer .btn-ghost:hover{background:var(--white); color:var(--ink); border-color:var(--white)}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:44px} .hero{padding-top:64px} }
@media(max-width:480px){ .hero .eyebrow{font-size:11.5px; letter-spacing:.08em; gap:8px} .hero .eyebrow::before{width:16px} }

/* terminal card in the hero (decorative, aria-hidden) */
.term{
  background:linear-gradient(180deg, #102538, #0A1826); color:#C9D7E3;
  border:1px solid rgba(255,255,255,.1); border-radius:14px; overflow:hidden;
  box-shadow:0 34px 70px -28px rgba(0,0,0,.75), 0 0 90px -20px rgba(224,159,62,.28);
  font-family:var(--mono); font-size:13.5px; line-height:1.85;
}
.term-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); font-size:12px; color:var(--mist-dim)}
.term-bar i{width:10px; height:10px; border-radius:50%; background:#D9645B; opacity:.85}
.term-bar i:nth-child(2){background:var(--amber)}
.term-bar i:nth-child(3){background:var(--ok)}
.term-bar span{margin-left:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.term-body{padding:16px 18px 18px}
.tl{display:flex; align-items:baseline; gap:10px; white-space:nowrap}
.tl i{flex:1 1 auto; min-width:12px; border-bottom:1px dotted rgba(255,255,255,.2); transform:translateY(-5px)}
.tl b{font-weight:500; color:#E8EEF3}
.tl .ok{color:var(--ok)}
.tl .warn{color:var(--amber)}
.tl s{color:var(--mist-dim)}
.tl.cmd{display:block; color:var(--white); margin-top:10px}
.tl.cmd:first-child{margin-top:0}
.tl .p{color:var(--amber); margin-right:6px}
.tl.note{color:var(--mist-dim); white-space:normal}
.tl.total{border-top:1px solid rgba(255,255,255,.1); margin-top:4px; padding-top:4px}
.tl.total b{color:var(--amber); font-weight:600}
.term .caret{width:.6em; height:1.1em; margin:0; vertical-align:-.22em}
@media (prefers-reduced-motion: no-preference){
  .term .tl{animation:typein .5s steps(26, end) both; animation-delay:calc(var(--i, 0) * 240ms + 350ms)}
}
@keyframes typein{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@media(max-width:420px){ .term{font-size:12.5px} .term-body{padding:14px 14px 16px} }

/* price chips under hero */
.chips{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:64px 0 0}
.chip{
  position:relative; padding:22px 22px 22px; border-radius:12px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1);
  transition:border-color .2s, background .2s;
}
.chip::before{content:''; position:absolute; left:22px; top:-1px; width:30px; height:2px; background:var(--amber)}
.chip:hover{border-color:rgba(224,159,62,.5); background:rgba(255,255,255,.055)}
.chip b{display:block; font-family:var(--display); font-size:clamp(1.7rem,3.4vw,2.2rem); font-weight:800; letter-spacing:-.03em; color:var(--white)}
.chip span{display:block; color:var(--mist); font-size:14.5px; margin-top:4px; line-height:1.45}
@media(max-width:700px){ .chips{grid-template-columns:1fr; gap:10px; margin-top:48px} }

/* ---------- generic section ---------- */
section{padding:88px 0}
.sec-head{max-width:60ch; margin-bottom:42px}
.sec-head h2{font-size:clamp(1.9rem,3.8vw,2.65rem)}
.sec-head p{color:var(--steel); margin-top:14px; font-size:1.05rem}

/* ---------- services ---------- */
.svc{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.svc-item{
  background:var(--white); border:1px solid var(--line); border-radius:12px; padding:22px 20px;
  transition:transform .25s ease, border-color .25s, box-shadow .25s;
}
.svc-item:hover{transform:translateY(-3px); border-color:rgba(224,159,62,.65); box-shadow:0 20px 36px -24px rgba(15,36,54,.5)}
.svc-ic{display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:16px; border-radius:10px; background:var(--ink); color:var(--amber); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.svc-ic svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.svc-item h3{font-size:1.08rem; font-weight:600; letter-spacing:-.01em}
.svc-item p{color:var(--steel); font-size:15px; line-height:1.6; margin:7px 0 0}
@media(max-width:980px){ .svc{grid-template-columns:repeat(2,1fr)} .svc-item:last-child:nth-child(odd){grid-column:1 / -1} }
@media(max-width:560px){ .svc{grid-template-columns:1fr} .svc-item:last-child:nth-child(odd){grid-column:auto} }

/* e-waste callout under the services grid */
.ewaste{display:flex; align-items:center; gap:16px; margin-top:16px; padding:16px 20px; border:1px dashed var(--amber-dk); border-radius:12px; background:rgba(224,159,62,.07)}
.ewaste p{margin:0; font-size:15px}
.ewaste-ic{display:flex; align-items:center; justify-content:center; flex:none; width:42px; height:42px; border-radius:10px; background:var(--ink); color:var(--amber)}
.ewaste-ic svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@media(max-width:560px){ .ewaste{align-items:flex-start; padding:14px 16px} }

/* ---------- pricing ---------- */
.pricing{
  background-color:#EDF0F2; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background-image:radial-gradient(rgba(15,36,54,.10) 1px, transparent 1.4px); background-size:20px 20px;
}
.plists{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.plist{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:24px 26px 12px; box-shadow:0 18px 40px -34px rgba(15,36,54,.45)}
.plist h3{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding-bottom:12px; border-bottom:2px solid var(--ink); margin-bottom:4px;
}
.plist h3::before{content:''; width:8px; height:8px; border-radius:2px; background:var(--amber); flex:none}
.row{display:flex; align-items:baseline; gap:10px; padding:11px 0; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .name{flex:0 1 auto}
.row .name em{display:block; font-style:normal; color:var(--steel); font-size:14px; margin-top:2px}
.row .leader{flex:1 1 auto; border-bottom:1px dotted #B9C2CA; transform:translateY(-4px); min-width:18px}
.row .amt{font-family:var(--mono); font-weight:600; font-size:15.5px; white-space:nowrap}
.pnote{color:var(--steel); font-size:14.5px; margin-top:26px; max-width:70ch}
@media(max-width:780px){ .plists{grid-template-columns:1fr; gap:16px} .plist{padding:20px 18px 8px} }

/* Recent client sites (inside #websites); one .work-card per launched client */
.work{margin-top:36px}
.work-h{display:flex; align-items:center; gap:10px; margin-bottom:14px; font-family:var(--mono); font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-tx)}
.work-h::before{content:''; width:8px; height:8px; border-radius:2px; background:var(--amber); flex:none}
.work-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap:16px}
.work-card{display:block; overflow:hidden; text-decoration:none; background:var(--white); border:1px solid var(--line); border-radius:12px; transition:transform .25s ease, border-color .25s, box-shadow .25s}
.work-card:hover{transform:translateY(-3px); border-color:rgba(224,159,62,.65); box-shadow:0 20px 36px -24px rgba(15,36,54,.5)}
.work-bar{display:flex; align-items:center; gap:6px; padding:8px 12px; background:var(--night)}
.work-bar i{width:8px; height:8px; border-radius:50%; background:#D9645B; opacity:.85}
.work-bar i:nth-child(2){background:var(--amber)}
.work-bar i:nth-child(3){background:var(--ok)}
.work-bar em{margin-left:8px; font-style:normal; font-family:var(--mono); font-size:11px; color:var(--mist-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.work-shot{display:block; aspect-ratio:16 / 10; background:var(--night)}
.work-shot img{display:block; width:100%; height:100%; object-fit:cover}
.work-body{display:block; padding:14px 16px 16px; border-top:1px solid var(--line)}
.work-body b{display:block; font-family:var(--display); font-size:1.02rem}
.work-body span{display:block; margin-top:4px; font-size:14px; color:var(--steel)}
.work-body .work-link{margin-top:10px; font-family:var(--mono); font-size:12.5px; color:var(--amber-tx)}
.work-card:hover .work-link{color:var(--ink)}

/* ---------- plans ---------- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px}
.plans-2{grid-template-columns:repeat(2,1fr); max-width:880px}
.plan{
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:28px 26px;
  transition:transform .25s ease, box-shadow .25s;
}
.plan:hover{transform:translateY(-3px); box-shadow:0 24px 44px -28px rgba(15,36,54,.5)}
.plan.feature{
  color:var(--white); border-color:rgba(224,159,62,.55);
  background:radial-gradient(420px 220px at 100% 0%, rgba(224,159,62,.16), transparent 65%), linear-gradient(180deg, var(--night-2), var(--night));
  box-shadow:0 28px 54px -28px rgba(224,159,62,.45);
}
.plan h3{font-family:var(--mono); font-size:.82rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--steel)}
.plan.feature h3{color:var(--amber)}
.plan .fee{font-family:var(--display); font-weight:800; font-size:2.4rem; letter-spacing:-.03em; margin:12px 0 2px}
.plan .fee small{font-size:1rem; font-weight:600; letter-spacing:0; color:var(--steel)}
.plan.feature .fee small{color:var(--mist)}
.plan .per{font-size:14px; color:var(--steel)}
.plan.feature .per{color:var(--mist)}
.plan ul{list-style:none; padding:0; margin:18px 0 0; font-size:15px}
.plan li{padding:8px 0 8px 26px; position:relative; border-top:1px solid var(--line)}
.plan.feature li{border-top-color:rgba(255,255,255,.1)}
.plan li::before{content:''; position:absolute; left:2px; top:15px; width:10px; height:5px; border-left:2px solid var(--amber-dk); border-bottom:2px solid var(--amber-dk); transform:rotate(-45deg)}
.plan.feature li::before{border-color:var(--amber)}
@media(max-width:860px){ .plans{grid-template-columns:1fr} }

/* Home Care: shared perks strip + founding-member note */
.perks{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px; max-width:880px}
.perks b{font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-tx); margin-right:4px}
.perks span{display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line); border-radius:999px; padding:6px 14px 6px 12px; font-size:14.5px}
.perks span::before{content:''; width:8px; height:4px; border-left:2px solid var(--amber-dk); border-bottom:2px solid var(--amber-dk); transform:rotate(-45deg) translateY(-1px); flex:none}
.founding{max-width:880px; margin:22px 0 0; padding:12px 16px; border:1px dashed var(--amber-dk); border-radius:10px; background:rgba(224,159,62,.08); font-size:15px}
.founding b{font-family:var(--display)}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start}
.creds{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:6px 24px; box-shadow:0 18px 40px -34px rgba(15,36,54,.45)}
.creds div{padding:14px 0; border-bottom:1px solid var(--line); font-size:15.5px}
.creds div:last-child{border-bottom:0}
.creds b{display:block; font-family:var(--mono); font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-tx); margin-bottom:2px}
@media(max-width:820px){ .about{grid-template-columns:1fr; gap:34px} }

/* ---------- area + faq ---------- */
.towns{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.towns span{display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line); border-radius:999px; padding:6px 14px 6px 12px; font-size:14.5px; transition:border-color .2s}
.towns span::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--amber); flex:none}
.towns span:hover{border-color:var(--amber)}
details{border-bottom:1px solid var(--line); padding:16px 0}
summary{cursor:pointer; font-weight:600; font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; gap:16px; transition:color .15s}
summary:hover{color:var(--ink-soft)}
summary::-webkit-details-marker{display:none}
summary::after{content:'+'; font-family:var(--mono); font-weight:500; color:var(--amber-dk); font-size:1.4rem; line-height:1}
details[open] summary::after{content:'\2212'}
details p{margin:12px 0 0; color:var(--steel); max-width:70ch}

/* ---------- contact ---------- */
.contact{
  position:relative; isolation:isolate; overflow:hidden; color:var(--white);
  background:
    radial-gradient(820px 480px at 100% 0%, rgba(224,159,62,.14), transparent 60%),
    radial-gradient(720px 520px at 0% 100%, rgba(52,118,182,.22), transparent 60%),
    var(--night);
}
.contact h2{color:var(--white)}
.contact .sec-head p{color:var(--mist)}
.cgrid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start}
.cdirect a{display:block; font-family:var(--display); font-weight:600; font-size:1.5rem; text-decoration:none; margin-bottom:6px; transition:color .15s}
.cdirect a:hover{color:var(--amber)}
.cdirect p{color:var(--mist); font-size:15px}
.hours{margin-top:26px; border-top:1px solid var(--night-line)}
.hours div{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--night-line); font-size:15px; color:#C6D4E0}
.hours div span:last-child{font-family:var(--mono); font-size:14px; color:var(--mist)}
form{display:grid; gap:14px}
.contact form{background:rgba(255,255,255,.03); border:1px solid var(--night-line); border-radius:16px; padding:28px; box-shadow:0 30px 60px -36px rgba(0,0,0,.8)}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
label{display:block; font-size:14px; color:var(--mist); margin-bottom:6px}
input,textarea,select{
  width:100%; font-family:var(--body); font-size:16px; color:var(--white);
  background:rgba(8,20,31,.65); border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:12px 14px;
  transition:border-color .15s, box-shadow .15s;
}
input:hover,textarea:hover,select:hover{border-color:rgba(255,255,255,.26)}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(224,159,62,.25)}
input::placeholder,textarea::placeholder{color:#6E8498}
input:-webkit-autofill{-webkit-text-fill-color:var(--white); -webkit-box-shadow:0 0 0 40px var(--night-2) inset; caret-color:var(--white)}
option{background:var(--night-2); color:var(--white)}
textarea{min-height:120px; resize:vertical}
.submit{
  justify-self:start; background:var(--amber); color:var(--ink); border:none;
  font-family:var(--display); font-weight:700; font-size:16px;
  padding:14px 28px; border-radius:8px; cursor:pointer;
  box-shadow:0 12px 30px -10px rgba(224,159,62,.65); transition:background .15s;
}
.submit:hover{background:var(--amber-lt)}
.fineprint{font-size:13.5px; color:var(--mist-dim); margin:0}
.submit:disabled{opacity:.75; cursor:progress}
.form-error{margin:0; font-size:14.5px; color:#FFB4A8}

/* confirmation dialog shown by form.js after a successful send */
dialog.sent{
  width:min(440px, calc(100% - 32px)); padding:0; color:var(--white);
  border:1px solid rgba(224,159,62,.45); border-radius:16px;
  background:radial-gradient(420px 220px at 100% 0%, rgba(224,159,62,.18), transparent 65%), linear-gradient(180deg, var(--night-2), var(--night));
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85), 0 0 90px -20px rgba(224,159,62,.32);
}
dialog.sent::backdrop{background:rgba(4,10,16,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.sent-box{padding:30px 28px 26px}
.sent-icon{
  display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:18px;
  border-radius:50%; background:rgba(76,195,138,.12); color:var(--ok);
  box-shadow:inset 0 0 0 1px rgba(76,195,138,.45), 0 0 0 6px rgba(76,195,138,.08);
}
.sent-icon svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
dialog.sent .eyebrow{color:var(--amber); margin-bottom:10px}
dialog.sent h2{font-size:1.6rem; margin-bottom:12px}
dialog.sent p{color:var(--mist); font-size:15.5px}
dialog.sent p a{color:var(--white)}
dialog.sent .sent-log{display:flex; flex-wrap:wrap; align-items:baseline; font-family:var(--mono); font-size:13px; color:var(--mist-dim); padding:10px 12px; border-radius:8px; background:rgba(0,0,0,.25); border:1px solid var(--night-line)}
.sent-log .p{color:var(--amber); margin-right:6px}
.sent-log b{margin-left:auto; padding-left:12px; font-weight:500; color:var(--ok)}
dialog.sent .btn{cursor:pointer; margin-top:6px}
@media (prefers-reduced-motion: no-preference){
  dialog.sent[open]{animation:pop .35s cubic-bezier(.2,.8,.2,1)}
  dialog.sent[open]::backdrop{animation:fadein .3s ease}
  dialog.sent[open] .sent-icon path{stroke-dasharray:22; stroke-dashoffset:22; animation:draw .45s .2s ease forwards}
}
@keyframes pop{from{opacity:0; transform:translateY(12px) scale(.96)} to{opacity:1; transform:none}}
@keyframes fadein{from{opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@media(max-width:820px){ .cgrid{grid-template-columns:1fr; gap:40px} .f2{grid-template-columns:1fr} .contact form{padding:20px} }

/* ---------- footer ---------- */
footer{padding:30px 0; font-size:14.5px; color:var(--mist-dim); background:var(--night); border-top:1px solid var(--night-line)}
.fbar{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center}
footer a{text-decoration:none; transition:color .15s}
footer a:hover{color:var(--white)}
.social{display:flex; gap:10px}
.social a{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:var(--mist); border:1px solid var(--night-line); transition:color .15s, border-color .15s, background .15s}
.social a:hover{color:var(--amber); border-color:rgba(224,159,62,.55); background:rgba(224,159,62,.08)}
.social svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.social svg.fill{fill:currentColor; stroke:none}

/* =========================================================
   business.html components
   ========================================================= */
.problems{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:risk}
.problem{position:relative; overflow:hidden; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:24px 24px 20px}
.problem::before{counter-increment:risk; content:"Risk 0" counter(risk); display:block; margin-bottom:12px; font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-tx)}
.problem::after{content:''; position:absolute; left:0; top:0; right:0; height:3px; background:linear-gradient(90deg, var(--amber), transparent)}
.problem h3{font-size:1.1rem; font-weight:600; letter-spacing:-.01em}
.problem p{color:var(--steel); font-size:15.5px; margin:8px 0 0}
@media(max-width:820px){ .problems{grid-template-columns:1fr; gap:14px} }

.tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:14px; background:var(--white); box-shadow:0 18px 40px -34px rgba(15,36,54,.45)}
table.cmp{width:100%; min-width:640px; border-collapse:collapse; font-size:15px}
table.cmp th, table.cmp td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
table.cmp thead th{font-family:var(--display); font-weight:700; font-size:1rem; background:var(--paper); border-bottom:2px solid var(--ink)}
table.cmp thead th.hl{background:var(--night); color:var(--white); border-bottom-color:var(--amber)}
table.cmp td.hl{background:#F3F6F9}
table.cmp tbody tr:last-child td, table.cmp tbody tr:last-child th{border-bottom:0}
table.cmp tbody th{font-weight:500}
table.cmp .y{color:var(--green); font-weight:700}
table.cmp .n{color:#B3BDC6}
table.cmp tr.group th{font-family:var(--mono); font-weight:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-tx); background:var(--paper); padding-top:18px}
table.cmp .price{font-family:var(--display); font-weight:800; font-size:1.35rem; letter-spacing:-.02em}
table.cmp small{display:block; color:var(--steel); font-size:13px; font-weight:400}

.steps{list-style:none; padding:0; margin:0; counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.steps li{counter-increment:step; padding:0 28px 0 0; position:relative}
.steps li::before{
  content:"0" counter(step); display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:var(--night); color:var(--amber);
  font-family:var(--mono); font-weight:600; font-size:1rem; margin-bottom:18px; position:relative; z-index:1;
  box-shadow:inset 0 0 0 1px rgba(224,159,62,.55), 0 0 0 5px rgba(224,159,62,.14);
}
.steps li::after{content:''; position:absolute; top:22px; left:44px; right:0; height:2px; background:linear-gradient(90deg, rgba(224,159,62,.6), var(--line))}
.steps li:last-child::after{display:none}
.steps h3{font-size:1.1rem; font-weight:600; letter-spacing:-.01em}
.steps .cost{font-family:var(--mono); font-weight:600; color:var(--amber-tx); font-size:.88rem; margin:4px 0 8px}
.steps p{color:var(--steel); font-size:15px}
@media(max-width:860px){
  .steps{grid-template-columns:1fr; gap:26px}
  .steps li{padding:0 0 0 64px}
  .steps li::before{position:absolute; left:0; top:0; margin:0}
  .steps li::after{top:44px; bottom:-26px; left:21px; right:auto; width:2px; height:auto; background:linear-gradient(180deg, rgba(224,159,62,.6), var(--line))}
}

.sec-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0 48px}
.sec-item{display:grid; grid-template-columns:auto 1fr; align-content:start; gap:4px 16px; padding:20px 0; border-top:1px solid var(--line)}
.sec-item .ic{width:10px; height:10px; border-radius:2px; background:var(--amber); margin-top:9px; grid-row:span 2; box-shadow:0 0 0 4px rgba(224,159,62,.18)}
.sec-item h3{font-size:1.05rem; font-weight:600; letter-spacing:-.01em}
.sec-item p{color:var(--steel); font-size:15px; margin:0}
@media(max-width:760px){ .sec-grid{grid-template-columns:1fr} }

.band{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.offer{
  position:relative; isolation:isolate; overflow:hidden; color:var(--white);
  display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center;
  border:1px solid rgba(224,159,62,.45); border-radius:16px; padding:38px 40px;
  background:radial-gradient(600px 300px at 100% 0%, rgba(224,159,62,.22), transparent 60%), linear-gradient(180deg, var(--night-2), var(--night));
  box-shadow:0 30px 60px -32px rgba(8,20,31,.65);
}
.offer h2{font-size:clamp(1.5rem,3vw,2rem)}
.offer p{color:var(--mist); margin:12px 0 0}
.offer .big{font-family:var(--display); font-weight:800; font-size:3.4rem; letter-spacing:-.04em; line-height:1; color:var(--amber)}
.offer .big small{display:block; font-size:.9rem; font-weight:500; color:var(--mist); letter-spacing:0; margin-top:8px}
@media(max-width:760px){ .offer{grid-template-columns:1fr; padding:26px 22px; gap:22px} }
@media(max-width:700px){
  table.cmp tbody th, table.cmp thead th:first-child{position:sticky; left:0; z-index:1; background:var(--white); box-shadow:1px 0 0 var(--line); min-width:170px}
  table.cmp thead th:first-child, table.cmp tr.group th{background:var(--paper)}
}
@media(max-width:700px){
  table.cmp tr.group th{position:static; box-shadow:none}
  table.cmp tr.group th span{position:sticky; left:16px}
}

/* ===== Testimonials ===== */
.testimonials{padding-top:0}
.quotes{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap:20px}
.quote{margin:0; background:var(--white); border:1px solid var(--line); border-top:3px solid var(--amber); border-radius:12px; padding:28px 26px 22px; display:flex; flex-direction:column; justify-content:space-between; gap:22px}
.quote blockquote{margin:0; position:relative}
.quote blockquote::before{content:"\201C"; position:absolute; top:-18px; left:-6px; font-family:var(--display); font-weight:800; font-size:3.4rem; line-height:1; color:var(--amber); opacity:.35}
.quote blockquote p{margin:0; font-size:1.02rem; position:relative}
/* "Read the full review" toggle (overrides the FAQ details/summary styles) */
.quote .more{border:0; padding:0; margin-top:14px}
.quote .more summary{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--amber-tx)}
.quote .more summary:hover{color:var(--ink)}
.quote .more summary::after{font-size:1.15rem}
.quote .more .c, .quote .more[open] .o{display:none}
.quote .more[open] .c{display:inline}
.quote .full{border-left:2px solid var(--line); padding-left:16px; margin-top:6px}
.quote .full p{margin:12px 0 0; font-size:15px; color:var(--steel)}
.quote .full b{font-family:var(--display); color:var(--ink)}
.quote figcaption{display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:16px; font-size:14.5px; color:var(--steel)}
.quote figcaption b{display:block; font-family:var(--display); font-weight:700; color:var(--ink); font-size:15.5px}
.review-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; margin-top:22px; padding:18px 22px; background:var(--white); border:1px dashed var(--amber-dk); border-radius:12px}
.review-cta p{margin:0; flex:1 1 320px; color:var(--steel); font-size:15.5px}
.review-cta .btn{display:inline-flex; align-items:center; gap:8px}
.review-cta svg{width:16px; height:16px; fill:currentColor}
.quote .avatar{display:flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; border-radius:50%; background:var(--night); color:var(--amber); font-family:var(--mono); font-weight:600; box-shadow:inset 0 0 0 1px rgba(224,159,62,.5)}

/* ===== Scroll reveal (nav.js adds .rv, then .in once on screen) ===== */
.rv:not(.in){opacity:0}
.rv.in{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:var(--d, 0ms)}
@keyframes rise{from{opacity:0; translate:0 18px} to{opacity:1; translate:0 0}}