/* Saltmarsh pieces: storm viewer, quote checklist, glass cutaway, installs rail, brand wall, coast map. */

/* ---------- coast map ---------- */
.map{--map-land:rgba(15,34,54,.06);--map-coast:rgba(15,34,54,.32)}
.dir-b .map{--map-land:rgba(10,92,168,.08);--map-coast:rgba(10,44,87,.35)}
.dir-a .areas .map{--map-land:rgba(255,255,255,.06);--map-coast:rgba(255,255,255,.3)}
.map svg{max-height:min(640px,82vh);margin:0 auto}
.mm-mapbox .map svg{max-height:400px}
.map .m-land{fill:var(--map-land);stroke:none}
.map .m-coast{fill:none;stroke:var(--map-coast);stroke-width:1.2;stroke-linejoin:round}
.map .m-sea{font:500 10px var(--f);letter-spacing:.14em;text-transform:uppercase;fill:var(--map-mute);opacity:.7}
.areas-map{max-width:440px}
@media (max-width:900px){.map svg{max-height:520px}}

/* ---------- storm viewer ---------- */
.sw-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--dark);border-radius:var(--r,0)}
.sw-im{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity 1.3s var(--ease),transform 7s linear}
.sw-im.on{opacity:1;transform:scale(1)}
.sw-cap{position:absolute;left:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);right:clamp(14px,2vw,26px);height:0;pointer-events:none}
.sw-c{position:absolute;left:0;bottom:0;margin:0;padding:12px 16px;background:rgba(9,18,30,.62);color:#fff;font-size:15px;line-height:1.4;font-weight:500;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--r,0);opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease);width:max-content;max-width:min(440px,100%)}
.sw-c.on{opacity:1;transform:none;transition-delay:.35s}
.sw-ctl{display:flex;justify-content:space-between;align-items:center;gap:14px 28px;flex-wrap:wrap;margin-top:18px}
.sw-tabs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule-2);border-radius:var(--r,0);padding:4px;background:var(--card);min-width:min(560px,100%)}
.sw-t{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:10px 16px;text-align:left;color:var(--mute);transition:color .35s var(--ease);cursor:pointer}
.sw-t span{font-size:12.5px;font-variant-numeric:tabular-nums}
.sw-t b{font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:inherit}
.sw-t.on{color:#fff}
.sw-t:hover:not(.on){color:var(--ink)}
.sw-ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);background:var(--ink);border-radius:var(--r,0);transform:translateX(calc(var(--i,0) * 100%));transition:transform .55s var(--ease);overflow:hidden}
.sw-tabs.auto .sw-ind::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform-origin:left;animation:swBar 4.2s linear infinite}
@keyframes swBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sw-note{font-size:13.5px;color:var(--mute)}
.dir-b .sw-t b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.02em;font-weight:500}
@media (max-width:640px){.sw-stage{aspect-ratio:4/3}.sw-t{padding:9px 10px}.sw-t b{font-size:14px}.sw-c{font-size:14px;padding:10px 12px}}
@media (prefers-reduced-motion:reduce){.sw-im{transition:opacity .2s;transform:none}.sw-ind{transition:none}}

