/* ==========================================================================
   Kettle & Oak — Houston / Texas
   Brand inherited from the live Chicago site (kettleandoak.com): plum ground,
   green action colour, Inter throughout, oak-tree lockup. Same brand, same
   pricing, separate Texas entity — see context/businesses/kettle-and-oak.md.
   Executed as static HTML rather than the Chicago WordPress build.

   v2 (2026-08-24) — expanded from a single design-base page into a full
   multi-page site. Everything from v1 is preserved; new components are added
   below the original block so the original index.html keeps rendering.
   ========================================================================== */

:root{
  /* pulled from the live site's computed styles, not guessed */
  --plum:#1F1137;          /* primary ground */
  --plum-deep:#160B29;     /* deeper ground for banding */
  --plum-soft:#2A1B47;     /* raised panels on plum */
  --plum-line:#3A2A5C;
  --green:#70C244;         /* THE action colour: CTAs, highlights */
  --green-hi:#7ED153;
  --green-deep:#4E9A2A;
  --green-wash:rgba(112,194,68,.12);
  --red:#D63637;           /* required-field / alert only, used sparingly */
  --amber:#E8A33D;
  --ink:#1A1626;           /* body ink on light grounds */
  --ink-soft:#55506A;
  --ink-faint:#8A85A0;
  --paper:#FFFFFF;
  --paper-2:#FBFBFC;       /* the site's off-white */
  --paper-3:#F4F3F7;
  --line:rgba(26,22,38,.12);
  --line-dark:rgba(255,255,255,.14);
  --maxw:1180px;
  --maxw-read:760px;       /* measure for long-form guide pages */
  --shadow:0 18px 44px rgba(12,7,26,.16);
  --shadow-lift:0 10px 26px rgba(12,7,26,.10);
  --shadow-deep:0 30px 70px rgba(12,7,26,.22);
  --r:12px;
  --r-lg:18px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);background:var(--paper);
  font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{letter-spacing:-.022em;line-height:1.08;font-weight:800;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.center{text-align:center;}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:4px;}

/* ==========================================================================
   MASTHEAD INTRO — the htxgunco treatment, adapted to the oak mark.
   Mark scales in, wordmark tracks in from wide letter-spacing, bar fills,
   then the whole overlay clears. Shown ONCE per browser session so a returning
   visitor is never made to sit through it, and never shown at all when motion
   is reduced — there is nothing behind it to communicate.
   ========================================================================== */
.intro{position:fixed;inset:0;z-index:300;background:var(--plum-deep);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;}
.intro.run{display:flex;}
.intro.done{opacity:0;pointer-events:none;transition:opacity .55s ease;}
.intro::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 50% 44%,rgba(112,194,68,.16),transparent 64%);}
.intro-mark{width:min(320px,64vw);height:auto;position:relative;z-index:2;
  animation:markin 1s cubic-bezier(.2,.85,.25,1) both;}
.intro-word{position:relative;z-index:2;font-size:12px;letter-spacing:.42em;
  text-transform:uppercase;color:rgba(255,255,255,.66);font-weight:700;
  padding-left:.42em;animation:wordin .7s .3s ease both;}
/* Centre "Texas" and the bar under the KETTLE & OAK wordmark, not under the
   whole logo: the tree takes the left 20% of the SVG, so the lettering's centre
   sits 11.9% of the logo width right of the logo's centre (measured from the
   SVG's alpha columns, 2026-11-04). A left margin of 2 x 11.9% shifts a
   flex-centred item by exactly that amount at every logo size. */
.intro-word,.intro-bar{margin-left:calc(min(320px,64vw) * .238);}
.intro-bar{position:relative;z-index:2;width:190px;height:2px;
  background:rgba(255,255,255,.14);overflow:hidden;border-radius:2px;}
.intro-bar i{display:block;height:100%;width:100%;background:var(--green);
  transform-origin:left;animation:barin 1.15s .08s cubic-bezier(.4,0,.2,1) both;}
@keyframes markin{
  from{opacity:0;transform:scale(.74) translateY(14px);}
  to{opacity:1;transform:none;}
}
@keyframes wordin{from{opacity:0;letter-spacing:.62em;}to{opacity:1;}}
@keyframes barin{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* the header mark settles in behind it */
.brand img{animation:brandin .7s .15s cubic-bezier(.2,.8,.3,1) both;}
@keyframes brandin{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* skip link — keyboard users land here first */
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#0E2A05;
  padding:12px 20px;font-weight:700;z-index:200;border-radius:0 0 8px 0;}
.skip:focus{left:0;}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:16px;padding:15px 28px;border-radius:8px;
  border:2px solid transparent;cursor:pointer;transition:transform .12s ease,
  background .15s ease,border-color .15s ease,box-shadow .15s ease;white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px);}
.btn-go{background:var(--green);color:#0E2A05;}
.btn-go:hover{background:var(--green-hi);box-shadow:0 8px 22px rgba(112,194,68,.32);}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn-ink{border-color:var(--ink);color:var(--ink);}
.btn-ink:hover{background:var(--ink);color:#fff;}
.btn-lg{font-size:17px;padding:17px 34px;}
.btn-sm{font-size:14.5px;padding:11px 20px;}

/* ----------------------------------------------------------------- header */
.top{background:var(--plum);color:#fff;position:sticky;top:0;z-index:60;
  transition:box-shadow .2s ease,background .2s ease;}
.top.stuck{box-shadow:0 10px 30px rgba(12,7,26,.35);background:var(--plum-deep);}
.topbar{
  display:flex;align-items:center;gap:26px;
  max-width:var(--maxw);margin:0 auto;padding:20px 24px;
  transition:padding .2s ease;
}
.top.stuck .topbar{padding:13px 24px;}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.brand img{width:212px;transition:width .2s ease;}
.top.stuck .brand img{width:184px;}
/* The nav TAKES the slack between the logo and the CTA buttons and distributes
   it evenly, instead of margin-left:auto shoving every tab into the right-hand
   corner with one dead gap after the logo.
   gap:28px stays as the MINIMUM separation: justify-content only ever hands out
   space that is left over after the gaps, so this cannot make the header need
   one pixel more width than it does today -- which matters, because the bar
   already only just fits above the 1250px collapse breakpoint. */
.nav{display:flex;align-items:center;gap:28px;
  flex:1 1 auto;min-width:0;justify-content:space-evenly;}
.nav > a,.nav .drop > button{font-size:15.5px;font-weight:600;
  color:rgba(255,255,255,.9);padding:8px 0;white-space:nowrap;
  background:none;border:0;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;}
.nav > a:hover,.nav .drop > button:hover{color:var(--green);}
.nav > a[aria-current="page"]{color:var(--green);}
.navcta{display:flex;align-items:center;gap:12px;}
.navcta .btn{padding:12px 22px;font-size:15px;}

/* dropdown mega-menu — CSS-only on hover, JS-assisted on tap */
.drop{position:relative;}
.drop > button::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;}
.drop[data-open="1"] > button::after{transform:rotate(-135deg) translateY(-2px);}
/* THE HOVER BRIDGE.
   The menu is offset below the button, which leaves a dead strip the cursor
   crosses on its way down — hover is lost mid-travel and the menu vanishes.
   This invisible strip extends the hover target across that gap. It lives
   inside the header bar, so it never intercepts clicks on the page below. */
.drop::after{
  content:"";position:absolute;top:100%;left:-14px;right:-14px;height:20px;
}
.dropmenu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:18px;
  box-shadow:var(--shadow-deep);width:max-content;max-width:min(560px,calc(100vw - 40px));
  display:grid;grid-template-columns:1fr 1fr;gap:4px;opacity:0;visibility:hidden;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:70;
}
.dropmenu.one{grid-template-columns:1fr;max-width:min(360px,calc(100vw - 40px));}
/* Right-hand menus would run off the viewport if centred on their button. */
.dropmenu.right{left:auto;right:0;transform:translateY(-6px);}
.drop:hover .dropmenu,.drop[data-open="1"] .dropmenu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.drop:hover .dropmenu.right,.drop[data-open="1"] .dropmenu.right{
  transform:translateY(0);}
.dropmenu a{display:block;padding:11px 13px;border-radius:9px;font-size:15px;
  font-weight:600;transition:background .12s ease;}
.dropmenu a:hover{background:var(--paper-3);color:var(--green-deep);}
.dropmenu a small{display:block;font-weight:400;font-size:13px;color:var(--ink-faint);
  margin-top:2px;line-height:1.4;}
.dropmenu .col-head{grid-column:1/-1;font-size:11.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
  padding:6px 13px 8px;}

/* Hamburger. 44x44 = the minimum comfortable tap target. The three bars turn
   into an X while the menu is open, so the same button visibly closes it. */
.navtoggle-cb{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.navtoggle{display:none;width:44px;height:44px;cursor:pointer;flex:0 0 auto;
  align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.4);
  border-radius:8px;margin-left:auto;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s ease,background .15s ease;}
.navtoggle:hover{border-color:#fff;background:rgba(255,255,255,.06);}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{
  content:"";display:block;width:20px;height:2px;border-radius:2px;background:#fff;
  position:relative;transition:transform .2s ease,background .2s ease,top .2s ease;}
.navtoggle span::before{position:absolute;top:-6px;left:0;}
.navtoggle span::after{position:absolute;top:6px;left:0;}
.navtoggle-cb:checked + .navtoggle span{background:transparent;}
.navtoggle-cb:checked + .navtoggle span::before{top:0;transform:rotate(45deg);}
.navtoggle-cb:checked + .navtoggle span::after{top:0;transform:rotate(-45deg);}
.navtoggle:focus-visible{outline:2px solid var(--green);outline-offset:3px;}

/* -------------------------------------------------------------------- hero
   Chicago pairs the headline with a lead form in the hero. That is the
   conversion pattern worth inheriting -- the form IS the hero's right half,
   not a section further down. */
