/* ==========================================================================
   Tampa Bay Gigs — one stylesheet, no framework.
   Tokens first, then layout, then components.
   ========================================================================== */

:root{
  --ink:#0b1b2b;
  --ink-2:#22384c;
  --muted:#5c7387;
  --line:#e4ebf1;
  --line-2:#d3dfe8;
  --bg:#ffffff;
  --bg-soft:#f6f9fb;
  --sand:#fff7f0;
  --bay:#0d7f9e;
  --bay-dk:#0a6480;
  --bay-lt:#e6f4f8;
  --sun:#ff6a2b;
  --sun-dk:#e85513;
  --sun-lt:#fff0e7;
  --good:#0f8a52;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(11,27,43,.06), 0 2px 8px rgba(11,27,43,.05);
  --shadow:0 4px 12px rgba(11,27,43,.07), 0 16px 40px rgba(11,27,43,.09);
  --shadow-lg:0 10px 24px rgba(11,27,43,.12), 0 30px 80px rgba(11,27,43,.16);
  --sans:"Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --body:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Author display rules outrank the UA sheet's [hidden]{display:none}, which
   silently breaks every .btn we hide from JS. Settle it once, here. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--sans); line-height:1.15; margin:0 0 .5em; letter-spacing:-.02em}
h1{font-size:clamp(2rem,5vw,3.25rem); font-weight:800}
h2{font-size:clamp(1.5rem,3.2vw,2.25rem); font-weight:700}
h3{font-size:1.15rem; font-weight:700}
p{margin:0 0 1em}
a{color:var(--bay-dk); text-decoration-color:rgba(13,127,158,.35); text-underline-offset:2px}
a:hover{color:var(--bay)}
img{max-width:100%; height:auto}
ul{margin:0 0 1em; padding-left:1.15em}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.center{text-align:center}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px 14px;border-radius:8px;z-index:99}
:focus-visible{outline:3px solid var(--bay); outline-offset:2px; border-radius:4px}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font:600 1rem/1 var(--sans); padding:14px 22px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--sun); color:#fff; box-shadow:0 6px 18px rgba(255,106,43,.3)}
.btn-primary:hover{background:var(--sun-dk); color:#fff}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:var(--ink-2); color:#fff}
.btn-ghost{background:transparent; color:var(--ink-2); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--bg-soft)}
.btn-sm{padding:10px 16px; font-size:.9375rem}
.btn-lg{padding:17px 30px; font-size:1.0625rem}
.btn-wide{flex:1}
.btn-block{display:flex;width:100%}

/* ----------------------------------------------------------------- header */
.site-head{
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(8px); border-bottom:1px solid var(--line);
}
.head-inner{display:flex; align-items:center; gap:24px; height:68px}
/* Typographic wordmark — no icon, no logo file. Just the name, set well. */
.logo{display:inline-flex; align-items:baseline; gap:.3em; text-decoration:none; color:var(--ink);
      font-family:var(--sans); font-size:1.22rem; letter-spacing:-.035em; white-space:nowrap}
.logo-place{font-weight:500; color:var(--ink-2)}
.logo-word{font-weight:800; color:var(--bay-dk); position:relative}
.logo-word::after{content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
                  background:linear-gradient(90deg,var(--sun),transparent); border-radius:2px}
.logo:hover .logo-place{color:var(--ink)}
.head-nav{display:flex; gap:22px; margin-left:auto; font-weight:500}
.head-nav a{color:var(--ink-2); text-decoration:none; font-size:.9375rem}
.head-nav a:hover{color:var(--bay-dk)}
@media (max-width:860px){
  .head-nav{display:none}
  .head-inner .btn{margin-left:auto}
}

/* ------------------------------------------------------------------- hero */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(13,127,158,.14), transparent 60%),
    radial-gradient(700px 380px at 92% 0%, rgba(255,106,43,.12), transparent 62%),
    linear-gradient(180deg,#fbfdfe,#ffffff 62%);
  padding:clamp(38px,6vw,76px) 0 clamp(44px,6vw,80px);
  border-bottom:1px solid var(--line);
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:start}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr; gap:30px}}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; background:var(--bay-lt); color:var(--bay-dk);
  font:600 .8125rem/1 var(--sans); letter-spacing:.02em; padding:8px 14px; border-radius:999px; margin-bottom:18px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(15,138,82,.18)}
