:root{
    --bg:#F6F6F7; --surface:#FFFFFF; --surface-2:#EFEFF1;
    --ink:#0C0C0E; --muted:#5C5C63; --line:#E2E2E6;
    --accent:#E60000; --accent-fill:#E60000; --accent-text:#E60000; --accent-hover:#C00000; --accent-ink:#FFFFFF;
    --steel:#3A3A40; --good:#3E7A9E; --good-bg:#E9F1F7; --gglow:rgba(62,122,158,.24); --dshadow:7px 9px 24px rgba(12,12,14,.15); --tshadow:2px 3px 8px rgba(12,12,14,.14);
    --chip:#F0F0F2; --shadow:10px 14px 36px rgba(12,12,14,.16);
    --hero-grad:linear-gradient(168deg,#3B424B 0%,#262B32 48%,#14171C 100%);
    --wire:#0C0C0E;
    --glow1:rgba(24,28,34,.07); --glow2:rgba(90,96,104,.08);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0B0B0D; --surface:#141416; --surface-2:#1B1B1E;
      --ink:#F2F2F3; --muted:#9C9CA4; --line:#26262B;
      --accent:#F02020; --accent-fill:#E60000; --accent-text:#FF4B4B; --accent-hover:#C00000; --accent-ink:#FFFFFF;
      --steel:#C9C9CF; --good:#7FB4D6; --good-bg:#16242F; --gglow:rgba(127,180,214,.26); --dshadow:7px 9px 26px rgba(0,0,0,.5); --tshadow:2px 3px 10px rgba(0,0,0,.55);
      --chip:#1E1E22; --shadow:10px 14px 36px rgba(0,0,0,.55);
      --hero-grad:linear-gradient(168deg,#2B3138 0%,#1A1E24 48%,#0B0D10 100%);
      --wire:#F2F2F3;
      --glow1:rgba(255,255,255,.035); --glow2:rgba(160,168,178,.05);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0B0B0D; --surface:#141416; --surface-2:#1B1B1E;
    --ink:#F2F2F3; --muted:#9C9CA4; --line:#26262B;
    --accent:#F02020; --accent-fill:#E60000; --accent-text:#FF4B4B; --accent-hover:#C00000; --accent-ink:#FFFFFF;
    --steel:#C9C9CF; --good:#7FB4D6; --good-bg:#16242F; --gglow:rgba(127,180,214,.26); --dshadow:7px 9px 26px rgba(0,0,0,.5); --tshadow:2px 3px 10px rgba(0,0,0,.55);
    --chip:#1E1E22; --shadow:10px 14px 36px rgba(0,0,0,.55);
    --hero-grad:linear-gradient(168deg,#2B3138 0%,#1A1E24 48%,#0B0D10 100%);
    --wire:#F2F2F3;
    --glow1:rgba(255,255,255,.035); --glow2:rgba(160,168,178,.05);
  }
  :root[data-theme="light"]{
    --bg:#F6F6F7; --surface:#FFFFFF; --surface-2:#EFEFF1;
    --ink:#0C0C0E; --muted:#5C5C63; --line:#E2E2E6;
    --accent:#E60000; --accent-fill:#E60000; --accent-text:#E60000; --accent-hover:#C00000; --accent-ink:#FFFFFF;
    --steel:#3A3A40; --good:#3E7A9E; --good-bg:#E9F1F7; --gglow:rgba(62,122,158,.24); --dshadow:7px 9px 24px rgba(12,12,14,.15); --tshadow:2px 3px 8px rgba(12,12,14,.14);
    --chip:#F0F0F2; --shadow:10px 14px 36px rgba(12,12,14,.16);
    --hero-grad:linear-gradient(168deg,#3B424B 0%,#262B32 48%,#14171C 100%);
    --wire:#0C0C0E;
    --glow1:rgba(24,28,34,.07); --glow2:rgba(90,96,104,.08);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;color:var(--ink);
    background:
      radial-gradient(900px 500px at 85% -5%, var(--glow1), transparent 60%),
      radial-gradient(700px 420px at -10% 30%, var(--glow2), transparent 65%),
      radial-gradient(800px 500px at 110% 75%, var(--glow1), transparent 60%),
      var(--bg);
    font:400 16.5px/1.6 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased}
  /* film-grain overlay for texture */
  body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
  header.site,.callbar{z-index:60}
  h1,h2,h3{font-family:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
    letter-spacing:-.02em; text-wrap:balance; margin:0}
  .mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-variant-numeric:tabular-nums}
  a{color:inherit}
  img{max-width:100%;height:auto}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  .section{padding:76px 0;position:relative;overflow:hidden}
  .section h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;line-height:1.12;text-shadow:var(--tshadow)}
  .sub{color:var(--muted);max-width:62ch;margin-top:12px}
  /* section shading: alternating tints + soft top glow for depth */
  .tinted{background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, transparent), transparent 140px),
      var(--surface);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

  /* traveling gradient glow: follows the user, fades in over marked zones */
  .scrollglow{position:fixed;left:50%;top:0;width:1200px;height:820px;margin-left:-600px;
    pointer-events:none;z-index:1;opacity:0;will-change:transform,opacity;
    background:radial-gradient(closest-side, var(--gglow), transparent 70%)}

  /* wireframe background art */
  .wireart{position:absolute;color:var(--wire);opacity:.055;pointer-events:none;z-index:0}
  .wireart svg{width:100%;height:100%;display:block}
  .wireart path,.wireart circle,.wireart line,.wireart rect{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .hero .wireart{color:#fff;opacity:.09}
  .section > .wrap{position:relative;z-index:1}


  /* site header */
  header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 90%,transparent);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;gap:26px;padding:12px 24px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.01em;
    text-decoration:none;font-family:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;text-transform:uppercase}
  .logo .rx{color:var(--accent)}
  .logo img{height:36px;width:auto;border-radius:4px;display:block}
  .navlinks{display:flex;gap:22px;font-size:14.5px;font-weight:600}
  .navlinks a{text-decoration:none;color:var(--muted)}
  .navlinks a:hover{color:var(--ink)}
  .nav .call{margin-left:auto;display:flex;align-items:center;gap:12px}
  .menubtn{display:none;width:42px;height:42px;border:1.5px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px}
  .menubtn i{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s, opacity .2s}
  .menubtn[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menubtn[aria-expanded="true"] i:nth-child(2){opacity:0}
  .menubtn[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobilenav{display:none;border-top:1px solid var(--line);background:var(--surface);padding:8px 16px 14px}
  .mobilenav[hidden]{display:none}
  .mobilenav a{display:block;padding:13px 6px;font-size:17px;font-weight:700;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
  .mobilenav a:last-of-type{border-bottom:none}
  .mobilenav .mphone{margin-top:12px;display:flex;align-items:center;justify-content:space-between;background:var(--chip);border-radius:10px;padding:12px 14px;border-bottom:none;font-size:16px}
  .mobilenav .mphone small{font-weight:600;font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
  .phone{font-weight:800;text-decoration:none;font-size:16px;white-space:nowrap}
  .phone small{display:block;font-weight:600;font-size:10.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
  .btn{display:inline-block;background:var(--accent-fill);color:var(--accent-ink);border:none;cursor:pointer;
    border-radius:8px;padding:11px 20px;font-weight:700;font-size:15px;text-decoration:none;
    transition:transform .15s ease, background .15s ease, box-shadow .15s ease}
  .btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 18px rgba(230,0,0,.3)}
  .btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

  /* hero */
  .hero{color:#EDEDEF;position:relative;overflow:hidden;
    background:
      radial-gradient(120% 85% at 88% -12%, rgba(255,255,255,.10), transparent 55%),
      radial-gradient(95% 75% at -12% 112%, rgba(125,150,175,.20), transparent 62%),
      var(--hero-grad)}
  .curve{position:absolute;left:0;right:0;bottom:-1px;height:64px;color:var(--bg);z-index:2;pointer-events:none}
  .curve svg{width:100%;height:100%;display:block}
  .curve path{fill:currentColor}
  .hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:64px 24px 76px;position:relative;z-index:1}
  .hero .eyebrow{color:#FF6B6B}
  .hero h1{font-size:clamp(34px,4.8vw,55px);font-weight:800;line-height:1.05;margin:16px 0 20px;color:#fff;text-shadow:2px 3px 12px rgba(0,0,0,.45)}
  .hero .eyebrow{line-height:1.9;font-size:12.5px}
  .hero p.lede{font-size:19px;color:#B9B9C0;max-width:50ch;margin:0 0 28px}
  .hero .proof{display:flex;flex-direction:column;gap:10px}
  .hero .prow{display:flex;flex-wrap:wrap;gap:10px}
  .hero .proof span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
    border-radius:99px;padding:6px 14px;font-size:13px;font-weight:600;color:#DEDEE3}
  .hero .proof b{color:var(--accent)}
  @keyframes draw{to{stroke-dashoffset:0}}
  @media (prefers-reduced-motion:reduce){
    .chart .line{animation:none;stroke-dashoffset:0}
    .reveal{opacity:1 !important;transform:none !important;transition:none !important}
    .btn:hover{transform:none}
  }

  /* quote card */
  .quotecard{background:var(--surface);color:var(--ink);border-radius:14px;box-shadow:var(--shadow);
    padding:22px 22px 18px;border:1px solid var(--line);border-top:3px solid var(--accent)}
  .quotecard h2{font-size:19px;font-weight:800;margin-bottom:2px}
  .quotecard .hint{font-size:13px;color:var(--muted);margin:0 0 10px}
  .quotecard label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);margin:9px 0 4px}
  .quotecard input,.quotecard select,.quotecard textarea{width:100%;border:1.5px solid var(--line);
    background:var(--bg);color:var(--ink);border-radius:8px;padding:9px 11px;font:inherit;font-size:14.5px}
  .quotecard input:focus,.quotecard select:focus,.quotecard textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
  .quotecard .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .quotecard .micro{font-size:11.5px;color:var(--muted);margin:5px 0 0}
  .consent{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
  .consent label{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:start;margin:0;
    font-size:10.5px;line-height:1.4;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
  .consent input[type="checkbox"]{width:16px;height:16px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
  .consent a{color:var(--muted);text-decoration:underline}
  .consent a:hover{color:var(--ink)}
  .consent .clamp{display:block;overflow:hidden;max-height:4.3em;position:relative;transition:max-height .35s ease}
  .consent .clamp:not(.open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.4em;
    background:linear-gradient(180deg, transparent, var(--surface))}
  .consent .clamp.open{max-height:30em}
  .consent .morebtn{background:none;border:none;color:var(--accent);font:700 10.5px inherit;
    font-family:inherit;cursor:pointer;padding:1px 0 0;text-decoration:underline;justify-self:start;grid-column:2}
  .consent .morebtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .quotecard .btn{width:100%;margin-top:14px;padding:12px}
  .quotecard .alt{margin-top:10px;text-align:center;font-size:13.5px;color:var(--muted)}
  .quotecard .alt a{font-weight:800;color:var(--ink);text-decoration:none}
  .quotecard .alt a:hover{color:var(--accent)}
  .formtoast{display:none;background:var(--good-bg);color:var(--good);border-radius:8px;
    padding:12px 14px;font-size:14px;font-weight:600;margin-top:14px}
  /* two-step form */
  .stephead{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .stepdots{display:inline-flex;gap:6px}
  .stepdots i{display:block;width:22px;height:5px;border-radius:99px;background:var(--line);transition:background .25s}
  .stepdots i.on{background:var(--accent)}
  .fstep{animation:stepin .35s cubic-bezier(.16,1,.3,1)}
  @keyframes stepin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
  .promise{font-size:11.5px;color:var(--muted);text-align:center;margin:10px 0 0}
  .steprow{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;margin-top:14px}
  .steprow .btn{margin-top:0}
  .linkbtn{background:none;border:1.5px solid var(--line);border-radius:8px;color:var(--muted);font:600 13.5px inherit;font-family:inherit;padding:11px 14px;cursor:pointer}
  .linkbtn:hover{color:var(--ink);border-color:var(--muted)}
  .chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
  .chip{background:var(--chip);border:1.5px solid transparent;border-radius:99px;padding:6px 12px;font:600 13px inherit;font-family:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s, background .15s}
  .chip:hover{border-color:var(--muted)}
  .chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .hero .proof .stars{color:#FFD166;cursor:pointer}
  .hero .proof .stars u{color:#DEDEE3;text-decoration-color:rgba(255,255,255,.4);font-weight:600}
  /* fact table (answer engine block) */
  .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--dshadow)}
  .fact{padding:20px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .fact:nth-child(4n){border-right:none}
  .fact:nth-last-child(-n+4){border-bottom:none}
  .fact dt{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
  .fact dd{margin:0;font-size:15px;font-weight:600;color:var(--ink);line-height:1.45}
  .fact dd a{color:var(--accent-text);text-decoration:none}
  /* technician guides */
  .guides{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
  .guide{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px 26px;text-decoration:none;box-shadow:var(--dshadow);transition:transform .2s, border-color .2s}
  .guide:hover{transform:translateY(-4px);border-color:var(--accent)}
  .guide .gtag{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--good);margin-bottom:10px}
  .guide h3{font-size:18px;line-height:1.25;margin-bottom:10px}
  .guide p{font-size:14.5px;color:var(--muted);margin:0 0 18px}
  .guide .more{margin-top:auto;font-weight:700;color:var(--accent-text);font-size:14.5px}
  /* process */
  .process{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
  .pstep{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:var(--dshadow);position:relative}
  .pstep .n{width:38px;height:38px;border-radius:99px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:800;font-size:16px;margin-bottom:14px;font-family:ui-monospace,Consolas,monospace}
  .pstep h3{font-size:18px;margin-bottom:8px}
  .pstep p{font-size:14.5px;color:var(--muted);margin:0}

  /* trust bar: continuous marquee */
  .trustbar{border-bottom:1px solid var(--line);background:var(--surface);padding:16px 0 18px;overflow:hidden}
  .trustbar .label{display:block;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
  .marquee{overflow:hidden;position:relative;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .marquee .track{display:flex;gap:56px;width:max-content;animation:marq 26s linear infinite}
  @keyframes marq{to{transform:translateX(-50%)}}
  .brand{font-weight:800;font-size:17px;letter-spacing:.02em;color:var(--steel);opacity:.8;white-space:nowrap}

  /* kinetic type band */
  .kinetic{overflow:hidden;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
  .kinetic .track{display:flex;gap:0;width:max-content;white-space:nowrap;animation:marq 44s linear infinite;
    font-family:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
    font-size:clamp(44px,8vw,96px);font-weight:800;letter-spacing:-.02em;line-height:1;
    color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--muted) 55%,transparent)}
  .kinetic .track b{font-weight:800;color:var(--accent);-webkit-text-stroke:0}
  @media (prefers-reduced-motion:reduce){
    .marquee .track,.kinetic .track{animation:none}
  }

  /* stats */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
  .stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;box-shadow:var(--dshadow)}
  .stat .num{font-size:34px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .stat .num em{color:var(--ink);font-style:normal}
  .stat{transition:border-color .2s ease}
  .stat:hover{border-color:var(--muted)}
  .stat .lbl{font-size:13.5px;color:var(--muted);margin-top:2px}

  /* pattern section */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
  .step{border:1px solid var(--line);border-radius:12px;padding:22px;background:var(--bg);position:relative;box-shadow:var(--dshadow)}
  .step .ph{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .step h3{font-size:17.5px;margin:8px 0 6px}
  .step p{font-size:14.5px;color:var(--muted);margin:0}
  .step.fix{background:var(--good-bg);border-color:transparent}
  .step.fix .ph{color:var(--good)}
  .step.fix h3{color:var(--good)}
  .step.fix p{color:var(--ink)}
  .chart{margin-top:38px;background:var(--surface);border-radius:14px;padding:26px 26px 20px;
    position:relative;overflow:hidden;border:1px solid var(--line);box-shadow:var(--dshadow)}
  .chart h3{font-size:18px;font-weight:800;margin-bottom:4px}
  .chart .chartsub{font-size:13.5px;color:var(--muted);margin:0 0 18px}
  .chart svg{width:100%;height:auto;display:block}
  .chart .grid{stroke:var(--line);stroke-width:1}
  .chart .axis{font:600 12px ui-monospace,Consolas,monospace;fill:var(--muted)}
  .chart .nopm{stroke:var(--muted);stroke-width:2.5;fill:none;stroke-dasharray:7 7}
  .chart .pm{stroke:var(--good);stroke-width:3;fill:none;stroke-dasharray:1300;stroke-dashoffset:1300;animation:draw 3.5s ease-out forwards}
  .chart .pmfill{fill:var(--good);opacity:.08}
  .chart .visit{fill:var(--good)}
  .chart .legend{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:14px;font-size:13.5px;color:var(--muted);font-weight:600}
  .chart .legend .key{display:inline-block;width:22px;height:0;border-top:3px solid var(--good);vertical-align:middle;margin-right:8px;border-radius:2px}
  .chart .legend .key.dash{border-top:3px dashed var(--muted)}

  /* placeholder photos */
  .ph-img{position:relative;border-radius:10px;overflow:hidden;background:
      repeating-linear-gradient(45deg, color-mix(in srgb,var(--steel) 14%, transparent) 0 10px, transparent 10px 20px),
      linear-gradient(150deg, var(--surface-2), color-mix(in srgb,var(--steel) 22%, var(--surface-2)));
    border:1px solid var(--line);display:grid;place-items:center}
  .ph-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,.18), transparent 55%)}
  .ph-img .cap{position:relative;z-index:1;text-align:center;padding:14px;color:var(--muted)}
  .ph-img .cap svg{width:26px;height:26px;stroke:var(--muted);fill:none;stroke-width:1.8;margin-bottom:6px}
  .ph-img .cap span{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .ph-img .cap em{display:block;font-style:normal;font-size:12.5px;margin-top:3px}
  .photoband{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
  .photoband .ph-img{aspect-ratio:16/10}

  /* real photos */
  .photo{position:relative;margin:0;border-radius:12px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);box-shadow:var(--dshadow);aspect-ratio:16/10;isolation:isolate}
  .photo.tall{aspect-ratio:4/5}
  .photo.square{aspect-ratio:1}
  .photo.cardtop{aspect-ratio:16/7;border-radius:0;border:none;box-shadow:none}
  .photo img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .9s cubic-bezier(.2,.7,.2,1), filter .6s;filter:saturate(.92)}
  .photo:hover img{scale:1.05;filter:saturate(1.05)}
  .photo[data-par] img{height:118%;margin-top:-9%;will-change:transform}
  .photo figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:34px 16px 13px;font-size:12.5px;font-weight:600;color:#fff;letter-spacing:.01em;
    background:linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,.35) 55%, transparent);text-shadow:0 1px 3px rgba(0,0,0,.6)}
  .photo figcaption::before{content:"";display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--accent);margin-right:8px;vertical-align:1px}
  .photoband .photo:nth-child(2){translate:0 18px}
  .photoband.stagger>.photo{transition-delay:calc(var(--i,0)*90ms)}
  .card .photo{margin:0}
  .card.featured.haspic .flag{position:absolute;top:12px;left:14px;margin:0;box-shadow:0 2px 10px rgba(0,0,0,.35)}
  .card.featured.haspic .body{padding-top:22px}
  .reviews + .photoband{margin-top:24px}
  .photoband{margin-bottom:34px}
  .founder{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:center;margin-top:36px}
  .founder .photo{aspect-ratio:1;max-width:340px}
  .founder .prose{max-width:none;font-size:17px}
  .founder h3{font-size:24px;margin:0 0 6px}
  .founder .role{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
  @media (max-width:760px){.founder{grid-template-columns:1fr}.founder .photo{max-width:280px}}

  /* silent background video loops (desktop only; poster still everywhere) */
  .bgvid{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;--vo:.55}
  .bgvid video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 1.6s ease;filter:saturate(.85) contrast(1.05)}
  .bgvid video.on{opacity:1}
  .bgvid.playing,.herovid.playing{background-image:none !important;background-color:#0E1014}
  .bgvid::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(14,16,20,.72), rgba(14,16,20,.55) 40%, rgba(14,16,20,.82))}
  .herovid{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;--vo:.42}
  .herovid video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 2s ease;filter:saturate(.7) contrast(1.08) brightness(.75)}
  .herovid video.on{opacity:1}
  .herovid::before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(90deg, rgba(20,23,28,.96) 0%, rgba(20,23,28,.82) 48%, rgba(20,23,28,.62) 100%),
               linear-gradient(180deg, transparent 60%, rgba(20,23,28,.9))}
  .hero .wireart{z-index:1}
  .bgvid,.herovid{background-size:cover;background-position:center}
  /* full-bleed closing band: video underneath, text on top, same treatment as the hero */
  .ctafull{position:relative;overflow:hidden;color:#fff;padding:120px 0 128px;margin-top:20px;background:var(--hero-grad)}
  .ctafull .bgvid{--vo:.5}
  .ctafull .bgvid::before{background:linear-gradient(180deg, rgba(14,16,20,.82), rgba(14,16,20,.45) 40%, rgba(14,16,20,.45) 60%, rgba(14,16,20,.88))}
  .ctafull .wrap{position:relative;z-index:1}
  .ctafull .ctainner{max-width:760px;margin:0 auto;text-align:center}
  .ctafull h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1.08;margin:0 0 18px;text-shadow:2px 3px 14px rgba(0,0,0,.6)}
  .ctafull p{font-size:18px;color:#D6D6DC;max-width:56ch;margin:0 auto 28px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
  .ctafull .btn{font-size:16px;padding:14px 28px}
  .ctafull .or{margin-top:14px;font-size:14px;color:#C9C9CF}
  .ctafull .or a{color:#fff;font-weight:800;text-decoration:none}
  .ctafull + .reviewedline{padding-top:28px}
  @media (max-width:640px){.ctafull{padding:72px 0 80px}}
  @media (max-width:900px){.herovid video,.bgvid video{display:none}}
  @media (min-width:901px){.hero:has(.herovid) .wireart{display:none}}

  /* hero form slides in from the right on load */
  .hero .quotecard{animation:formin 1.1s cubic-bezier(.16,1,.3,1) .25s both}
  @keyframes formin{from{opacity:0;transform:translateX(90px) rotateY(-8deg)}to{opacity:1;transform:none}}
  .hero .grid{perspective:1400px}

  /* field photos: swoop in around a bowl and land in front of you */
  .photoband.fly{perspective:1300px;transform-style:preserve-3d}
  .photoband.fly .photo{opacity:0;transform-style:preserve-3d;backface-visibility:hidden}
  .photoband.fly.in .photo{animation:swoopL 1.6s cubic-bezier(.22,.9,.26,1) both}
  .photoband.fly.in .photo:nth-child(2){animation-name:swoopDeep;animation-delay:.18s;animation-duration:1.75s}
  .photoband.fly.in .photo:nth-child(3){animation-name:swoopR;animation-delay:.34s}
  .photoband.fly.in .photo:nth-child(1){animation-delay:.02s}
  @keyframes swoopL{
    0%{opacity:0;transform:translate3d(-110vw,140px,-1100px) rotateY(58deg) rotateZ(-8deg) scale(.55)}
    45%{opacity:1;transform:translate3d(-14%,-30px,-420px) rotateY(34deg) rotateZ(-3deg) scale(.82)}
    78%{transform:translate3d(3%,10px,60px) rotateY(-6deg) rotateZ(.6deg) scale(1.03)}
    100%{opacity:1;transform:none}}
  @keyframes swoopR{
    0%{opacity:0;transform:translate3d(110vw,140px,-1100px) rotateY(-58deg) rotateZ(8deg) scale(.55)}
    45%{opacity:1;transform:translate3d(14%,-30px,-420px) rotateY(-34deg) rotateZ(3deg) scale(.82)}
    78%{transform:translate3d(-3%,10px,60px) rotateY(6deg) rotateZ(-.6deg) scale(1.03)}
    100%{opacity:1;transform:none}}
  @keyframes swoopDeep{
    0%{opacity:0;transform:translate3d(0,420px,-1600px) rotateX(-40deg) scale(.4)}
    50%{opacity:1;transform:translate3d(0,-40px,-300px) rotateX(14deg) scale(.9)}
    80%{transform:translate3d(0,26px,70px) rotateX(-4deg) scale(1.04)}
    100%{opacity:1;transform:translate(0,18px)}}
  .photoband.fly .photo:nth-child(2){translate:0 0}
  @media (prefers-reduced-motion:reduce){
    .hero .quotecard{animation:none}
    .photoband.fly .photo{opacity:1}
    .photoband.fly.in .photo{animation:none}
  }

  /* services */
  .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden;
    display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease;box-shadow:var(--dshadow)}
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
  .card .ph-img{border-radius:0;border:none;aspect-ratio:16/7}
  .card .body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
  .card h3{font-size:20px;margin-bottom:8px}
  .card p{color:var(--muted);font-size:15px;margin:0 0 16px}
  .card ul{margin:0 0 22px;padding-left:18px;color:var(--muted);font-size:14.5px}
  .card ul li{margin:4px 0}
  .card .cta{margin-top:auto;font-weight:700;color:var(--accent-text);text-decoration:none;font-size:15px}
  .card .cta:hover{text-decoration:underline}
  .card.featured{border:1px solid var(--line);border-top:3px solid var(--accent);position:relative}
  .card.featured .flag{display:inline-block;align-self:flex-start;margin:16px 0 0 26px;background:var(--accent-fill);color:#fff;
    font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:4px;padding:4px 10px;line-height:1.4}
  .card.featured .body{padding-top:14px}

  /* industries */
  .indgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
  .ind{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 22px;
    text-decoration:none;display:block;transition:border-color .15s ease, transform .15s ease;box-shadow:var(--dshadow)}
  .ind:hover{border-color:var(--accent);transform:translateY(-2px)}
  .ind h3{font-size:16.5px;margin-bottom:4px}
  .ind p{font-size:13.5px;color:var(--muted);margin:0}

  /* coverage */
  .states{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
  .state{padding:30px 34px}
  .state .metros{font-size:15px;line-height:1.85}
  .state{border:1px solid var(--line);border-radius:14px;padding:26px;background:var(--bg);box-shadow:var(--dshadow)}
  .state .abbr{font-size:40px;font-weight:800;letter-spacing:-.02em}
  .state .abbr small{font-size:14px;font-weight:700;color:var(--muted);display:block;letter-spacing:.02em}
  .state .metros{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.7}
  .state .dot{display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--good);margin-right:8px}

  /* faq */
  details.faq{border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-top:12px;overflow:hidden}
  details.faq summary{cursor:pointer;font-weight:700;padding:18px 20px;font-size:16px;list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:16px}
  details.faq summary::-webkit-details-marker{display:none}
  details.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--accent);transition:transform .2s}
  details.faq[open] summary::after{transform:rotate(45deg)}
  details.faq .a{padding:0 22px 20px;color:var(--muted);font-size:15.5px;max-width:90ch;line-height:1.6}
  .faqwrap{margin-top:8px}
  #coverage .sub{max-width:none}
  .reviewlink{margin-top:18px;font-weight:700}
  .reviewlink a{color:var(--accent-text);text-decoration:none}
  .reviewlink a:hover{text-decoration:underline}
  .wrap.narrow{max-width:900px}
  .wrap.narrow .prose{max-width:none}
  .wrap.narrow .sub{max-width:none}

  /* reviews */
  .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
  .review{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:var(--dshadow)}
  .review .starrow{color:var(--accent);letter-spacing:2px;font-size:15px}
  .review p{font-size:14.5px;color:var(--ink);margin:12px 0 14px}
  .review .who{font-size:13px;color:var(--muted);font-weight:600}

  /* bottom cta */
  .bigcta{color:#fff;text-align:center;border-radius:18px;padding:56px 32px;margin:20px 0 72px;position:relative;overflow:hidden;
    box-shadow:var(--dshadow);
    background:
      radial-gradient(110% 90% at 80% -15%, rgba(255,255,255,.09), transparent 55%),
      radial-gradient(90% 80% at -5% 115%, rgba(125,150,175,.18), transparent 60%),
      var(--hero-grad)}
  .bigcta > *{position:relative;z-index:1}
  .bigcta h2{font-size:clamp(24px,3.4vw,34px);font-weight:800}
  .bigcta p{color:#B9B9C0;margin:12px auto 26px;max-width:56ch}
  .bigcta .btn{padding:14px 30px;font-size:16px}
  .bigcta .or{margin-top:16px;font-size:15px;color:#B9B9C0}
  .bigcta .or a{color:#fff;font-weight:800;text-decoration:none}

  footer.site{border-top:1px solid var(--line);background:var(--surface);padding:44px 0 90px;font-size:14px;color:var(--muted)}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
  .fgrid h2{font-family:inherit;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
  .fgrid a{display:block;text-decoration:none;color:var(--muted);margin:6px 0}
  .fgrid a:hover{color:var(--ink)}
  .fgrid .badge{width:96px;border-radius:10px;margin-bottom:14px}

  /* mobile call bar */
  .callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--surface);
    border-top:1px solid var(--line);padding:10px 14px;gap:10px}
  .callbar a{flex:1;text-align:center;padding:12px;border-radius:9px;font-weight:800;text-decoration:none;font-size:15px}
  .callbar .c1{background:var(--ink);color:var(--bg)}
  .callbar .c2{background:var(--accent-fill);color:#fff}

  /* reveal + fly-ins (eased like sui.io: long settle, slight blur-up) */
  .reveal{opacity:0;transform:translateY(34px);filter:blur(6px);
    transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1)}
  .reveal.from-left{transform:translateX(-40px)}
  .reveal.from-right{transform:translateX(40px)}
  .reveal.in{opacity:1;transform:none;filter:none}
  .stagger > *{opacity:0;transform:translateY(30px);filter:blur(4px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), filter .7s cubic-bezier(.16,1,.3,1)}
  .stagger.in > *{opacity:1;transform:none;filter:none}
  .stagger.in > :nth-child(1){transition-delay:.05s}
  .stagger.in > :nth-child(2){transition-delay:.15s}
  .stagger.in > :nth-child(3){transition-delay:.25s}
  .stagger.in > :nth-child(4){transition-delay:.35s}
  .stagger.in > :nth-child(5){transition-delay:.45s}
  .stagger.in > :nth-child(6){transition-delay:.55s}
  @media (prefers-reduced-motion:reduce){
    .stagger > *{opacity:1 !important;transform:none !important;transition:none !important}
  }


  @media (max-width:900px){
    .hero .grid{grid-template-columns:1fr;gap:36px;padding:44px 20px 56px}
    .stats{grid-template-columns:repeat(2,1fr)}
    .steps{grid-template-columns:repeat(2,1fr)}
    .cards3,.reviews,.photoband,.guides,.process{grid-template-columns:1fr}
    .photoband .photo:nth-child(2){translate:0 0}
    @keyframes swoopDeep{0%{opacity:0;transform:translate3d(0,300px,-900px) rotateX(-30deg) scale(.5)}55%{opacity:1;transform:translate3d(0,-20px,-150px) rotateX(8deg) scale(.94)}100%{opacity:1;transform:none}}
    .photo.tall{aspect-ratio:4/3}
    .photo[data-par] img{height:100%;margin-top:0}
    .facts{grid-template-columns:1fr 1fr}
    .fact:nth-child(4n){border-right:1px solid var(--line)}
    .fact:nth-child(2n){border-right:none}
    .fact:nth-last-child(-n+4){border-bottom:1px solid var(--line)}
    .fact:nth-last-child(-n+2){border-bottom:none}
    .indgrid{grid-template-columns:repeat(2,1fr)}
    .states{grid-template-columns:1fr}
    .fgrid{grid-template-columns:1fr 1fr}
    .navlinks{display:none}
    .callbar{display:flex}
    .menubtn{display:inline-flex}
    .mobilenav:not([hidden]){display:block}
    .kinetic{padding:26px 0}
    .kinetic .track{font-size:clamp(34px,9vw,56px);-webkit-text-stroke:0;color:color-mix(in srgb,var(--muted) 42%,transparent)}
  }
  @media (max-width:520px){
    .steps,.indgrid,.stats{grid-template-columns:1fr}
    .quotecard .row{grid-template-columns:1fr}
  }

/* ===== site build additions ===== */
main{display:block}
.crumbs{padding:14px 24px 0;font-size:13px;color:var(--muted)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--line)}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.prose{max-width:72ch;font-size:16.5px;line-height:1.7}
.prose h2{font-size:clamp(22px,2.6vw,28px);margin:38px 0 12px;text-shadow:none}
.prose h3{font-size:19px;margin:28px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:5px 0}
.prose img{border-radius:10px;margin:12px 0}
.artfeat{margin:0 0 22px}
.artfeat img{display:block;width:100%;height:auto;max-height:460px;object-fit:cover;object-position:center;border-radius:12px}
.prose blockquote{border-left:3px solid var(--accent);margin:18px 0;padding:6px 18px;color:var(--muted)}
.prose table{border-collapse:collapse;width:100%;font-size:15px;margin:16px 0}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
/* In-body links (this is what Link Whisper's internal links inherit) get a quiet gray with an underline
   instead of the red accent -- distinguishable from the surrounding text without shouting at the reader. */
.prose a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.prose a:hover{color:var(--ink);text-decoration-color:var(--muted)}
.lg-title{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:34px 0 10px}
.linkgrid{display:flex;flex-wrap:wrap;gap:8px}
.linkgrid a{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--ink);transition:border-color .15s}
.linkgrid a:hover{border-color:var(--accent)}
.twocol{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start}
.aside{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:var(--dshadow)}
.aside h2,.aside h3{font-size:16px;margin-bottom:10px}
.aside ul{margin:0;padding-left:18px;color:var(--muted);font-size:14.5px}
.aside li{margin:5px 0}
.cover{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.cover div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--dshadow)}
.cover h3{font-family:inherit;font-weight:700;margin:0 0 6px;font-size:14.5px}
.cover p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}
.article-head{padding:56px 0 24px}
.article-head h1{font-size:clamp(28px,4vw,44px);font-weight:800;line-height:1.1;margin:14px 0 14px;text-shadow:var(--tshadow)}
.byline{font-size:13.5px;color:var(--muted)}
.byline b{color:var(--ink)}
.article .wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
.article .quotecard{position:sticky;top:90px}
.postlist{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.copy{margin-top:30px;font-size:12.5px;color:var(--muted)}
.notice{background:var(--good-bg);border-left:3px solid var(--good);border-radius:0 10px 10px 0;padding:12px 16px;font-size:14px;margin:18px 0}
@media (max-width:640px){.artfeat img{max-height:300px}}
@media (max-width:900px){.twocol,.article .wrap{grid-template-columns:1fr}.cover,.postlist{grid-template-columns:1fr 1fr}.article .quotecard{position:static}}
@media (max-width:520px){.cover,.postlist{grid-template-columns:1fr}}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px;z-index:100;font-weight:700}
.skip:focus{left:12px}
.reviewedline{font-size:12.5px;color:var(--muted);padding:6px 24px 28px}
.reviewedline a{color:var(--muted)}
@media (max-width:640px){
  .photo figcaption{font-size:12px;padding:28px 12px 11px}
  .nav{gap:12px;padding:10px 16px}
  .nav .call .phone{display:none}
  .logo img{height:30px}
  .nav .call .btn{display:none}
  .phone{font-size:15px}
  .hero h1{font-size:30px}
  .hero p.lede{font-size:17px}
  .crumbs{font-size:12px}
  .section{padding:52px 0}
  .quotecard{padding:18px 16px 14px}
  .facts{grid-template-columns:1fr}
  .fact{border-right:none !important;border-bottom:1px solid var(--line) !important}
  .fact:last-child{border-bottom:none !important}
}

.modal{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-card{background:var(--surface);color:var(--ink);border-radius:16px;max-width:520px;width:100%;padding:28px 28px 22px;box-shadow:var(--shadow);position:relative;border-top:4px solid var(--accent)}
.modal-card h3{font-size:22px;margin:8px 0 10px}
.modal-card p{font-size:15px;color:var(--muted);margin:0 0 12px}
.modal-x{position:absolute;top:10px;right:14px;background:none;border:none;font-size:26px;color:var(--muted);cursor:pointer}

/* ChatGPT ads landing pages */
.callbtn{display:inline-block;background:var(--accent-fill);color:#fff;font-weight:800;font-size:18px;padding:14px 26px;border-radius:10px;text-decoration:none;margin:6px 0 4px;box-shadow:0 6px 18px rgba(230,0,0,.3)}
.callbtn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.lp .grid{padding-top:48px}
.lp p.lede{margin-bottom:18px}
.lpclose{text-align:center}
.lpclose .sub{margin:12px auto 20px}
.lpclose .micro{margin-top:14px;color:var(--muted);font-size:14px}
@media (max-width:640px){.callbtn{display:block;width:100%;text-align:center;box-sizing:border-box}.lp .grid{padding-top:28px}}

/* Gravity Forms (Orbital theme, and any other GF theme) rendered inside our dark .quotecard needs to match the
   site's brand: dark inputs, red primary accent, light uppercase labels, small legal text, single-column layout
   instead of GF's fixed-width thirds/quarters (built for a full-width page, not our ~450px sidebar card).
   Direct property overrides with !important, scoped to .quotecard, so they win regardless of how/where GF's own
   theme CSS is delivered (linked file, inlined bundle, or CSS-variable block) and regardless of load order. */

/* CSS-variable layer: covers any GF theme (Orbital, Foundation, etc.) that reads colors from its own custom
   properties. Values reference our own tokens so a brand-color change here updates the forms automatically. */
.quotecard .gform_wrapper, .quotecard .gform_wrapper.gform-theme{
  --gf-color-primary:var(--accent-fill) !important;
  --gf-color-primary-rgb:230,0,0 !important;
  --gf-color-primary-contrast:#fff !important;
  --gf-color-primary-darker:var(--accent-hover) !important;
  --gf-color-in-ctrl:var(--bg) !important;
  --gf-color-in-ctrl-rgb:11,11,13 !important;
  --gf-color-in-ctrl-contrast:var(--ink) !important;
  --gf-color-in-ctrl-primary:var(--accent) !important;
  --gf-color-out-ctrl-dark:#cfcfd3 !important;
  --gf-color-out-ctrl-dark-rgb:207,207,211 !important;
  --gf-color-out-ctrl-dark-darker:#f2f2f3 !important;
  --gf-color-out-ctrl-dark-lighter:rgba(242,242,243,.75) !important;
  --gf-color-secondary:var(--surface) !important;
  --gf-color-secondary-contrast:#f2f2f3 !important;
  --gf-color-secondary-contrast-rgb:242,242,243 !important;
  --gf-ctrl-border-color:var(--line) !important;
}

/* Direct property layer: the actual belt-and-suspenders fix, independent of variables. */
.quotecard .gform_wrapper *{ box-sizing:border-box; }
.quotecard .gform_wrapper{ color:var(--ink) !important; }
.quotecard .gform_wrapper input[type="text"],
.quotecard .gform_wrapper input[type="email"],
.quotecard .gform_wrapper input[type="tel"],
.quotecard .gform_wrapper input[type="number"],
.quotecard .gform_wrapper input[type="url"],
.quotecard .gform_wrapper select,
.quotecard .gform_wrapper textarea{
  background:var(--bg) !important;
  color:var(--ink) !important;
  border:1.5px solid var(--line) !important;
  border-radius:8px !important;
  padding:9px 11px !important;
  font-size:14.5px !important;
  width:100% !important;
  line-height:normal !important;
}
/* GF's Orbital theme gives <select> a fixed height + matching line-height sized for ITS OWN padding.
   Our padding above is different, so that fixed height clips the option text at the bottom -- force auto. */
.quotecard .gform_wrapper select{
  height:auto !important;
}
.quotecard .gform_wrapper input:focus,
.quotecard .gform_wrapper select:focus,
.quotecard .gform_wrapper textarea:focus{
  outline:2px solid var(--accent) !important;
  outline-offset:0 !important;
  border-color:var(--accent) !important;
}
.quotecard .gform_wrapper ::placeholder{ color:var(--muted) !important; opacity:1 !important; }

/* labels: match the site's own quotecard label style exactly */
.quotecard .gform_wrapper .gfield_label,
.quotecard .gform_wrapper legend.gfield_label,
.quotecard .gform_wrapper .gform-field-label{
  display:block !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:var(--muted) !important;
  margin:9px 0 4px !important;
}
.quotecard .gform_wrapper .gfield_required{ color:var(--accent) !important; }

/* Gravity Forms renders its Name field (and the consent fields) as <fieldset><legend>, not <div><label>.
   Browsers lay a <legend> out on the fieldset's border and ignore its margins, so Name's label sat higher than
   its row partner. Floating the legend takes it out of that special layout on every browser, so it behaves
   like an ordinary label; the input after it clears the float. */
.quotecard .gform_wrapper fieldset.gfield{ border:none !important; margin:0 !important; padding:0 !important; min-width:0 !important; }
.quotecard .gform_wrapper legend.gfield_label{ float:left !important; width:100% !important; padding:0 !important; }
.quotecard .gform_wrapper fieldset.gfield > div{ clear:both; }

/* consent / legal / description text: legible, not oversized, not shouting */
.quotecard .gform_wrapper .gfield_consent_label,
.quotecard .gform_wrapper .gfield_description,
.quotecard .gform_wrapper .instruction,
.quotecard .gform_wrapper .gform_required_legend,
.quotecard .gform_wrapper .gform-required-legend{
  color:var(--muted) !important;
  font-size:11.5px !important;
  font-weight:500 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  line-height:1.5 !important;
}
.quotecard .gform_wrapper .gfield_consent_label a,
.quotecard .gform_wrapper .gfield_description a{ color:var(--ink) !important; text-decoration:underline !important; }
.quotecard .gform_wrapper input[type="checkbox"]{ accent-color:var(--accent) !important; width:16px !important; height:16px !important; }

/* submit button: full-width red, matching every other button on the site */
.quotecard .gform_wrapper .gform_button,
.quotecard .gform_wrapper input[type="submit"]{
  display:block !important;
  width:100% !important;
  background:var(--accent) !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  padding:12px !important;
  font-weight:700 !important;
  font-size:15px !important;
  cursor:pointer !important;
  margin-top:14px !important;
}
.quotecard .gform_wrapper .gform_button:hover,
.quotecard .gform_wrapper input[type="submit"]:hover{ background:var(--accent-hover) !important; }

/* layout: GF sizes fields in fixed fractions (half/third/quarter) meant for a wide page. Our quotecard is a
   narrow sidebar, so every field stacks full width except explicit halves (Name+Email, City+State), which stay
   two-up like the rest of the site's forms. */
/* minmax(0,1fr) keeps the two columns equal no matter how wide an input's intrinsic size is. Full-width fields
   use 1 / -1 (not "span 2") so that on phones, where the grid is one column, they can't conjure a phantom second
   column -- that phantom column is what squeezed Name/Phone/City into a narrow strip beside wide Email/State. */
.quotecard .gform_wrapper .gform_fields{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:0 12px !important;
}
.quotecard .gform_wrapper .gfield{ grid-column:1 / -1 !important; }
.quotecard .gform_wrapper .gfield--width-half{ grid-column:auto / span 1 !important; }
@media (max-width:480px){
  .quotecard .gform_wrapper .gform_fields{ grid-template-columns:minmax(0,1fr) !important; }
  .quotecard .gform_wrapper .gfield--width-half{ grid-column:1 / -1 !important; }
}

/* A native <select>'s CLOSED-box text takes its color from the currently-shown <option>, not just the <select>
   element itself. GF's own placeholder option is styled muted-gray for a light page, so it (and, defensively,
   every option) needs an explicit override or it reads as nearly invisible on our dark fields. This is what was
   happening to Services Needed and State. */
.quotecard .gform_wrapper select option{
  color:var(--ink) !important;
  background:var(--bg) !important;
}
.quotecard .gform_wrapper select option.gf_placeholder{
  color:var(--muted) !important;
}
/* Desktop Chrome paints a native dropdown's highlighted option in the OS accent blue. Browsers that support
   customizable selects get an on-brand list instead; everything else keeps the native list. */
@supports (appearance: base-select){
  .quotecard .gform_wrapper select,
  .quotecard .gform_wrapper select::picker(select){ appearance:base-select; }
  .quotecard .gform_wrapper select{ display:flex !important; align-items:center; justify-content:space-between; gap:8px; white-space:nowrap; min-height:0; }
  .quotecard .gform_wrapper select::picker-icon{ color:var(--muted); font-size:10px; transition:rotate .2s; }
  .quotecard .gform_wrapper select:open::picker-icon{ rotate:180deg; }
  .quotecard .gform_wrapper select::picker(select){ background:var(--surface); border:1.5px solid var(--line); border-radius:8px; padding:4px; margin-top:4px; box-shadow:0 12px 30px rgba(0,0,0,.5); }
  .quotecard .gform_wrapper select option{ padding:8px 10px; border-radius:6px; background:transparent !important; }
  .quotecard .gform_wrapper select option:hover,
  .quotecard .gform_wrapper select option:focus-visible{ background:var(--line) !important; color:var(--ink) !important; outline:none; }
  .quotecard .gform_wrapper select option:checked{ background:var(--surface-2) !important; font-weight:600; }
  .quotecard .gform_wrapper select option::checkmark{ color:var(--accent); }
  .quotecard .gform_wrapper select option.gf_placeholder{ display:none; }
  /* After a pick, hold the list for a beat so the red check visibly lands on the choice, then fade it out. */
  .quotecard .gform_wrapper select::picker(select){ opacity:1; transition:opacity .15s ease, display .15s allow-discrete, overlay .15s allow-discrete; }
  .quotecard .gform_wrapper select:not(:open)::picker(select){ opacity:0; pointer-events:none; transition:opacity .2s ease .45s, display .65s allow-discrete, overlay .65s allow-discrete; }
  @starting-style{ .quotecard .gform_wrapper select:open::picker(select){ opacity:0; } }
}

/* SMS consent legal text: collapsed to two lines by default with a click-to-expand toggle, so the long
   boilerplate doesn't dominate the form. The full text stays in the DOM at all times, one click away, right
   next to the checkbox it belongs to -- nothing is hidden more than a single click deep. */
.quotecard .gform_wrapper .gfield_consent_label.srx-consent-clamped{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
/* GF lays the checkbox + consent text out as a 2-column grid (checkbox column, text column) with its own
   row-gap. Our toggle button, inserted right after the text, inherits that grid: without an explicit column
   it falls into column 1 (under the checkbox, not the text) and picks up the full row-gap as extra space
   above it. Pin it to the text column and collapse the grid's row-gap so it sits snug under the paragraph. */
.quotecard .gform_wrapper .ginput_container_consent{
  row-gap:2px !important;
}
.quotecard .gform_wrapper .srx-consent-toggle{
  grid-column:2 !important;
  display:inline-block !important;
  height:auto !important;
  min-height:0 !important;
  line-height:normal !important;
  background:none !important;
  border:none !important;
  padding:0 !important;
  margin:0 0 6px !important;
  color:var(--accent) !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  text-decoration:underline !important;
  cursor:pointer !important;
}