/* Background textures. One class on <body> picks the texture; it sits behind content on the light sections and scrolls with the page. */
/* Texture as an accent: only on a few light sections, fading in from one corner, kept very faint. */
:is(#services,#journal,.faq,.est,.pg-intro,.pg-svc-list,.pg-areas,.fsv,.ffaq,.fwhy,.fband,.frev){position:relative;isolation:isolate}
:is(#services,#journal,.faq,.est,.pg-intro,.pg-svc-list,.pg-areas,.fsv,.ffaq,.fwhy,.fband,.frev)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--tex-ink,currentColor);opacity:var(--tex-o,.05);
  -webkit-mask-image:var(--tex),radial-gradient(ellipse 85% 100% at var(--tex-at,100% 0),#000 0%,rgba(0,0,0,.65) 50%,transparent 92%);
          mask-image:var(--tex),radial-gradient(ellipse 85% 100% at var(--tex-at,100% 0),#000 0%,rgba(0,0,0,.65) 50%,transparent 92%);
  -webkit-mask-size:var(--tex-s,900px),100% 100%;mask-size:var(--tex-s,900px),100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* alternate the corner so it never reads as a repeated stamp */
:is(.faq,.ffaq,#journal,.pg-svc-list){--tex-at:0 100%}
.tex-topo{--tex:url(tex/topo.svg);--tex-s:1100px;--tex-o:.14}
.tex-flag{--tex:url(tex/flag.svg);--tex-s:1000px;--tex-o:.13}
.tex-draft{--tex:url(tex/draft.svg);--tex-s:1200px;--tex-o:.14}
.tex-herring{--tex:url(tex/herring.svg);--tex-s:84px;--tex-o:.04}
.tex-oak{--tex:url(tex/oak.svg);--tex-s:2000px;--tex-o:.075}
.tex-dogwood{--tex:url(tex/dogwood.svg);--tex-s:1900px;--tex-o:.065}
.dir-a{--tex-ink:#142019}
.dir-b{--tex-ink:#006938}
/* dark and green sections: the same texture in white, a touch quieter */
.dir-b :is(.fband,.frev){--tex-ink:#fff}
.dir-b .fband{--tex-at:100% 50%}
.dir-b.tex-oak :is(.fband,.frev){--tex-o:.06}.dir-b.tex-flag :is(.fband,.frev){--tex-o:.08}.dir-b.tex-topo :is(.fband,.frev){--tex-o:.09}
.est{--tex-at:0 0}
@media (max-width:640px){:is(#services,#journal,.faq,.est,.pg-intro,.pg-svc-list,.pg-areas,.fsv,.ffaq,.fwhy,.fband,.frev){--tex-s:700px}}
@media print{:is(#services,#journal,.faq,.est,.pg-intro,.pg-svc-list,.pg-areas,.fsv,.ffaq,.fwhy,.fband,.frev)::after{display:none}}

/* B: tinted sections open with a curved bed line, edged in lime like steel landscape edging */
.dir-b :is(.fwhy,.frev,.pg-intro,.pg-svc-list,.pg-areas){position:relative}
.dir-b :is(.fwhy,.pg-intro,.pg-svc-list,.pg-areas)::before,.dir-b .frev::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:clamp(28px,4vw,56px);pointer-events:none;z-index:1;
  background:url(tex/bed-light.svg) 0 0/100% 100% no-repeat;margin-bottom:-1px}
.dir-b .frev::before{background-image:url(tex/bed-dark.svg)}
.dir-b :is(.frev,.pg-svc-list)::before{transform:scaleX(-1)}

/* A: spec viewer. Hotspots on the photo, a spotlight that glides to the active one, and a spec list that opens beside it. */
@property --sx{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --sy{syntax:"<percentage>";inherits:true;initial-value:50%}
.sv{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(20px,2.4vw,36px);align-items:stretch;transition:--sx .9s var(--ease),--sy .9s var(--ease)}
.sv-ph{position:relative;aspect-ratio:800/537;overflow:hidden;background:var(--dark);align-self:start}
.sv-ph img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transform-origin:var(--sx) var(--sy);transition:transform 1.4s var(--ease)}
.sv.live .sv-ph img{transform:scale(1.06)}
.sv-dim{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(circle at var(--sx) var(--sy),rgba(8,12,10,0) 0,rgba(8,12,10,0) 90px,rgba(8,12,10,.5) 260px,rgba(8,12,10,.62) 100%)}
.sv.live .sv-dim{opacity:1}
.sv-hs{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.9);color:#fff;font:600 12px/1 var(--f);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .35s var(--ease),background .3s,color .3s}
.sv-hs::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);opacity:0;transform:scale(.8)}
.sv-hs:hover,.sv-hs:focus-visible{transform:scale(1.12)}
.sv-hs.on{background:#fff;color:var(--ink);transform:scale(1.15)}
.sv-hs.on::after{animation:svPulse 2.2s var(--ease) infinite}
@keyframes svPulse{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.7)}}
.sv-tag{position:absolute;left:var(--sx);top:var(--sy);transform:translate(30px,-50%);padding:8px 12px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);pointer-events:none;opacity:0;transition:opacity .4s var(--ease)}
.sv-tag.l{transform:translate(calc(-100% - 30px),-50%)}
.sv.live .sv-tag.show{opacity:1}
.sv-list{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--rule-2)}
.sv-it{position:relative;border-bottom:1px solid var(--rule-2)}
.sv-it>button{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;width:100%;padding:18px 0;text-align:left;color:var(--mute);transition:color .3s}
.sv-it>button:hover,.sv-it.on>button{color:var(--ink)}
.sv-n{width:26px;height:26px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-size:12px;font-weight:600;margin-top:1px;transition:background .3s,color .3s,border-color .3s}
.sv-it.on .sv-n{background:var(--ink);border-color:var(--ink);color:#fff}
.sv-t b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;color:inherit}
.sv-t small{display:block;font-size:14.5px;margin-top:3px;line-height:1.4}
.sv-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.sv-more>div{overflow:hidden;min-height:0;padding-left:46px}
.sv-it.on .sv-more{grid-template-rows:1fr}
.sv-more dl{display:grid;gap:8px;padding-bottom:12px}
.sv-more dl div{display:grid;grid-template-columns:70px 1fr;gap:10px;font-size:14px}
.sv-more dt{color:var(--mute)}
.sv-more p{font-size:14.5px;line-height:1.5;padding:12px 0 20px;border-top:1px dashed var(--rule-2)}
.sv-bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
.sv.auto .sv-it.on .sv-bar{animation:svBar var(--sv-t,5s) linear forwards}
@keyframes svBar{to{transform:scaleX(1)}}
@media (max-width:900px){.sv{grid-template-columns:1fr}.sv-tag{display:none}.sv-hs{width:30px;height:30px;margin:-15px 0 0 -15px}}
@media (prefers-reduced-motion:reduce){.sv,.sv-ph img,.sv-dim{transition:none}.sv-hs.on::after{animation:none}}

/* A: footer title block, like the corner of a landscape drawing */
.tb{display:grid;grid-template-columns:2fr 2fr 1.6fr 1.4fr 70px 90px;border:1px solid rgba(255,255,255,.28);margin-top:56px;color:#fff}
.tb-c{padding:14px 16px;border-left:1px solid rgba(255,255,255,.28);display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0}
.tb-c:first-child{border-left:0}
.tb small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.tb b{font-weight:500;font-size:15px}
.tb-scale svg{width:100%;max-width:160px;height:18px}
.tb-n{align-items:center}.tb-n svg{width:30px;height:30px}
.tb-sheet b{font-size:26px;font-weight:600;letter-spacing:-.02em}
@media (max-width:900px){.tb{grid-template-columns:1fr 1fr 1fr}.tb-c:nth-child(4){border-left:0}.tb-c:nth-child(n+4){border-top:1px solid rgba(255,255,255,.28)}}
@media (max-width:560px){.tb{grid-template-columns:1fr 1fr}.tb-c{border-left:0;border-top:1px solid rgba(255,255,255,.28)}.tb-c:nth-child(even){border-left:1px solid rgba(255,255,255,.28)}.tb-c:nth-child(-n+2){border-top:0}}
@media (prefers-reduced-motion:reduce){.co .co-svg path{stroke-dashoffset:0!important}}