.hero h1{margin-bottom:.35em}
.hero h1 .accent{
  background:linear-gradient(180deg,transparent 62%, rgba(255,106,43,.28) 62%);
  padding:0 .06em;
}
.hero-sub{font-size:clamp(1.0625rem,1.7vw,1.25rem); color:var(--ink-2); max-width:33em}
.hero-points{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px}
.hero-points li{display:flex; gap:11px; align-items:flex-start; color:var(--ink-2)}
.tick{flex:none; width:22px;height:22px;border-radius:50%; background:var(--bay-lt); color:var(--bay-dk); display:grid;place-items:center; margin-top:2px}
.tick svg{width:13px;height:13px}

/* hero start-card (the thing that actually converts) */
.start-card{
  background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
  padding:clamp(20px,2.4vw,28px); position:relative;
}
.start-card::before{
  content:""; position:absolute; inset:-1px -1px auto; height:5px; border-radius:22px 22px 0 0;
  background:linear-gradient(90deg,var(--sun),#ffa34d,var(--bay));
}
.start-card h2{font-size:1.3rem; margin-bottom:.2em}
.start-card .qhint{margin-bottom:16px}
.start-meta{display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:.8125rem; color:var(--muted)}
.start-meta span{display:inline-flex;align-items:center;gap:6px}

/* ------------------------------------------------------------------ chips */
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{
  font:500 .9375rem/1 var(--body); padding:11px 16px; border-radius:999px;
  border:1.5px solid var(--line-2); background:#fff; color:var(--ink-2); cursor:pointer;
  transition:.15s ease;
}
.chip:hover{border-color:var(--bay); color:var(--bay-dk); background:var(--bay-lt)}
.chip.is-on{background:var(--ink); border-color:var(--ink); color:#fff}
.chips-sm .chip{padding:9px 14px; font-size:.875rem}
.chips-multi .chip.is-on{background:var(--bay); border-color:var(--bay)}

/* --------------------------------------------------------------- sections */
.section{padding:clamp(46px,6vw,84px) 0}
.section-soft{background:var(--bg-soft); border-block:1px solid var(--line)}
.section-sand{background:var(--sand); border-block:1px solid #f6e5d8}
.section-head{max-width:44rem; margin-bottom:36px}
.section-head.center{margin-inline:auto}
.section-head p{color:var(--muted); font-size:1.0625rem}

.trustbar{background:var(--ink); color:#cfe0ea}
.trustbar .wrap{display:flex; flex-wrap:wrap; gap:10px 40px; justify-content:space-between; padding-block:16px; font-size:.9375rem}
.trustbar strong{color:#fff; font-family:var(--sans)}
.trustbar span{display:inline-flex; align-items:center; gap:9px}

.grid{display:grid; gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm)}
.card h3{margin-bottom:.35em}
.card p{margin:0; color:var(--muted); font-size:.9375rem}

.step-card{position:relative; padding-top:30px}
.step-num{
  position:absolute; top:-16px; left:24px; width:38px; height:38px; border-radius:12px;
  background:var(--ink); color:#fff; display:grid; place-items:center;
  font:700 1.05rem/1 var(--sans); box-shadow:var(--shadow-sm);
}
.icon-badge{width:44px;height:44px;border-radius:13px;background:var(--bay-lt);color:var(--bay-dk);display:grid;place-items:center;margin-bottom:14px}
.icon-badge svg{width:22px;height:22px}

.svc-card{display:block; text-decoration:none; color:inherit; transition:.16s ease}
.svc-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-2); color:inherit}
.svc-card .price{display:inline-block; margin-top:12px; font:600 .8125rem/1 var(--sans); color:var(--bay-dk); background:var(--bay-lt); padding:7px 11px; border-radius:999px}

/* price strip */
.pricebox{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.pricebox div{background:#fff; padding:20px 22px}
.pricebox dt{font:600 .8125rem/1 var(--sans); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px}
.pricebox dd{margin:0; font:700 1.5rem/1 var(--sans); color:var(--ink)}
.pricebox .note{font:400 .8125rem/1.4 var(--body); color:var(--muted); margin-top:6px}

/* prose blocks on city pages */
.prose{max-width:46rem}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose p, .prose li{color:var(--ink-2)}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.4em}

/* venue + link lists */
.pill-list{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:9px}
.pill-list li{background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 15px; font-size:.9rem; color:var(--ink-2)}
.link-grid{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:2px 18px}
.link-grid a{display:block; padding:8px 0; font-size:.9375rem; text-decoration:none; color:var(--ink-2); border-bottom:1px solid var(--line)}
.link-grid a:hover{color:var(--bay-dk)}

/* FAQ */
.faq{max-width:48rem}
.faq details{border-bottom:1px solid var(--line); padding:4px 0}
.faq summary{
  cursor:pointer; list-style:none; padding:18px 40px 18px 0; position:relative;
  font:600 1.0625rem/1.4 var(--sans); color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:10px; height:10px; margin-top:-7px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.faq details p{padding:0 8px 18px 0; color:var(--ink-2); margin:0}

/* CTA band */
.cta-band{
  background:linear-gradient(135deg,var(--ink),#123047 60%,#0d5c74);
  color:#fff; border-radius:24px; padding:clamp(30px,4vw,52px); text-align:center;
  box-shadow:var(--shadow);
}
.cta-band h2{color:#fff}
.cta-band p{color:#c6d8e4; max-width:36rem; margin-inline:auto}
.cta-band .btn-primary{margin-top:10px}

/* breadcrumbs */
.crumbs{font-size:.8125rem; color:var(--muted); padding:14px 0 0}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0}
.crumbs li:not(:last-child)::after{content:"›"; margin-left:8px; color:var(--line-2)}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--bay-dk)}

/* ----------------------------------------------------------------- footer */
.site-foot{background:var(--ink); color:#a9c1d1; padding:56px 0 0; margin-top:0}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; padding-bottom:40px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.site-foot h3{color:#fff; font-size:.9375rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:14px}
.foot-list{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.foot-list a{color:#a9c1d1; text-decoration:none; font-size:.9375rem}
.foot-list a:hover{color:#fff}
.logo-foot{margin-bottom:14px; font-size:1.15rem}
.logo-foot .logo-place{color:#dce8f0}
.logo-foot .logo-word{color:#fff}
.foot-brand .muted{color:#8faabd; font-size:.9375rem; max-width:34em}
.foot-legal{border-top:1px solid rgba(255,255,255,.1); padding-block:20px}
.foot-legal p{margin:0; font-size:.8125rem; color:#7d99ad}

/* --------------------------------------------------------- sticky mobile */
.sticky-cta{
  display:none; position:fixed; left:12px; right:12px; bottom:12px; z-index:35;
  flex-direction:column; gap:2px; align-items:center;
  background:var(--sun); color:#fff; border:0; border-radius:14px; cursor:pointer;
  padding:12px; font:700 1.05rem/1.2 var(--sans);
  box-shadow:0 10px 30px rgba(11,27,43,.28);
}
.sticky-cta span{font:500 .75rem/1 var(--body); opacity:.9}
@media (max-width:760px){.sticky-cta{display:flex} body{padding-bottom:78px}}

/* ------------------------------------------------------------------ forms */
.field{margin-bottom:16px}
.field label{display:block; font:600 .9375rem/1.3 var(--sans); margin-bottom:7px; color:var(--ink)}
.field .opt{font-weight:400; color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],select,textarea{
  width:100%; font:400 1rem/1.4 var(--body); color:var(--ink); background:#fff;
  border:1.5px solid var(--line-2); border-radius:var(--radius-sm); padding:12px 14px;
}
input:focus,select:focus,textarea:focus{border-color:var(--bay); outline:none; box-shadow:0 0 0 3px rgba(13,127,158,.15)}
textarea{resize:vertical}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){.row{grid-template-columns:1fr}}
.field-sm{max-width:150px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.9375rem; color:var(--ink-2); margin-bottom:14px; cursor:pointer}
.check input{margin-top:3px; width:18px; height:18px; accent-color:var(--bay); flex:none}
.check-consent{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; font-size:.875rem; line-height:1.5}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-error{background:var(--sun-lt); border:1px solid #ffc9a8; color:#a63a08; padding:11px 14px; border-radius:var(--radius-sm); font-size:.9375rem; margin:0 0 14px}
.form-ok{background:#e8f6ef; border:1px solid #bfe5d1; color:#0c6b41; padding:11px 14px; border-radius:var(--radius-sm); font-size:.9375rem; margin:0 0 14px}

/* ------------------------------------------------------------------ modal */
.modal{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(9,20,31,.6); backdrop-filter:blur(3px)}
.modal-card{
  position:relative; width:min(620px,100%); max-height:92vh; overflow:auto;
  background:#fff; border-radius:22px; box-shadow:var(--shadow-lg); padding:26px clamp(20px,3vw,32px) 24px;
  animation:pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{from{opacity:0; transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal-card{animation:none}}
.modal-x{position:absolute; top:12px; right:14px; background:none; border:0; font-size:1.9rem; line-height:1; color:var(--muted); cursor:pointer; padding:4px 8px; border-radius:8px}
.modal-x:hover{background:var(--bg-soft); color:var(--ink)}
.modal-head{margin-bottom:20px; padding-right:36px}
.modal-progress{height:6px; background:var(--line); border-radius:999px; overflow:hidden}
.modal-bar{height:100%; width:14%; background:linear-gradient(90deg,var(--bay),#12b0d1); border-radius:999px; transition:width .25s ease}
.modal-step-label{margin:8px 0 0; font-size:.75rem; color:var(--muted); letter-spacing:.04em; text-transform:uppercase}
.qstep{display:none}
.qstep.is-active{display:block; animation:fade .18s ease}
@keyframes fade{from{opacity:0; transform:translateX(8px)}to{opacity:1;transform:none}}
.qtitle{font-size:1.4rem; margin-bottom:.25em}
.qhint{color:var(--muted); font-size:.9375rem; margin-bottom:18px}
.qnav{display:flex; gap:10px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line)}
.qfoot{margin:12px 0 0; text-align:center; font-size:.75rem; color:var(--muted)}
body.modal-open{overflow:hidden}
/* no-JS fallback: show every step stacked */
.no-js .qstep{display:block; border-top:1px solid var(--line); padding-top:18px; margin-top:18px}
.no-js #q-next, .no-js .modal-head{display:none}
.no-js #q-submit{display:flex !important}

/* thanks page */
.thanks{max-width:38rem; margin-inline:auto; text-align:center; padding:clamp(46px,7vw,86px) 0}
.thanks .ref{display:inline-block; font:700 1.1rem/1 var(--sans); letter-spacing:.06em; background:var(--bay-lt); color:var(--bay-dk); padding:12px 20px; border-radius:12px; margin:6px 0 22px}
.thanks-steps{text-align:left; display:grid; gap:14px; margin:28px 0}
.thanks-steps li{list-style:none; display:flex; gap:12px; align-items:flex-start}

/* tables (admin-ish public use) */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
table.data{width:100%; border-collapse:collapse; font-size:.9375rem; background:#fff}
table.data th{text-align:left; font:600 .75rem/1 var(--sans); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:13px 14px; border-bottom:1px solid var(--line); white-space:nowrap}
table.data td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data tr:hover td{background:var(--bg-soft)}

@media print{
  .site-head,.site-foot,.sticky-cta,.modal,.no-print{display:none !important}
  body{padding:0}
}

/* ------------------------------------------------------- featured pro cards */
.pro-grid{align-items:start}
.pro-card{display:flex; flex-direction:column; gap:14px}
.pro-head{display:flex; gap:13px; align-items:center}
.pro-head h3{margin:0; font-size:1.05rem}
.pro-avatar{width:56px; height:56px; border-radius:14px; object-fit:cover; flex:none}
.pro-avatar-fallback{
  display:grid; place-items:center; background:linear-gradient(140deg,var(--bay),#0aa2c0);
  color:#fff; font:700 1.15rem/1 var(--sans); letter-spacing:.02em;
}
.pro-meta{margin:3px 0 0; font-size:.8125rem; color:var(--muted)}
.pro-tagline{margin:0; font-size:.9375rem; color:var(--ink-2)}
.pro-facts{list-style:none; padding:0; margin:0; display:grid; gap:7px; font-size:.8125rem; color:var(--ink-2)}
.pro-facts li{display:grid; grid-template-columns:96px 1fr; gap:8px}
.pro-facts span{color:var(--muted)}
.pro-about{margin:0; font-size:.875rem; color:var(--muted)}
.pro-actions{margin-top:auto; padding-top:6px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.pro-link{font-size:.8125rem; text-decoration:none; color:var(--muted)}
.pro-link:hover{color:var(--bay-dk)}

/* requested-pro banner inside the wizard */
.modal-pro{
  margin:0 0 14px; padding:10px 14px; border-radius:var(--radius-sm);
  background:var(--bay-lt); color:var(--bay-dk); font-size:.875rem;
}
.modal-pro[hidden]{display:none}

/* ===================================================== wizard: option rows */
.opt-list{display:flex; flex-direction:column; border:1.5px solid var(--line-2);
          border-radius:14px; overflow:hidden; background:#fff}
.opt{display:flex; align-items:center; gap:13px; width:100%; text-align:left;
     padding:15px 16px; background:#fff; border:0; border-bottom:1px solid var(--line);
     font:500 1rem/1.35 var(--body); color:var(--ink-2); cursor:pointer; transition:.13s ease}
.opt-list .opt:last-child{border-bottom:0}
.opt:hover{background:var(--bay-lt); color:var(--ink)}
.opt.is-on{background:var(--bay-lt); color:var(--ink); font-weight:600}
.opt-mark{flex:none; width:21px; height:21px; border-radius:50%;
          border:2px solid var(--line-2); background:#fff; position:relative; transition:.13s ease}
.opt-mark-box{border-radius:6px}
.opt.is-on .opt-mark{border-color:var(--bay); background:var(--bay)}
.opt.is-on .opt-mark::after{content:""; position:absolute; inset:0; margin:auto;
          width:7px; height:7px; border-radius:50%; background:#fff}
.opt.is-on .opt-mark-box::after{width:11px; height:6px; border-radius:0; background:none;
          border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
          transform:rotate(-45deg) translate(1px,-2px)}
.opt-label{flex:1}
.opt-other{padding:6px 10px 6px 16px; cursor:default}
.opt-other:hover{background:#fff}
.opt-input{flex:1; border:0; padding:10px 6px; font:400 1rem/1.35 var(--body); color:var(--ink); background:none}
.opt-input:focus{outline:none; box-shadow:none}
.opt-input-wide{width:100%; border:1.5px solid var(--line-2); border-radius:12px; padding:13px 15px}
.opt-note{font-weight:400; color:var(--muted); font-size:.875rem}
.opt-compact .opt{padding:12px 16px; font-size:.9375rem}

/* ===================================================== wizard: icon tiles */
.tile-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:9px}
.tile{flex-direction:column; align-items:center; justify-content:flex-start; text-align:center;
      gap:9px; padding:15px 8px 13px; border:1.5px solid var(--line-2); border-radius:14px;
      min-height:104px; color:var(--ink-2)}
.tile:hover{border-color:var(--bay); background:var(--bay-lt); transform:translateY(-1px)}
.tile.is-on{border-color:var(--bay); background:var(--bay-lt); box-shadow:0 0 0 2px var(--bay) inset}
.tile-ico{display:grid; place-items:center; width:34px; height:34px; color:var(--bay-dk)}
.tile-ico svg{width:26px; height:26px}
.tile.is-on .tile-ico{color:var(--bay-dk)}
.tile-label{font:500 .78rem/1.25 var(--body)}
.tile.is-on .tile-label{font-weight:600; color:var(--ink)}
.tile-none{border-style:dashed}
.tile-none.is-on{background:var(--bg-soft); box-shadow:0 0 0 2px var(--line-2) inset; border-color:var(--line-2)}
.tile-none .tile-ico{color:var(--muted)}
.pill-ico{display:inline-grid; place-items:center; width:16px; height:16px; margin-right:7px;
          vertical-align:-3px; color:var(--bay-dk)}
.pill-ico svg{width:16px; height:16px}
.pill-list li{display:inline-flex; align-items:center}

/* ========================================================= wizard: slider */
.slider-field label{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.slider-out{font:700 .95rem/1 var(--sans); color:var(--bay-dk); background:var(--bay-lt);
            padding:6px 11px; border-radius:999px}
.slider{-webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px;
        background:linear-gradient(90deg,var(--bay) var(--pct,0%),var(--line) var(--pct,0%));
        outline:none; margin:6px 0 4px}
.slider::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%;
        background:#fff; border:3px solid var(--bay); cursor:grab;
        box-shadow:0 2px 8px rgba(11,27,43,.2)}
.slider::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:#fff;
        border:3px solid var(--bay); cursor:grab; box-shadow:0 2px 8px rgba(11,27,43,.2)}
.slider-scale{display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted)}

/* ==================================================== wizard: match screen */
.qstep-match{text-align:center; padding:6px 0 2px}
.match-tick{width:60px; height:60px; margin:4px auto 18px; border-radius:50%;
            background:#e3f6ec; color:var(--good); display:grid; place-items:center}
.match-tick svg{width:30px; height:30px}
.match-body{color:var(--ink-2); max-width:30rem; margin:0 auto 18px}
.match-points{list-style:none; padding:0; margin:0 auto 20px; max-width:26rem;
              text-align:left; display:grid; gap:9px}
.match-points li{position:relative; padding-left:24px; font-size:.9375rem; color:var(--ink-2)}
.match-points li::before{content:""; position:absolute; left:4px; top:.55em; width:7px; height:7px;
              border-radius:50%; background:var(--bay)}
.match-last{font:600 1rem/1.4 var(--sans); color:var(--ink); margin:0}

.privacy-note{display:flex; gap:9px; align-items:flex-start; background:var(--bg-soft);
              border:1px solid var(--line); border-radius:12px; padding:12px 14px;
              font-size:.8125rem; color:var(--muted); margin:4px 0 0}
.btn-skip{flex:none}

/* second question on a single screen (genres, then clean/explicit) */
.qsub{font:600 1.0625rem/1.3 var(--sans); color:var(--ink); margin:22px 0 10px}

/* ============================================== the root chooser (no home page) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}
.chooser{
  min-height:calc(100vh - 68px);
  background:
    radial-gradient(900px 460px at 15% -12%, rgba(13,127,158,.13), transparent 62%),
    radial-gradient(720px 400px at 88% 2%, rgba(255,106,43,.11), transparent 64%),
    linear-gradient(180deg,#fbfdfe,#fff 55%);
  padding:clamp(32px,5vw,64px) 0 clamp(48px,6vw,80px);
}
.chooser-inner{max-width:860px}
.chooser-block + .chooser-block{margin-top:clamp(34px,4vw,52px)}
.chooser-step{font:600 .75rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
              color:var(--bay-dk); margin:0 0 10px}
.chooser-h{font-size:clamp(1.75rem,4.2vw,2.6rem); margin-bottom:.3em}
.chooser-sub{color:var(--ink-2); font-size:1.0625rem; max-width:38em; margin-bottom:26px}
.chooser-services{margin-bottom:8px}
.chooser-services .opt{text-decoration:none}
.chooser-services .opt-note{display:block; margin-top:3px; font-size:.8125rem; line-height:1.4}
.chooser-foot{margin:26px 0 0; font-size:.9375rem; color:var(--muted)}

.picker-search{position:relative; margin-bottom:22px}
.picker-search svg{position:absolute; left:16px; top:50%; margin-top:-10px; width:20px; height:20px;
                   color:var(--muted); pointer-events:none}
.picker-search input{
  width:100%; padding:16px 18px 16px 46px; font:400 1.0625rem/1.3 var(--body);
  border:1.5px solid var(--line-2); border-radius:14px; background:#fff; box-shadow:var(--shadow-sm);
}
.picker-search input::-webkit-search-cancel-button{cursor:pointer}
.picker-county{margin-bottom:26px}
.picker-county h2{font:600 .8125rem/1 var(--sans); text-transform:uppercase; letter-spacing:.08em;
                  color:var(--muted); margin-bottom:10px}
.picker-county .link-grid a{font-size:.9375rem; padding:9px 0}
.picker-county[hidden]{display:none}
.picker-empty{background:var(--sun-lt); border:1px solid #ffd6bd; border-radius:12px;
              padding:14px 16px; font-size:.9375rem; color:var(--ink-2)}
.linkish{background:none; border:0; padding:0; font:inherit; color:var(--bay-dk);
         text-decoration:underline; cursor:pointer}
.linkish:hover{color:var(--bay)}