.hero{background:var(--plum);color:#fff;position:relative;overflow:hidden;}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 520px at 78% -8%,rgba(112,194,68,.16),transparent 62%),
    radial-gradient(760px 420px at 8% 108%,rgba(112,194,68,.10),transparent 60%);
}
/* subtle moving grain so the plum ground is not a dead flat fill */
.hero::before{
  content:"";position:absolute;inset:-40%;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:26px 26px;animation:drift 34s linear infinite;
}
@keyframes drift{to{transform:translate3d(26px,26px,0);}}
.hero-in{
  max-width:var(--maxw);margin:0 auto;padding:78px 24px 92px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start;
  position:relative;z-index:2;
}
.hero-in.solo{grid-template-columns:1fr;max-width:900px;text-align:left;}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--green);
  margin-bottom:20px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--green);}
.hero h1{font-size:60px;font-weight:900;letter-spacing:-.035em;}
.hero h1 .hl{color:var(--green);}
.hero .lede{font-size:18.5px;line-height:1.62;color:rgba(255,255,255,.82);
  margin-top:22px;max-width:33em;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
/* Grid, not flex-wrap. Four stats in a narrow hero column wrap 3+1 and the
   orphan reads as a mistake; 2x2 is deliberate at every width. */
.hero-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 26px;margin-top:38px;
  padding-top:26px;border-top:1px solid var(--line-dark);}
@media (min-width:1200px){.hero-trust{grid-template-columns:repeat(4,minmax(0,1fr));}}
/* min-width:0 + overflow-wrap: a grid item's default min-width:auto refuses to
   shrink below its longest unbreakable word, so a long email address does not
   wrap -- it overflows its cell and lands on top of the next one. */
.hero-trust div{font-size:14px;color:rgba(255,255,255,.72);
  min-width:0;overflow-wrap:anywhere;}
.hero-trust b{display:block;font-size:23px;font-weight:800;color:#fff;
  letter-spacing:-.02em;margin-bottom:3px;min-width:0;overflow-wrap:anywhere;}
/* The contact page puts a phone number and an email in this row, both of which
   need real width. Two columns at every size rather than four. */
.hero-trust.contactinfo{grid-template-columns:repeat(2,minmax(0,1fr));}
.hero-trust.contactinfo b{font-size:19px;}
@media (min-width:1200px){
  .hero-trust.contactinfo{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.hero-note{margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.5);
  max-width:34em;line-height:1.5;}

/* page hero — the compact version for interior pages */
.phero{background:var(--plum);color:#fff;position:relative;overflow:hidden;}
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 400px at 85% -20%,rgba(112,194,68,.15),transparent 60%);}
.phero-in{max-width:var(--maxw);margin:0 auto;padding:56px 24px 62px;position:relative;z-index:2;}
.phero h1{font-size:46px;font-weight:900;letter-spacing:-.032em;max-width:17em;}
.phero h1 .hl{color:var(--green);}
.phero .lede{font-size:18px;color:rgba(255,255,255,.8);margin-top:18px;max-width:44em;}
.phero .hero-cta{margin-top:28px;}

/* breadcrumb */
.crumb{font-size:13.5px;color:rgba(255,255,255,.6);margin-bottom:18px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.crumb a:hover{color:var(--green);}
.crumb span{opacity:.5;}

/* --------------------------------------------------------------- lead form */
.leadform{background:#fff;border-radius:14px;padding:30px 30px 26px;
  box-shadow:var(--shadow);color:var(--ink);}
.leadform h2{font-size:21px;font-weight:800;}
.leadform p.sub{font-size:14.5px;color:var(--ink-soft);margin-top:7px;line-height:1.5;}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:20px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:13px;font-weight:600;color:var(--ink);}
.field label .req{color:var(--red);}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:15px;padding:12px 13px;border-radius:7px;
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink);
  width:100%;
}
.field textarea{min-height:110px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);background:#fff;
  box-shadow:0 0 0 3px rgba(112,194,68,.18);
}
.leadform .btn{width:100%;margin-top:18px;}
.leadform .fine{font-size:12.5px;color:var(--ink-soft);margin-top:13px;
  line-height:1.5;text-align:center;}
.leadform .fine a{color:var(--green-deep);}

/* Honeypot. Positioned off-screen rather than display:none - a bot that parses
   CSS skips display:none fields, but fills one that is merely out of view. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Consent checkbox. 24px box + 12px gap keeps the hit area over the WCAG 2.5.8
   minimum without the label text colliding with it. */
.field.consent{grid-column:1 / -1;margin-top:18px;}
.field.consent label{display:flex;gap:12px;align-items:flex-start;
  font-size:13px;font-weight:500;color:var(--ink-soft);line-height:1.5;
  cursor:pointer;}
.field.consent input{width:24px;height:24px;flex:0 0 24px;margin-top:0;
  accent-color:var(--green-deep);}
.signupform{align-self:start;}
.signupform .fgrid{gap:12px;}

/* ---------------------------------------------- /signup/ (2026-11-03)
   A copy of the kettleandoak.com/signup/ form (WPForms "modern" look):
   800px single column, bold 16px labels, 43px inputs with a 25%-black
   hairline and 3px corners, grey sub-labels, 350px terms scroll box,
   dashed upload box, plain signature box, small green Submit. */
