:root{
  --bg:#0a1220;
  --bg-soft:#101a2c;
  --panel:#0d1726;
  --text:#eef1f7;
  --muted:#a7b1c4;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.07);
  --glass:rgba(255,255,255,.035);
  --accent:#3b7dfb;
  --accent-dark:#2457c4;
  --accent-2:#13a89d;
  --gold:#c9a24b;
  --warn:#e8a33d;
  --warn-bg:rgba(232,163,61,.12);
  --ok:#3bd17a;
  --err:#f16363;
  --err-bg:rgba(241,99,99,.12);
  --radius:14px;
  --radius-lg:20px;
  --maxw:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  /* Tells the browser to render native form-control chrome (the <select>
     dropdown's own popup list, scrollbars, etc.) using its dark palette
     instead of the OS default light one -- otherwise the popup falls back
     to a white background while still inheriting our light option text
     color, making unselected entries nearly invisible. */
  color-scheme:dark;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:background .3s var(--ease),box-shadow .3s var(--ease),padding .3s var(--ease)}
.site-header.scrolled{padding:12px 0;background:rgba(10,18,32,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:1.05rem;letter-spacing:.1px;margin-right:auto}
.brand-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(145deg,var(--accent),var(--accent-dark));display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;letter-spacing:.5px;color:#fff;box-shadow:0 4px 14px -4px rgba(59,125,251,.55)}
.nav{display:flex;gap:30px;font-size:.92rem;color:var(--muted)}
.nav a{transition:color .2s;padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--text)}
.nav-cta{display:inline-flex}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:var(--glass);border:1px solid var(--line);border-radius:10px;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;margin:0 auto;background:var(--text);transition:transform .25s var(--ease),opacity .25s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.78rem 1.5rem;border-radius:10px;font-weight:600;font-size:.92rem;border:1px solid transparent;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),opacity .2s var(--ease)}
.btn-primary{background:linear-gradient(145deg,var(--accent),var(--accent-dark));color:#fff;box-shadow:0 8px 20px -8px rgba(59,125,251,.55)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(59,125,251,.7)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-ghost{border-color:var(--line);color:var(--text);background:var(--glass)}
.btn-ghost:hover{border-color:rgba(255,255,255,.28);transform:translateY(-1px)}

/* Hero */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;padding:150px 24px 70px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg::before{content:"";position:absolute;inset:-10%;background:radial-gradient(circle at 20% 15%,rgba(59,125,251,.22),transparent 55%),radial-gradient(circle at 85% 10%,rgba(19,168,157,.16),transparent 50%),radial-gradient(circle at 50% 100%,rgba(59,125,251,.10),transparent 60%)}
.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(circle at 50% 20%,rgba(0,0,0,.55),transparent 72%);opacity:.6}
.hero-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:.76rem;margin-bottom:16px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
h1{font-size:clamp(2.1rem,4.8vw,3.3rem);line-height:1.15;font-weight:800;letter-spacing:-.01em}
.accent{color:var(--accent)}
.hero-sub{margin:22px auto 0;max-width:600px;color:var(--muted);font-size:1.08rem}
.hero-actions{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.hero-points{display:flex;gap:30px;justify-content:center;margin-top:44px;flex-wrap:wrap;color:var(--muted);font-size:.85rem}
.hero-points li{position:relative;padding-left:16px}
.hero-points li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent-2)}

/* Sections */
.section{padding:100px 24px;max-width:var(--maxw);margin:0 auto}
.section-alt{background:linear-gradient(180deg,transparent,var(--bg-soft) 14%,var(--bg-soft) 86%,transparent);border-radius:28px}
.section-head{max-width:640px;margin:0 auto 52px;text-align:center}
.section-head h2{font-size:clamp(1.6rem,3.1vw,2.2rem);font-weight:800;margin-top:10px}
.section-sub{color:var(--muted);margin-top:14px;font-size:1.01rem}

.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--glass);border:1px solid var(--line-soft);border-radius:var(--radius);padding:28px 24px;transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:rgba(59,125,251,.4);background:rgba(255,255,255,.05)}
.card-icon{width:42px;height:42px;color:var(--accent);margin-bottom:16px}
.card h3{font-size:1.02rem;font-weight:700;margin-bottom:9px}
.card p{color:var(--muted);font-size:.9rem}

.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.timeline li{background:var(--glass);border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px 20px}
.timeline .step{display:inline-block;font-weight:800;font-size:1.2rem;color:var(--accent);margin-bottom:10px}
.timeline h3{font-size:.98rem;font-weight:700;margin-bottom:8px}
.timeline p{color:var(--muted);font-size:.88rem}

