/* ============================================================
   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}


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

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

   The brief was "punchy, not too polished". That is what all of
   this is: square corners, 3px borders, hard offset shadows with
   no blur, heavy uppercase, black-on-orange buttons.
   ══════════════════════════════════════════════════════════════ */

/* Primary CTA goes ORANGE with dark text. --accent stays blue because it also
   colours link text, where #F2600C would be ~3.3:1 on white and fail. Dark ink
   on orange measures ~6.2:1 and reads like a warning sign, which is the point. */
.btn--accent{background:var(--zest);color:var(--zest-ink);border-color:var(--ink)}
.btn--accent:hover{background:var(--zest-dk);color:var(--zest-ink)}

/* Chunky, flat, hard-shadowed. No blur anywhere. */
.btn{font-weight:900;letter-spacing:-.01em;text-transform:uppercase;
  border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.btn--outw{border-color:#fff;box-shadow:3px 3px 0 rgba(255,255,255,.35)}

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

/* The phone is the brand here, so it gets weight in the header. */
.phone{font-weight:900;border:2px solid var(--ink);border-radius:2px}
.logo__m{width:32px;height:32px;color:var(--zest)}
.logo__m svg{width:26px;height:26px}
.logo b{font-size:17px;letter-spacing:-.035em;text-transform:uppercase}

/* Hard edges on the blocks rather than soft cards. */
.stats__g{background:rgba(255,255,255,.22)}
.stat b{letter-spacing:-.03em;font-weight:900}
.faq,.qf,.fcard{border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}