.kosec{background:#fff;padding:70px 0 90px;}
.kowrap{max-width:848px;margin:0 auto;padding:0 24px;}
.koform{color:rgba(0,0,0,.85);font-size:16px;}
.kof{display:flex;flex-direction:column;margin:0 0 26px;min-width:0;}
.kor{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
.kor > .kof{margin-bottom:26px;}
.kor > div:not(.kof){display:flex;flex-direction:column;}
.kof > .kor{margin-top:0;}
.kol{display:block;font-size:16px;font-weight:700;line-height:1.35;color:rgba(0,0,0,.85);margin:0 0 12px;}
.kol .req{color:#d63637;}
.kol.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.koform input[type=text],.koform input[type=tel],.koform input[type=email],
.koform input[type=number],.koform input[type=date],.koform select{
  width:100%;height:43px;padding:0 14px;border:1px solid rgba(0,0,0,.25);border-radius:3px;
  background:#fff;font:inherit;font-size:16px;color:rgba(0,0,0,.85);box-shadow:none;
  -webkit-appearance:none;appearance:none;}
.koform select{background-image:linear-gradient(45deg,transparent 50%,rgba(0,0,0,.45) 50%),
  linear-gradient(135deg,rgba(0,0,0,.45) 50%,transparent 50%);
  background-position:calc(100% - 20px) 19px,calc(100% - 15px) 19px;
  background-size:5px 5px;background-repeat:no-repeat;padding-right:36px;}
.koform select:invalid{color:rgba(0,0,0,.45);}
.koform input::placeholder{color:rgba(0,0,0,.4);}
.koform input:focus,.koform select:focus{outline:none;border-color:#066aab;
  box-shadow:0 0 0 1px #066aab;}
.kos,.kod{display:block;font-size:14px;color:rgba(0,0,0,.55);margin-top:9px;line-height:1.3;}
.kor .kos{margin-top:9px;}
/* property repeater: address | units | (+)(-) */
.koprow{display:grid;grid-template-columns:2fr 1fr 44px;gap:0 20px;align-items:center;}
.koprow.kohead .kol{margin-bottom:12px;}
.koprow + .koprow:not(.kohead){margin-top:14px;}
[data-rows] .koprow + .koprow{margin-top:14px;}
.korep{display:flex;gap:6px;}
.koicon{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(0,0,0,.55);background:#fff;
  color:rgba(0,0,0,.6);font:700 13px/1 Arial,sans-serif;display:flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;}
.koicon:disabled{opacity:.3;cursor:default;}
.koicon:not(:disabled):hover{border-color:rgba(0,0,0,.85);color:rgba(0,0,0,.85);}
/* documents */
.kodiv{border-top:1px solid rgba(0,0,0,.25);padding-top:26px;margin:0 0 20px;}
.kodiv b{display:block;font-size:16px;font-weight:700;}
.kodiv span{display:block;font-size:14.5px;color:rgba(0,0,0,.55);margin-top:6px;}
.kodrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:145px;border:1px dashed rgba(0,0,0,.25);border-radius:3px;padding:20px;text-align:center;
  cursor:pointer;font-size:14.5px;color:rgba(0,0,0,.7);}
.kodrop svg{color:rgba(0,0,0,.4);margin-bottom:8px;}
.kodrop small{font-size:14px;color:rgba(0,0,0,.45);}
.kodrop input{position:absolute;width:1px;height:1px;opacity:0;}
.kodrop:hover,.kodrop.over,.kodrop:focus-within{border-color:#066aab;background:rgba(6,106,171,.03);}
.kofiles{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:14px;}
.kofiles li{display:flex;justify-content:space-between;gap:10px;border:1px solid rgba(0,0,0,.12);
  border-radius:3px;padding:7px 12px;word-break:break-all;}
.kofiles .linkbtn{background:none;border:0;padding:0;font:inherit;color:#d63637;cursor:pointer;}
/* ACH + terms */
.kocheck{display:flex;align-items:center;gap:10px;font-size:16px;margin:0 0 14px 10px;cursor:pointer;
  color:rgba(0,0,0,.85);}
.kocheck input{width:17px;height:17px;margin:0;accent-color:#066aab;}
.koterms{height:350px;overflow-y:auto;border:1px solid rgba(0,0,0,.25);border-radius:3px;
  background:#fff;padding:14px;font-size:14px;line-height:1.3;color:rgba(0,0,0,.7);
  overscroll-behavior:contain;}
.koterms p{margin:0 0 17px;}
.koterms:focus-visible{outline:2px solid #066aab;outline-offset:1px;}
.koterms .pfill{font-weight:600;color:rgba(0,0,0,.8);}
/* signature */
.kosig{position:relative;height:130px;border:1px solid rgba(0,0,0,.25);border-radius:3px;background:#fff;}
.kosig canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;}
.kosigx{position:absolute;top:8px;right:8px;width:17px;height:17px;border-radius:50%;border:0;
  background:rgba(0,0,0,.18);color:#fff;font:700 13px/17px Arial,sans-serif;padding:0;cursor:pointer;}
.kosigx:hover{background:rgba(0,0,0,.4);}
/* opt-in + submit */
.koopt{font-size:13px;font-style:italic;line-height:1.85;color:var(--ink);margin:6px 0 22px;}
.koopt.formmsg{font-style:normal;font-weight:700;font-size:15px;color:#2e7d1e;margin-top:14px;}
.koopt.formmsg.bad{color:#d63637;}
.kosubmit{background:#6bbe45;color:#fff;border:0;border-radius:6px;padding:0 24px;height:41px;
  font:inherit;font-size:16px;font-weight:700;cursor:pointer;}
.kosubmit:hover{filter:brightness(.95);}
.kosubmit:disabled{opacity:.7;cursor:default;}
@media (max-width:600px){
  .kosec{padding:44px 0 60px;}
  .kowrap{padding:0 16px;}
  .kor{grid-template-columns:1fr;}
  .kof > .kor{gap:14px;}
  .koprow{grid-template-columns:minmax(0,1fr) 84px 44px;gap:0 10px;}
  .koterms{height:320px;}
}

/* Signup: the four-step summary in the hero. */
.sustep{list-style:none;margin-top:26px;display:grid;gap:10px;}
.sustep li{display:flex;gap:12px;align-items:baseline;font-size:14.5px;
  line-height:1.5;color:rgba(255,255,255,.76);}
.sustep li b{flex:0 0 132px;color:#fff;font-weight:700;}
@media (max-width:560px){
  .sustep li{flex-direction:column;gap:2px;}
  .sustep li b{flex:none;}
}

/* Booking CTA. Solid white on the plum grounds so it reads as a real button
   next to the green primary without competing with it for THE action colour.
   Never use this class on a light surface - see .fmodal-act in site.js. */
.btn-book{background:#fff;color:var(--plum);border-color:#fff;}
.btn-book:hover{background:var(--paper-3);border-color:var(--paper-3);
  box-shadow:0 10px 26px rgba(0,0,0,.30);}

/* Social row on the contact page. */
.socrow{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.socrow a{display:inline-flex;align-items:center;min-height:38px;padding:8px 16px;
  border:1px solid rgba(255,255,255,.34);border-radius:999px;color:#fff;
  font-size:13.5px;font-weight:600;letter-spacing:.01em;}
.socrow a:hover{background:rgba(255,255,255,.10);border-color:#fff;
  text-decoration:none;}

/* ------------------------------------------------- form success dialog */
/* Shown after a submission actually lands. Scrim + centred card, focus moved
   into it and trapped by site.js. */
.fmodal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;
  justify-content:center;padding:24px;}
.fmodal[hidden]{display:none;}
.fmodal-back{position:absolute;inset:0;background:rgba(12,7,26,.66);
  backdrop-filter:blur(3px);}
.fmodal-card{position:relative;background:#fff;color:var(--ink);
  border-radius:var(--r-lg);box-shadow:var(--shadow-deep);
  padding:38px 34px 30px;max-width:470px;width:100%;text-align:center;
  animation:fmpop .24s ease-out both;}
.fmodal-card:focus{outline:none;}
.fmodal-tick{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--green-wash);color:var(--green-deep);}
.fmodal-card h2{font-size:23px;font-weight:800;line-height:1.25;}
.fmodal-card p{margin-top:12px;font-size:15px;line-height:1.6;
  color:var(--ink-soft);}
.fmodal-act{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin-top:26px;}
.fmodal-act .btn{min-height:44px;}
/* Locking the scroll on <html> while the dialog is open is deliberate: it is
   the reliable way to stop background scroll, and the sticky header being
   pinned for those few seconds is invisible under a full-screen scrim. */
html.modal-open{overflow:hidden;}
@keyframes fmpop{from{opacity:0;transform:translateY(14px) scale(.97);}
  to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .fmodal-card{animation:none;}
}
@media (max-width:420px){
  .fmodal{padding:16px;}
  .fmodal-card{padding:30px 22px 24px;}
  .fmodal-act .btn{width:100%;}
}

/* ---------------------------------------------------------------- sections */
.sec{padding:86px 0;}
.sec.tight{padding:60px 0;}
.sec.alt{background:var(--paper-2);}
.sec.alt2{background:var(--paper-3);}
.sec.dark{background:var(--plum);color:#fff;}
.sec.dark .shead p{color:rgba(255,255,255,.76);}
.shead{max-width:720px;margin-bottom:44px;}
.shead.mid{margin-left:auto;margin-right:auto;text-align:center;}
.shead h2{font-size:41px;font-weight:800;}
.shead h2 .hl{color:var(--green);}
.shead p{font-size:18px;color:var(--ink-soft);margin-top:16px;line-height:1.6;}

/* cards */
.cards{display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
.cards.c2{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));}
.cards.c4{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:28px 26px;transition:transform .14s ease,box-shadow .14s ease,
  border-color .14s ease;position:relative;}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.sec.dark .card{background:var(--plum-soft);border-color:var(--line-dark);}
.card .ico{width:44px;height:44px;border-radius:10px;background:rgba(112,194,68,.14);
  display:flex;align-items:center;justify-content:center;margin-bottom:17px;
  font-size:21px;}
.card h3{font-size:19px;font-weight:700;letter-spacing:-.015em;}
.card p{font-size:15.5px;color:var(--ink-soft);margin-top:9px;line-height:1.58;}
.sec.dark .card p{color:rgba(255,255,255,.74);}
/* a card that is entirely a link */
a.card{display:block;}
a.card:hover{border-color:var(--green);}
a.card .more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:14.5px;font-weight:700;color:var(--green-deep);}
.sec.dark a.card .more{color:var(--green);}
a.card .more::after{content:"→";transition:transform .14s ease;}
a.card:hover .more::after{transform:translateX(4px);}

/* pricing */
.tiers{display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));}
.tier{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:30px 26px;text-align:center;position:relative;}
.tier.feature{border-color:var(--green);border-width:2px;box-shadow:var(--shadow-lift);}
.tier .flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#0E2A05;font-size:12px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 13px;border-radius:20px;
  white-space:nowrap;}
.tier .size{font-size:13.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);}
.tier .amt{font-size:44px;font-weight:900;letter-spacing:-.04em;margin-top:12px;
  line-height:1;}
.tier .per{font-size:14.5px;color:var(--ink-soft);margin-top:8px;}
.tier ul{list-style:none;text-align:left;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;}
.tier ul li{font-size:14.5px;color:var(--ink-soft);padding-left:24px;position:relative;}
.tier ul li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:7px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg);}

/* band */
.band{background:var(--plum-deep);color:#fff;padding:64px 0;position:relative;
  overflow:hidden;}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 300px at 90% 50%,rgba(112,194,68,.14),transparent 62%);}
.band-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;}
.band h2{font-size:33px;font-weight:800;max-width:18em;}
.band p{color:rgba(255,255,255,.76);margin-top:12px;max-width:38em;font-size:17px;}

/* footer */
.foot{background:var(--plum);color:rgba(255,255,255,.72);padding:62px 0 32px;
  font-size:15px;}
.fgrid2{display:grid;gap:38px;grid-template-columns:1.4fr repeat(4,1fr);}
.foot img{width:196px;margin-bottom:16px;}
.foot h2{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;margin-bottom:15px;}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.foot a:hover{color:var(--green);}
/* TREC-required links: >=10pt (13.3px) and readily noticeable, so 14px,
   full-strength white and underlined rather than the faded legal-line grey. */
.foot .trec{margin-top:40px;padding-top:22px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14px;line-height:1.5;}
.foot .trec a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.foot .trec span{color:rgba(255,255,255,.72);flex-basis:100%;}
.foot .trec + .rule{margin-top:22px;}
.foot .rule a{text-decoration:underline;text-underline-offset:2px;}
.foot .rule{border-top:1px solid var(--line-dark);margin-top:44px;padding-top:24px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:13.5px;
  color:rgba(255,255,255,.55);}

/* ==========================================================================
   v2 COMPONENTS
   ========================================================================== */

/* ---- scroll reveal. Opt-in per element; killed under reduced-motion ---- */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);}
.rv.in{opacity:1;transform:none;}
.rv-d1{transition-delay:.07s;} .rv-d2{transition-delay:.14s;}
.rv-d3{transition-delay:.21s;} .rv-d4{transition-delay:.28s;}

/* ==========================================================================
   THE STORY — scroll-driven narrative under the hero.
   An owner looks at a property that is going wrong; Kettle & Oak arrives; the
   problems resolve one at a time as you scroll. Drawn as flat line-art rather
   than cartoon clip-art so it reads premium instead of amateur.
   Fully legible with zero motion: under prefers-reduced-motion the scene jumps
   states instead of tweening and every caption stays readable.
   ========================================================================== */
/* ⚠️ NO overflow:hidden here. An ancestor with overflow:hidden becomes the
   scroll container for position:sticky, so the scene silently stops sticking
   and scrolls away mid-story. The ::after glow is inset:0 and cannot overflow,
   so clipping was never needed in the first place. */
.story{background:var(--plum-deep);color:#fff;position:relative;}
.story::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 500px at 20% 10%,rgba(112,194,68,.10),transparent 62%);}
/* align-items must STRETCH here. With `start` the stage grid item collapses to
   its own height, which becomes the sticky containing block — so the scene
   sticks for 560px and then scrolls away mid-story. The item spans the full
   row; a sticky child inside it does the actual sticking. */
.story-in{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2;
  display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:stretch;}