.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.about-grid h2{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:800;margin:10px 0 16px}
.about-grid p{color:var(--muted);margin-bottom:14px}
.about-cards{display:grid;gap:14px}
.mini-card{background:var(--glass);border:1px solid var(--line-soft);border-radius:var(--radius);padding:18px 20px}
.mini-card h4{font-weight:700;margin-bottom:5px;font-size:.95rem}
.mini-card p{color:var(--muted);font-size:.86rem}

.principles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* Request / contact section */
.request-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
.request-aside h2{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:800;margin:10px 0 14px}
.request-aside p{color:var(--muted);margin-bottom:22px}
.quick-contact{display:grid;gap:10px}
.contact-row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:10px;background:var(--glass);border:1px solid var(--line-soft);transition:background .2s}
.contact-row:hover{background:rgba(255,255,255,.06)}
.contact-label{color:var(--muted);font-size:.82rem}
.contact-value{font-weight:700;font-size:.92rem}
.hours-note{margin-top:18px;color:var(--muted);font-size:.84rem}

.form-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:7px;font-weight:600}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:9px;padding:.7rem .85rem;color:var(--text);font-size:.92rem;transition:border-color .2s,background .2s;color-scheme:dark}
.field textarea{resize:vertical;min-height:90px;font-family:inherit}
/* Chromium (and some other engines) can ignore the inherited/element
   color-scheme for a <select>'s own popup list and still render it with
   light native chrome; styling the <option> background/color directly is
   the one cross-browser-reliable way to keep the expanded list legible,
   so we set both as belt-and-braces. */
