/* ============================================================
   MAIN — component styles. Uses tokens.css for all values.
   Sections: base · buttons · header · hero · stats · cards ·
   process · pricing · forms · bands · areas · faq · utilities
   ============================================================ */
/* Inter (variable, latin) — self-hosted, replaces Google Fonts */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2')}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.16;letter-spacing:-.028em;margin:0}
.svc__i svg,.pain__i svg,.tick svg,.logo__m svg,.acard svg,.phone svg{flex:none}
a{color:inherit}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.sec{padding-block:clamp(44px,6vw,76px)}
.center{text-align:center;margin-inline:auto}
.eyebrow{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.h2{font-size:clamp(24px,3.2vw,34px)}
.lede{font-size:clamp(15.5px,1.5vw,17px);color:var(--muted);max-width:60ch}
.center .lede{margin-inline:auto}
.head{max-width:62ch;margin-bottom:clamp(24px,3vw,36px)}
.head .h2{margin-bottom:10px}
.small{font-size:14px;color:var(--muted);line-height:1.55}
.content h2{margin:34px 0 15px}
.content h2:first-child{margin-top:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-size:15px;font-weight:600;
  padding:12px 22px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;min-height:46px;
  transition:background .18s,color .18s,transform .16s,border-color .18s}
.btn:active{transform:translateY(1px)}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-dk)}
.btn--brand{background:var(--brand);color:#fff}
.btn--brand:hover{background:var(--brand-dk)}
.btn--zest{background:var(--zest);color:var(--zest-ink,#3A2708)}
.btn--zest:hover{background:var(--zest-dk,#DE9718)}
.btn--out{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--out:hover{background:var(--cream)}
.btn--outw{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn--outw:hover{background:rgba(255,255,255,.14)}
.btn--wide{width:100%}
:focus-visible{outline:2px solid var(--zest);outline-offset:2px;border-radius:6px}

/* ══ HEADER ══ */
.hdr{position:absolute;top:0;left:0;right:0;z-index:80;transition:background .25s,box-shadow .25s,border-color .25s;border-bottom:1px solid transparent}
.hdr.stuck{position:fixed;background:rgba(var(--paper-rgb,255,253,249),.97);backdrop-filter:blur(10px);border-bottom-color:var(--line);box-shadow:0 2px 18px -12px rgba(var(--ink-rgb,28,33,31),.5)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:11px}
.hdr.stuck .hdr__in{padding-block:8px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;flex:none}
.hdr.stuck .logo{color:var(--brand-dk)}
.logo__m{width:27px;height:27px;display:grid;place-items:center;flex:none}
.logo__m svg{width:27px;height:27px;color:currentColor}
.logo b{font-family:var(--serif);font-size:16.5px;font-weight:600;letter-spacing:-.03em;line-height:1.15;display:block}
/* `.logo b+span` targets ONLY the region tagline. It was `.logo span`, which is
   a descendant selector and therefore also matched .logo__m and the wrapper
   <span> around the wordmark — see partials/logo.html. At desktop that merely
   forced display:block onto the mark; in the max-width:560px block below it set
   display:none on ALL of them, so every site's header lost its brand entirely
   on a phone. Verified on Pittsburgh, which runs the engine sheet unmodified:
   the whole .logo measured 0x0 at 386px. */
.logo b+span{font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.65;display:block;margin-top:1px}

.nav{display:flex;align-items:center;gap:1px}
.nav>*{position:relative}
.nav a,.nav button.navlink{font-family:var(--sans);font-size:14px;font-weight:500;color:#fff;text-decoration:none;
  background:none;border:0;cursor:pointer;padding:7px 10px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .16s,color .16s}
.hdr.stuck .nav a,.hdr.stuck .nav button.navlink{color:var(--ink)}
.nav a:hover,.nav button.navlink:hover{background:rgba(255,255,255,.18)}
.hdr.stuck .nav a:hover,.hdr.stuck .nav button.navlink:hover{background:var(--brand-lt)}
/* Language switcher — accent colour so it reads as a mode change, not another
   nav destination. Needs the .hdr.stuck selector too: (0,3,1) there would
   otherwise outrank a bare .nav a.langsw (0,2,1) once the header sticks. */
.nav a.langsw,.hdr.stuck .nav a.langsw{color:var(--zest);font-weight:600}
.caret{width:9px;height:9px;opacity:.7;transition:transform .2s}
[aria-expanded="true"] .caret{transform:rotate(180deg)}

.menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:262px;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 36px -16px rgba(var(--ink-rgb,28,33,31),.4);padding:6px;
  opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:90}
.menu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.menu--wide{min-width:400px;display:grid;grid-template-columns:1fr 1fr;gap:1px}
.menu a{display:block;color:var(--ink)!important;font-size:13.5px;font-weight:500;padding:8px 10px;border-radius:6px;white-space:normal;line-height:1.35}
.menu a:hover{background:var(--brand-lt)!important}
.menu a em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}
.menu .all{grid-column:1/-1;border-top:1px solid var(--line);margin-top:3px;padding-top:7px;font-weight:600;color:var(--accent)!important;font-size:13px}

.hdr__cta{display:flex;align-items:center;gap:8px;flex:none}
.phone{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;font-weight:600;font-size:14px;
  padding:9px 15px;border-radius:7px;text-decoration:none;white-space:nowrap;transition:background .18s}
.phone:hover{background:var(--accent-dk)}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.45);border-radius:7px;width:40px;height:40px;cursor:pointer;padding:0;place-items:center}
.hdr.stuck .burger{border-color:var(--line)}
.burger i{display:block;width:17px;height:1.5px;background:#fff;position:relative}
.hdr.stuck .burger i{background:var(--ink)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:inherit}
.burger i::before{top:-5.5px}.burger i::after{top:5.5px}

@media(max-width:1100px){.nav{display:none}.burger{display:grid}.phone{padding:12px 16px}}
@media(max-width:560px){.logo b+span{display:none}.logo b{font-size:17.5px}.phone{font-size:14.5px;padding:11px 15px}.phone span{display:none}}

/* mobile panel */
.mnav{position:fixed;inset:0;z-index:95;background:var(--paper,#FFFDF9);transform:translateY(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1);overflow-y:auto;display:none}
.mnav.on{transform:translateY(0)}
@media(max-width:1100px){.mnav{display:block}}
.mnav__top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.mnav__top .logo{color:var(--brand-dk)}
.mnav__top .logo__m{color:var(--brand)}
.close{background:none;border:1.5px solid var(--line);border-radius:9px;width:46px;height:46px;font-size:22px;line-height:1;cursor:pointer;color:var(--ink)}
.mnav__body{padding:14px 22px 40px}
.macc{border-bottom:1px solid var(--line)}
.macc>button{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;padding:17px 0;
  font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.macc__p{display:none;padding-bottom:12px}
.macc__p.on{display:block}
.macc__p a{display:block;padding:9px 0 9px 14px;border-left:2px solid var(--line);font-size:15.5px;color:var(--muted);text-decoration:none}
.macc__p a:hover{color:var(--brand);border-color:var(--accent)}
.mlink{display:block;padding:15px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:17px;font-weight:600;text-decoration:none;color:var(--ink)}
.mlink.langsw{color:var(--zest)}
.mnav__cta{display:grid;gap:10px;margin-top:24px}

/* ══ HERO ══ */
.hero{position:relative;min-height:min(76vh,640px);display:flex;align-items:center;color:#fff;overflow:hidden;padding-block:124px 58px}
.hero__media{position:absolute;inset:0;z-index:0;background:var(--brand-dk)}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,62% 32%)}
.hero__media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(var(--scrim-rgb,16,34,27),.92) 0%,rgba(var(--scrim-rgb,16,34,27),.78) 38%,rgba(var(--scrim-rgb,16,34,27),.40) 68%,rgba(var(--scrim-rgb,16,34,27),.30) 100%),
  linear-gradient(180deg,rgba(var(--scrim-rgb,16,34,27),.55) 0%,rgba(var(--scrim-rgb,16,34,27),0) 30%,rgba(var(--scrim-rgb,16,34,27),.55) 100%)}
@media(max-width:900px){
  .hero__img{object-position:var(--hero-focus-sm,60% 42%)}
  .hero__media::after{background:linear-gradient(180deg,rgba(var(--scrim-rgb,16,34,27),.86) 0%,rgba(var(--scrim-rgb,16,34,27),.72) 45%,rgba(var(--scrim-rgb,16,34,27),.90) 100%)}
}
.hero__in{position:relative;z-index:2;max-width:830px}
.pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  border-radius:6px;padding:7px 13px;font-size:12.5px;font-weight:500;margin-bottom:18px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--zest);box-shadow:0 0 0 0 rgba(var(--zest-rgb,240,168,40),.6);animation:pl 2.2s infinite}
@keyframes pl{70%{box-shadow:0 0 0 9px rgba(var(--zest-rgb,240,168,40),0)}100%{box-shadow:0 0 0 0 rgba(var(--zest-rgb,240,168,40),0)}}
h1{font-size:clamp(29px,4.2vw,45px);line-height:1.12;margin-bottom:14px;letter-spacing:-.032em}
.hero p{font-size:clamp(15.5px,1.6vw,17.5px);color:var(--on-brand,#DCE6DC);max-width:58ch}
.hero__tag{font-weight:600;color:#fff;margin-top:12px;font-size:15px}
.hero__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* stat bar */
.stats{background:var(--brand);color:#fff}
.stats__g{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.18)}
@media(min-width:820px){.stats__g{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--brand);padding:20px 16px;text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);font-weight:600;color:var(--zest);letter-spacing:-.03em}
.stat span{display:block;font-size:13px;color:var(--on-brand-mute,#BDCFC1);margin-top:3px;line-height:1.4}

/* grids */
.grid{display:grid;gap:14px}
@media(min-width:680px){.g2{grid-template-columns:1fr 1fr}}
@media(min-width:920px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:680px) and (max-width:919px){.g4{grid-template-columns:1fr 1fr}}

/* pain cards */
.pain{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.pain__i{width:34px;height:34px;border-radius:8px;background:var(--accent-lt);display:grid;place-items:center;margin-bottom:13px;color:var(--accent-dk)}
.pain__i svg{width:17px;height:17px}
.pain h3{font-size:16.5px;margin-bottom:7px}
.pain p{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0}

/* service cards */
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;display:flex;flex-direction:column;
  transition:box-shadow .2s,border-color .2s;text-decoration:none;color:inherit}
.svc:hover{box-shadow:var(--shadow);border-color:var(--brand-md)}
.svc__i{width:36px;height:36px;border-radius:8px;background:var(--brand-lt);display:grid;place-items:center;margin-bottom:14px;color:var(--brand)}
.svc__i svg{width:19px;height:19px}
.svc h3{font-size:17px;margin-bottom:7px}
.svc p{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0 0 14px}
.more{margin-top:auto;font-size:14px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px}
.svc:hover .more{color:var(--accent-dk)}

/* why us */
.why{background:var(--cream)}
.why__g{display:grid;gap:clamp(28px,4vw,54px);align-items:center}
@media(min-width:940px){.why__g{grid-template-columns:1.05fr .95fr}}
.why__list{display:grid;gap:16px;margin-top:22px}
.why__it{display:grid;grid-template-columns:auto 1fr;gap:12px}
.tick{width:26px;height:26px;border-radius:6px;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none;margin-top:2px}
.tick svg{width:14px;height:14px}
.why__it h3{font-size:16px;margin-bottom:4px}
.why__it p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.55}
.frame{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff}

/* process */
.steps{display:grid;gap:18px;counter-reset:st}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.st b{counter-increment:st;width:30px;height:30px;border-radius:7px;background:var(--zest);color:var(--zest-ink,#3A2708);
  display:grid;place-items:center;font-family:var(--serif);font-size:15px;font-weight:600;margin-bottom:12px}
.st b::before{content:counter(st)}
.st h3{font-size:16.5px;margin-bottom:6px}
.st p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.55}

/* pricing */
.ptab{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-width:840px;margin-inline:auto}
.prow{background:#fff;transition:background .15s}
.prow:hover{background:var(--cream)}
.prow{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow b{font-size:15px;font-weight:600;display:block}
.prow span{font-size:13px;color:var(--muted);display:block;line-height:1.4}
.prow .amt{font-weight:600;color:var(--accent);white-space:nowrap;font-size:15px}

/* quote */
.quote{background:var(--brand);color:#fff}
/* Was an inline style on the <p> in partials/quote-form.html, which meant a raw
   colour in a template (hard rule #2) that no site stylesheet could override —
   inline beats every external rule. It assumes this section sits on --brand.
   A site whose quote band is light must be able to restate it. */
.quote__lede{color:var(--on-brand-dim,#C4D6C7)}
.quote__g{display:grid;gap:clamp(28px,4vw,52px);align-items:center}
@media(min-width:940px){.quote__g{grid-template-columns:.9fr 1.1fr}}
.qlist{list-style:none;margin:24px 0 0;padding:0}
.qlist li{padding:10px 0 10px 26px;border-top:1px solid rgba(255,255,255,.2);font-size:14.5px;color:var(--on-brand-dim,#C4D6C7);position:relative}
.qlist li::before{content:"";position:absolute;left:0;top:18px;width:12px;height:2px;background:var(--zest)}
.fcard{background:#fff;color:var(--ink);border-radius:var(--r);padding:clamp(20px,2.4vw,26px);box-shadow:var(--shadow)}
.fcard h3{font-size:19px;margin-bottom:5px}
.field{margin-bottom:12px}
label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
input,select,textarea{width:100%;font-family:var(--sans);font-size:15.5px;color:var(--ink);background:var(--cream);
  border:1px solid var(--line);border-radius:8px;padding:11px 13px;transition:border-color .15s,background .15s}
input:focus,select:focus,textarea:focus{background:#fff;border-color:var(--brand-md)}
textarea{min-height:92px;resize:vertical}
/* The chevron below is an inline SVG data URI, and CSS cannot interpolate a
   var() into url(). %235E6B62 is --muted. It is the one palette value in this
   file that has to stay literal; keep it in step with --muted when retheming,
   or accept the near-match (it reads as a neutral grey at 14x9px). */
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%235E6B62' stroke-width='2' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.f2{display:grid;gap:14px}
@media(min-width:560px){.f2{grid-template-columns:1fr 1fr}}
.consent{display:flex;gap:10px;align-items:flex-start;margin:2px 0 16px}
.consent input{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--accent)}
.consent label{font-weight:400;font-size:13.4px;color:var(--muted);line-height:1.5}
/* honeypot: off-screen rather than display:none — bots skip hidden fields but
   fill visible-to-the-DOM ones. Not a design value, so no token needed. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{display:none;text-align:center;padding:26px 6px}
.sent--err h3{color:var(--accent)}
.sent.on{display:block;animation:fd .4s ease both}
.sent h3{font-size:23px;margin-bottom:8px}
@keyframes fd{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* CTA bands */
.band{position:relative;color:#fff;text-align:center;overflow:hidden;padding-block:clamp(46px,6vw,72px)}
.band__media{position:absolute;inset:0;z-index:0}
.band__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--band-rgb,20,43,35),.86),rgba(var(--band-rgb,20,43,35),.8))}
.band__in{position:relative;z-index:2;max-width:680px;margin-inline:auto}
.band h2{font-size:clamp(23px,3.2vw,32px);margin-bottom:11px}
.band p{color:var(--on-brand,#DCE6DC);font-size:15.5px}
.band__btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}

/* testimonials */
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.stars{color:var(--zest);letter-spacing:2px;font-size:13.5px}
.tcard p{font-size:15px;line-height:1.6;margin:0}
.tcard footer{border-top:1px solid var(--line);padding-top:11px;margin-top:auto}
.tcard footer b{display:block;font-size:14.5px;font-weight:600}
.tcard footer span{font-size:13px;color:var(--muted)}

/* areas */
.areas{background:var(--cream)}
.acard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 16px;text-decoration:none;color:inherit;
  display:flex;align-items:center;justify-content:space-between;gap:12px;transition:border-color .18s,box-shadow .18s}
.acard:hover{border-color:var(--brand-md);box-shadow:var(--shadow)}
.acard b{display:block;font-size:15px;font-weight:600}
.acard span{display:block;font-size:12.8px;color:var(--muted)}
.acard svg{color:var(--accent);flex:none}

/* faq */
.faq{max-width:860px;margin-inline:auto}
details{border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:#fff;overflow:hidden}
details[open]{border-color:var(--brand-md)}
summary{cursor:pointer;list-style:none;padding:15px 46px 15px 18px;position:relative;font-family:var(--serif);font-weight:600;font-size:15.5px;line-height:1.4}
summary::-webkit-details-marker{display:none}
summary::after,summary::before{content:"";position:absolute;background:var(--accent);transition:transform .25s,opacity .25s}
summary::after{right:18px;top:25px;width:12px;height:2px}
summary::before{right:23px;top:20px;width:2px;height:12px}
details[open] summary::before{transform:rotate(90deg);opacity:0}
.ans{padding:0 18px 16px;font-size:14.5px;color:var(--muted);line-height:1.62}

/* sticky */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;gap:9px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(var(--paper-rgb,255,253,249),.98);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.sticky .btn{flex:1;min-height:50px;font-size:15px;padding-inline:10px}
@media(max-width:820px){.sticky{display:flex}body{padding-bottom:76px}}

/* reveal */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}}

/* ---- hub pages (services / service areas) ---- */
.hub{background:var(--brand);color:#fff;padding-block:clamp(96px,11vw,132px) clamp(34px,5vw,52px)}
.hub .eyebrow{color:var(--zest)}
.hub .h2{margin-bottom:12px}
.hub .lede{color:var(--on-brand-dim,#C4D6C7);max-width:62ch}
.hub__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.crumbs{font-size:13px;color:var(--on-brand-fade,#9DB3A4);margin-bottom:16px}
.crumbs a{color:var(--on-brand-dim,#C4D6C7);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span{opacity:.75;margin-inline:4px}
.svc__h{font-size:17px;margin-bottom:7px;font-family:var(--serif);font-weight:600;letter-spacing:-.028em}
.frame img{width:100%;height:100%;object-fit:cover;display:block}


/* ══════════════════════════════════════════════════════════════
   TAMPA DELTAS — appended to the engine sheet, never replacing it.

   Generated as `engine main.css + this block`, same as Dallas and
   Phoenix. Sites #4 and #5 hand-wrote replacement stylesheets and
   both lost engine rules by omission — Plano's dropped .logo and
   styled a .phlogo class no template renders, so the mark fell back
   to the SVG's intrinsic 419px. Here every engine selector is
   present by construction. Regenerate the same way after any
   engine change.
   ══════════════════════════════════════════════════════════════ */

/* Primary CTA goes GOLD with dark text. --accent stays walnut because it also
   colours link text, where gold would be far under AA on white. Dark ink on
   gold is the "press this" contrast this niche runs on. */
.btn--accent{background:var(--zest);color:var(--zest-ink);box-shadow:0 4px 0 var(--zest-dk)}
.btn--accent:hover{background:var(--zest-dk);color:var(--zest-ink);
  transform:translateY(2px);box-shadow:0 2px 0 var(--zest-dk)}
.btn{font-weight:900;letter-spacing:-.01em;text-transform:uppercase}

/* Headings shout; eyebrows get tracking. */
html h1,html h2{text-transform:uppercase;font-weight:900;letter-spacing:-.03em}
html h3{font-weight:800;letter-spacing:-.02em}
.eyebrow{letter-spacing:.17em;font-weight:700}

/* The phone is a primary control here, not a footnote. */
.phone{font-weight:900}
.logo__m{color:var(--zest)}
.logo b{text-transform:uppercase;letter-spacing:-.035em}

/* ── DECKING TEXTURE ──
   The hero and the CTA band get real boards under their scrim. --deck is
   defined in tokens.css so it follows the palette. */
.hero__media{background:var(--deck)}
.band{background:var(--deck)!important;position:relative}
.band>*{position:relative;z-index:2}
.band::before{content:"";position:absolute;inset:0;z-index:1;
  background:rgba(var(--band-rgb),.62)}

/* ── THE FORM LIVES IN THE HERO ──
   templates/home.html is overridden for this site so partials/quote-form.html
   is included INSIDE the hero grid rather than as its own section further down.
   The partial is moved intact — every id (quoteForm, qSent, qError) and the
   honeypot are untouched, so assets/js/site.js binds exactly as before. These
   rules only stop the embedded section behaving like a full-width band. */
.hero .quote{background:var(--bg);color:var(--ink);padding:0;border-radius:var(--r);
  overflow:hidden;box-shadow:0 24px 54px -22px rgba(0,0,0,.6)}
.hero .quote .wrap{max-width:none;padding:0;display:block}
.hero .quote__g{display:block}
/* The intro block and the form card BOTH carry class "rv" — the card is
   class="fcard rv". A bare .rv selector therefore painted the walnut header
   over the form itself, which is what made the card look tinted and wrong.
   :not(.fcard) is doing real work here. */
.hero .quote .rv:not(.fcard){background:var(--brand);color:#fff;padding:16px 22px}
.hero .quote .rv:not(.fcard) .lede,
.hero .quote .rv:not(.fcard) .qlist{display:none}   /* the hero copy carries these */
.hero .quote .rv:not(.fcard) .h2{font-size:21px;margin:0}
.hero .quote .rv:not(.fcard) .eyebrow{color:var(--zest)!important;margin-bottom:5px}
.hero .quote .fcard{background:var(--bg);color:var(--ink);padding:18px 22px 22px;
  border:0;border-radius:0;box-shadow:none}
/* the walnut header already says "Get Your Free Estimate" */
.hero .quote .fcard>form>h3{display:none}
.hero .quote__lede{display:none}

/* Hero split: copy left, form right. The engine hero centres a single column,
   so the grid and the widened wrap live here rather than in the template. */
.hero__split{display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(24px,3.5vw,52px);align-items:start;position:relative;z-index:2}
.hero__col .hero__in{max-width:none}
@media(max-width:960px){.hero__split{grid-template-columns:1fr}}

/* The engine reveals .rv elements on scroll (opacity 0 -> 1 via a JS-added
   .in class). Inside the hero that is wrong on this site: the form IS the
   conversion and it must be solid the instant the page paints, not fade in
   600ms later. Everything below the fold keeps the reveal. */
.hero .rv{opacity:1;transform:none}