.story-stage{position:relative;}
.story-stage-in{position:sticky;top:96px;height:min(78vh,560px);
  display:flex;align-items:center;justify-content:center;}
.story-stage-in svg{width:100%;height:auto;max-height:100%;overflow:visible;}

/* Step height is the scroll budget for the whole story. 9 beats at 62vh ran to
   nearly six screens before the reader reached anything else on the page; 52vh
   keeps every beat distinct while pulling that back to about five. */
.story-steps{padding:10vh 0 14vh;}
.story-step{min-height:52vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.34;transition:opacity .45s ease;}
.story-step.on{opacity:1;}
.story-step .tag{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green);margin-bottom:16px;}
.story-step .tag::before{content:"";width:22px;height:2px;background:var(--green);}
.story-step h3{font-size:35px;font-weight:900;letter-spacing:-.03em;line-height:1.1;}
.story-step p{font-size:17.5px;line-height:1.62;color:rgba(255,255,255,.78);
  margin-top:15px;max-width:30em;}
.story-step .go{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-weight:700;font-size:15.5px;color:var(--green);align-self:flex-start;}
.story-step .go::after{content:"→";transition:transform .14s ease;}
.story-step .go:hover::after{transform:translateX(4px);}

/* ---- the scene itself ---- */
.scene .ln{fill:none;stroke:rgba(255,255,255,.86);stroke-width:2.9;
  stroke-linecap:round;stroke-linejoin:round;}
.scene .fillsoft{fill:rgba(255,255,255,.055);}
.scene .fillpane{fill:rgba(112,194,68,.10);}
.scene .grass{stroke:rgba(255,255,255,.34);stroke-width:2;stroke-linecap:round;fill:none;}
/* fine secondary linework — siding, shingle courses, fence, garage panels.
   Deliberately much lighter than .ln so detail reads as texture, not clutter. */
.scene .hair{fill:none;stroke:rgba(255,255,255,.17);stroke-width:1.2;
  stroke-linecap:round;}
.scene .kerb{fill:none;stroke:rgba(255,255,255,.13);stroke-width:6;}
.scene .pave{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.2);
  stroke-width:1.4;}
.scene .arm{fill:none;stroke:rgba(255,255,255,.55);stroke-width:5;
  stroke-linecap:round;}
.scene .boardline{fill:none;stroke:rgba(31,17,55,.55);stroke-width:1.6;
  stroke-linecap:round;}

/* window panes: cold and empty by default, warm and occupied once leased */
.scene .pane{fill:rgba(255,255,255,.05);
  transition:fill .55s ease;}
.scene.lit .pane{fill:rgba(232,163,61,.22);}

/* porch lamp, off until the property is under management */
.scene .lampbody{fill:rgba(255,255,255,.3);transition:fill .5s ease;}
.scene .lampglow{fill:url(#lampg);opacity:0;transition:opacity .6s ease;}
.scene.lamp .lampbody{fill:var(--amber);}
.scene.lamp .lampglow{opacity:1;}

/* mailbox flag — up while the notice sits unopened */
.scene .flag{opacity:0;transition:opacity .4s ease;stroke:var(--amber);}
.scene.mail .flag{opacity:1;}

/* FOR RENT board, shown only while the unit is empty */
.scene .signboard{opacity:0;transform-box:fill-box;transform-origin:50% 100%;
  transform:scale(.7);transition:opacity .45s ease,transform .45s ease;}
.scene.vacant .signboard{opacity:1;transform:none;}
.scene .signface{fill:rgba(255,255,255,.9);}
.scene .signtext{font:800 11px Inter,sans-serif;fill:#1F1137;text-anchor:middle;
  letter-spacing:.06em;}

/* a drip under the leaking window */
.scene .drip{opacity:0;transition:opacity .4s ease;}
.scene .drip circle{fill:rgba(120,180,255,.85);}
.scene.leaking .drip{opacity:1;}
.scene.leaking .drip circle{animation:fall 1.8s linear infinite;}
.scene.leaking .drip .d2{animation-delay:.9s;}
@keyframes fall{
  0%{transform:translateY(0);opacity:0}
  15%{opacity:1}
  80%{opacity:1}
  100%{transform:translateY(74px);opacity:0}
}

/* ring arcs off the phone badge */
.scene .rings{opacity:0;fill:none;stroke:var(--red);stroke-width:2.6;
  stroke-linecap:round;transition:opacity .4s ease;}
.scene.ringing .rings{opacity:1;}
.scene.ringing .rings path{animation:ring 1.9s ease-out infinite;}
.scene.ringing .rings path:last-child{animation-delay:.35s;}
@keyframes ring{0%{opacity:0}25%{opacity:.9}70%{opacity:0}100%{opacity:0}}

/* badges: a problem marker and its resolved twin occupy the same spot */
.scene .badge{opacity:0;transform-box:fill-box;transform-origin:center;
  transform:scale(.6);transition:opacity .4s ease,transform .4s cubic-bezier(.2,1.3,.4,1);}
.scene .badge.show{opacity:1;transform:scale(1);}
.scene .bad circle{fill:var(--red);}
.scene .warn circle{fill:var(--amber);}
.scene .good circle{fill:var(--green);}
.scene .badge text{font:700 15px Inter,sans-serif;fill:#12210A;
  text-anchor:middle;dominant-baseline:central;}
.scene .bad text,.scene .warn text{fill:#fff;}

/* the two figures */
.scene .figure{opacity:0;transition:opacity .5s ease,transform .5s ease;
  transform:translateX(-14px);}
.scene .figure.show{opacity:1;transform:none;}
/* The ground-coloured outline is what stops a silhouette from merging into
   the siding behind it. Without it both figures read as smudges. */
.scene .figure path,.scene .figure circle,.scene .figure rect{
  stroke:var(--plum-deep);stroke-width:3.5;stroke-linejoin:round;}
.scene .owner path,.scene .owner circle{fill:rgba(255,255,255,.62);}
.scene .staff path,.scene .staff circle{fill:var(--green);}
.scene .staff .board{fill:rgba(255,255,255,.92);}
.scene .figure .arm{stroke:var(--plum-deep);stroke-width:9;fill:none;}
.scene .owner .arm{stroke:rgba(255,255,255,.62);stroke-width:5.5;}

/* a soft pulse on unresolved problems — decorative only */
.scene .bad.show circle{animation:pulse 2.1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

.story-progress{position:absolute;left:0;top:0;height:3px;background:var(--green);
  width:0;transition:width .3s ease;z-index:5;}

@media (max-width:1000px){
  /* Single column: stage pinned to the top, captions scrolling underneath it.
     NOT a grid here — a one-column grid would make the stage its own row, and
     a sticky element can only stick inside its own row. As plain blocks, the
     stage sticks across the whole of .story-in, which is what we want. */
  .story-in{display:block;padding-top:0;}
  .story-stage{position:sticky;top:56px;z-index:3;height:36vh;
    margin:0 -24px;padding:12px 24px 4px;
    background:linear-gradient(180deg,var(--plum-deep) 72%,rgba(22,11,41,0));}
  .story-stage-in{position:static;height:100%;top:auto;}
  .story-steps{padding:2vh 0 8vh;}
  .story-step{min-height:46vh;}
  .story-step h3{font-size:27px;}
  .story-step p{font-size:16.5px;}
}
@media (prefers-reduced-motion:reduce){
  .story-step{opacity:1;}
  /* Kill every loop, but keep the STATE — the drip, the rings and the sign
     still appear and disappear, they just do not move. The story still tells
     itself with motion off, which is how Tony's machine renders it. */
  .scene .bad.show circle,
  .scene.leaking .drip circle,
  .scene.ringing .rings path{animation:none;}
  .scene .badge,.scene .badge.show,.scene .figure,
  .scene.vacant .signboard{transform:none;}
}

/* ==========================================================================
   PROBLEM WALL — five things that go wrong, then stop being yours
   ========================================================================== */
.wallsec{padding:96px 0;}
.wallhead{font-size:clamp(38px,6vw,72px);font-weight:900;letter-spacing:-.045em;
  line-height:1;max-width:14em;}
.walllede{font-size:18.5px;color:rgba(255,255,255,.72);margin-top:22px;
  max-width:38em;}
.wall{margin-top:52px;border-top:1px solid var(--line-dark);}
.wrow{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) minmax(0,1.5fr);
  gap:20px;align-items:center;padding:22px 4px;
  border-bottom:1px solid var(--line-dark);}
.wbad{font-size:clamp(22px,2.6vw,31px);font-weight:800;letter-spacing:-.03em;
  color:var(--red);transition:color .5s ease,opacity .5s ease;}
.wrow.flip .wbad{color:rgba(255,255,255,.3);text-decoration:line-through;
  text-decoration-thickness:2px;}
.warrow{position:relative;height:2px;background:rgba(255,255,255,.2);
  border-radius:2px;overflow:hidden;}
.warrow::after{content:"";position:absolute;inset:0;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .55s ease .12s;}
.wrow.flip .warrow::after{transform:scaleX(1);}
.wgood{font-size:clamp(22px,2.6vw,31px);font-weight:800;letter-spacing:-.03em;
  color:rgba(255,255,255,.22);transition:color .5s ease .18s;}
.wrow.flip .wgood{color:var(--green);}
.wnote{font-size:15.5px;color:rgba(255,255,255,.5);line-height:1.5;
  transition:color .5s ease .24s;}
.wrow.flip .wnote{color:rgba(255,255,255,.78);}

/* ==========================================================================
   PROPERTY PULSE — one illustrative property, not a portfolio claim
   ========================================================================== */
.pulse{background:var(--plum);border:1px solid var(--plum-line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  color:#fff;max-width:940px;margin:0 auto;}
.phead{display:flex;align-items:center;gap:12px;padding:18px 26px;
  border-bottom:1px solid var(--line-dark);background:var(--plum-deep);
  font-size:14.5px;}
.phead b{font-weight:700;letter-spacing:.01em;}
.pdotlive{width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(112,194,68,.2);animation:live 2.4s ease-in-out infinite;}
@keyframes live{0%,100%{opacity:1}50%{opacity:.35}}
.ptag{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber);
  border:1px solid rgba(232,163,61,.5);background:rgba(232,163,61,.14);
  padding:3px 10px;border-radius:20px;}
.pbody{padding:8px 26px 20px;}
.prow{display:grid;grid-template-columns:minmax(0,1fr) 130px 120px minmax(0,1.4fr);
  gap:18px;align-items:center;padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.07);}
.prow:last-child{border-bottom:0;}
.plab{font-size:15.5px;font-weight:600;}
.pval{font-size:14px;font-weight:700;letter-spacing:.01em;padding:4px 11px;
  border-radius:20px;justify-self:start;white-space:nowrap;}
.pval.ok{color:var(--green);background:rgba(112,194,68,.14);
  border:1px solid rgba(112,194,68,.34);}
.pval.work{color:var(--amber);background:rgba(232,163,61,.14);
  border:1px solid rgba(232,163,61,.36);}
.pval.watch{color:#9FC7FF;background:rgba(120,170,255,.13);
  border:1px solid rgba(120,170,255,.34);}
.pbar{height:5px;border-radius:3px;background:rgba(255,255,255,.12);
  overflow:hidden;}
.pbar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--green-deep),var(--green));
  transition:width .8s cubic-bezier(.3,.8,.3,1);}