/* ---------- quote checklist ---------- */
.qc-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,4.4vw,72px);align-items:start}
.qc-ph{position:sticky;top:calc(var(--hdr-h,80px) + 24px);margin:0}
.qc-ph img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r,0);display:block}
.qc-ph figcaption{margin-top:10px;font-size:13.5px;color:var(--mute)}
.qc-l{font-size:17px;line-height:1.55;color:var(--mute);margin:18px 0 26px;max-width:52ch}
.qc{list-style:none;border-top:1px solid var(--rule-2)}
.qc-it{border-bottom:1px solid var(--rule-2)}
.qc-it>button{display:grid;grid-template-columns:28px 1fr 20px;gap:12px;align-items:center;width:100%;padding:16px 0;text-align:left;color:var(--ink);cursor:pointer}
.qc-it>button b{font-size:17px;font-weight:600;letter-spacing:-.015em}
.dir-b .qc-it>button b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.02em;font-weight:500}
.qc-ck{width:22px;height:22px;border:1.5px solid var(--rule-2);border-radius:5px;display:grid;place-items:center;color:transparent;transition:background .3s var(--ease),border-color .3s,color .3s}
.qc-ck svg{width:14px;height:14px}
.qc-it.on .qc-ck,.qc-it.seen .qc-ck{background:var(--ink);border-color:var(--ink);color:#fff}
.qc-pl{position:relative;width:12px;height:12px;justify-self:end}
.qc-pl::before,.qc-pl::after{content:"";position:absolute;left:0;top:5.25px;width:12px;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.qc-pl::after{transform:rotate(90deg)}
.qc-it.on .qc-pl::after{transform:rotate(0)}
.qc-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.qc-more>div{overflow:hidden;min-height:0;padding-left:40px}
.qc-it.on .qc-more{grid-template-rows:1fr}
.qc-more p{font-size:15px;line-height:1.55;color:var(--mute);padding-bottom:18px;max-width:56ch}
.qc-btn{margin-top:28px}
@media (max-width:900px){.qc-grid{grid-template-columns:1fr}.qc-ph{position:static}.qc-ph img{aspect-ratio:3/2}}

/* ---------- glass cutaway colors ---------- */
.ca-glass .g-glass{fill:#CFE8F2;stroke:#7FB3C8;stroke-width:1}
.ca-glass .g-shine{stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.8}
.ca-glass .g-pvb{fill:#F2E3B6}
.ca-glass .g-lowe{fill:#B98A2E}
.ca-glass .g-bead{fill:#3B4652}
.ca-glass .g-frame{fill:#C9CED4;stroke:#8A939C;stroke-width:1}
.ca-glass .g-frame-l{stroke:#8A939C;stroke-width:1}
.ca-glass .g-anchor{stroke:#5B636B;stroke-width:4;stroke-linecap:round}
.ca-glass .g-head{fill:#2E3438}
.ca-glass .g-wall{fill:#D9D3C6}
.ca-sw.g0,.ca-sw.g2{background:#CFE8F2}.ca-sw.g1{background:#F2E3B6}.ca-sw.g3{background:#B98A2E}.ca-sw.g4{background:#3B4652}.ca-sw.g5{background:#C9CED4}.ca-sw.g6{background:#5B636B}
.ca-glass.open .cl[data-i="0"]{transform:translate(18px,-14px)}.ca-glass.open .cl[data-i="1"]{transform:translate(18px,-5px)}
.ca-glass.open .cl[data-i="2"]{transform:translate(18px,4px)}.ca-glass.open .cl[data-i="3"]{transform:translate(18px,10px)}
.ca-glass.open .cl[data-i="4"],.ca-glass.open .cl[data-i="5"],.ca-glass.open .cl[data-i="6"]{transform:none}
.ca-x{color:var(--mute);margin-top:6px;padding-bottom:14px}
.ca-glass .c-lab{font:500 13px var(--f);fill:var(--mute)}
.ca-glass .c-arrow{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ca-glass .ca-fig{padding:clamp(18px,2.6vw,40px)}

/* ---------- installs rail ---------- */
.rr-track{display:flex;gap:clamp(14px,1.8vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 4px;cursor:grab}
.rr-track::-webkit-scrollbar{display:none}
.rr-track.drag{cursor:grabbing;scroll-snap-type:none}
.rr-c{flex:none;width:clamp(260px,32vw,440px);margin:0;scroll-snap-align:start}
.rr-c img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--r,0);user-select:none;-webkit-user-drag:none}
.rr-c figcaption{margin-top:12px}
.rr-c b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.dir-b .rr-c b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.02em;font-weight:500}
.rr-c span{display:block;font-size:14px;color:var(--mute);margin-top:2px}
.rr-ft{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px}
.rr-ft p{font-size:13.5px;color:var(--mute)}
.rr-nav{display:flex;gap:8px}
.rr-nav button{width:44px;height:44px;border:1px solid var(--rule-2);border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .25s,color .25s,border-color .25s;cursor:pointer}
.rr-nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.rr-nav svg{width:15px;height:15px}
.dir-b .rr-nav button{border-radius:4px}

/* ---------- brand wall ---------- */
.bw-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.bw-grid h2{font-size:clamp(30px,3.4vw,50px)}
.bw-grid .l{font-size:17px;line-height:1.55;color:var(--mute);margin-top:18px;max-width:46ch}
.bw{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-2);border-left:1px solid var(--rule-2)}
.bw li{border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);padding:clamp(18px,2.4vw,30px) 12px;text-align:center;font-weight:600;font-size:clamp(15px,1.4vw,19px);letter-spacing:-.01em;color:var(--ink);transition:background .3s var(--ease),color .3s}
.bw li:hover{background:var(--ink);color:#fff}
.dir-b .bw li{font-family:var(--fd);text-transform:uppercase;letter-spacing:.04em;font-weight:500;background:#fff}
.dir-b .bw li:hover{background:var(--ink);color:#fff}
@media (max-width:900px){.bw-grid{grid-template-columns:1fr}}
@media (max-width:560px){.bw{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- commercial band (A) and real-photo tags ---------- */
.cm-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.cm-ph{margin:0;position:relative}
.cm-ph img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:var(--r,0)}
.cm-ph figcaption,.real-tag{position:absolute;left:12px;bottom:12px;padding:5px 9px;font-size:12px;font-weight:600;background:rgba(255,255,255,.92);color:var(--ink);border-radius:var(--r,0)}
.cm-grid h2{font-size:clamp(30px,3.4vw,50px)}
.cm-grid p{font-size:17px;line-height:1.55;color:var(--mute);margin:18px 0 26px}
@media (max-width:900px){.cm-grid{grid-template-columns:1fr}}
.pg-gal figure{position:relative}
.pg-w figcaption em{font-style:normal;font-size:12px;font-weight:600;margin-left:6px;padding:2px 7px;background:var(--bg-2);border-radius:var(--r,0)}

/* A: shield next to the wordmark */
.dir-a .logo .mono{width:30px;height:auto}
/* width/height attributes would otherwise set the height; let the aspect ratio win */
.rr-c img,.cm-ph img,.qc-ph img{height:auto}
.rr-c img{object-position:50% 40%}

/* ---------- no background textures on either concept: flat sections, the photography carries it ---------- */
.tex-breeze :is(#services,#journal,.faq,.est,.pg-intro,.pg-svc-list,.pg-areas,.fsv,.ffaq,.fwhy,.fband,.frev,#_)::after{content:none}
/* A: no background texture. Clean paper sections; the photography carries the Florida feel. */
.tex-palm :is(#services,#journal,.faq,.est,.pg-intro,.pg-svc-list,.pg-areas,.rm-sec,.mn-sec,.cr-sec,#_)::after{content:none}


/* ---------- rooms ---------- */
.rm{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(16px,2vw,28px)}
.rm figure{margin:0}
.rm img{width:100%;height:auto;object-fit:cover;display:block;border-radius:var(--r,0)}
.rm-b img{aspect-ratio:4/3.2}
.rm-r{display:grid;gap:clamp(16px,2vw,28px)}
.rm-s img{aspect-ratio:16/9.4}
.rm figcaption{margin-top:12px}
.rm figcaption b{display:block;font-size:17px;font-weight:600;letter-spacing:-.015em}
.dir-b .rm figcaption b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.02em;font-weight:500}
.rm figcaption span{display:block;font-size:14.5px;line-height:1.5;color:var(--mute);margin-top:3px;max-width:52ch}
@media (max-width:900px){.rm{grid-template-columns:1fr}.rm-b img{aspect-ratio:4/3}}

/* ---------- impact test: dark stage on A ---------- */
.dir-a .it-sec{background:var(--dark);color:#fff;--ink:#fff;--card:rgba(255,255,255,.05);--rule-2:rgba(255,255,255,.22);--mute:rgba(255,255,255,.66)}
.dir-a .it-sec .sw-ind{background:#fff}
.dir-a .it-sec .sw-t.on{color:var(--dark)}
.dir-a .it-sec .sw-t:hover:not(.on){color:#fff}
.dir-a .it-sec .sec-head p{color:rgba(255,255,255,.72)}

/* ---------- insurance + financing ---------- */
.mn{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,3.6vw,56px);align-items:start}
.mn-ins h2{font-size:clamp(32px,3.8vw,56px)}
.mn-ins>p{font-size:17px;line-height:1.55;color:var(--mute);margin:18px 0 24px;max-width:58ch}
.mi{list-style:none;border-top:1px solid var(--rule-2)}
.mi li{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--rule-2);color:var(--mute)}
.mi li b{display:block;font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.dir-b .mi li b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.02em;font-weight:500}
.mi li small{display:block;font-size:13.5px}
.mi-n{font-size:13px;font-variant-numeric:tabular-nums}
.mi li.hl{background:var(--card);margin:0 -14px;padding:16px 14px;border-radius:var(--r,0);box-shadow:0 0 0 1.5px var(--ink)}
.mi li.hl em{font-style:normal;font-size:12.5px;font-weight:600;padding:5px 10px;background:var(--ink);color:#fff;border-radius:var(--r,999px);white-space:nowrap}
.dir-b .mi li.hl em{background:var(--accent);color:var(--ink)}
.mn-n{font-size:14.5px;color:var(--mute);margin-top:18px}
.mn-fin{background:var(--card);border:1px solid var(--rule);padding:clamp(22px,2.6vw,36px);border-radius:var(--r,0);position:sticky;top:calc(var(--hdr-h,80px) + 24px)}
.mn-fin h3{font-size:clamp(24px,2.2vw,32px);font-weight:600;letter-spacing:-.025em}
.dir-b .mn-fin h3{font-family:var(--fd);text-transform:uppercase;letter-spacing:.01em;font-weight:500}
.mn-fin p{font-size:16px;line-height:1.55;color:var(--mute);margin:12px 0}
.mn-fin .btn{margin-top:10px}
@media (max-width:900px){.mn{grid-template-columns:1fr}.mn-fin{position:static}}

/* ---------- hurricane season band ---------- */
.ss{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3.4vw,56px);align-items:center;padding:clamp(28px,3.4vw,48px);background:var(--dark);color:#fff;border-radius:var(--r,0)}
.dir-b .ss{background:var(--ink)}
.ss-n{display:flex;flex-direction:column;min-width:150px}
.ss-n b{font-size:clamp(64px,7.6vw,112px);font-weight:600;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums;color:var(--accent)}
.dir-b .ss-n b{font-family:var(--fd);font-weight:600;letter-spacing:0}
.ss-n span{font-size:14px;color:rgba(255,255,255,.72);margin-top:8px;max-width:20ch;line-height:1.35}
.ss-t h2{font-size:clamp(24px,2.5vw,36px);color:#fff}
.ss-t p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.74);margin-top:10px;max-width:60ch}
@media (max-width:900px){.ss{grid-template-columns:1fr}}

/* ---------- credentials ---------- */
.cr{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule-2)}
.cr li{display:flex;flex-direction:column;gap:4px;padding:22px 20px 24px 0;border-right:1px solid var(--rule-2);margin-right:20px}
.cr li:last-child{border-right:0;margin-right:0}
.cr small{font-size:13px;color:var(--mute)}
.cr b{font-size:clamp(24px,2.3vw,34px);font-weight:600;letter-spacing:-.035em;line-height:1.05;margin-top:6px}
.dir-b .cr b{font-family:var(--fd);letter-spacing:0;font-weight:600}
.cr span{font-size:14px;color:var(--mute)}
.cr a,.cr .cr-l{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:14px;font-size:14px;font-weight:600;color:var(--ink)}
.cr a svg{width:12px;height:12px;transition:transform .25s var(--ease)}
.cr a:hover svg{transform:translateX(3px)}
.cr .ph-note{margin-top:auto;align-self:flex-start}
@media (max-width:1100px){.cr{grid-template-columns:repeat(3,minmax(0,1fr))}.cr li:nth-child(3){border-right:0;margin-right:0}}
@media (max-width:640px){.cr{grid-template-columns:1fr 1fr}.cr li{border-right:0;margin-right:0;border-bottom:1px solid var(--rule-2);padding-right:12px}}

html{overflow-x:clip}
.tex-palm :is(#services,#journal,.faq,.est,.pg-intro,.pg-svc-list,.pg-areas,.rm-sec,.mn-sec,.cr-sec){overflow:clip}

h1,h2,h3{text-wrap:balance}
/* A uses their logo as-is */
.dir-a .logo-cur img{display:block;height:58px;width:auto}
.dir-a .hdr.scrolled .logo-cur img{height:48px}
.fx-cur img{display:block;width:200px;height:auto}
.mark{border-radius:6px}
@media (max-width:640px){.dir-a .logo-cur img{height:46px}}

/* ---------- A footer: sand paper ---------- */
.fm{position:relative;isolation:isolate;overflow:clip;background:#E9E3D6;color:var(--ink);padding:clamp(56px,6vw,96px) 0 0}
.fm::after{content:none}
.fm-top{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-bottom:clamp(36px,4vw,56px);border-bottom:1px solid var(--rule-2)}
.fm-logo img{display:block;width:clamp(170px,16vw,230px);height:auto}
.fm-call{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.fm-call small{font-size:14px;color:var(--mute)}
.fm-call>a:not(.fm-mail){font-size:clamp(36px,4.4vw,64px);font-weight:600;letter-spacing:-.045em;line-height:1.05;color:var(--ink)}
.fm-mail{font-size:15px;color:var(--mute);margin-top:6px}
.fm-mail:hover,.fm-grid a:hover{color:var(--ink)}
.fm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding:clamp(36px,4vw,56px) 0}
.fm-grid h4{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:14px}
.fm-grid nav{display:flex;flex-direction:column;gap:9px}
.fm-grid a,.fm-visit p{font-size:15.5px;color:var(--mute);transition:color .25s}
.fm-visit{display:flex;flex-direction:column;gap:10px}
.fm-visit>a{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.fm-visit>a svg{width:12px;height:12px}
.fm-soc{display:flex;gap:16px;margin-top:6px}
.fm-creds{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-2)}
.fm-creds li{border-right:1px solid var(--rule-2)}
.fm-creds li:last-child{border-right:0}
.fm-creds a,.fm-creds span{display:flex;flex-direction:column;gap:2px;padding:20px 20px 20px 0;font-size:13.5px;color:var(--mute)}
.fm-creds li+li a,.fm-creds li+li span{padding-left:20px}
.fm-creds b{font-size:20px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.fm-creds a:hover b{text-decoration:underline;text-underline-offset:3px}
.fm-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0 26px;border-top:1px solid var(--rule-2);font-size:13px;color:var(--mute)}
.fm-bot .fx-top{color:var(--ink)}
@media (max-width:900px){.fm-grid{grid-template-columns:1fr 1fr}.fm-creds{grid-template-columns:1fr 1fr}.fm-creds li:nth-child(2){border-right:0}.fm-creds li:nth-child(n+3){border-top:1px solid var(--rule-2)}.fm-creds li:nth-child(3) a,.fm-creds li:nth-child(3) span{padding-left:0}}
@media (max-width:640px){.fm-top{flex-direction:column;align-items:flex-start}.fm-call{align-items:flex-start;text-align:left}.fm-bot{flex-direction:column;align-items:flex-start;padding-bottom:110px}}
@media (prefers-reduced-motion:reduce){.fm::after{animation:none}}

/* ---------- section rhythm ----------
   Tinted and dark sections keep full padding. Where two plain sections meet, the second drops its top padding,
   so the space between them is one section's padding, not two (it was ~290px on desktop). */
.dir-a main>.faq{padding-top:clamp(72px,8vw,120px)}
.dir-b .ffaq{padding-top:clamp(72px,8vw,116px)}
.dir-a main>.sec:not(.it-sec,.napkin,.areas,.est)+.sec:not(.it-sec,.napkin,.areas,.est){padding-top:24px}
.dir-b main>.fsec:not(.fwhy,.frev,.pg-intro,.fest)+.fsec:not(.fwhy,.frev,.pg-intro,.fest){padding-top:24px}
.inner main>.sec.pg-gal-sec,.inner main>.fsec.pg-gal-sec{padding-top:clamp(40px,5vw,72px)}

/* map sections: copy starts at the top instead of centering against the tall coast map */
.areas-grid,.farea-in{align-items:start}
/* one logo at a time: reversed over the dark hero, normal once the header turns light */
.dir-a .logo-cur img.on-dark{display:none}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .logo-cur img.on-light{display:none}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .logo-cur img.on-dark{display:block}
@media (max-width:640px){.dir-a .faq{padding-top:64px}.dir-b .ffaq{padding-top:60px}}
.pg-rev .rq{margin-top:0}
.dir-a main>.sec{padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(72px,8vw,120px)}
@media (max-width:640px){.dir-a main>.sec{padding-top:64px;padding-bottom:64px}.dir-a main>.faq{padding-top:64px}}

/* ---------- A hero: late afternoon fades to blue hour, interior lights come up behind the glass ---------- */
.dir-a .hero-bg .lit{transition:opacity 5.2s cubic-bezier(.45,0,.25,1)}


/* ---------- B hero: shutters-and-aluminum before, wiped once to the impact-window after ---------- */
.vh-v .bx-after{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path 2.1s cubic-bezier(.65,0,.25,1)}
.vh-v .bx-after img{width:100%;height:100%;object-fit:cover}
.vh-v .bx-line{position:absolute;top:0;bottom:0;left:0;width:2px;background:rgba(255,255,255,.95);box-shadow:0 0 18px rgba(255,255,255,.7);opacity:0;transform:translateX(0);transition:transform 2.1s cubic-bezier(.65,0,.25,1),opacity .4s;z-index:1;pointer-events:none}
.bx-on .vh-v .bx-after{clip-path:inset(0 0 0 0)}
.bx-run .vh-v .bx-line{opacity:1}
.bx-on .vh-v .bx-line{transform:translateX(var(--bx-w,100vw))}
.bx-done .vh-v .bx-line{opacity:0}
.bx-tag{position:absolute;z-index:3;right:clamp(14px,2vw,28px);top:clamp(14px,2vw,24px);display:flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;border-radius:4px;background:rgba(6,24,51,.72);color:#fff;font:500 13px/1 var(--f);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bx-tag b{font-family:var(--fd);text-transform:uppercase;letter-spacing:.06em;font-weight:500;font-size:13px}
.bx-tag button{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:3px;background:rgba(255,255,255,.14);color:#fff;font:500 12.5px/1 var(--f);cursor:pointer;transition:background .25s}
.bx-tag button:hover{background:rgba(255,255,255,.26)}
.bx-tag svg{width:13px;height:13px}
@media (max-width:640px){.bx-tag{top:12px;bottom:auto;right:12px}}
@media (prefers-reduced-motion:reduce){.vh-v .bx-after{clip-path:none;transition:none}.vh-v .bx-line{display:none}}
/* A hero shade: navy, a touch lighter so the afternoon frame reads as afternoon; headline side stays dark enough for white type */
@media (min-width:641px){.dir-a .hero .hero-bg::after{background:linear-gradient(90deg,rgba(8,18,32,.78) 0%,rgba(8,18,32,.6) 38%,rgba(8,18,32,.16) 66%,rgba(8,18,32,0) 85%),linear-gradient(0deg,rgba(8,18,32,.5),rgba(8,18,32,0) 32%)}}

/* ---------- B hero, Mighty Dog style: the photo stays clear; headline, one button and the phone sit low on the left ---------- */
@media (min-width:641px){
  .dir-b .vh{justify-content:flex-end}
  .dir-b .vh-in{grid-template-columns:minmax(0,760px);align-items:end;padding-top:clamp(120px,22vh,260px);padding-bottom:clamp(40px,6vh,72px)}
  .dir-b .vh::before{background:linear-gradient(90deg,rgba(6,20,40,.8) 0%,rgba(6,20,40,.5) 38%,rgba(6,20,40,.08) 62%,rgba(6,20,40,0) 80%),linear-gradient(0deg,rgba(6,20,40,.82) 0%,rgba(6,20,40,.25) 38%,rgba(6,20,40,0) 60%)}
  .dir-b .vh h1{max-width:11em}
}
.vh-act{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;margin-top:clamp(22px,2.4vw,32px)}
.vh-cta{font-size:17px;padding:18px 28px}
.vh-ph{display:inline-flex;align-items:center;gap:12px;color:#fff}
.vh-ph svg{width:22px;height:22px;flex:none;padding:10px;box-sizing:content-box;border:1px solid rgba(255,255,255,.4);border-radius:4px;transition:background .25s,border-color .25s}
.vh-ph:hover svg{background:rgba(255,255,255,.12);border-color:#fff}
.vh-ph span{display:flex;flex-direction:column;font-family:var(--fd);font-size:24px;font-weight:600;letter-spacing:.02em;line-height:1.05}
.vh-ph small{font-family:var(--f);font-size:12.5px;font-weight:400;letter-spacing:0;color:rgba(255,255,255,.75);margin-bottom:3px}
@media (max-width:640px){
  .vh-act{flex-direction:column;align-items:stretch;gap:14px}
  .vh-cta{justify-content:center}
  .vh-ph{justify-content:center}
}

/* ---------- review fixes ---------- */
/* phone hero photos: a firmer scrim where the headline and breadcrumb sit */
@media (max-width:640px){html body .ph-bg::after{background:linear-gradient(180deg,rgba(8,18,32,.5) 0,rgba(8,18,32,.15) 22%,rgba(8,18,32,.3) 42%,rgba(8,18,32,.82) 66%,var(--dark) 92%)}}
@media (min-width:641px){.dir-a .phero .ph-bg::after{background:linear-gradient(90deg,rgba(8,18,32,.84) 0%,rgba(8,18,32,.66) 42%,rgba(8,18,32,.2) 72%,rgba(8,18,32,.05)),linear-gradient(0deg,rgba(8,18,32,.55),rgba(8,18,32,0) 40%)}}
/* B hero: a little more shade under the headline */
@media (min-width:641px){.dir-b .vh::before{background:linear-gradient(90deg,rgba(6,20,40,.86) 0%,rgba(6,20,40,.6) 40%,rgba(6,20,40,.12) 64%,rgba(6,20,40,0) 82%),linear-gradient(0deg,rgba(6,20,40,.86) 0%,rgba(6,20,40,.3) 40%,rgba(6,20,40,0) 62%)}}
@media (max-width:640px){html body.dir-b .vh::before{background:linear-gradient(180deg,rgba(6,20,40,.2) 0,rgba(6,20,40,.1) 30%,rgba(6,20,40,.55) 52%,rgba(6,20,40,.9) 72%,var(--dark) 92%)}}
/* B top bar at tablet widths: keep it to one line */
@media (max-width:1100px){.dir-b .ub-in>span{display:none}.dir-b .ub-in{justify-content:flex-end}}
@media (max-width:900px){.dir-b .ub .ub-r{display:none}}
.dir-b .ub a,.dir-b .ub .ub-r{white-space:nowrap}
/* installs rail: first card lines up with the content column */
.rr-track{margin:0;padding:0 0 4px;scroll-padding-inline:0}
/* map: labels and pills don't wrap */
.area-list span,.area-list b{white-space:nowrap}
.map .m-road{opacity:.55}
/* booking panel: their real logo */
.bk-logo .bk-lg{display:block;width:170px;height:auto;margin-bottom:8px}
/* credentials: the arrow stays with its text */
.cr a{display:inline;line-height:1.5}.cr a svg{display:inline;vertical-align:-1px;margin-left:4px}
.cr li>a{margin-top:auto;padding-top:14px}
/* phones: the floating bars never cover the last lines of the page */
@media (max-width:640px){.ff-bot{padding-bottom:120px}.fm-bot{padding-bottom:120px}}
/* keyboard hint only where there's a keyboard */
@media (hover:none),(pointer:coarse){.start-foot span:last-child{display:none}}
/* phones: comfortable tap targets */
@media (max-width:640px){
  .crumbs a{display:inline-block;padding:10px 0}
  .fm-grid nav a,.ff nav a{display:block;padding:8px 0}
  .fm-grid nav{gap:2px}
  .area-list a,.fa-list a{min-height:44px}
  .proof a,.hero .proof a{display:inline-block;padding:10px 0}
  .dir-b .ub a{display:inline-block;padding:10px 0}
}
.tf-tz a{white-space:nowrap}

/* ---------- B hero: light panel left, the photo cut on a diagonal at right, gold and sky stripes along the cut ---------- */
.mh{position:relative;overflow:hidden;background:#F1F4F8;min-height:min(calc(100svh - 126px),820px);display:flex;align-items:center}
.mh-art{position:absolute;inset:0 0 0 auto;width:60%;--cut:clamp(140px,13vw,240px)}
.mh-s,.mh-ph{position:absolute;top:0;bottom:0;right:0;clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%)}
.mh-ph{left:0}
.mh-s1{left:-56px;background:var(--lime)}
.mh-s2{left:-28px;background:#5EB7EA}
.mh-ph picture,.mh-ph img{display:block;width:100%;height:100%}
.mh-ph img{object-fit:cover;object-position:62% 50%;transform:scale(1.04);transition:transform 2.4s var(--ease)}
.mh-ready .mh-ph img{transform:none}
.mh-in{position:relative;z-index:2;width:100%;padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(120px,16vh,170px)}
.mh-copy{max-width:min(46%,620px)}
.mh h1{font-family:var(--fd);text-transform:uppercase;font-weight:700;color:var(--forest);font-size:clamp(58px,7.2vw,124px);line-height:.9;letter-spacing:.005em}
.mh h1 span{display:block;color:var(--green)}
.mh h1::before{display:none}
.mh-sub{font-family:var(--fd);text-transform:uppercase;font-weight:500;letter-spacing:.02em;font-size:clamp(20px,1.9vw,30px);line-height:1.15;color:var(--forest);margin-top:clamp(16px,1.8vw,26px);max-width:18em}
.mh-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.6vw,36px)}
.mh-sec{background:#fff;color:var(--forest);box-shadow:inset 0 0 0 2px var(--forest)}
.mh-sec:hover{background:var(--forest);color:#fff}

/* info card overlapping the hero's bottom edge, then the navy service band */
.mi-sec{position:relative;z-index:3;margin-top:clamp(-110px,-8vw,-80px)}
.mi-card{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;align-items:center;background:#fff;padding:clamp(22px,2.4vw,34px) clamp(22px,3vw,48px);box-shadow:0 24px 60px -30px rgba(10,44,87,.45)}
.mi-c{display:flex;align-items:center;gap:14px;color:var(--forest)}
.mi-c:first-child{flex-direction:column;align-items:flex-start;gap:8px}
.mi-c b{font-family:var(--fd);text-transform:uppercase;font-weight:600;letter-spacing:.02em;font-size:clamp(16px,1.3vw,20px);line-height:1.2}
.mi-c span{display:block;font-size:14px;color:var(--mute);margin-top:3px}
.mi-c>svg{width:26px;height:26px;flex:none;color:var(--green)}
.mi-ph{display:inline-flex;align-items:center;gap:10px;color:var(--forest)}
.mi-ph svg{width:20px;height:20px;color:var(--green)}
.mi-ph span{font-family:var(--fd);font-weight:600;font-size:clamp(22px,1.9vw,28px);letter-spacing:.02em;color:var(--forest);margin:0}
.mi-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--forest);border-bottom:6px solid #5EB7EA}
.mi-band a{display:flex;align-items:center;gap:16px;padding:clamp(20px,2.2vw,30px) clamp(18px,2.4vw,36px);color:#fff;font-family:var(--fd);text-transform:uppercase;font-weight:600;letter-spacing:.03em;font-size:clamp(15px,1.3vw,20px);transition:background .3s var(--ease)}
.mi-band a+a{border-left:1px solid rgba(255,255,255,.14)}
.mi-band a:hover{background:var(--green)}
.mi-band svg{width:40px;height:40px;flex:none;fill:none;stroke:var(--lime);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dir-b .mi-sec+.fsec{padding-top:clamp(64px,7vw,104px)}

/* angled collage of real installs */
.mc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.mc-art{position:relative;padding-bottom:18%}
.mc-art figure{margin:0;overflow:hidden}
.mc-art img{display:block;width:100%;height:100%;object-fit:cover}
.mc-a{width:84%;aspect-ratio:4/3.1;clip-path:polygon(0 0,100% 0,100% 82%,88% 100%,0 100%)}
.mc-b{position:absolute;right:0;bottom:0;width:54%;aspect-ratio:4/3;border:8px solid #fff;clip-path:polygon(0 0,100% 0,100% 84%,86% 100%,0 100%)}
.mc-t1{position:absolute;left:calc(84% - 64px);top:calc(84% * .775 * .82 - 4px);width:0;height:0}
.mc-t1,.mc-t2{display:none}
.mc-a::after{content:""}
.mc-art::before{content:"";position:absolute;left:-10px;top:-10px;width:120px;height:120px;background:linear-gradient(135deg,var(--lime) 0 50%,transparent 50%);z-index:-1}
.mc-art::after{content:"";position:absolute;right:-10px;bottom:-10px;width:120px;height:120px;background:linear-gradient(315deg,#5EB7EA 0 50%,transparent 50%);z-index:-1}
.mc-copy p{font-size:17px;line-height:1.55;color:var(--mute);margin:18px 0 22px}
.mc-list{list-style:none;display:grid;gap:14px;margin-bottom:28px}
.mc-list li{display:flex;flex-direction:column;font-size:15px;color:var(--mute);padding-left:18px;border-left:3px solid var(--lime)}
.mc-list b{font-family:var(--fd);text-transform:uppercase;font-weight:500;letter-spacing:.03em;font-size:17px;color:var(--forest)}

@media (max-width:900px){
  .mc{grid-template-columns:1fr}
  .mi-card{grid-template-columns:1fr 1fr}.mi-c:first-child{grid-column:1/-1}
  .mi-band{grid-template-columns:1fr 1fr}.mi-band a:nth-child(3){border-left:0}.mi-band a:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
}
@media (max-width:640px){
  .mh{display:block;min-height:0;background:#F1F4F8}
  .mh-art{position:relative;width:100%;height:min(58vw,300px);--cut:0px}
  .mh-s,.mh-ph{clip-path:polygon(0 0,100% 0,100% 78%,0 100%)}
  .mh-s1{left:0;top:0;bottom:-18px}.mh-s2{left:0;top:0;bottom:-9px}
  .mh-in{padding-top:22px;padding-bottom:110px}
  .mh-copy{max-width:none}
  .mh h1{font-size:clamp(46px,13vw,60px)}
  .mh-act{flex-direction:column}.mh-act .fbtn{width:100%}
  .mi-sec{margin-top:-84px}
  .mi-card{grid-template-columns:1fr;gap:16px}
  .mi-band a{padding:16px;gap:12px;font-size:14.5px}.mi-band svg{width:30px;height:30px}
  .mc-art::before,.mc-art::after{width:70px;height:70px}
}

/* ---------- calmer motion: one soft glide, shorter moves, a slight stagger ---------- */
:root{--ease:cubic-bezier(.28,.11,.32,1)}
.rv{transform:translateY(12px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.m-on .m-img{clip-path:inset(4% 0 4% 0);transition:clip-path 1.4s var(--ease)}
:where(.m-on .m-img:not(.in)) img{transform:scale(1.04)}
:where(.m-on .m-img) img{transition:transform 1.8s var(--ease)}
.m-on .m-h{transform:translateY(.18em);transition:clip-path 1.2s var(--ease),transform 1.2s var(--ease)}
.intro{animation-duration:1.2s}
@keyframes intro{from{opacity:0;transform:translateY(12px)}}
:is(.tiles,.pg-cards,.cr,.why,.fp,.est-steps,.mi-band,.pg-svcs,.pg-area-grid,.bw)>.rv:nth-child(2){transition-delay:.07s}
:is(.tiles,.pg-cards,.cr,.why,.fp,.est-steps,.mi-band,.pg-svcs,.pg-area-grid,.bw)>.rv:nth-child(3){transition-delay:.14s}
:is(.tiles,.pg-cards,.cr,.why,.fp,.est-steps,.mi-band,.pg-svcs,.pg-area-grid,.bw)>.rv:nth-child(4){transition-delay:.21s}
:is(.tiles,.pg-cards,.cr,.why,.fp,.est-steps,.mi-band,.pg-svcs,.pg-area-grid,.bw)>.rv:nth-child(n+5){transition-delay:.28s}
/* frame picker: a soft crossfade, no wipe line */
.cf-im{transition:opacity 1.1s var(--ease)}
.cf-im.in{clip-path:none!important;animation:none!important}
.cf-line{display:none}
.sw-im{transition:opacity 1.6s var(--ease),transform 9s linear}
@media (prefers-reduced-motion:reduce){.rv,.m-on .m-img,.m-on .m-h{transition:none!important}}
/* B mega menu card: white type on navy */
.dir-b .mm-cta h3{color:#fff}
.dir-b .mm-cta li{color:rgba(255,255,255,.86)}
/* B estimate band: navy tint, not green */
.dir-b .fest{background:linear-gradient(rgba(6,20,40,.86),rgba(6,20,40,.9)),url(img/aerial-1200.webp) center/cover}

/* ---------- B motion: the hero is built in order on load, then sections enter with direction as you scroll ---------- */
@media (prefers-reduced-motion:no-preference){
  /* once the photo has downloaded (sp.js adds .mh-ready): the photo fades up and settles, then the
     two stripes slide out from behind its diagonal edge. They stay thin the whole way. */
  .dir-b .mh-ph{animation:mhPhoto 1.4s var(--ease) both}
  .dir-b .mh-s1{animation:mhStripe 1.1s var(--ease) .5s both}
  .dir-b .mh-s2{animation:mhStripe 1.1s var(--ease) .38s both}
  .dir-b .mh:not(.mh-ready) :is(.mh-ph,.mh-s1,.mh-s2){animation-play-state:paused}
  @keyframes mhPhoto{from{opacity:0}}
  @keyframes mhStripe{from{opacity:0;transform:translateX(64px)}}
  @media (max-width:640px){@keyframes mhStripe{from{opacity:0;transform:translateY(-14px)}}}
  .dir-b .mh-copy.intro{animation:none}
  .dir-b .mh h1{animation:mhLeft 1s var(--ease) .1s both}
  .dir-b .mh-sub{animation:mhLeft 1s var(--ease) .22s both}
  .dir-b .mh-act{animation:mhUp .9s var(--ease) .34s both}
  .dir-b .mi-card{animation:mhUp 1s var(--ease) .5s both}
  .dir-b .mi-band a{animation:mhUp .8s var(--ease) both}
  .dir-b .mi-band a:nth-child(1){animation-delay:.62s}.dir-b .mi-band a:nth-child(2){animation-delay:.7s}
  .dir-b .mi-band a:nth-child(3){animation-delay:.78s}.dir-b .mi-band a:nth-child(4){animation-delay:.86s}
  @keyframes mhLeft{from{opacity:0;transform:translateX(-28px)}}
  @keyframes mhUp{from{opacity:0;transform:translateY(22px)}}
  /* service icons draw their lines once the band is in */
  .dir-b .mi-band svg *{stroke-dasharray:140;stroke-dashoffset:140;animation:mhDraw 1.4s var(--ease) .95s forwards}
  @keyframes mhDraw{to{stroke-dashoffset:0}}

  /* the gold bar above each heading grows in with the heading */
  .dir-b .m-h::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .25s}
  .dir-b .m-h.in::before{transform:none}
  /* photo tiles rise, list rows slide in from the right */
  .dir-b .why li.rv{transform:translateX(28px)}
  .dir-b .why li.rv.in{transform:none}
  .dir-b .why li.rv:nth-child(2){transition-delay:.08s}.dir-b .why li.rv:nth-child(3){transition-delay:.16s}.dir-b .why li.rv:nth-child(4){transition-delay:.24s}
  /* collage: the big photo slides in from the left, the small one from the right, the corner accents grow from their corners */
  .dir-b .mc-art .mc-a{opacity:0;transform:translateX(-40px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
  .dir-b .mc-art .mc-b{opacity:0;transform:translate(40px,30px);transition:opacity 1s var(--ease) .2s,transform 1.2s var(--ease) .2s}
  .dir-b .mc-art::before,.dir-b .mc-art::after{transform:scale(0);transition:transform .9s var(--ease) .45s}
  .dir-b .mc-art::before{transform-origin:0 0}.dir-b .mc-art::after{transform-origin:100% 100%}
  .dir-b .mc-art.in .mc-a,.dir-b .mc-art.in .mc-b{opacity:1;transform:none}
  .dir-b .mc-art.in::before,.dir-b .mc-art.in::after{transform:none}
  /* navy band: copy from the left, button from the right */
  .dir-b .fband-in>div{opacity:0;transform:translateX(-30px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
  .dir-b .fband-in>.fbtn{opacity:0;transform:translateX(30px);transition:opacity 1s var(--ease) .15s,transform 1.1s var(--ease) .15s}
  .dir-b .fband-in.in>div,.dir-b .fband-in.in>.fbtn{opacity:1;transform:none}
}

/* configurator swatches on phones: three across, always fully visible (no sideways scroller) */
@media (max-width:640px){
  .cf-sws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;margin:0;padding:0}
  .cf-sw{gap:8px;padding:6px 10px 6px 6px;min-height:44px}
  .cf-sw i{width:26px;height:26px}
  .cf-sw b{font-size:14px}
  .cf-sw.on small{display:none}
}

/* ---------- A: a faint paper grain on the cream and sand backgrounds only ----------
   It sits in the background, so photos, white cards and type cover it and stay perfectly clean.
   Navy sections get none. B has no grain: its look is bold, clean colour. */
body.dir-a,.dir-a :is(#work,#consult,.pg-intro,.fm){background-image:url(tex/grain-a.webp);background-size:180px 180px}

/* A: the arched window of a Gulf Coast Mediterranean home, used as a frame on two portrait photos */
.dir-a .pimg{border-radius:50% 50% 0 0/43.5% 43.5% 0 0}
.dir-a .rq-ph{border-radius:50% 50% 0 0/40% 40% 0 0}
@media (max-width:900px){.dir-a .rq-ph{aspect-ratio:4/4.6;border-radius:50% 50% 0 0/43.5% 43.5% 0 0}}

/* B: the hero's diagonal and twin stripes come back on the estimate band, so the page closes the way it opens */
.dir-b .fest{position:relative;--dg:clamp(36px,5vw,72px);clip-path:polygon(0 var(--dg),100% 0,100% 100%,0 100%);padding-top:calc(var(--dg) + clamp(56px,6vw,96px))}
.dir-b .fest::before,.dir-b .fest::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--dg) + 16px);pointer-events:none;z-index:1}
.dir-b .fest::before{background:var(--lime);clip-path:polygon(0 var(--dg),100% 0,100% 8px,0 calc(var(--dg) + 8px))}
.dir-b .fest::after{background:#5EB7EA;clip-path:polygon(0 calc(var(--dg) + 8px),100% 8px,100% 15px,0 calc(var(--dg) + 15px))}

/* =====================================================================
   NAV BARS
   ===================================================================== */
/* the half-drawn scroll-progress line read as a broken border: gone on both */
.hdr::after{content:none}

/* A: two layers that crossfade on one timing. A soft dark fade over the hero, and a frosted
   cream bar once you scroll (or open a menu). Links, logo and button change on the same clock,
   so there is no grey in-between state. */
.dir-a .hdr,body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;isolation:isolate}
.dir-a .hdr::before,.dir-a .hdr::after{content:"";position:absolute;inset:0;width:auto;height:auto;z-index:-1;pointer-events:none;transition:opacity .5s var(--ease)}
.dir-a .hdr::before{background:rgba(243,241,236,.88);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);box-shadow:0 1px 0 rgba(15,34,54,.08);opacity:0}
.dir-a .hdr::after,body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled)::after{background:linear-gradient(180deg,rgba(6,10,7,.5),rgba(6,10,7,0));opacity:1}
.dir-a .hdr.scrolled::before,body.dir-a.mm-on .hdr::before,body.dir-a.menu-open .hdr::before{opacity:1}
.dir-a .hdr.scrolled::after,body.dir-a.mm-on .hdr::after,body.dir-a.menu-open .hdr::after{opacity:0}
.dir-a .hdr :is(.nav>a,.nav>button,.hdr-ph){transition:color .45s var(--ease),background-color .25s}
.dir-a .hdr .hdr-r .btn{transition:background-color .45s var(--ease),color .45s var(--ease),transform .2s}
.dir-a .hdr .burger{transition:border-color .45s var(--ease)}
.dir-a .hdr .burger i{transition:transform .3s,top .3s,background-color .45s var(--ease)}
/* logo: both versions stacked and crossfaded, the size eases down as the bar settles */
.dir-a .logo-cur{position:relative}
.dir-a .logo-cur img{transition:opacity .45s var(--ease),height .45s var(--ease)}
.dir-a .logo-cur img.on-light,body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .logo-cur img.on-light{display:block;opacity:1}
.dir-a .logo-cur img.on-dark,body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .logo-cur img.on-dark{display:block;position:absolute;left:0;top:0;opacity:0}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .logo-cur img.on-light{opacity:0}
body.dir-a:not(.mm-on):not(.menu-open) .hdr:not(.scrolled) .logo-cur img.on-dark{opacity:1}

/* phone menu: opens right under the real header, then the links ease in one after another */
.mnav{top:var(--mnav-top,var(--hdr-h,84px));transition:opacity .16s linear}
.mnav a.l,.mnav .btn{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.menu-open .mnav a.l,.menu-open .mnav .btn{opacity:1;transform:none}
.menu-open .mnav a:nth-child(2){transition-delay:.03s}.menu-open .mnav a:nth-child(3){transition-delay:.06s}
.menu-open .mnav a:nth-child(4){transition-delay:.09s}.menu-open .mnav a:nth-child(5){transition-delay:.12s}
.menu-open .mnav a:nth-child(6){transition-delay:.15s}.menu-open .mnav a:nth-child(7){transition-delay:.18s}
.menu-open .mnav a:nth-child(8){transition-delay:.21s}.menu-open .mnav .btn{transition-delay:.26s}
.dir-b .mnav{padding-top:8px}
.dir-b .mnav .btn-ink{background:var(--lime);color:var(--forest);border-color:var(--lime)}
@media (prefers-reduced-motion:reduce){.mnav a.l,.mnav .btn{transition:none;transform:none}}

/* =====================================================================
   LEAD FORM: one flow and one GoHighLevel hook, dressed for each concept
   ===================================================================== */
.bk-count{display:none}
.tf-q{display:block}
.tf-o{padding:14px 44px 14px 18px}
.bk-mlg,.bk-lg-col{display:none}
@media (max-width:640px){
  .bk-top{position:sticky;padding:12px 16px 14px;gap:12px}
  .bk-mlg{display:block;height:38px;width:auto;margin-right:auto;order:1}
  #bkBack{order:0}.bk-top #bkClose{order:3}
  .bk-ic.off{display:none}
  .bk-prog{position:absolute;left:0;right:0;bottom:0;height:2px;order:4}
}

/* A: cream panel, the photo framed in the arched window, colour logo, quiet dark pill */
.dir-a .bk{background:#F3F1EC}
.dir-a .bk-main,.dir-a .bk-top{background:#F3F1EC}
.dir-a .bk-main{background-image:url(tex/grain-a.webp);background-size:180px 180px}
.dir-a .bk-top{background:rgba(243,241,236,.94)}
.dir-a .bk-media{background:#E9E3D6}
.dir-a .bk-media::after{content:none}
.dir-a .bk-media .ph{inset:auto;left:40px;top:124px;width:calc(100% - 80px);height:calc(100% - 124px - 200px);border-radius:999px 999px 0 0}
.bk-logo .bk-lg-col{display:none}
.dir-a .bk-logo .bk-lg-rev{display:none}.dir-a .bk-logo .bk-lg-col{display:block}
.dir-a .bk-logo{color:var(--ink);top:30px;left:40px}
.dir-a .bk-logo span{color:var(--mute)}
.dir-a .bk-cap{left:40px;right:40px;bottom:40px;color:var(--ink)}
.dir-a .bk-cap p{font-size:clamp(19px,1.5vw,23px)}
.dir-a .bk-cap span{color:var(--mute)}
.dir-a .tf-o{border-radius:14px;border-width:1px;border-color:rgba(15,34,54,.14);background:#fff}
.dir-a .tf-o:hover{border-color:var(--ink);box-shadow:0 10px 24px -18px rgba(15,34,54,.5)}
.dir-a .tf-o.on{background:#fff;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.dir-a .tf-act .btn{border-radius:999px;padding:0 26px}

/* B: the photo cut on the hero's diagonal with the gold and sky stripes, B's captions, gold buttons */
.dir-b .bk{background:#fff}
.dir-b .bk-main,.dir-b .bk-top{background:#fff}
.dir-b .bk-media{background:#5EB7EA;clip-path:polygon(0 0,100% 0,calc(100% - 72px) 100%,0 100%)}
.dir-b .bk-media::before{content:"";position:absolute;inset:0;z-index:0;background:var(--lime);clip-path:polygon(0 0,calc(100% - 12px) 0,calc(100% - 84px) 100%,0 100%)}
.dir-b .bk-media .ph{clip-path:polygon(0 0,calc(100% - 24px) 0,calc(100% - 96px) 100%,0 100%)}
.dir-b .bk-media::after{z-index:1;clip-path:polygon(0 0,calc(100% - 24px) 0,calc(100% - 96px) 100%,0 100%);background:linear-gradient(180deg,rgba(6,20,40,.6),rgba(6,20,40,0) 24%,rgba(6,20,40,0) 46%,rgba(6,20,40,.92))}
.dir-b .bk-cap{right:120px}
.dir-b .bk-cap p{font-family:var(--fd);text-transform:uppercase;font-weight:600;letter-spacing:.01em;font-size:clamp(24px,2vw,32px);line-height:1.08}
.dir-b .bk-cap p::before{content:"";display:block;width:44px;height:5px;background:var(--lime);margin-bottom:16px}
.dir-b .bk-prog i{background:var(--lime)}
.dir-b .tf-o{border-radius:4px;border-width:1.5px}
.dir-b .tf-o:hover{border-color:var(--forest);transform:none}
.dir-b .tf-o.on{background:#F1F6FC;border-color:var(--forest)}
.dir-b .tf-tick{border-color:var(--forest)}
.dir-b .bk .btn-ink{background:var(--lime);color:var(--forest);font-family:var(--fd);text-transform:uppercase;letter-spacing:.06em;font-weight:600;border-radius:4px}
.dir-b .bk .btn-ink:hover{background:var(--forest);color:#fff}
.dir-b .bk-done .tick{background:var(--lime);color:var(--forest)}
.dir-b .bk-logo p{display:none}

/* service area dropdown: its rows have no "01" number, so the text must take the full row
   (it was squeezed into the 30px number column, one word per line, stretching the panel) */
.mm-list a:not(:has(.mm-n)){grid-template-columns:1fr}
.mm-mapbox{align-self:stretch}
.mm-mapbox .map{max-width:300px}
.mm-mapbox .map svg{display:block;width:100%;height:auto;max-height:min(400px,calc(100vh - 220px))}
/* A: with a dropdown open the bar is solid cream, so it reads as one piece with the panel */
body.dir-a.mm-on .hdr::before{background:#F3F1EC;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- sample-site chrome (same as the other Revcore samples) ---------- */
.pg-portrait img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.rc-sample{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:61;display:flex;align-items:center;gap:10px;padding:8px;border-radius:999px;background:rgba(14,15,16,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:500 12.5px/1 var(--f);box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.rc-sample i{width:22px;height:22px;border-radius:50%;background:#c4420f;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:11px}
.rc-sample b{padding:5px 11px;border-radius:999px;background:#fff;color:#161311;font-weight:600;font-size:12px;transition:background .2s,color .2s}
.rc-sample:hover b{background:#c4420f;color:#fff}
.embed .rc-sample,.embed .demo{display:none}
.bk-lock .rc-sample{display:none}
@media (max-width:960px){.rc-sample{bottom:78px;padding:6px}.rc-sample span{display:none}}

/* new Saltmarsh logo (2026-10-29): wide mark, keep it to the header height on both designs */
.logo img,.logo-cur img{width:auto!important;max-width:none}
.ed .hdr .logo-cur img,.logo-cur img{height:46px!important}
.pr .hdr .logo img{height:50px!important}
.ff-logo,.fx-brand img{height:52px!important;width:auto!important}
.bk-lg,.bk-mlg{height:40px!important;width:auto!important}
@media (max-width:640px){.ed .hdr .logo-cur img,.logo-cur img,.pr .hdr .logo img{height:36px!important}}