.field select option{background:var(--bg-soft);color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.06)}
.combo{position:relative}
.combo-native-select{display:none}
.combo-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:9px;padding:.7rem .85rem;color:var(--text);font-size:.92rem;font-family:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.combo-trigger:hover{background:rgba(255,255,255,.06)}
.combo-trigger:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.06)}
.combo-trigger-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-trigger-text.placeholder{color:var(--muted)}
.combo-arrow{flex:0 0 auto;color:var(--muted);transition:transform .2s}
.combo.open .combo-arrow{transform:rotate(180deg)}
.combo-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;box-shadow:0 14px 34px rgba(0,0,0,.45);overflow:hidden}
.combo-search{width:100%;background:rgba(255,255,255,.035);border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.65rem .85rem;color:var(--text);font-size:.9rem;font-family:inherit;position:sticky;top:0;z-index:1}
.combo-search:focus{outline:none;background:rgba(255,255,255,.06)}
.combo-list{list-style:none;margin:0;padding:6px;max-height:240px;overflow-y:auto}
.combo-list li{padding:.5rem .65rem;border-radius:7px;color:var(--text);font-size:.9rem;cursor:pointer}
.combo-list li.active{background:rgba(59,125,251,.18)}
.combo-list li[aria-selected="true"]{color:var(--accent);font-weight:600}
.combo-list li[hidden]{display:none}
.combo-empty{padding:.65rem .85rem;color:var(--muted);font-size:.88rem}
.field-error{color:var(--err);font-size:.78rem;margin-top:5px;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea,.field.invalid .combo-trigger{border-color:var(--err)}
.field.invalid .field-error{display:block}
.field-hint{color:var(--muted);font-size:.78rem;margin-top:5px;display:none}
.field-hint.show{display:block}

.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.subfield-label{font-size:.82rem;color:var(--muted);margin-bottom:9px;font-weight:600}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.date-chip,.time-pill{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:10px;padding:.65rem 1rem;font-size:.86rem;color:var(--text);transition:border-color .2s,background .2s}
.date-chip{display:flex;flex-direction:column;align-items:flex-start;min-width:118px}
.date-chip .d-label{font-weight:700}
.date-chip .d-date{color:var(--muted);font-size:.78rem}
.date-chip.priority-urgent .d-date{color:var(--warn)}
.date-chip.priority-high .d-date{color:var(--accent)}
.date-chip[aria-pressed="true"],.time-pill[aria-pressed="true"]{border-color:var(--accent);background:rgba(59,125,251,.14)}
.date-chip:hover,.time-pill:hover{border-color:rgba(255,255,255,.3)}

.notice{display:flex;gap:10px;align-items:flex-start;border-radius:10px;padding:12px 14px;font-size:.85rem;margin-bottom:16px;border:1px solid transparent}
.notice--warn{background:var(--warn-bg);border-color:rgba(232,163,61,.35);color:#f3cf93}
.notice--info{background:rgba(59,125,251,.1);border-color:rgba(59,125,251,.3);color:#bcd3fb}

.form-status{margin-top:16px;border-radius:10px;padding:14px 16px;font-size:.9rem;display:none}
.form-status.show{display:block}
.form-status.ok{background:rgba(59,209,122,.12);border:1px solid rgba(59,209,122,.35);color:#9eeec0}
.form-status.err{background:var(--err-bg);border:1px solid rgba(241,99,99,.35);color:#f7b3b3}

.consent-line{color:var(--muted);font-size:.78rem;margin-top:14px}

.site-footer{border-top:1px solid var(--line-soft);padding:28px 24px;color:var(--muted);font-size:.85rem}
.footer-inner{max-width:var(--maxw);margin:0 auto;text-align:center}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in-view{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* Responsive */
@media (max-width:960px){
  .card-grid,.timeline,.principles-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid,.request-grid{grid-template-columns:1fr;gap:28px}
  .field-row{grid-template-columns:1fr}
}
/* Nav collapses to the hamburger menu starting at 900px so tablet
   widths (notably 768px, iPad portrait) never squeeze the full
   desktop nav links and CTA into a cramped, wrapping row. */
@media (max-width:900px){
  .nav,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .site-header.nav-open .nav{
    display:flex;position:fixed;inset:0;top:64px;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:rgba(10,18,32,.98);backdrop-filter:blur(10px);font-size:1.25rem;color:var(--text)
  }
  .site-header.nav-open .nav-cta{display:none}
}
@media (max-width:760px){
  .hero{padding:120px 20px 56px;min-height:auto}
  .section{padding:68px 20px}
  .card-grid,.timeline,.principles-grid{grid-template-columns:1fr}
  .form-card{padding:22px}
}
@media (max-width:480px){
  .hero-points{flex-direction:column;align-items:center;gap:10px}
  .contact-row{flex-direction:column;align-items:flex-start;gap:4px}
}
#submitBtn{width:100%}
.muted-note{color:var(--muted);font-size:.85rem}

/* Collapsible "Request a Service" form (appended) */
.request-grid{display:block;max-width:600px;margin:0 auto}
.request-grid.form-open{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start;max-width:none;margin:0}
.request-cta{margin-top:18px;width:100%}
.form-card-wrap{margin-top:0}
.form-card-wrap[hidden]{display:none}
#formCardInner.just-opened{animation:csl-form-pop .45s var(--ease)}
@keyframes csl-form-pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:960px){
  .request-grid.form-open{grid-template-columns:1fr;gap:28px}
}

/* Submit/Cancel button row (appended) */
.form-actions{display:flex;gap:12px;margin-top:4px}
.form-actions .btn{flex:1}

/* Mobile menu panel improvements (appended) */
.nav-icon{display:none}
@media (max-width:900px){
  .site-header.nav-open .nav{gap:10px;padding:0 28px}
  .nav a{display:flex;align-items:center;gap:12px}
  .nav-icon{display:inline-flex;width:20px;height:20px;color:var(--accent);flex-shrink:0}
  .nav a:not(.nav-link-cta){width:100%;max-width:300px;justify-content:center;padding:14px 18px;border-radius:12px;transition:background .2s}
  .nav a:not(.nav-link-cta):hover,.nav a:not(.nav-link-cta):focus-visible{background:rgba(255,255,255,.06)}
  .nav-link-cta{margin-top:22px;padding-top:26px;border-top:1px solid var(--line);width:100%;max-width:300px;justify-content:center}
  .nav-link-cta .pill{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:.9rem 1.5rem;border-radius:10px;background:linear-gradient(145deg,var(--accent),var(--accent-dark));color:#fff;font-weight:700;box-shadow:0 8px 20px -8px rgba(59,125,251,.55)}
}

/* Mobile menu fix (appended): backdrop-filter on .site-header.scrolled
   creates a new containing block for position:fixed descendants, which
   broke the full-screen .nav panel whenever the header already had
   .scrolled applied before the menu opened (the fixed panel resolved
   against the ~64px header box instead of the viewport, leaving a
   mostly-transparent gap with page content showing through). Dropping
   the header's own blur while the menu is open keeps .nav fixed to the
   viewport and covering it edge-to-edge; body scroll lock stops the
   page scrolling behind the open panel in the first place. */
.site-header.nav-open{backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-scroll-lock{overflow:hidden}

/* Nav duplicate-CTA fix (appended): .nav-link-cta is the "Request
   Service" pill meant only for the mobile dropdown panel (it gets its
   blue gradient styling inside the 900px media query below). At
   desktop widths it was rendering as a second, plain-text "Request
   Service" link right next to the real .nav-cta button, duplicating
   it. Hide it above the hamburger-menu breakpoint so only the one
   blue button remains on desktop. */
@media (min-width:901px){
  .nav-link-cta{display:none}
}