.pulse.go .pbar i{width:var(--w);}
.pnote{font-size:14.5px;color:rgba(255,255,255,.6);}
.pfoot{padding:16px 26px 22px;border-top:1px solid var(--line-dark);
  font-size:13.5px;color:rgba(255,255,255,.55);line-height:1.55;
  background:rgba(0,0,0,.14);}

/* ==========================================================================
   WHAT NEEDS FIXING — problem-first entry instead of a service menu
   ========================================================================== */
.fixgrid{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));}
.fixcard{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 28px 24px;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
  position:relative;overflow:hidden;}
.fixcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--green);transform:scaleY(0);transform-origin:top;
  transition:transform .22s ease;}
.fixcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);
  border-color:var(--rule-2,var(--line));}
.fixcard:hover::before{transform:scaleY(1);}
.fixq{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.2;}
.fixa{font-size:15.5px;color:var(--ink-soft);line-height:1.6;margin-top:12px;
  flex:1;}
.fixgo{margin-top:18px;font-size:14.5px;font-weight:700;color:var(--green-deep);
  display:inline-flex;align-items:center;gap:7px;}
.fixgo::after{content:"→";transition:transform .16s ease;}
.fixcard:hover .fixgo::after{transform:translateX(4px);}

/* ==========================================================================
   SERVICES RING — one property, eight systems
   ========================================================================== */
.sysring{position:relative;width:min(620px,100%);aspect-ratio:1;margin:8px auto 0;}
.spokes{position:absolute;inset:0;width:100%;height:100%;}
.spokes line{stroke:rgba(255,255,255,.13);stroke-width:.4;}
.spokes circle{fill:none;stroke:rgba(255,255,255,.13);stroke-width:.4;
  stroke-dasharray:1.6 2.4;}
.score{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;
  justify-content:center;text-align:center;
  background:radial-gradient(circle at 50% 35%,var(--plum-soft),var(--plum-deep));
  border:1px solid var(--plum-line);box-shadow:0 0 60px rgba(112,194,68,.12);}
.score b{font-size:clamp(15px,2.4vw,21px);font-weight:800;letter-spacing:-.02em;
  line-height:1.2;color:#fff;}
.snode{position:absolute;transform:translate(-50%,-50%);display:flex;
  flex-direction:column;align-items:center;gap:9px;text-align:center;
  width:120px;}
.sdot{width:15px;height:15px;border-radius:50%;background:var(--plum-soft);
  border:2px solid rgba(255,255,255,.34);
  transition:background .2s ease,border-color .2s ease,transform .2s ease,
  box-shadow .2s ease;}
.slabel{font-size:14.5px;font-weight:700;color:rgba(255,255,255,.72);
  transition:color .2s ease;letter-spacing:-.01em;}
.snode:hover .sdot,.snode:focus-visible .sdot{background:var(--green);
  border-color:var(--green);transform:scale(1.35);
  box-shadow:0 0 0 7px rgba(112,194,68,.16),0 0 22px rgba(112,194,68,.55);}
.snode:hover .slabel,.snode:focus-visible .slabel{color:var(--green);}

/* ==========================================================================
   SWITCHING — the transfer, made visual
   ========================================================================== */
.switch{display:grid;grid-template-columns:1fr 120px 1fr;gap:24px;
  align-items:stretch;}
.scol{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 30px;}
.scol.from{opacity:.92;}
.scol.to{border-color:var(--green);box-shadow:0 0 0 3px rgba(112,194,68,.12);}
.seyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);}
.scol.to .seyebrow{color:var(--green-deep);}
.scol ul{list-style:none;margin:20px 0 0;padding:0;display:flex;
  flex-direction:column;gap:13px;}
.scol li{font-size:15.5px;color:var(--ink-soft);padding-left:28px;
  position:relative;line-height:1.5;}
.scol.from li::before{content:"";position:absolute;left:2px;top:7px;width:12px;
  height:12px;border-radius:3px;border:2px solid var(--ink-faint);opacity:.6;}
.scol.to li{color:var(--ink);}
.scol.to li::before{content:"";position:absolute;left:1px;top:7px;width:14px;
  height:8px;border-left:2.5px solid var(--green);
  border-bottom:2.5px solid var(--green);transform:rotate(-45deg);}
.sxfer{position:relative;display:flex;align-items:center;justify-content:center;}
.sline{position:absolute;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,var(--line),var(--green),var(--line));}
.sline::after{content:"";position:absolute;top:50%;left:0;width:10px;height:10px;
  margin-top:-5px;border-radius:50%;background:var(--green);
  box-shadow:0 0 14px rgba(112,194,68,.8);
  animation:xfer 2.8s ease-in-out infinite;}
@keyframes xfer{0%{left:-4%;opacity:0}14%{opacity:1}
  86%{opacity:1}100%{left:100%;opacity:0}}
.sbadge{position:relative;z-index:2;background:var(--green);color:#0E2A05;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:20px;white-space:nowrap;
  box-shadow:0 4px 14px rgba(112,194,68,.35);}

@media (max-width:1000px){
  .wrow{grid-template-columns:1fr auto 1fr;gap:12px;}
  .wnote{grid-column:1/-1;margin-top:2px;}
  .warrow{width:34px;}
  .prow{grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;}
  .pbar{grid-column:1/-1;}
  .pnote{grid-column:1/-1;font-size:13.5px;}
  .switch{grid-template-columns:1fr;gap:14px;}
  .sxfer{height:64px;}
  .sline{left:20%;right:20%;}
  .snode{width:92px;}
  .slabel{font-size:12.5px;}
}
@media (max-width:620px){
  .wallsec{padding:64px 0;}
  .wrow{grid-template-columns:1fr;gap:6px;padding:18px 2px;}
  .warrow{display:none;}
  .wgood::before{content:"→ ";color:var(--green);}
  .sysring{width:min(400px,100%);}
  .snode{width:74px;}
  .slabel{font-size:11px;}
  .pbody{padding:6px 18px 16px;}
  .phead,.pfoot{padding-left:18px;padding-right:18px;}
}
@media (prefers-reduced-motion:reduce){
  .wrow .wbad,.wrow .wgood,.wrow .wnote,.warrow::after{transition:none;}
  .pbar i{transition:none;}
  .pdotlive,.sline::after{animation:none;}
  .sline::after{left:50%;opacity:1;}
}

/* ==========================================================================
   SECTION 8 FLOW — the differentiator as a chain you can walk
   ========================================================================== */
.flowsec{overflow:hidden;}
.flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:46px;align-items:start;margin-top:8px;}

.ftrack{position:relative;display:flex;flex-direction:column;gap:2px;
  padding-left:6px;}
/* the spine, and the green fill that climbs it as you advance */
.ftrack::before,.ftrack::after{content:"";position:absolute;left:15px;
  top:22px;bottom:22px;width:2px;border-radius:2px;}
.ftrack::before{background:rgba(255,255,255,.16);}
.ftrack::after{background:linear-gradient(180deg,var(--green),var(--green-deep));
  height:var(--fill,0%);bottom:auto;transition:height .45s cubic-bezier(.3,.8,.3,1);
  box-shadow:0 0 14px rgba(112,194,68,.5);}

.fnode{display:flex;align-items:center;gap:15px;background:none;border:0;
  padding:11px 14px 11px 0;cursor:pointer;font-family:inherit;text-align:left;
  color:rgba(255,255,255,.62);position:relative;z-index:2;
  transition:color .2s ease;width:100%;border-radius:9px;}
.fnode:hover{color:#fff;}
.fdot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:var(--plum-deep);border:2px solid rgba(255,255,255,.3);
  position:relative;transition:border-color .25s ease,background .25s ease,
  box-shadow .25s ease,transform .25s ease;}
.flabel{font-size:16.5px;font-weight:600;letter-spacing:-.01em;}
.fnode.done .fdot{border-color:var(--green);background:var(--green);}
.fnode.on{color:#fff;}
.fnode.on .fdot{border-color:var(--green);background:var(--green);
  transform:scale(1.28);box-shadow:0 0 0 6px rgba(112,194,68,.18),
  0 0 20px rgba(112,194,68,.55);}
.fnode.on .flabel{color:var(--green);}

.fdetail{background:var(--plum-soft);border:1px solid var(--plum-line);
  border-radius:var(--r-lg);padding:34px 36px;min-height:210px;
  box-shadow:var(--shadow);}
.fpanel h3{font-size:25px;font-weight:800;letter-spacing:-.02em;color:#fff;}
.fpanel p{font-size:17px;line-height:1.66;color:rgba(255,255,255,.78);
  margin-top:14px;}
.fpanel[hidden]{display:none;}
.fpanel{animation:fadein .32s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.fresolve{text-align:center;margin-top:44px;font-size:29px;font-weight:900;
  letter-spacing:-.03em;color:var(--green);}
.fresolve span{display:block;font-size:17px;font-weight:400;
  color:rgba(255,255,255,.7);letter-spacing:0;margin-top:10px;}

/* ==========================================================================
   JURISDICTION MAP — greater Houston is three counties, four authorities
   ========================================================================== */
.jwrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:44px;align-items:start;}
.jmap{position:relative;aspect-ratio:720/560;background:var(--plum);
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--plum-line);}
.jbase{position:absolute;inset:0;width:100%;height:100%;}
.jbase .reg{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.16);
  stroke-width:1.5;transition:fill .3s ease,stroke .3s ease;}
.jmap[data-hi="harris"] .reg.harris,
.jmap[data-hi="fortbend"] .reg.fortbend,
.jmap[data-hi="montgomery"] .reg.montgomery,
.jmap[data-hi="multi"] .reg{fill:rgba(112,194,68,.10);
  stroke:rgba(112,194,68,.45);}
.jbase .rlab{fill:rgba(255,255,255,.26);font:700 12px Inter,sans-serif;
  letter-spacing:.18em;text-anchor:middle;}

.pin{position:absolute;transform:translate(-50%,-50%);background:none;border:0;
  padding:6px;cursor:pointer;font-family:inherit;display:flex;align-items:center;
  gap:8px;white-space:nowrap;z-index:3;border-radius:20px;}
.pdot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.5);
  box-shadow:0 0 0 4px rgba(255,255,255,.08);flex:0 0 auto;
  transition:background .22s ease,box-shadow .22s ease,transform .22s ease;}
.pname{font-size:13px;font-weight:600;color:rgba(255,255,255,.72);
  transition:color .22s ease;}
.pin:hover .pdot,.pin:focus-visible .pdot{background:var(--green);
  transform:scale(1.25);box-shadow:0 0 0 6px rgba(112,194,68,.2);}
.pin:hover .pname,.pin:focus-visible .pname{color:#fff;}
.pin.on .pdot{background:var(--green);transform:scale(1.4);
  box-shadow:0 0 0 8px rgba(112,194,68,.22),0 0 22px rgba(112,194,68,.6);}
.pin.on .pname{color:var(--green);font-weight:700;}
/* Katy sits in three counties — the exception that proves the section's point */
.pin.multi .pdot{background:var(--amber);
  box-shadow:0 0 0 4px rgba(232,163,61,.16);}
.pin.multi .pdot::after{content:"";position:absolute;inset:-4px;
  border-radius:50%;border:1.5px solid var(--amber);opacity:.55;
  animation:ripple 2.6s ease-out infinite;}
.pin.multi{position:absolute;}
.pin.multi .pdot{position:relative;}
@keyframes ripple{0%{transform:scale(.9);opacity:.6}
  70%{transform:scale(2.1);opacity:0}100%{opacity:0}}

.jdetail{position:sticky;top:104px;}
.jcard{background:var(--surface,#fff);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px 32px;box-shadow:var(--shadow-lift);
  animation:fadein .3s ease;}
.jcard[hidden]{display:none;}
.jeyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green-deep);}
.jcard h3{font-size:29px;font-weight:900;letter-spacing:-.03em;margin-top:8px;}
.jcard dl{margin-top:22px;display:grid;grid-template-columns:auto 1fr;
  gap:11px 20px;font-size:15.5px;}
.jcard dt{font-weight:700;color:var(--ink-faint);font-size:12.5px;
  letter-spacing:.07em;text-transform:uppercase;padding-top:2px;}
.jcard dd{margin:0;color:var(--ink);font-weight:600;}
.jcard dd.zips{font-weight:400;color:var(--ink-soft);font-size:14.5px;}
.jflag{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#6A3F00;
  background:rgba(232,163,61,.26);border:1px solid rgba(232,163,61,.6);
  padding:2px 8px;border-radius:20px;vertical-align:1px;}
.jnote{font-size:15px;line-height:1.6;color:var(--ink-soft);
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
.jcard .btn{margin-top:20px;}
.jempty h3{font-size:24px;}

/* ==========================================================================
   PROOF SPLIT — Chicago's record, Houston's opening, told apart on purpose
   ========================================================================== */
.proof{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;
  align-items:stretch;}
.pcol{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 34px 28px;position:relative;overflow:hidden;}
.pcol.hou{border-color:var(--green);box-shadow:0 0 0 3px rgba(112,194,68,.12);}
.pcol.hou::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 200px at 100% 0,rgba(112,194,68,.10),transparent 65%);}
.peyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);}
.pcol.hou .peyebrow{color:var(--green-deep);}
.pcol h3{font-size:27px;font-weight:900;letter-spacing:-.03em;margin-top:9px;}
.pcol dl{margin-top:26px;display:grid;grid-template-columns:auto 1fr;
  gap:14px 18px;align-items:baseline;}
.pcol dt{margin:0;}
.pcol dt b{font-size:34px;font-weight:900;letter-spacing:-.04em;
  color:var(--plum);font-variant-numeric:tabular-nums;}
.pcol.hou dt b{color:var(--green-deep);}
.pcol dd{margin:0;font-size:15px;color:var(--ink-soft);}
.plabel{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.55;color:var(--ink-faint);}

.parrow{display:flex;align-items:center;justify-content:center;width:64px;}
.parrow span{position:relative;width:2px;height:64%;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--green),transparent);}
.parrow span::after{content:"";position:absolute;left:50%;top:50%;
  width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
  background:var(--green);box-shadow:0 0 16px rgba(112,194,68,.8);
  animation:travel 3.4s ease-in-out infinite;}
@keyframes travel{0%{top:6%;opacity:0}12%{opacity:1}
  88%{opacity:1}100%{top:94%;opacity:0}}

@media (max-width:1000px){
  .flow{grid-template-columns:1fr;gap:26px;}
  .jwrap{grid-template-columns:1fr;gap:26px;}
  .jdetail{position:static;}
  .pname{font-size:11.5px;}
  .proof{grid-template-columns:1fr;gap:16px;}
  .parrow{width:auto;height:52px;}
  .parrow span{width:64%;height:2px;
    background:linear-gradient(90deg,transparent,var(--green),transparent);}
  .parrow span::after{animation:travel-x 3.4s ease-in-out infinite;top:50%;}
  @keyframes travel-x{0%{left:6%;opacity:0}12%{opacity:1}
    88%{opacity:1}100%{left:94%;opacity:0}}
}
@media (max-width:620px){
  .jmap{aspect-ratio:1/1;}
  .pname{display:none;}
  .pin{padding:10px;}
  .fresolve{font-size:23px;}
  .fdetail{padding:24px 22px;}
  .jcard{padding:24px 22px;}
}
@media (prefers-reduced-motion:reduce){
  .ftrack::after{transition:none;}
  .fpanel,.jcard{animation:none;}
  .pin.multi .pdot::after,.parrow span::after{animation:none;}
  .parrow span::after{top:50%;opacity:1;}
}

/* ---- stat strip with animated counters ---- */
.stats{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));}
.stat{text-align:center;padding:8px 4px;}
.stat b{display:block;font-size:46px;font-weight:900;letter-spacing:-.04em;
  color:var(--plum);line-height:1;}
.sec.dark .stat b{color:#fff;}
.stat span{display:block;font-size:14.5px;color:var(--ink-soft);margin-top:9px;}
.sec.dark .stat span{color:rgba(255,255,255,.7);}
.stat em{display:block;font-style:normal;font-size:12px;color:var(--ink-faint);
  margin-top:6px;letter-spacing:.04em;}
.sec.dark .stat em{color:rgba(255,255,255,.45);}

/* ---- accordion (FAQ) — details/summary, no JS required ---- */
.faq{display:flex;flex-direction:column;gap:12px;max-width:860px;}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .14s ease,box-shadow .14s ease;}
.faq details[open]{border-color:var(--green);box-shadow:var(--shadow-lift);}
.faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 24px;
  font-weight:700;font-size:17px;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:24px;top:50%;
  width:11px;height:11px;border-right:2px solid var(--green-deep);
  border-bottom:2px solid var(--green-deep);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq .ans{padding:0 24px 22px;color:var(--ink-soft);font-size:16px;line-height:1.65;}
.faq .ans p + p{margin-top:12px;}
.sec.dark .faq details{background:var(--plum-soft);border-color:var(--line-dark);}
.sec.dark .faq .ans{color:rgba(255,255,255,.76);}

/* ---- process / numbered steps ---- */
.steps{display:grid;gap:22px;counter-reset:s;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));}
.step{position:relative;padding-top:56px;}
.step::before{counter-increment:s;content:counter(s);
  position:absolute;top:0;left:0;width:42px;height:42px;border-radius:11px;
  background:var(--green);color:#0E2A05;font-weight:900;font-size:18px;
  display:flex;align-items:center;justify-content:center;}
.step h3{font-size:19px;font-weight:700;}
.step p{font-size:15.5px;color:var(--ink-soft);margin-top:9px;line-height:1.58;}
.sec.dark .step p{color:rgba(255,255,255,.74);}

/* ---- split feature block ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split.flip > *:first-child{order:2;}
.split h2{font-size:36px;font-weight:800;}
.split p{font-size:17px;color:var(--ink-soft);margin-top:16px;line-height:1.65;}
.sec.dark .split p{color:rgba(255,255,255,.76);}
.split ul{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px;}
.split ul li{padding-left:30px;position:relative;font-size:16px;color:var(--ink-soft);}
.sec.dark .split ul li{color:rgba(255,255,255,.78);}
.split ul li::before{content:"";position:absolute;left:0;top:8px;width:15px;height:8px;
  border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);
  transform:rotate(-45deg);}

/* visual panel used opposite copy in a split */
.panel{background:linear-gradient(160deg,var(--plum-soft),var(--plum-deep));
  border:1px solid var(--plum-line);border-radius:var(--r-lg);padding:34px;
  color:#fff;box-shadow:var(--shadow);}
.panel h3{font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--green);margin-bottom:20px;}
.panel .row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--line-dark);font-size:15.5px;}
.panel .row:last-child{border-bottom:0;}
.panel .row b{font-weight:700;color:#fff;}
.panel .row span{color:rgba(255,255,255,.66);}

/* ---- pill / tag ---- */
.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;}
.pill{font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:20px;
  background:var(--green-wash);color:var(--green-deep);border:1px solid rgba(112,194,68,.3);}
.sec.dark .pill{background:rgba(112,194,68,.16);color:var(--green);
  border-color:rgba(112,194,68,.34);}

/* ---- quote / attributed proof ---- */
.quote{background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:var(--r);padding:28px 30px;}
.quote p{font-size:18px;line-height:1.6;color:var(--ink);font-weight:500;}
.quote cite{display:block;margin-top:16px;font-style:normal;font-size:14px;
  color:var(--ink-faint);}

/* ---- callout / notice ---- */
.note{border-radius:var(--r);padding:20px 24px;font-size:15.5px;line-height:1.6;
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink-soft);}
.note.green{background:var(--green-wash);border-color:rgba(112,194,68,.35);
  color:var(--ink);}
.note.amber{background:rgba(232,163,61,.10);border-color:rgba(232,163,61,.38);}
.note b{color:var(--ink);}

/* ---- long-form article body ---- */
.article{max-width:var(--maxw-read);margin:0 auto;}
.article h2{font-size:30px;font-weight:800;margin:44px 0 14px;}
.article h2:first-child{margin-top:0;}
.article h3{font-size:21px;font-weight:700;margin:30px 0 10px;}
.article p{font-size:17.5px;line-height:1.72;color:var(--ink-soft);margin-bottom:16px;}
.article ul,.article ol{margin:0 0 18px 0;padding-left:22px;color:var(--ink-soft);
  font-size:17px;line-height:1.7;}
.article li{margin-bottom:9px;}
.article strong{color:var(--ink);font-weight:700;}
.article a{color:var(--green-deep);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;}
.article table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px;}
.article th,.article td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);}
.article th{font-weight:700;color:var(--ink);background:var(--paper-2);}
.article td{color:var(--ink-soft);}
.tablewrap{overflow-x:auto;}

/* table of contents rail */
.toc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;margin-bottom:34px;}
.toc h3{font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:12px;}
.toc ol{margin:0;padding-left:18px;font-size:15.5px;}
.toc li{margin-bottom:7px;}
.toc a{color:var(--green-deep);font-weight:600;}

/* ---- area / city grid ---- */
.arealist{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));}
.arealist a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:15px 17px;
  font-weight:600;font-size:15.5px;transition:border-color .12s,background .12s,transform .12s;}
.arealist a:hover{border-color:var(--green);background:var(--green-wash);
  transform:translateY(-1px);}
.arealist a::after{content:"→";color:var(--green-deep);opacity:.6;}

/* ---- sticky mobile CTA bar ---- */
.mobicta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--plum-deep);border-top:1px solid var(--plum-line);
  padding:11px 16px;gap:10px;box-shadow:0 -8px 24px rgba(12,7,26,.3);}
.mobicta .btn{flex:1;padding:13px 10px;font-size:15px;}
.mobicta .tel{flex:0 0 auto;border-color:rgba(255,255,255,.45);color:#fff;}

/* ---- pricing calculator ---- */
.calc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px;box-shadow:var(--shadow-lift);max-width:640px;margin:0 auto;}
.calc label{font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);}
.calc .units{display:flex;align-items:center;gap:16px;margin:14px 0 6px;}
.calc input[type=range]{flex:1;accent-color:var(--green);height:6px;}
.calc .num{font-size:40px;font-weight:900;letter-spacing:-.04em;min-width:2.4em;
  text-align:right;}
.calc .out{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;
  padding-top:22px;border-top:1px solid var(--line);}
.calc .out div{background:var(--paper-2);border-radius:10px;padding:18px;text-align:center;}
.calc .out b{display:block;font-size:30px;font-weight:900;letter-spacing:-.03em;
  color:var(--plum);}
.calc .out span{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:6px;}
.calc .fine{font-size:12.5px;color:var(--ink-faint);margin-top:16px;line-height:1.55;
  text-align:center;}

/* ---- comparison table ---- */
.vs{width:100%;border-collapse:collapse;font-size:16px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.vs th,.vs td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);}
.vs thead th{background:var(--plum);color:#fff;font-weight:700;font-size:15px;}
.vs tbody tr:last-child td{border-bottom:0;}
.vs td:first-child{font-weight:600;color:var(--ink);}
.vs .yes{color:var(--green-deep);font-weight:800;}
.vs .no{color:var(--ink-faint);}

/* ---- 404 / utility ---- */
.mini{max-width:640px;margin:0 auto;text-align:center;padding:90px 24px;}
.mini h1{font-size:52px;font-weight:900;}
.mini p{font-size:18px;color:var(--ink-soft);margin:16px 0 28px;}

/* ------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .dropmenu{min-width:420px;}
}
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:42px;padding:56px 24px 68px;}
  .hero h1{font-size:46px;}
  .fgrid2{grid-template-columns:1fr 1fr;}
  .split{grid-template-columns:1fr;gap:34px;}
  .split.flip > *:first-child{order:0;}
  .phero h1{font-size:38px;}
}
/* The desktop header row needs ~1207px (brand 212 + nav 550 + CTA 365).
   Below that it has to collapse to the hamburger or the CTA group runs off
   the right edge - measured 179px of overflow at 1024 and 343px at 860
   while this breakpoint was still 820. */
/* Tony 2026-11-03: the three-line menu is for PHONES and portrait tablets
   only. Every desktop/laptop width (1024px and up) shows the full tab bar, so
   between 1024 and 1250 the bar is compacted to fit instead of collapsing. */
@media (min-width:1024px) and (max-width:1250px){
  .topbar,.top.stuck .topbar{gap:18px;padding-left:20px;padding-right:20px;}
  .brand img,.top.stuck .brand img{width:158px;}
  .nav{gap:16px;}
  .nav > a,.nav .drop > button{font-size:14.5px;}
  .navcta{gap:8px;}
  .navcta .btn{padding:10px 15px;font-size:14px;}
  /* Services is the first tab and its menu is wide: centred on the button it
     ran 17px off the left edge at 1024. Anchor it to the button's left. */
  .nav .drop:first-child .dropmenu{left:0;transform:translateY(-6px);}
  .nav .drop:first-child:hover .dropmenu,
  .nav .drop:first-child[data-open="1"] .dropmenu{transform:translateY(0);}
}
@media (max-width:1023px){
  /* wrap is what drops the opened menu onto its OWN full-width row under the
     logo. It used to be set only at <=820px, so wider screens got the menu
     squeezed beside the logo with a sideways scrollbar. */
  .topbar{flex-wrap:wrap;gap:0 16px;}
  .nav,.navcta{display:none;}
  .navtoggle{display:flex;}
  .navtoggle-cb:checked ~ .nav{
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;flex:0 0 100%;width:100%;
    order:3;margin-left:0;margin-top:14px;padding:6px 0 4px;border-top:1px solid var(--line-dark);
    max-height:calc(100vh - 210px);overflow-y:auto;overflow-x:hidden;
    overscroll-behavior:contain;}
  /* Contact Us + Sign Up live in .navcta, which is hidden here. Without this
     they were unreachable on tablets/laptops (the sticky .mobicta bar only
     exists at <=820px), so they ride along at the bottom of the open menu. */
  .navtoggle-cb:checked ~ .navcta{display:flex;flex:0 0 100%;order:4;
    gap:10px;padding:14px 0 6px;}
  .navtoggle-cb:checked ~ .navcta .btn{flex:1 1 0;justify-content:center;text-align:center;}
  .navtoggle-cb:checked ~ .nav > a{padding:14px 2px;
    border-bottom:1px solid var(--line-dark);font-size:16.5px;}
  .navtoggle-cb:checked ~ .nav .drop{width:100%;}
  .navtoggle-cb:checked ~ .nav .drop > button{width:100%;justify-content:space-between;
    padding:14px 2px;border-bottom:1px solid var(--line-dark);font-size:16.5px;}
  /* On mobile the menu is an inline accordion, so every desktop positioning
     rule has to be unwound — including the right-aligned variant. */
  .drop::after{display:none;}
  .dropmenu,.dropmenu.right,.dropmenu.one,
  .drop:hover .dropmenu,.drop[data-open="1"] .dropmenu,
  .drop:hover .dropmenu.right,.drop[data-open="1"] .dropmenu.right{
    position:static;transform:none;left:auto;right:auto;
    width:100%;max-width:none;min-width:0;
    box-shadow:none;background:rgba(255,255,255,.05);color:#fff;padding:6px;
    grid-template-columns:1fr;opacity:1;visibility:visible;display:none;
    border-radius:8px;margin-bottom:8px;}
  .drop[data-open="1"] .dropmenu,
  .drop[data-open="1"] .dropmenu.right{display:grid;}
  .dropmenu a{color:rgba(255,255,255,.86);}
  .dropmenu a:hover{background:rgba(255,255,255,.08);color:var(--green);}
  .dropmenu a small{color:rgba(255,255,255,.5);}
}
/* these stay on phones only - a mobile CTA bar on a 1200px desktop is wrong */
@media (max-width:820px){
  .top{position:static;}
  .navtoggle-cb:checked ~ .nav{max-height:none;overflow:visible;}
  .mobicta{display:flex;}
  body{padding-bottom:66px;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .hero h1{font-size:36px;}
  .hero .lede{font-size:17px;}
  .shead h2{font-size:31px;}
  .sec{padding:60px 0;}
  .fgrid,.fgrid2{grid-template-columns:1fr;}
  .leadform{padding:24px 20px 22px;}
  .brand img{width:176px;}
  .band h2{font-size:27px;}
  .phero h1{font-size:31px;}
  .article h2{font-size:25px;}
  .stat b{font-size:38px;}
  .calc{padding:22px;}
  .calc .out{grid-template-columns:1fr;}
  .split h2{font-size:28px;}
}

/* Tony's Windows runs with animations off, so this path is the one he SEES.
   Everything must be fully legible and correctly positioned with zero motion. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
  .rv{opacity:1 !important;transform:none !important;}
  .hero::before{display:none;}
  /* The intro is pure motion. With motion off there is nothing behind it to
     communicate, so it must never appear at all rather than sit there as a
     static plum block the visitor has to dismiss. */
  .intro{display:none !important;}
}

/* neighbouring counties: real geography, context only - no interaction,
   no label, and clipped to the viewBox so they cannot overflow. */
.jbase .reg.nb{fill:#ffffff;fill-opacity:.035;stroke:#ffffff;stroke-opacity:.08;stroke-width:1}

/* Sugar Land / Missouri City and Richmond / Rosenberg sit within a few km of
   each other, so their labels collided. These two render to the LEFT of the
   dot instead; the dot stays on its true coordinate either way. */
.jmap .pin.lleft{flex-direction:row-reverse;}   /* .pin already centres itself
   with translate(-50%,-50%) - do NOT add another transform here, row-reverse
   alone mirrors the dot and label about the same point. */
.jmap .pin.lleft .pname{text-align:right;}

/* the NAME can be nudged off the dot without moving the dot itself */
.jmap .pin .pname{transform:translateY(var(--ly,0));}

/* ---------------------------------------------------------------
   LIVE SATELLITE MAP (Leaflet + Esri World Imagery)
   Progressive enhancement ONLY. .jstatic (the hand-built SVG) is what
   ships in the page; the live map is unhidden by JS after Leaflet
   loads, and .jstatic is hidden at that point. With JS off, tiles
   blocked, or the CDN down, the SVG map is what the visitor gets and
   nothing about the section breaks.
   --------------------------------------------------------------- */
.jlive{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:4;}
.jlive[hidden]{display:none;}
.jmap.live .jstatic{display:none;}
.jlive .leaflet-container{width:100%;height:100%;background:#1F1137;
  font-family:Inter,system-ui,sans-serif;}
.jlive .leaflet-control-attribution{background:rgba(31,17,55,.78);color:rgba(255,255,255,.62);
  font-size:10px;}
.jlive .leaflet-control-attribution a{color:rgba(255,255,255,.82);}



/* a readable pill rather than bare text: over aerial imagery a text-shadow
   alone still loses against light ground like concrete or a rooftop */


.jhint{position:absolute;left:14px;bottom:12px;z-index:5;font:600 11px Inter,sans-serif;
  letter-spacing:.04em;color:rgba(255,255,255,.75);background:rgba(31,17,55,.72);
  border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:6px 12px;
  pointer-events:none;}
@media (prefers-reduced-motion:reduce){.jlive .leaflet-fade-anim .leaflet-tile{transition:none;}}


/* the ring nodes are links; say so quietly rather than hoping it reads */
/* discreet - we cover more than the published areas, but this must not
   shout over the proof columns above it */
.covnote{margin:18px auto 0;max-width:62ch;text-align:center;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.46);}
.covnote a{color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:2px;}


/* hover card on the satellite map - his spec: city, jurisdiction, Explore link */
.jlive .leaflet-tooltip.jcardtip{background:#fff;border:0;border-radius:10px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.65);padding:13px 15px;min-width:212px;
  white-space:normal;color:var(--ink);}
.jlive .leaflet-tooltip.jcardtip::before{border-top-color:#fff;}
.jcardtip .jcard-h{display:block;font:800 15px Inter,sans-serif;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:5px;}
.jcardtip .jcard-r{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-soft);}
.jcardtip .jcard-go{display:block;margin-top:9px;font:700 12.5px Inter,sans-serif;
  color:var(--green-deep);}



/* a dot with no name is recoverable via hover; two overlapping names are not */



/* ------------------------------------------------------------------
   Satellite-map markers.

   THE DOT IS THE ANCHOR and must never move - it marks the city's real
   coordinate. Earlier versions translated the whole marker to flip the
   label, which dragged the dot off the city and barely moved the label,
   so collisions never actually resolved. The dot is now absolutely
   placed at the anchor point and the LABEL floats to its left or right.
   ------------------------------------------------------------------ */
.jmark{position:relative;display:block;width:13px;height:13px;cursor:pointer;}
.jmark i{position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px rgba(112,194,68,.28),0 1px 7px rgba(0,0,0,.65);
  transition:box-shadow .16s ease,transform .16s ease;}
.jmark.multi i{background:var(--amber);box-shadow:0 0 0 4px rgba(232,163,61,.32),0 1px 7px rgba(0,0,0,.65);}
.jmark:hover i{transform:scale(1.18);box-shadow:0 0 0 7px rgba(112,194,68,.34),0 1px 9px rgba(0,0,0,.75);}

/* the label: a pill, because bare text loses against concrete and rooftops */
.jmark b{position:absolute;top:50%;left:20px;
  transform:translateY(-50%) translateY(var(--ly,0px));
  font:700 12px Inter,sans-serif;letter-spacing:.01em;color:#fff;
  background:rgba(22,11,41,.84);border:1px solid rgba(255,255,255,.2);
  border-radius:13px;padding:3px 9px;white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.5);pointer-events:none;}
.jmark.lft b{left:auto;right:20px;}
.jmark:hover b{background:rgba(112,194,68,.96);color:#10210a;border-color:rgba(255,255,255,.4);}
.jmark.hidelbl b{display:none;}
.jmark.hidelbl:hover b{display:block;}

/* a CTA label longer than a 320px screen was pushing the page sideways */
.btn{max-width:100%;}
@media (max-width:380px){.btn-lg{font-size:15.5px;padding:15px 18px;}}

/* ------------------------------------------------------------------
   Touch targets. WCAG 2.5.8 (AA) wants 24x24 CSS px minimum for a
   pointer target. Measured on a phone: breadcrumb links were 22px tall
   and every footer link 19px - each individually tappable, each just
   under. Padding only; nothing moves on desktop.
   ------------------------------------------------------------------ */
@media (max-width:820px){
  .crumb a{display:inline-block;padding-block:5px;}
  footer a{display:inline-block;padding-block:5px;}
  .mobicta .btn{min-height:44px;display:inline-flex;align-items:center;
    justify-content:center;}
}

/* ------------------------------------------------------------------
   Ring affordance. Green is this site's ACTION colour - spending it on
   a whole line of passive helper text cheapens it, so the chip is quiet
   ink on a hairline border and green is reduced to a single 5px dot.
   ------------------------------------------------------------------ */
.shint-row{margin:22px 0 0;text-align:center;}
.shint{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 13px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font:600 11px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap;}
.shint-dot{width:5px;height:5px;border-radius:50%;background:var(--green);flex:0 0 auto;}
@media (max-width:420px){.shint{font-size:10px;letter-spacing:.1em;padding:6px 12px;}}

/* ------------------------------------------------------------------
   Stray horizontal scrollbar guard.

   overflow-x:CLIP, never HIDDEN. `hidden` makes the element a scroll
   container, which kills every `position:sticky` descendant - this site
   has a sticky header AND the sticky story scene, and that exact trap
   already cost a rebuild once. `clip` crops without creating a scroll
   container, so sticky keeps working.
   ------------------------------------------------------------------ */
/* ONLY on body. Setting it on <html> made the browser compute it as
   overflow-x:HIDDEN on the viewport, which creates a scroll container and
   is the exact thing that killed position:sticky here before. body's value
   propagates to the viewport as clip, which does not. */
body{overflow-x:clip;}


/* ------------------------------------------------------------------
   Problem wall on a white ground.

   The whole block was authored for the plum band, so every colour here
   is a white-ground restatement - and that has to include the FLIPPED
   state, because the section animates red -> green on scroll and a
   half-converted palette only shows up after the animation runs.
   --green (#70C244) is ~2.4:1 on white, so the flipped word uses
   --green-deep.
   ------------------------------------------------------------------ */
.wallsec{background:var(--paper);color:var(--ink);}
.wallhead{color:var(--ink);}
.walllede{color:var(--ink-soft);}
.wall{border-top-color:var(--line);}
.wrow{border-bottom-color:var(--line);}
.wgood{color:rgba(26,22,38,.24);}
.wnote{color:var(--ink-soft);}
.warrow{background:rgba(26,22,38,.16);}
.wrow.flip .wbad{color:rgba(26,22,38,.34);}
.wrow.flip .wgood{color:var(--green-deep);}
.wrow.flip .wnote{color:var(--ink);}

/* ------------------------------------------------------------------
   Flat-pricing band on plum.

   .panel is ALREADY a dark plum card, so dropping it onto a plum band
   makes it disappear - dark on dark with nothing separating them. On
   this section it gets a lighter raised surface and a brighter edge so
   the price ladder still reads as a card, which is the whole point of
   that block.
   ------------------------------------------------------------------ */
.pricingsec .panel{background:linear-gradient(160deg,#33215A,#271741);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75);}
.pricingsec .panel .row{border-bottom-color:rgba(255,255,255,.12);}
.pricingsec .split > .rv li{color:rgba(255,255,255,.82);}
.pricingsec .split > .rv p{color:rgba(255,255,255,.72);}