/* Wingreen site · light + dark, acrylic glass, radon static, precision grid. */
:root {
	--calcite: #E8E6DF; --render: #E6E4DE; --marble: #DDDAD2; --nickel: #BBBAB3;
	--charcoal: #1A1D1C; --ash: #232826; --moss: #34462F; --olive: #4C5F3D; --birch: #657A50; --mint: #9BAF8F;
	--thermal: #F94F02; --oxide: #FF6A18; --solar: #FC9100;
	--display: Rajdhani, "Arial Narrow", sans-serif; --body: "Inter Tight", Inter, system-ui, sans-serif;
	--gut: clamp(16px, 3.4vw, 48px); --max: 1320px; --ease: cubic-bezier(.22, .8, .12, 1); --snap: cubic-bezier(.7, 0, .2, 1);
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.16'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--strip-h: 34px; --bar-h: 64px; --blur-h: 150px;
}
html[data-theme="light"], html:not([data-theme]) {
	--bg: #E6E4DE; --bg-2: #DDDAD2; --ink: #1A1D1C; --sub: #4A524C; --line: rgba(26,29,28,.16); --line-2: rgba(26,29,28,.08); --guide: rgba(26,29,28,.075);
	--glass: rgba(240,238,231,.46); --glass-edge: rgba(255,255,255,.72); --glass-hl: rgba(255,255,255,.95); --glass-shadow: 0 1px 1px rgba(26,29,28,.05), 0 26px 50px -34px rgba(26,29,28,.5);
	--noise-op: .04; --noise-blend: multiply; --topo-filter: none; --topo-op: .95;
	color-scheme: light;
}
html[data-theme="dark"] {
	--bg: #050706; --bg-2: #0C100E; --ink: #E8E6DF; --sub: #A3AA9F; --line: rgba(232,230,223,.16); --line-2: rgba(232,230,223,.07); --guide: rgba(232,230,223,.07);
	--glass: rgba(40,52,44,.42); --glass-edge: rgba(232,230,223,.15); --glass-hl: rgba(232,230,223,.18); --glass-shadow: 0 30px 60px -36px rgba(0,0,0,.9);
	--noise-op: .03; --noise-blend: screen; --topo-filter: invert(1) brightness(.85); --topo-op: .1;
	color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; background: var(--bg); }
html::-webkit-scrollbar { display: none; }
body.wgs { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background-color .5s var(--ease), color .5s var(--ease); }
.wgs *, .wgs *::before, .wgs *::after { box-sizing: border-box; }
.wgs img, .wgs video { display: block; max-width: 100%; }
.wgs a { color: inherit; text-decoration: none; }
.wgs p { margin: 0; }
.wgs h1, .wgs h2, .wgs h3, .wgs h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1; letter-spacing: .01em; color: inherit; }
.wgs .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); position: relative; }
.wgs .wrap.narrow { max-width: 900px; }
.wgs .skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--thermal); color: var(--charcoal); padding: 10px 14px; font-weight: 700; }
.wgs .skip:focus { top: 12px; }
.wgs :focus-visible { outline: 2px solid var(--thermal); outline-offset: 3px; }
.wgs .ic { width: 17px; height: 17px; flex: none; }
.wgs .num { font-variant-numeric: tabular-nums; }
html[data-theme="light"] .i-dark, html[data-theme="dark"] .i-light { display: none !important; }

.lbl { font: 700 12.5px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--sub); display: inline-flex; align-items: center; gap: 10px; }
.lbl.accent { color: var(--thermal); }
.sq { display: inline-block; width: 8px; height: 8px; background: var(--thermal); flex: none; }

/* ------------------------------------------------------------------ radon static + grid */
#static, #decay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
#static { z-index: 90; opacity: calc(var(--noise-op) * 1.4); image-rendering: auto; }
#decay { z-index: 91; opacity: .9; }
.guides { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.guides .wrap { height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
.guides span { border-left: 1px solid var(--guide); }
.guides span:last-child { border-right: 1px solid var(--guide); }
@media (max-width: 760px) { .guides .wrap { grid-template-columns: repeat(2, 1fr); } .guides span:nth-child(n+3) { display: none; } .guides span:nth-child(2) { border-right: 1px solid var(--guide); } }

/* topography: only behind the home hero and the footer, dissolving gradually into the page */
.topo-sec { position: relative; }
.topo-bg { display: none; }
.hero .topo-bg, .foot .topo-bg { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--topo) center top / cover no-repeat; opacity: var(--topo-op); filter: var(--topo-filter); }
.hero .topo-bg { -webkit-mask-image: radial-gradient(120% 90% at 30% 35%, #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.35) 65%, transparent 92%); mask-image: radial-gradient(120% 90% at 30% 35%, #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.35) 65%, transparent 92%); }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ------------------------------------------------------------------ acrylic glass */
.acr { position: relative; isolation: isolate; background-color: var(--glass); background-image: var(--grain);
	-webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
	border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hl), var(--glass-shadow); }
.acr.orange { --glass: rgba(249,79,2,.84); --glass-edge: rgba(255,186,140,.6); --glass-hl: rgba(255,226,205,.75); color: var(--charcoal); }
.acr.orange .lbl { color: rgba(26,29,28,.75); }
.acr.orange .sq, .acr.orange .corner { background: var(--charcoal); border-color: var(--charcoal); }
.acr.orange .sq { background: var(--charcoal); }
.acr.green { --glass: rgba(76,95,61,.84); --glass-edge: rgba(190,210,175,.4); --glass-hl: rgba(220,232,210,.35); color: var(--calcite); }
.acr.green .lbl { color: rgba(232,230,223,.75); }
html[data-theme="dark"] .acr.green { --glass: rgba(76,95,61,.62); }
.corner { position: absolute; width: 12px; height: 12px; border: 0 solid var(--thermal); z-index: 2; pointer-events: none; }
.corner.tl { left: -1px; top: -1px; border-width: 2px 0 0 2px; } .corner.br { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }

/* drifting radon squares give the glass something to frost */
.squares { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.squares i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: calc(var(--s) * .12);
	background: linear-gradient(135deg, #FF7A30, var(--thermal) 55%, #E0320A); filter: blur(var(--b)); opacity: .9;
	transform: rotate(var(--r)); animation: drift var(--d) ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(0, -40px, 0) rotate(calc(var(--r) * -1)); } }

/* ------------------------------------------------------------------ header */
.hdr { position: fixed; z-index: 80; top: 0; left: 0; right: 0; pointer-events: none; }
.hdr > * { pointer-events: auto; }
.strip { height: var(--strip-h); overflow: hidden; background: var(--moss); color: var(--calcite); transition: height .45s var(--snap); }
.strip-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); height: var(--strip-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 500 13px/1 var(--body); }
.strip-txt { display: flex; align-items: center; gap: 10px; font: 700 12px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.strip-links { display: flex; gap: 22px; }
.strip-links a { display: inline-flex; align-items: center; gap: 7px; opacity: .9; }
.strip-links a:hover { opacity: 1; color: var(--solar); }
.strip-links .ic { width: 14px; height: 14px; }

.bar.acr { --glass: rgba(236,234,227,.74); }
html[data-theme="dark"] .bar.acr { --glass: rgba(26,34,29,.72); }
.drop.acr, .sheet.acr { --glass: rgba(236,234,227,.9); }
html[data-theme="dark"] .drop.acr, html[data-theme="dark"] .sheet.acr { --glass: rgba(22,29,25,.92); }
.bar { width: calc(100% - 2 * var(--gut)); max-width: calc(var(--max) - 2 * var(--gut)); height: var(--bar-h); margin: 10px auto 0; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 14px;
	transition: height .45s var(--snap), max-width .6s var(--snap), margin .45s var(--snap); }
.brand { display: flex; align-items: center; margin-right: 12px; height: 100%; }
.logo { display: inline-flex; align-items: center; }
.logo .mark { position: relative; z-index: 2; display: block; }
.logo .mark img { height: 38px; width: auto; transition: height .45s var(--snap); }
.logo .word { display: block; overflow: hidden; max-width: 150px; padding-left: 12px; transition: max-width .42s var(--snap), padding .42s var(--snap); }
.logo .word img { height: 20px; width: auto; max-width: none; transition: transform .42s var(--snap), opacity .3s; }
.hdr.compact .strip { height: 0; }
.hdr.compact .bar { height: 54px; margin-top: 8px; max-width: min(1120px, calc(100% - 2 * var(--gut))); }
.hdr.compact .brand .logo .mark img { height: 32px; }
.hdr.compact .brand .logo .word { max-width: 0; padding-left: 0; }
.hdr.compact .brand .logo .word img { transform: translateX(-110%); opacity: 0; }

.nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.nav-a { height: 40px; padding: 0 13px; display: inline-flex; align-items: center; gap: 9px; font: 600 15px/1 var(--body); color: var(--ink); background: none; border: 0; cursor: pointer; white-space: nowrap; transition: background .2s; }
.nav-a:hover, .nav-a.on, .dd.open > .nav-a { background: var(--line-2); }
.nav-a.on { box-shadow: inset 0 -2px 0 var(--thermal); }
.ind { width: 6px; height: 6px; background: currentColor; opacity: .45; transition: transform .3s var(--ease), background .2s, opacity .2s; }
.dd.open .ind { background: var(--thermal); opacity: 1; transform: rotate(45deg); }
.dd { position: relative; }
.drop { position: absolute; top: calc(100% + 14px); left: -8px; width: 320px; padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s, transform .3s var(--ease), visibility 0s .3s; }
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.dd.open .drop { opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .3s var(--ease); }
.drop a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 13px 14px; border-left: 2px solid transparent; transition: background .2s, border-color .2s; }
.drop a strong { font: 700 17px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.drop a span { grid-column: 1; font-size: 14px; color: var(--sub); }
.drop a .ic { grid-row: 1 / 3; grid-column: 2; color: var(--thermal); transition: transform .25s var(--ease); }
.drop a:hover { background: var(--line-2); border-left-color: var(--thermal); }
.drop a:hover .ic { transform: translateX(3px); }

.act { display: flex; align-items: center; gap: 6px; }
.theme-t { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); background: transparent; color: var(--thermal); cursor: pointer; transition: border-color .2s, background .2s; }
.theme-t:hover { border-color: var(--thermal); background: rgba(249,79,2,.08); }
.theme-t .ic { width: 19px; height: 19px; }
html[data-theme="light"] .t-sun, html[data-theme="dark"] .t-moon { display: none; }
.portal { height: 42px; display: inline-flex; align-items: center; gap: 9px; padding: 0 16px 0 18px; background: var(--olive); color: var(--calcite); box-shadow: inset 4px 0 0 var(--thermal); font: 700 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: background .2s; }
.portal:hover { background: var(--moss); }
.req { height: 42px; display: inline-flex; align-items: center; padding: 0 18px; background: var(--thermal); color: var(--charcoal); font: 700 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: background .2s; }
.req:hover { background: var(--oxide); }
.menu-t { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: var(--ink); }
.menu-t i { display: block; width: 18px; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.menu-t[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.menu-t[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }
.sheet { position: absolute; left: var(--gut); right: var(--gut); top: calc(100% + 8px); padding: 8px; display: none; max-height: calc(100vh - 140px); overflow: auto; }
.sheet.open { display: block; animation: sheet .35s var(--ease); }
@keyframes sheet { from { opacity: 0; transform: translateY(-8px); } }
.sheet > a { display: flex; justify-content: space-between; align-items: center; padding: 16px 12px; border-bottom: 1px solid var(--line-2); font: 700 19px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.sheet > a .ic { color: var(--thermal); }
.sheet-act { display: grid; gap: 8px; padding: 12px 4px 4px; }
.sheet-act a { justify-content: center; height: 50px; }
.sheet-call { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); font: 600 16px/1 var(--body); }

@media (max-width: 1120px) { .nav { display: none; } .menu-t { display: flex; } .act { margin-left: auto; } }
@media (max-width: 640px) {
	:root { --bar-h: 58px; }
	.strip-txt, .strip-links a + a { display: none; }
	.strip-in { justify-content: center; }
	.act .req { display: none; }
	.act .portal span { display: none; }
	.act .portal { padding: 0 12px 0 14px; }
	.logo .mark img { height: 32px; }
	.logo .word img { height: 17px; }
}

/* ------------------------------------------------------------------ buttons */
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 22px; font: 700 15px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: transform .3s var(--ease), background .2s, border-color .2s, color .2s; }
.btn .ic { transition: transform .3s var(--ease); }
.btn:hover .ic:last-child { transform: translateX(4px); }
.btn:active { transform: scale(.98); }
.btn.sm { height: 44px; padding: 0 18px; font-size: 14px; }
.btn.hot { background: var(--thermal); color: var(--charcoal); }
.btn.hot:hover { background: var(--oxide); }
.btn.solid { background: var(--olive); color: var(--calcite); box-shadow: inset 4px 0 0 var(--thermal); padding-left: 26px; }
.btn.solid:hover { background: var(--moss); }
.btn.ghost { border-color: var(--line); color: var(--ink); }
button.btn.ghost { background: transparent; }
.btn.ghost:hover { border-color: var(--ink); }
.btn.light { background: var(--calcite); color: var(--charcoal); }
.btn.light:hover { background: #fff; }

/* ------------------------------------------------------------------ sections */
.wgs section { position: relative; }
.pad { padding: clamp(72px, 9vw, 128px) 0; }
.signin { height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--line); color: var(--ink); font: 700 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: border-color .2s; }
.signin:hover { border-color: var(--ink); }
@media (max-width: 640px) { .act .signin { display: none; } .strip-acc { display: none !important; } }
.head { display: grid; gap: 16px; max-width: 780px; margin-bottom: clamp(32px, 4vw, 52px); }
.head h2, .split-txt h2, .narrow h2, .portal-panel h2, .cta-panel h2, .always h2 { font-size: clamp(32px, 3.6vw, 50px); text-transform: uppercase; }
.head p { color: var(--sub); font-size: 18px; max-width: 36em; }
p.big { font-size: clamp(17px, 1.4vw, 19px); color: var(--sub); max-width: 34em; }
.note { margin-top: 18px; font-size: 14px; color: var(--sub); max-width: 60em; }

/* home hero */
.hero { padding: calc(var(--strip-h) + var(--bar-h) + 40px) 0 clamp(40px, 6vw, 80px); min-height: min(100vh, 980px); display: flex; align-items: center; }
.hero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-txt { display: grid; gap: 22px; align-content: center; }
.hero h1 { font-size: clamp(44px, 5.4vw, 78px); line-height: .94; text-transform: uppercase; }
.hero h1 span { display: block; }
.hero h1 .h-b { color: var(--olive); }
html[data-theme="dark"] .hero h1 .h-a { color: transparent; -webkit-text-stroke: 1.2px rgba(232,230,223,.55); }
html[data-theme="dark"] .hero h1 .h-b { color: var(--calcite); }
/* videos fade in once a real frame is ready */
.wgs video[data-auto] { opacity: 0; transition: opacity .9s var(--ease); }
.wgs video[data-auto].ready { opacity: 1; }
/* dark hero: the white Rn house on its green render, feathered into the page */
.hero .vid .v-dark { mix-blend-mode: normal; }
html[data-theme="dark"] .hero-media .vid { width: 84%; margin: 0 0 0 auto; background: #637950; outline: 1px solid rgba(232,230,223,.14); outline-offset: 10px; }
html[data-theme="dark"] .hero-card { left: -4%; bottom: -8%; }
/* dark mode shows the calcite renders on a calcite plate: more calcite, no second house */
html[data-theme="dark"] .split-media .vid.box { background: var(--render); }
html[data-theme="dark"] .split-media .vid.box .v-light { display: block !important; mix-blend-mode: normal; filter: none; }
html[data-theme="dark"] .split-media .vid.box .v-dark { display: none !important; }
.wgs .portal, .wgs .portal:hover { color: var(--calcite); }
.lead { font-size: clamp(18px, 1.5vw, 20px); color: var(--sub); max-width: 30em; }
.hero-media { position: relative; }
.vid { position: relative; }
.vid video { width: 100%; height: auto; }
.vid.box { aspect-ratio: 1; overflow: hidden; }
.vid.box video { height: 100%; object-fit: cover; }
/* lift the render's calcite background to white so multiply leaves the page untouched */
.vid.blend .v-light, html[data-theme="light"] .plate .v-light { mix-blend-mode: multiply; filter: brightness(1.105) contrast(1.02); }
.vid.blend .v-dark { mix-blend-mode: screen; }
html[data-theme="light"] .vid .v-dark { display: none; }
html[data-theme="dark"] .vid:has(.v-dark) .v-light { display: none; }
.hero-media .vid { width: 112%; margin-left: -6%; }
.hero-card { position: absolute; left: -14%; bottom: -10%; width: min(320px, 60%); padding: 22px 22px 20px; display: grid; gap: 10px; }
.hero-card h3, .hero-card h2.h3 { font-size: 24px; text-transform: uppercase; margin-top: 6px; }
.hc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px .32em; }
.hc-title .wm { display: inline-flex; }
.hc-title .wm img { height: 17px; width: auto; max-width: none; }
.hero-card p { font-size: 15px; color: var(--sub); }
.hero-card .logo .mark img { height: 30px; } .hero-card .logo .word img { height: 16px; }
.hc-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 6px; }
.hc-call { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.hc-call:hover { color: var(--thermal); }
@media (max-width: 900px) {
	.hero { min-height: 0; }
	.hero-in { grid-template-columns: minmax(0, 1fr); }
	.hero-media .vid { width: 100%; margin: 0; }
	.hero-card { position: relative; left: auto; bottom: auto; width: auto; margin-top: -12%; }
}

/* inner page hero */
.phero { padding: calc(var(--strip-h) + var(--bar-h) + 56px) 0 clamp(48px, 6vw, 88px); }
.phero h1 { font-size: clamp(38px, 4.4vw, 64px); text-transform: uppercase; line-height: .96; }
.phero-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.phero-txt, .phero .narrow { display: grid; gap: 22px; }
.phero-media { position: relative; }
.phero-media.map img { width: 100%; }
html[data-theme="light"] .plate .v-light { mix-blend-mode: multiply; }
html[data-theme="dark"] .plate { background: var(--render); }
@media (max-width: 900px) { .phero-in { grid-template-columns: minmax(0, 1fr); } .phero-media { max-width: 560px; } }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { display: grid; gap: 10px; align-content: start; padding: 28px 26px 26px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b { font: 700 clamp(46px, 5vw, 76px)/.9 var(--display); color: var(--ink); }
.stat p { font-size: 16px; line-height: 1.4; max-width: 15em; }
.stat small { font-size: 12.5px; color: var(--sub); letter-spacing: .02em; }
.stat::before { content: ""; width: 10px; height: 10px; background: var(--thermal); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(3) { border-left: 0; padding-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 480px) { .stat { padding: 22px 14px 20px; } .stat b { font-size: 44px; } }

/* split rows */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.split.rev .split-txt { order: 0; }
.split-txt { display: grid; gap: 20px; }
.split-media { position: relative; }
.split-media.map img { width: 100%; }
.split-media.owner { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.logo.xl .mark img { height: 120px; } .logo.xl .word img { height: 48px; } .logo.xl .word { max-width: 400px; padding-left: 24px; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .split-media { max-width: 560px; } .split.rev .split-media { order: -1; } .logo.xl .mark img { height: 72px; } .logo.xl .word img { height: 30px; } }

/* services */
.svcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.svc { display: grid; grid-template-rows: auto 1fr auto; gap: 28px; padding: clamp(24px, 3vw, 40px); min-height: 380px; transition: transform .5s var(--ease); }
.svc:hover { transform: translateY(-4px); }
.svc h3 { font-size: clamp(32px, 3.2vw, 44px); text-transform: uppercase; }
.svc p { margin-top: 12px; font-size: 17px; max-width: 30em; opacity: .9; }
.svc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.go { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font: 700 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; padding: 8px 10px; border: 1px solid currentColor; opacity: .75; }
@media (max-width: 760px) { .svcs { grid-template-columns: minmax(0, 1fr); } .svc { min-height: 0; } }

/* portal + cta */
.portal-panel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; padding: clamp(28px, 4vw, 52px); }
.portal-panel > div:first-child { display: grid; gap: 14px; max-width: 640px; }
.portal-panel p { opacity: .9; font-size: 18px; }
.cta-sec { padding: clamp(110px, 14vw, 200px) 0; background: var(--img) center / cover no-repeat; }
/* winter pine dissolves into the page on every side and takes on the page tone */
.cta-sec { background: none; isolation: isolate; }
.cta-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--img) center / cover no-repeat; opacity: .8; filter: saturate(.7);
	-webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 25%, rgba(0,0,0,.55) 58%, transparent 100%); mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 25%, rgba(0,0,0,.55) 58%, transparent 100%); }
html[data-theme="dark"] .cta-sec::before { opacity: .45; filter: saturate(.6) brightness(.7); }
.cta-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding: clamp(28px, 4vw, 56px); }
.cta-panel > div:first-child { display: grid; gap: 14px; }
.cta-panel p { font-size: 18px; max-width: 34em; color: var(--sub); }
@media (max-width: 760px) { .cta-panel { grid-template-columns: minmax(0, 1fr); } }

/* text blocks, steps, cards */
.blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.block { display: grid; gap: 12px; align-content: start; padding: 26px 0 30px; border-top: 1px solid var(--line); }
.block h3, .block h2.h3 { font-size: 22px; text-transform: uppercase; letter-spacing: .03em; }
.block p { color: var(--sub); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.steps li { display: grid; gap: 12px; align-content: start; padding-top: 30px; position: relative; }
.step-mark { position: absolute; top: 0; left: 0; right: -28px; height: 2px; background: var(--line); }
.step-mark i { position: absolute; left: 0; top: -5px; width: 12px; height: 12px; background: var(--thermal); }
.steps li:last-child .step-mark { right: 0; }
.steps h3 { font-size: 26px; text-transform: uppercase; }
.steps p { color: var(--sub); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.cards3, .cards4 { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { display: grid; gap: 12px; align-content: start; padding: 28px 26px; min-height: 200px; }
.card h3, .card h2.h3 { font-size: 24px; text-transform: uppercase; }
.card p { opacity: .85; }
.card .go { margin-top: auto; }
@media (max-width: 1000px) { .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cards3, .cards4 { grid-template-columns: minmax(0, 1fr); } .card { min-height: 0; } }
.always { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; padding: clamp(28px, 4vw, 56px); }
.always > div { display: grid; gap: 14px; }
.always p { font-size: 18px; }
@media (max-width: 760px) { .always { grid-template-columns: minmax(0, 1fr); } }
.narrow { display: grid; gap: 20px; }

/* levels */
.levels { padding: 6px 0; }
.lv-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.5fr; gap: 20px; padding: 20px 26px; border-top: 1px solid var(--line-2); font-size: 16px; align-items: start; }
.lv-head { border-top: 0; font: 700 12px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--sub); padding-top: 16px; padding-bottom: 16px; }
.lv-r { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; }
.lv-r .sw { width: 12px; height: 12px; margin-top: 5px; grid-row: 1 / 3; }
.lv-r b { font: 700 24px/1.05 var(--display); }
.lv-r small { font-size: 13px; color: var(--sub); }
@media (max-width: 800px) {
	.lv-head { display: none; }
	.lv-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 18px; }
	.lv-row span[data-h]::before { content: attr(data-h); display: block; font: 700 11px/1.4 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--sub); }
}

/* resources */
.jump { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.jump a { flex: none; padding: 11px 14px; border: 1px solid var(--line); font: 700 13px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.jump a:hover { border-color: var(--thermal); color: var(--thermal); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 0; cursor: pointer; font: 600 18px/1.35 var(--body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--thermal); transition: transform .35s var(--ease); width: 20px; height: 20px; }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--sub); max-width: 40em; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }
.res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.res a { display: grid; gap: 12px; align-content: space-between; padding: 24px; min-height: 180px; transition: transform .45s var(--ease); }
.res a:hover { transform: translateY(-3px); }
.res small { font: 700 12px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--thermal); }
.res strong { font: 700 23px/1.1 var(--display); text-transform: uppercase; }
@media (max-width: 900px) { .res { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .res { grid-template-columns: minmax(0, 1fr); } }

/* contact */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.contact-grid .card { gap: 14px; min-height: 340px; }
.contact-grid .card .btn { justify-self: start; margin-top: auto; }
.c-lines { display: grid; gap: 10px; margin: 6px 0 10px; }
.c-lines a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; word-break: break-word; }
.c-lines a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } .contact-grid .card { min-height: 0; } }

/* 404 */
.nf { min-height: 100vh; display: flex; align-items: center; padding: calc(var(--strip-h) + var(--bar-h) + 40px) 0 60px; }
.nf-in { max-width: 760px; padding: clamp(28px, 5vw, 64px); display: grid; gap: 20px; }
.nf h1 { font-size: clamp(38px, 5vw, 66px); text-transform: uppercase; }
.nf p { font-size: 18px; color: var(--sub); }

/* account + form pages */
.acct { padding: calc(var(--strip-h) + var(--bar-h) + 56px) 0 40px; min-height: 80vh; }
.acct-in { max-width: 560px; margin: 0 auto; display: grid; gap: 22px; }
.acct-in.wide { max-width: 860px; }
.acct-head { display: grid; gap: 14px; justify-items: start; }
.acct-head h1 { font-size: clamp(34px, 4vw, 52px); text-transform: uppercase; }
.acct-body { padding: clamp(22px, 4vw, 40px); }
.acct-side { display: grid; gap: 8px; color: var(--sub); font-size: 15px; }
.acct-side a, .acct-body a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.acct-side a:hover, .acct-body a:not(.btn):hover { color: var(--thermal); }
.prose { display: grid; gap: 14px; font-size: 16.5px; color: var(--sub); }
.prose h2 { font-size: 24px; text-transform: uppercase; color: var(--ink); margin-top: 18px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

/* Gravity Forms in the site style: label sits in the field border, square corners */
.wgs .gform_wrapper.gravity-theme .gform_fields { gap: 18px 16px; }
.wgs .gform_wrapper .gfield_label, .wgs .gform_wrapper legend.gfield_label { font: 700 12px/1 var(--display) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--sub) !important; margin-bottom: 8px !important; }
.wgs .gform_wrapper input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), .wgs .gform_wrapper select, .wgs .gform_wrapper textarea {
	width: 100%; min-height: 50px; padding: 12px 14px !important; border: 1px solid var(--line) !important; border-radius: 0 !important; background: rgba(255,255,255,.35) !important; color: var(--ink) !important; font: 400 16px/1.4 var(--body) !important; box-shadow: none !important; transition: border-color .2s, background .2s; }
html[data-theme="dark"] .wgs .gform_wrapper input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), html[data-theme="dark"] .wgs .gform_wrapper select, html[data-theme="dark"] .wgs .gform_wrapper textarea { background: rgba(0,0,0,.25) !important; }
.wgs .gform_wrapper input:focus, .wgs .gform_wrapper select:focus, .wgs .gform_wrapper textarea:focus { border-color: var(--thermal) !important; outline: none; }
.wgs .gform_wrapper .gform_footer, .wgs .gform_wrapper .gform_page_footer { margin-top: 22px !important; padding: 0 !important; }
.wgs .gform_wrapper input[type=submit], .wgs .gform_wrapper .gform_button, .wgs .gform_wrapper .gform_next_button, .wgs .gform_wrapper .gform_previous_button {
	height: 50px; padding: 0 26px !important; border: 0 !important; border-radius: 0 !important; background: var(--olive) !important; box-shadow: inset 4px 0 0 var(--thermal) !important; color: var(--calcite) !important; font: 700 15px/1 var(--display) !important; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.wgs .gform_wrapper input[type=submit]:hover, .wgs .gform_wrapper .gform_button:hover { background: var(--moss) !important; }
.wgs .gform_wrapper .gfield_description, .wgs .gform_wrapper .gform_required_legend { color: var(--sub); font-size: 13.5px; }
.wgs .gform_wrapper .gfield_required { color: var(--thermal) !important; }
.portal-embed { font-size: 16px; }
.acct-body .gform_wrapper, .acct-body .gform_wrapper form, .acct-body .gform_body { border: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; max-width: none !important; }
.acct-body .gform_wrapper .ginput_container, .acct-body .gform_wrapper .ginput_container_password span, .acct-body .gform_wrapper .gfield input { width: 100% !important; max-width: none !important; }
.wgs .grecaptcha-badge { visibility: hidden; }
.recap { font-size: 12.5px; color: var(--sub); }

/* wrapped (Elementor) pages */
.wrapped { padding-top: calc(var(--strip-h) + var(--bar-h) + 24px); position: relative; z-index: 1; }
.wrapped > .wrap { max-width: none; padding: 0; }

/* ------------------------------------------------------------------ footer, blur bar, rail, wipe */
.blur-end { height: var(--blur-h); }
.blurbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--blur-h); z-index: 70; pointer-events: none; will-change: transform; }
.blurbar i { position: absolute; inset: 0; }
.blurbar i:nth-child(-n+2) { display: none; } /* two layers are enough and keep scrolling smooth */
.blurbar i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); mask-image: linear-gradient(to bottom, transparent, #000 30%); }
.blurbar i:nth-child(2) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(to bottom, transparent 25%, #000 55%); mask-image: linear-gradient(to bottom, transparent 25%, #000 55%); }
.blurbar i:nth-child(3) { -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); -webkit-mask-image: linear-gradient(to bottom, transparent 50%, #000 80%); mask-image: linear-gradient(to bottom, transparent 50%, #000 80%); }
.blurbar i:nth-child(4) { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); -webkit-mask-image: linear-gradient(to bottom, transparent 70%, #000); mask-image: linear-gradient(to bottom, transparent 70%, #000); }

/* footer stays dark in both modes, like the original site, and eases in from the page */
.foot { position: relative; z-index: 2; padding: 170px 0 34px; overflow: hidden; color: var(--calcite); --sub: #A3AA9F; --line: rgba(232,230,223,.14);
	background: linear-gradient(to bottom, rgba(26,29,28,0) 0, rgba(26,29,28,.75) 90px, #1A1D1C 170px); }
html[data-theme="dark"] .foot { background: linear-gradient(to bottom, rgba(18,22,20,0) 0, #121614 170px); }
html[data-theme] .foot .i-light { display: none !important; } html[data-theme] .foot .i-dark { display: block !important; }
.foot .topo-bg { opacity: .07; filter: invert(1); -webkit-mask-image: linear-gradient(to top, #000 0, rgba(0,0,0,.5) 45%, transparent 100%); mask-image: linear-gradient(to top, #000 0, rgba(0,0,0,.5) 45%, transparent 100%); }
.fgrid { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.f-brand { display: grid; gap: 18px; align-content: start; }
.f-brand p { font-size: 15px; color: var(--sub); max-width: 26em; }
.logo.lg .mark img { height: 46px; } .logo.lg .word img { height: 24px; }
.fgrid h4, .fgrid h2.fh { font: 700 12px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--sub); margin-bottom: 16px; }
.fgrid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.fgrid a:hover { color: var(--thermal); }
.fbase { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 52px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--sub); }
@media (max-width: 760px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .f-brand { grid-column: 1 / -1; } }

.rail { position: fixed; z-index: 95; right: 10px; top: 120px; bottom: 32px; width: 1px; background: var(--line); }
.totop { position: fixed; z-index: 96; right: 28px; bottom: max(28px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 13px; border: 1px solid var(--line); background-color: var(--glass, rgba(240,238,231,.72)); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); color: var(--ink); font: 700 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .25s, translate .25s, border-color .2s, color .2s; }
.totop.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.totop[hidden] { display: none; }
.totop svg { width: 18px; height: 18px; color: var(--olive); }
.totop:hover { border-color: var(--ink); }
.totop:hover svg { color: var(--thermal); }
@media (hover: none) { .totop { right: 16px; padding: 0 13px; } .totop span { display: none; } }
@media print { .totop { display: none !important; } }
.rail i { position: absolute; left: -5px; top: 0; width: 11px; height: 44px; background: var(--thermal); cursor: grab; touch-action: none; transition: width .2s, left .2s; }
.rail i:hover, .rail.drag i { left: -6px; width: 13px; }
.rail.drag i { cursor: grabbing; }
@media (hover: none) { .rail { right: 4px; } .rail i { width: 6px; left: -3px; height: 36px; } }

#wipe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 200; pointer-events: none; image-rendering: pixelated; }


/* ------------------------------------------------------------------ motion */
.rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
	.wgs *, .wgs *::before, .wgs *::after { transition: none !important; animation: none !important; }
	.rv { opacity: 1; transform: none; }
}

/* ================================================================== round 4 overrides */

/* section heads read like the A/B/C demos: title left, supporting line right */
.head { max-width: none; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; column-gap: 48px; }
.head > .lbl { grid-column: 1 / -1; }
.head > p { justify-self: start; }
@media (max-width: 860px) { .head { grid-template-columns: minmax(0, 1fr); } }

/* header: darker top strip, logo never squeezes, calmer compact animation */
html[data-theme="light"] .strip { background: var(--ash); }
.brand, .logo, .logo .mark, .logo .mark img { flex: none; }
.logo .word { flex: none; max-width: 200px; transition: max-width .55s var(--ease), padding .55s var(--ease), opacity .35s var(--ease); }
.logo .word img { transition: transform .55s var(--ease), opacity .35s var(--ease); }
.hdr.compact .brand .logo .mark img { height: 34px; }
.hdr.compact .brand .logo .word { opacity: 0; }
.hdr.compact .brand .logo .word img { transform: translateX(-24px); opacity: 0; }
.strip, .bar { transition-timing-function: var(--ease); transition-duration: .55s; }
@media (max-width: 1380px) { .act .signin span { display: none; } .act .signin { padding: 0 12px; } }
@media (max-width: 1240px) { .nav { display: none; } .menu-t { display: flex; } .act { margin-left: auto; } }

/* every render sits on a calcite plate that matches its own background: same media in both modes, no blending, no tint */
.vid.plate-v { background: #E6E4DE; outline: 1px solid var(--line); outline-offset: -1px; overflow: hidden; }
.vid.plate-v video { mix-blend-mode: normal !important; filter: none !important; }
.hero-media .vid, html[data-theme="dark"] .hero-media .vid { width: 100%; margin: 0; background: #E6E4DE; }
.hero-media .vid.hero-plate { aspect-ratio: 1; }
.hero-media .vid.hero-plate video { width: 100%; height: 100%; object-fit: cover; }
.hero-card, html[data-theme="dark"] .hero-card { left: -18%; bottom: -16%; width: min(300px, 52%); }
@media (max-width: 900px) { .hero-card, html[data-theme="dark"] .hero-card { left: auto; bottom: auto; width: auto; margin: -14% 6% 0; } }
.phero-media .vid { background: #E6E4DE; }

/* winter pine: a deliberate framed photograph, not a blend */
.cta-sec::before { display: none !important; }
.cta-sec { padding: clamp(72px, 9vw, 128px) 0; -webkit-mask-image: none; mask-image: none; }
.cta-frame { position: relative; padding: clamp(56px, 9vw, 120px) clamp(16px, 5vw, 72px); background: var(--img) center / cover no-repeat; outline: 1px solid var(--line); }
.cta-frame::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.35); pointer-events: none; }
.cta-frame .cta-panel { position: relative; z-index: 1; }

/* dark mode portal: the client portal keeps its own light panel so its text stays readable */



/* contact cards: buttons line up along the bottom */
.contact-grid .card { display: flex; flex-direction: column; align-items: flex-start; }
.contact-grid .card .btn { margin-top: auto; }

.unsure { padding: 18px 20px; display: grid; gap: 6px; max-width: 34em; }
.unsure h3, .unsure h2.h3 { font-size: 20px; text-transform: uppercase; }
.unsure p { font-size: 16px; opacity: .9; }

/* ================================================================== round 5 */
/* footer: solid dark with a clean top edge, no gradient */
.foot, html[data-theme="dark"] .foot { background: #1A1D1C; padding-top: 72px; border-top: 1px solid rgba(232,230,223,.1); }
html[data-theme="dark"] .foot { background: #111513; }
.foot .topo-bg { display: none !important; }

/* framed photographs with parallax inside the frame */
.photo { position: relative; margin: 0; overflow: hidden; outline: 1px solid var(--line); background: var(--bg-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; will-change: transform; transform: scale(1.18); }
.photo::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.3); pointer-events: none; }
.photo.tall { aspect-ratio: 4 / 5; } .photo.short { aspect-ratio: 4 / 3; } .photo.square { aspect-ratio: 1; } .photo.wide { aspect-ratio: 21 / 8; }
.heritage-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.heritage-in .photo.short { align-self: end; }
@media (max-width: 1000px) { .heritage-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .heritage-in .split-txt { grid-column: 1 / -1; order: -1; } }
.band { padding: 0 0 clamp(48px, 6vw, 88px); }
.band-txt { margin-top: 18px; font-size: 18px; color: var(--sub); max-width: 40em; }
.split-media.map { overflow: visible; }
.squares i { will-change: translate; }
/* ================================================================== round 6 */
/* page change: a light grain flash over the page, never a solid fill */
#wipe { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0; background-repeat: repeat; background-size: 200px; image-rendering: pixelated; }
html.wiping #wipe { opacity: 1; }

/* squares may drift past their section edge instead of being cut off */
.squares { overflow: visible; inset: -12% 0; }
.wgs-main { overflow-x: clip; }

/* photography: quieter, a supporting texture rather than a feature */
.photo img { filter: saturate(.62) contrast(.94) brightness(1.02); transform: scale(1.08); }
html[data-theme="dark"] .photo img { filter: saturate(.55) contrast(.92) brightness(.82); }
.photo::after { inset: 8px; border-color: rgba(255,255,255,.22); }
.heritage-in { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); }
.heritage-in .photo.tall { aspect-ratio: 3 / 4; max-width: 300px; }
.heritage-in .photo.short { max-width: 240px; justify-self: end; }
.phero-in > .photo.square { max-width: 440px; justify-self: end; aspect-ratio: 4 / 5; width: 100%; }
.split > .photo.square { max-width: 420px; }
.band .photo.wide { aspect-ratio: 32 / 7; }

/* calmer rhythm between sections */
.pad { padding: clamp(60px, 7.5vw, 112px) 0; }
.area-sec .split-media.map img { max-width: 460px; margin-left: auto; }
@media (max-width: 760px) { .squares i:nth-child(n+4) { display: none; } }
/* who is signed in */
.who-line { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.who-line b { font-weight: 600; color: var(--solar); }
.who-line a { text-decoration: underline; text-underline-offset: 3px; }
.signin.who { border-color: var(--olive); }
.signin.who span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: .02em; font-family: var(--body); font-weight: 600; line-height: 1.4; padding-block: 1px; }
.sheet-act .who-line { justify-content: center; padding: 12px; border: 1px solid var(--line); font-size: 15px; }
.sheet-act .who-line b { color: var(--ink); }
@media (max-width: 640px) {
	.strip-links:has(.who-line) a:first-child { display: none; }
	.strip-acc.who-line { display: inline-flex !important; }
}
/* ================================================================== round 7 */
/* media: no frames or outlines; the renders' calcite matches the light page exactly */
.vid.plate-v, .hero-media .vid { outline: 0 !important; }
html[data-theme="dark"] .vid.plate-v { box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.split-media .corner, .phero-media .corner { display: none; }

/* phone menu when signed in */
.sheet-act > * { width: 100%; }
.sheet-act .who-line { display: flex; justify-content: space-between; gap: 12px; padding: 14px 14px; border: 1px solid var(--line); font-size: 15px; white-space: normal; }
.sheet-act .who-line a { font-weight: 700; color: var(--thermal); }

/* client portal inside the site page: full width on phones, nothing cut off */
.acct-in.wide { max-width: 980px; }
.portal-embed { min-width: 0; overflow-x: auto; }
.portal-embed .wgx, .portal-embed .wgp2 { max-width: 100%; min-width: 0; }
.acct-body:has(.portal-embed) { --glass: rgba(240,238,231,.7); }
html[data-theme="dark"] .acct-body:has(.portal-embed) { --glass: rgba(16,21,18,.85); }
@media (max-width: 640px) {
	.acct { padding-top: calc(var(--strip-h) + var(--bar-h) + 28px); }
	.acct-in.wide .acct-body { padding: 14px 10px; margin: 0 calc(var(--gut) * -1 + 4px); }
	.portal-embed .wgp2 .p-nav { flex-wrap: nowrap; overflow-x: auto; }
	.portal-embed table { display: block; overflow-x: auto; }
	.portal-embed [class*="grid"], .portal-embed .p-help { grid-template-columns: minmax(0, 1fr) !important; }
}
/* ================================================================== round 8 */
/* Apple-style motion between pages: the page dissolves with a slight settle; header, noise and rail stay put */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: wg-vt-out .26s cubic-bezier(.32, .72, 0, 1) both; }
::view-transition-new(root) { animation: wg-vt-in .5s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes wg-vt-out { to { opacity: 0; transform: scale(.992); } }
@keyframes wg-vt-in { from { opacity: 0; transform: translateY(10px) scale(1.004); } }
.hdr { view-transition-name: wg-header; }
#static { view-transition-name: wg-static; } #decay { view-transition-name: wg-decay; } .rail { view-transition-name: wg-rail; }
::view-transition-group(wg-header), ::view-transition-group(wg-static), ::view-transition-group(wg-decay), ::view-transition-group(wg-rail) { animation: none; }
::view-transition-old(wg-static), ::view-transition-old(wg-decay) { display: none; }
::view-transition-new(wg-static), ::view-transition-new(wg-decay) { animation: none; }
/* portal tabs: content slides gently, the panel itself holds still */
.portal-embed { view-transition-name: wg-portal; }
::view-transition-old(wg-portal) { animation: wg-tab-out .2s cubic-bezier(.32, .72, 0, 1) both; }
::view-transition-new(wg-portal) { animation: wg-tab-in .38s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes wg-tab-out { to { opacity: 0; transform: translateX(-12px); } }
@keyframes wg-tab-in { from { opacity: 0; transform: translateX(14px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* transparent renders float directly on the page */
.vid.alpha, .hero-media .vid.alpha, html[data-theme="dark"] .vid.alpha, .phero-media .vid.alpha { background: transparent !important; box-shadow: none !important; }

/* eagle and pine woven into the layout, not framed */
.heritage { position: relative; padding: clamp(88px, 11vw, 168px) 0; overflow: hidden; }
.heritage-bg { position: absolute; inset: -12% 0; z-index: 0; pointer-events: none; background: var(--img) center 30% / cover no-repeat; opacity: .18; filter: grayscale(.35) contrast(1.05);
	-webkit-mask-image: radial-gradient(ellipse 70% 62% at 72% 50%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%); mask-image: radial-gradient(ellipse 70% 62% at 72% 50%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%); }
html[data-theme="dark"] .heritage-bg { opacity: .3; filter: grayscale(.2) brightness(.8); }
.eagle-fly { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(26,29,28,.18)); }
html[data-theme="dark"] .eagle-fly { filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); }

/* ---------------------------------------------------------------- 12-column grid pass */
:root { --col-gap: clamp(16px, 2.4vw, 32px); }
.hero-in, .phero-in, .split, .heritage-in, .faq-grid, .head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.guides .wrap { column-gap: var(--col-gap); }
.hero-txt { grid-column: 1 / span 5; }
.hero-media { grid-column: 7 / span 6; }
.phero-txt { grid-column: 1 / span 6; }
.phero-in > :last-child:not(.phero-txt) { grid-column: 8 / span 5; justify-self: stretch; max-width: none; }
.split > .split-media { grid-column: 1 / span 6; }
.split > .split-txt { grid-column: 8 / span 5; }
.split.rev > .split-txt { grid-column: 1 / span 5; order: 0; }
.split.rev > .split-media { grid-column: 7 / span 6; }
.heritage-in > .split-txt { grid-column: 1 / span 5; position: relative; z-index: 1; }
.heritage-in > .eagle-fly { grid-column: 6 / span 7; margin-right: calc(var(--gut) * -1); }
.faq-grid > :first-child { grid-column: 1 / span 4; }
.faq-grid > .faq { grid-column: 6 / span 7; }
.head > .lbl { grid-column: 1 / -1; margin-bottom: 14px; }
.head > h2 { grid-column: 1 / span 7; }
.head > p { grid-column: 8 / span 5; align-self: end; }
.head > h2:last-child { grid-column: 1 / span 8; }
.svcs, .cards3, .cards4, .res, .contact-grid { gap: var(--col-gap); }
@media (max-width: 900px) {
	.hero-txt, .hero-media, .phero-txt, .phero-in > :last-child:not(.phero-txt), .split > *, .split.rev > *, .heritage-in > *, .faq-grid > *, .head > *, .head > h2:last-child { grid-column: 1 / -1; }
	.head > p { margin-top: 12px; }
	.heritage-in > .eagle-fly { margin: 24px 0 0; max-width: 560px; justify-self: end; }
	.split.rev > .split-media { order: -1; }
}

/* ---------------------------------------------------------------- choices: real round radios and square checkboxes, never stretched */
.wgs .gform_wrapper input[type=radio], .wgs .gform_wrapper input[type=checkbox], .acct-body .gform_wrapper .gfield input[type=radio], .acct-body .gform_wrapper .gfield input[type=checkbox] {
	width: 20px !important; height: 20px !important; min-height: 0 !important; max-width: 20px; flex: none; margin: 0 !important; padding: 0 !important; accent-color: var(--olive); border-radius: initial; }
.wgs .gform_wrapper .gchoice { display: flex !important; align-items: center; gap: 12px; margin: 0 0 10px; }
.wgs .gform_wrapper .gchoice label { margin: 0 !important; max-width: none !important; width: auto !important; font-size: 16px; }
html[data-theme="dark"] .wgs .gform_wrapper input[type=radio], html[data-theme="dark"] .wgs .gform_wrapper input[type=checkbox] { accent-color: var(--mint); }
/* account/portal column never grows past the screen on thin phones */
.acct-in { grid-template-columns: minmax(0, 1fr); }
.acct-in > * { min-width: 0; }
.portal-embed .wgx, .portal-embed .wgp2 { width: 100%; }
.acct-body .gform_wrapper .gform_body, .acct-body .gform_wrapper .gform_fields { border: 0 !important; padding: 0 !important; background: none !important; }

/* ================================================================== round 9 */
/* packed-transparency renders: the canvas shows, the source video stays hidden */
.vid.packed { position: relative; }
.vid.packed video { position: absolute; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none; }
.vid-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; opacity: 0; transition: opacity .9s var(--ease); }
.vid-canvas.ready { opacity: 1; }
html[data-theme="dark"] .plate:has(.vid.alpha), .plate:has(.vid.alpha) { background: none !important; }

/* Rooted in Vermont: pine fades in from the page above and out into the page below; the eagle rises */
.heritage { padding: clamp(120px, 14vw, 220px) 0; }
.heritage-bg { inset: -18% 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%), radial-gradient(ellipse 80% 75% at 70% 50%, #000 30%, transparent 80%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%), radial-gradient(ellipse 80% 75% at 70% 50%, #000 30%, transparent 80%); mask-composite: intersect; opacity: .22; }
html[data-theme="dark"] .heritage-bg { opacity: .34; }
.eagle-fly { will-change: translate, rotate; }

/* dark mode: Schedule today sits lower and quieter */
html[data-theme="dark"] .cta-frame { background-color: #000; }
html[data-theme="dark"] .cta-frame::before { content: ""; position: absolute; inset: 0; background: rgba(5,7,6,.62); pointer-events: none; }
html[data-theme="dark"] .cta-frame .cta-panel { --glass: rgba(14,18,16,.7); }

/* credentials photo, faded into the page instead of framed */
.cred-photo { width: 100%; aspect-ratio: 1; background: var(--img) center / cover no-repeat; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); filter: saturate(.85); }
html[data-theme="dark"] .cred-photo { filter: saturate(.7) brightness(.8); }

/* hours, wherever they appear */
.hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 4px 0 0; }
.hours dt { font-weight: 600; } .hours dd { margin: 0; }
.hours-note { font-size: 14px; opacity: .85; margin-top: 8px; }
.hours-now { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font: 700 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.hours-now i { width: 8px; height: 8px; background: var(--mint); } .hours-now.closed i { background: var(--thermal); }
.f-hours { font-size: 14px; color: var(--sub); } .f-hours dt { color: var(--calcite); font-weight: 500; }
.foot .f-h2 { margin-top: 24px; }
.f-area { font-size: 14px; } .f-area a { text-decoration: underline; text-underline-offset: 3px; color: var(--calcite); }
.f-legal { display: inline-flex; gap: 18px; } .f-legal a:hover { color: var(--thermal); }

/* compact service-area strip on inner pages */
.btn.ghost.on-dark { color: var(--calcite); border-color: rgba(232,230,223,.4); }
.btn.ghost.on-dark:hover { border-color: var(--calcite); }

/* trusted guides: the Vermont guide leads, two rows tall */
.res a.green small { color: var(--solar); }

/* topography carries through more of the page, always faded */
.stats-sec .topo-bg, .area-sec .topo-bg, .phero .topo-bg { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--topo) center / cover no-repeat; filter: var(--topo-filter);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 10%, rgba(0,0,0,.4) 50%, transparent 85%); mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 10%, rgba(0,0,0,.4) 50%, transparent 85%); }
.stats-sec .topo-bg { opacity: calc(var(--topo-op) * .55); }
.area-sec .topo-bg { opacity: calc(var(--topo-op) * .45); }
.phero .topo-bg { opacity: calc(var(--topo-op) * .7); -webkit-mask-image: radial-gradient(ellipse 90% 80% at 25% 40%, #000 10%, transparent 80%); mask-image: radial-gradient(ellipse 90% 80% at 25% 40%, #000 10%, transparent 80%); }

/* readability: nothing under 13px */
.tags li, .lbl, .lv-head, .fgrid h4, .fgrid h2.fh, .stat small, .recap, .res small, .jump a { font-size: max(13px, 1em); }
.lbl { font-size: 13px; } .stat small, .recap { font-size: 13.5px; }
.wgs img { height: auto; }
.heritage-bg, html[data-theme="dark"] .heritage-bg { -webkit-mask-image: radial-gradient(ellipse 62% 42% at 68% 50%, #000 0%, rgba(0,0,0,.7) 40%, transparent 100%); mask-image: radial-gradient(ellipse 62% 42% at 68% 50%, #000 0%, rgba(0,0,0,.7) 40%, transparent 100%); -webkit-mask-composite: initial; mask-composite: initial; inset: -25% 0; }

/* ================================================================ round 10 */
/* one topography layer, fixed behind the page; the page colour washes up over it as you scroll */
.topo-bg { display: none !important; }
.topo-fix { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--topo) center / cover no-repeat; opacity: var(--topo-op); filter: var(--topo-filter); }
.topo-wash { position: fixed; left: 0; right: 0; top: 0; height: 220vh; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0) 0, var(--bg) 46%); translate: 0 calc(62vh - var(--wash, 0) * 182vh); will-change: translate; }
html[data-theme="light"] .topo-wash { background: linear-gradient(to bottom, rgba(230,228,222,0) 0, var(--bg) 46%); }
html[data-theme="dark"] .topo-wash { background: linear-gradient(to bottom, rgba(5,7,6,0) 0, var(--bg) 46%); }
html[data-theme="light"] { --topo-op: .55; }
html[data-theme="dark"] { --topo-op: .14; }
.wgs-main, .foot { position: relative; z-index: 1; }

/* "window": a solid panel with two cut corners that the house animation and the eagles sit in */
.win { --win: #DCDFD2; --cut: clamp(28px, 4vw, 56px); position: relative; background: var(--win); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
html[data-theme="dark"] .win { --win: #C9CDBE; }
.win-sq { position: absolute; top: 18px; right: 18px; width: 14px; height: 14px; background: var(--thermal); z-index: 2; }
.win-house { padding: clamp(12px, 2vw, 28px); }
.win-house .vid, html[data-theme="dark"] .win-house .vid.box { background: none !important; outline: 0 !important; box-shadow: none !important; }
.win-house .vid-canvas, .win-house video { filter: none !important; }

/* Rooted in Vermont: the eagle climbs out of its window */
.heritage-in > .eagle-stage { grid-column: 6 / span 7; position: relative; padding: 6% 0 4%; }
.heritage-in > .eagle-fly { grid-column: auto; margin: 0; }
.eagle-stage .win-eagle { position: absolute; inset: 22% 6% 0 14%; }
.eagle-stage .eagle-fly { position: relative; z-index: 1; width: 100%; margin: 0; filter: drop-shadow(0 26px 30px rgba(26,29,28,.22)); }
html[data-theme="dark"] .eagle-stage .eagle-fly { filter: drop-shadow(0 26px 30px rgba(0,0,0,.45)); }
@media (max-width: 900px) { .heritage-in > .eagle-stage { grid-column: 1 / -1; max-width: 560px; justify-self: end; width: 100%; } }

/* softer pine behind Rooted in Vermont: fades to nothing well inside its edges */
.heritage-bg, html[data-theme="dark"] .heritage-bg { inset: 0; -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.18) 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.18) 72%, transparent 100%); background-position: center 40%; }
.heritage-bg { opacity: .16; }
html[data-theme="dark"] .heritage-bg { opacity: .24; }
.heritage { background: none; }

/* credentials: eagle on its branch, the branch resting on a sill */
.cred-photo { display: none; }
.cred-eagle { position: relative; padding-top: 4%; }
.cred-eagle .win-cred { position: absolute; inset: 30% 0 14px 0; }
.cred-eagle img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.cred-eagle .sill { position: relative; z-index: 2; display: block; height: 14px; margin-top: -1px; background: var(--olive); }
.cred-eagle .sill::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; background: linear-gradient(to bottom, rgba(26,29,28,.18), transparent); }
html[data-theme="dark"] .cred-eagle .sill::after { background: linear-gradient(to bottom, rgba(0,0,0,.5), transparent); }

/* Schedule today: same panel on every page */
.cta-frame { background-image: var(--img-l); background-size: cover; background-position: center; }
html[data-theme="dark"] .cta-frame { background-image: var(--img-d); }
html[data-theme="dark"] .cta-frame::before { background: rgba(5,7,6,.5); }
.win { --win: #D2D8C5; }
html[data-theme="dark"] .win { --win: #C9CDBE; }

/* round 11: scan fixes */
.wgs h2.h3 { letter-spacing: .01em; margin-bottom: 0; }
.fgrid h2.fh { line-height: 1; }
html[data-theme="dark"] .req, html[data-theme="dark"] .req > span { color: var(--charcoal) !important; }

/* round 12: window corners drawn with gradients (smooth, feathered edges in every browser incl. Safari/iOS) instead of clip-path */
.win { clip-path: none; --f: 1.5px; background:
	linear-gradient(135deg, transparent calc(var(--cut) * .7071), var(--win) calc(var(--cut) * .7071 + var(--f))) top / 100% 50.5% no-repeat,
	linear-gradient(-45deg, transparent calc(var(--cut) * .7071), var(--win) calc(var(--cut) * .7071 + var(--f))) bottom / 100% 50.5% no-repeat; }
html[data-theme="light"] .win { --win: #CDD6C0; }

/* credentials: eagle on the left, facing the text */
@media (min-width: 901px) {
	.phero-in:has(.cred-eagle) > .cred-eagle { grid-column: 1 / span 6; grid-row: 1; }
	.phero-in:has(.cred-eagle) > .phero-txt { grid-column: 8 / span 5; grid-row: 1; }
}
.cred-eagle .win-sq { right: auto; left: auto; right: 18px; }
.cred-eagle .win-cred { inset: 8% 0 14px 0; }
.cred-eagle { padding-top: 0; }

/* ================================================================ round 13 */
/* panels behind media: full, square corners */
.win { clip-path: none !important; background: var(--win) !important; }

/* iOS / low-power: the still frame shows until the animation is really playing */
.vid { position: relative; }
.vid-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.vid video, .vid .vid-canvas { position: relative; z-index: 1; }
.vid.live .vid-poster { opacity: 0; }

/* owner photo */
.owner-photo .frame-solid { position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-width: 460px; background: var(--win, #D2D8C5); }
.owner-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-theme="dark"] .owner-photo img { filter: saturate(.8) brightness(.9); }

/* where am I: each inner page carries its name in large outline type behind the header area, plus its own accent */
.wgs-main { position: relative; }
.pg-mark { position: absolute; left: 0; right: 0; top: calc(var(--strip-h, 34px) + var(--bar-h, 74px) + 8px); z-index: 0; pointer-events: none; overflow: hidden; height: clamp(110px, 17vw, 260px); }
.pg-mark span { display: block; padding-left: var(--gut, 24px); font: 700 clamp(96px, 16vw, 250px)/.85 var(--display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.2px var(--pg, var(--olive)); opacity: .22; }
html[data-theme="dark"] .pg-mark span { opacity: .28; }
.wgs-main > section, .wgs-main > nav, .wgs-main > div:not(.pg-mark) { position: relative; z-index: 1; }
.pg-testing { --pg: #4C5F3D; } .pg-mitigation { --pg: #F94F02; } .pg-learn-about-radon { --pg: #FC9100; } .pg-service-area { --pg: #657A50; }
.pg-our-credentials { --pg: #34462F; } .pg-contact, .pg-contact-request { --pg: #F94F02; }
html[data-theme="dark"] .pg-testing, html[data-theme="dark"] .pg-our-credentials { --pg: #9BAF8F; }
.phero .lbl .sq { background: var(--pg, var(--thermal)); }
.phero h1 { position: relative; }
.phero h1::after { content: ""; display: block; width: 72px; height: 4px; margin-top: 18px; background: var(--pg, var(--thermal)); }
@media (max-width: 760px) { .pg-mark { height: 100px; } .pg-mark span { font-size: 26vw; } }

.hours-now.next i { background: var(--birch); }

/* round 13b: responsive fixes */
.faq-grid .head { grid-template-columns: minmax(0, 1fr); }
.faq-grid .head > * { grid-column: 1 / -1 !important; }
.faq-grid .head h2 { overflow-wrap: break-word; }
@media (max-width: 760px) {
	.c-lines a, .hc-call, .hero .btns a, .area-row .btns a, .f-area a { min-height: 44px; display: inline-flex; align-items: center; }
	.wgs .gform_wrapper button, .wgs .gform_wrapper .gform_show_password { min-width: 44px; min-height: 44px; }
}
/* credentials: text sits on the right, so its page name does too */
.pg-our-credentials .pg-mark span { text-align: right; padding: 0 var(--gut, 24px) 0 0; }

/* round 13c: tablet */
.strip-txt, .strip-links a { white-space: nowrap; }
@media (max-width: 1100px) { .strip-txt { display: none; } .strip-in { justify-content: flex-end; } }
@media (max-width: 1000px) {
	.cta-panel { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
	.fgrid > .f-brand { grid-column: 1 / -1; max-width: 520px; }
	.fgrid a { overflow-wrap: anywhere; }
}
@media (max-width: 620px) { .fgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fgrid > div:nth-child(3) { grid-column: 1 / -1; } }
.f-hours.hours { grid-template-columns: max-content 1fr; }
@media (max-width: 1000px) { .f-hours.hours { grid-template-columns: minmax(0, 1fr); gap: 2px; } .f-hours.hours dd { margin-bottom: 8px; color: var(--sub); } }

/* ================================================================ round 14 */
/* owner: photo fills the section behind a glass card */
.owner-bg { position: relative; overflow: hidden; padding: clamp(110px, 14vw, 200px) 0; isolation: isolate; }
.owner-bg-img { position: absolute; inset: -10% 0; z-index: -1; background: var(--img) center 30% / cover no-repeat; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
html[data-theme="dark"] .owner-bg-img { filter: brightness(.55) saturate(.8); }
.owner-bg-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.owner-card { grid-column: 7 / span 6; padding: clamp(28px, 4vw, 52px); display: grid; gap: 16px; }
.owner-card h2 { font-size: clamp(30px, 3.4vw, 46px); text-transform: uppercase; }
@media (max-width: 900px) { .owner-card { grid-column: 1 / -1; } }
.owner-sec { display: none; }

/* two-step sign in */
.auth { display: grid; gap: 14px; }
.auth-step { display: grid; gap: 16px; }
.auth-step[hidden] { display: none; }
.auth-f { display: grid; gap: 6px; }
.auth-f > span:first-child { font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--sub); }
.auth-f input, .auth-f select, .auth-f textarea { width: 100%; min-height: 48px; padding: 12px 14px; font: 500 16px/1.4 var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 2px; }
.auth-f textarea { min-height: 120px; resize: vertical; }
.auth-f input:focus, .auth-f select:focus, .auth-f textarea:focus { outline: 2px solid var(--olive); outline-offset: 1px; border-color: var(--olive); }
.auth-f small { color: var(--sub); font-size: 13px; }
.auth-code { font: 700 28px/1 var(--display) !important; letter-spacing: .5em; text-align: center; }
.auth-pw { display: flex; }
.auth-pw input { flex: 1; border-right: 0; }
.auth-eye { min-width: 64px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 700 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.auth-check { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.auth-check input { width: 20px; height: 20px; accent-color: var(--olive); }
.auth-link { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; min-height: 32px; }
.auth-link:hover { color: var(--thermal); }
.auth-who, .auth-alt, .auth-fine { margin: 0; color: var(--sub); font-size: 15px; }
.auth-lead { margin: 0; font: 700 22px/1.2 var(--display); text-transform: uppercase; }
.auth-msg { margin: 0; min-height: 0; color: #B54708; font-weight: 600; }
.auth-msg:empty { display: none; }
.auth-msg.ok { color: var(--olive); }
html[data-theme="dark"] .auth-msg { color: #FF9A5C; }
html[data-theme="dark"] .auth-msg.ok { color: var(--mint); }
.auth-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.auth-row, .sup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .auth-row, .sup-row { grid-template-columns: minmax(0, 1fr); } }
.auth-step.busy { opacity: .6; pointer-events: none; }
/* the guided steps: a heading per step, the address in a chip with "Change", one clear main button */
.auth-h { margin: 0; font: 700 24px/1.15 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.auth-sub { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.auth-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; padding: 10px 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--olive) 7%, transparent); color: var(--sub); font-size: 15px; }
.auth-chip b { color: var(--ink); overflow-wrap: anywhere; }
.auth-chip .auth-link { margin-left: auto; min-height: 0; font-weight: 600; }
.auth-step .auth-go, .auth-wide { width: 100%; justify-content: center; }
.auth-step .btns .auth-go { width: auto; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: -4px 0; color: var(--sub); font: 700 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-link:disabled { opacity: .6; cursor: default; text-decoration: none; color: var(--sub); }
.auth-code { font-size: 32px !important; letter-spacing: .55em; padding-left: calc(14px + .55em) !important; }
.auth-code::placeholder { color: var(--line); letter-spacing: .55em; }
/* the account step under the request confirmation (claim.php) */
.wg-acct { max-width: 560px; margin: 26px auto 0; padding: 22px 22px 20px; border: 1px solid var(--line); border-top: 3px solid var(--olive); background: var(--glass, transparent); text-align: left; display: grid; gap: 12px; }
.wg-acct h3 { margin: 0; font: 700 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.wg-acct > p { margin: 0; color: var(--sub); font-size: 15px; line-height: 1.55; }
.wg-acct .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.wg-acct-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wg-acct-code { display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); background: none; color: var(--ink); font: inherit; cursor: copy; }
.wg-acct-code b { font: 700 17px/1 var(--display); letter-spacing: .08em; }
.wg-acct-code i { font: 700 11px/1 var(--display); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--sub); }
.wg-acct-code.is-copied i { color: var(--olive); }
.wg-acct .auth { gap: 10px; }
.wg-acct .auth-msg:empty { display: none; }
.wg-acct .auth-step { gap: 12px; }

/* support */
.sup-hero { padding: calc(var(--strip-h) + var(--bar-h) + 64px) 0 clamp(36px, 5vw, 64px); text-align: center; position: relative; z-index: 1; }
.sup-hero .lbl { justify-content: center; }
.sup-hero h1 { font-size: clamp(44px, 7vw, 92px); text-transform: uppercase; margin: 10px 0 26px; }
.sup-search { position: relative; max-width: 760px; margin: 0 auto; }
.sup-search > svg { position: absolute; left: 20px; top: 50%; width: 22px; height: 22px; translate: 0 -50%; color: var(--sub); pointer-events: none; }
.sup-search input { width: 100%; height: 66px; padding: 0 56px; font: 500 18px/1 var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); box-shadow: 0 20px 50px -30px rgba(0,0,0,.35); border-radius: 2px; }
.sup-search input:focus { outline: 2px solid var(--olive); }
.sup-clear { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border: 0; background: none; color: var(--sub); font-size: 26px; cursor: pointer; }
.sup-pop { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; align-items: center; }
.sup-pop span { color: var(--sub); font-size: 14px; margin-right: 4px; }
.sup-pop button { min-height: 36px; padding: 0 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 14px/1 var(--body); border-radius: 18px; cursor: pointer; }
.sup-pop button:hover { border-color: var(--olive); color: var(--olive); }
.sup-results { max-width: 760px; margin: 20px auto 0; text-align: left; display: grid; gap: 6px; }
.sup-rh { margin: 0 0 4px; color: var(--sub); font-size: 14px; }
.sup-hit { display: grid; gap: 2px; text-align: left; padding: 12px 16px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; font: inherit; }
.sup-hit:hover { border-color: var(--olive); }
.sup-hit small { color: var(--sub); }
.sup-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .sup-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sup-cats { grid-template-columns: minmax(0, 1fr); } }
.sup-cat { display: grid; gap: 8px; padding: 24px; color: inherit; text-decoration: none; min-height: 170px; align-content: start; }
.sup-cat svg { width: 34px; height: 34px; color: var(--olive); }
.sup-cat.orange svg { color: currentColor; }
.sup-cat b { font: 700 22px/1.1 var(--display); text-transform: uppercase; }
.sup-cat small { color: var(--sub); font-size: 15px; }
.sup-cat.orange small { color: inherit; opacity: .85; }
.sup-cat .go { margin-top: auto; display: inline-flex; gap: 8px; align-items: center; font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.sup-cat .go svg { width: 14px; height: 14px; color: currentColor; }
.sup-group { margin-bottom: clamp(36px, 5vw, 64px); scroll-margin-top: 140px; }
.sup-group-h { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.sup-group-h svg { width: 28px; height: 28px; color: var(--olive); }
.sup-group-h h2 { font-size: clamp(24px, 2.6vw, 34px); text-transform: uppercase; }
.sup-art.flash { outline: 2px solid var(--thermal); outline-offset: 4px; }
.sup-a { padding: 0 0 18px; }
.sup-a a { text-decoration: underline; }
.sup-helpful { margin: 14px 0 0; font-size: 14px; color: var(--sub); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sup-helpful button { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; }
.sup-help-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px; align-items: start; }
.sup-help-txt { grid-column: 1 / span 5; display: grid; gap: 16px; }
.sup-help-txt h2 { font-size: clamp(32px, 3.6vw, 50px); text-transform: uppercase; }
.sup-form { grid-column: 7 / span 6; padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; }
@media (max-width: 900px) { .sup-help-txt, .sup-form { grid-column: 1 / -1; } }
.sup-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sup-ways li { display: flex; gap: 10px; align-items: center; }
.sup-ways svg { width: 20px; height: 20px; color: var(--olive); flex: none; }
.sup-who { margin: 0; font-size: 14px; color: var(--sub); }
.sup-done { display: grid; gap: 12px; justify-items: start; }
.sup-done-mark { width: 48px; height: 48px; display: grid; place-items: center; background: var(--olive); color: #fff; font-size: 24px; }
.sup-done h3 { font: 700 26px/1.1 var(--display); text-transform: uppercase; margin: 0; }
.sup-tickets { display: grid; gap: 10px; }
.sup-tk { display: grid; gap: 4px; text-align: left; padding: 16px 20px; color: inherit; font: inherit; cursor: pointer; border: 0; }
.sup-tk small { color: var(--sub); }
.sup-dlg { border: 0; padding: 0; background: transparent; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); color: var(--ink); }
.sup-dlg::backdrop { background: rgba(10,12,11,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sup-dlg-in { position: relative; padding: clamp(22px, 4vw, 40px); display: grid; gap: 14px; max-height: calc(100vh - 48px); overflow: auto; }
.sup-dlg-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); font-size: 28px; cursor: pointer; }
.sup-check, .sup-thread { display: grid; gap: 14px; }
.sup-check[hidden], .sup-thread[hidden] { display: none; }
.sup-check h2, .sup-thread h2 { font: 700 28px/1.1 var(--display); text-transform: uppercase; margin: 0; }
.sup-check p { margin: 0; color: var(--sub); }
.sup-checkform { display: grid; gap: 14px; justify-items: start; }
.sup-checkform .sup-row { width: 100%; }
.sup-msgs { display: grid; gap: 10px; }
.sup-msg { padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--line); }
.sup-msg.staff { border-left-color: var(--olive); }
.sup-msg div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--sub); }
.sup-msg p { margin: 6px 0 0; }
.sup-reply { display: grid; gap: 12px; justify-items: start; }
.sup-reply .auth-f { width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pg-support { --pg: #4C5F3D; }
.owner-bg-img { inset: 0; background-position: 22% 35%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); }
.stats:has(> .stat:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .stats:has(> .stat:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================ round 15 */
.req-note { margin: 0 0 6px; font-size: 15px; color: var(--sub); }
.req-star { color: var(--thermal); font-size: 1.5em; line-height: 0; vertical-align: -.2em; margin-right: 4px; }

/* owner: a full-width band with hard, ruled edges instead of a fade */
.owner-bg { padding: 0; isolation: isolate; overflow: visible; display: grid; }
.owner-bg > * { grid-area: 1 / 1; }
.owner-bg-img { position: relative; inset: auto; z-index: 0; min-height: clamp(460px, 62vh, 680px); background: var(--img) 22% 42% / cover no-repeat; -webkit-mask-image: none; mask-image: none; filter: none; }
html[data-theme="dark"] .owner-bg-img { filter: brightness(.82) saturate(.9); }
.owner-bg-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 38%, rgba(10,14,12,.38) 100%); }
.owner-bg-in { position: relative; z-index: 2; align-self: center; padding: 72px 0; }
.owner-card { grid-column: 7 / span 6; }
/* the ruled edges: a heavy olive bar, two hairlines and an amber marker on the grid line */
.owner-rule { position: relative; z-index: 3; align-self: start; height: 22px; pointer-events: none; }
.owner-rule.bottom { align-self: end; transform: scaleY(-1); }
.owner-rule i { position: absolute; left: 0; right: 0; display: block; }
.owner-rule i:nth-child(1) { top: 0; height: 6px; background: var(--olive); }
.owner-rule i:nth-child(2) { top: 10px; height: 1px; background: var(--olive); opacity: .7; }
.owner-rule i:nth-child(3) { top: 15px; height: 1px; background: var(--olive); opacity: .35; }
.owner-rule b { position: absolute; top: -4px; left: max(var(--gut, 24px), calc((100vw - var(--max, 1280px)) / 2 + var(--gut, 24px))); width: 14px; height: 14px; background: var(--thermal); }
html[data-theme="dark"] .owner-rule i:nth-child(1) { background: #4C5F3D; }
@media (max-width: 900px) {
	.owner-bg-img { min-height: 320px; background-position: 18% 40%; }
	.owner-bg { grid-template-rows: auto auto; }
	.owner-bg-img, .owner-rule.top { grid-row: 1; }
	.owner-rule.bottom { grid-row: 1; }
	.owner-bg-in { grid-row: 2; padding: 0; margin-top: -60px; }
	.owner-bg-img::after { display: none; }
}
.owner-card { grid-column: 8 / span 5; --glass: rgba(232,230,223,.93); }
html[data-theme="dark"] .owner-card { --glass: rgba(12,16,14,.86); }
.owner-bg-img { background-position: 4% 40%; }
@media (max-width: 1100px) { .owner-card { grid-column: 6 / span 7; } }
@media (max-width: 900px) { .owner-card { grid-column: 1 / -1; } }

/* ================================================================ round 16: owner on the pines */
/* the sky dissolves into the page above; the treeline stops on a ruled edge */
.owner-bg { display: grid; padding: 0; overflow: hidden; isolation: isolate; }
.owner-bg > * { grid-area: 1 / 1; }
.owner-bg-img {
	position: relative; z-index: 0; min-height: clamp(560px, 82vh, 900px);
	background: var(--img) center 74% / cover no-repeat;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 14%, #000 34%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 14%, #000 34%);
	filter: none;
}
.owner-bg-img::after { content: none; }
html[data-theme="dark"] .owner-bg-img { filter: brightness(.48) saturate(.85) contrast(1.05); }
.owner-bg-in { position: relative; z-index: 2; align-self: start; padding: clamp(96px, 12vw, 170px) 0 0; }
.owner-card { grid-column: 1 / span 6; padding: 0; display: grid; gap: 18px; background: none; }
.owner-card h2 { font-size: clamp(34px, 4vw, 56px); text-transform: uppercase; line-height: 1; }
.owner-card p { color: var(--ink); max-width: 46ch; }
html[data-theme="light"] .owner-card p { color: #2E3530; }
/* ruled foot: heavy olive bar on the edge, two finer lines above it, amber marker on the grid line */
.owner-rule.bottom { align-self: end; position: relative; z-index: 3; height: 24px; transform: none; pointer-events: none; }
.owner-rule.bottom i { position: absolute; left: 0; right: 0; display: block; }
.owner-rule.bottom i:nth-child(1) { bottom: 0; top: auto; height: 8px; background: var(--olive); opacity: 1; }
.owner-rule.bottom i:nth-child(2) { bottom: 13px; top: auto; height: 1px; background: #E8E6DF; opacity: .55; }
.owner-rule.bottom i:nth-child(3) { bottom: 18px; top: auto; height: 1px; background: #E8E6DF; opacity: .3; }
.owner-rule.bottom b { position: absolute; bottom: 1px; top: auto; left: max(var(--gut, 24px), calc((100vw - var(--max, 1280px)) / 2 + var(--gut, 24px))); width: 16px; height: 16px; background: var(--thermal); }
html[data-theme="dark"] .owner-rule.bottom i:nth-child(1) { background: #4C5F3D; }
@media (max-width: 900px) {
	.owner-bg { grid-template-rows: none; }
	.owner-bg-img, .owner-rule.bottom, .owner-bg-in { grid-row: 1; }
	.owner-bg-img { min-height: 640px; background-position: center 70%; }
	.owner-bg-in { padding-top: 72px; margin-top: 0; }
	.owner-card { grid-column: 1 / -1; }
}

/* ================================================================ round 17 */
/* credentials: one sky from the top of the page to the owner's treeline (photo sits on its bottom edge, sky colour fills above) */
.wgs-main > div.cred-sky { position: relative; z-index: auto; }
.cred-sky-img { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--img) center bottom -30vw / 100% auto no-repeat, #C0C1BA; }
html[data-theme="dark"] .cred-sky-img { filter: brightness(.34) saturate(.85); }
.pg-our-credentials .pg-mark { z-index: 1; }
.cred-sky > section { position: relative; z-index: 2; }
.cred-sky .phero { padding-bottom: clamp(24px, 3vw, 48px); }
.cred-sky .owner-bg { display: block; overflow: visible; min-height: clamp(560px, 54vw, 860px); }
.cred-sky .owner-bg-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: clamp(40px, 6vw, 96px); padding-bottom: 0; }
.cred-sky .owner-card { position: relative; grid-column: 1 / span 6; }
/* a soft sky-coloured glow keeps the text clear wherever the treetops reach */
.cred-sky .owner-card::before { content: ""; position: absolute; inset: -12% -14% -16% -10%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(192,193,186,.78), rgba(192,193,186,.4) 60%, transparent); }
html[data-theme="dark"] .cred-sky .owner-card::before { background: radial-gradient(closest-side, rgba(12,16,14,.6), rgba(12,16,14,.25) 60%, transparent); }
.cred-sky > .owner-rule.bottom { position: relative; z-index: 3; display: block; height: 24px; transform: none; pointer-events: none; }
html:not([data-theme="dark"]) .cred-sky .phero-txt .lead, html:not([data-theme="dark"]) .cred-sky .owner-card p { color: #262C28; }
html[data-theme="dark"] .cred-sky .phero-txt .lead, html[data-theme="dark"] .cred-sky .owner-card p { color: #DAD8D0; }
html[data-theme="dark"] .cred-sky-img { filter: brightness(.3) saturate(.9); }
@media (max-width: 900px) {
	.cred-sky-img { background-position: center bottom; }
	.cred-sky .owner-bg { min-height: 0; padding-bottom: 92vw; }
	.cred-sky .owner-card { grid-column: 1 / -1; }
}

/* credentials eagle: calcite panel set lower, so the eagle and the top of its pine break out above it */
html[data-theme] .cred-eagle .win-cred, .cred-eagle .win-cred { --win: var(--calcite, #E8E6DF); inset: 42% 0 14px 0; box-shadow: 0 30px 60px -36px rgba(26,29,28,.45); }
html[data-theme="dark"] .cred-eagle .win-cred { --win: #D3D1C9; }
.cred-eagle img { filter: drop-shadow(0 18px 22px rgba(26,29,28,.18)); }


/* service area: SERVING / regions / VERMONT on its side, one block */
.regions { width: min(100%, 360px); color: var(--ink, #1A1D1C); margin: 6px 0 4px; }
.regions svg { display: block; width: 100%; height: auto; overflow: visible; }
.regions text { font-family: var(--display); font-weight: 700; fill: currentColor; }
.regions .rg-serving { fill: var(--sub); }
.regions .rg-vt { fill: var(--pg, var(--olive)); }
.regions .rg-rule { fill: var(--thermal); }
html[data-theme="dark"] .regions .rg-vt { fill: #9BAF8F; }

/* ================================================================ round 18 */
/* page changes: only the new page's header is shown, so a scrolled-away header never appears twice */
::view-transition-old(wg-header) { display: none; }
::view-transition-new(wg-header) { animation: none; }
/* phones: "Contact us" stays in the header bar from the first screen; the portal button moves to the menu sheet to make room */
@media (max-width: 640px) {
	.act { gap: 6px; }
	.act .req { display: inline-flex; height: 38px; padding: 0 10px; font-size: 12.5px; letter-spacing: .07em; }
	.act .portal { display: none; }
	.theme-t, .menu-t { width: 38px; height: 38px; }
}
@media (max-width: 350px) { .bar .logo .word { display: none; } }
/* 404: the eagle photo fills the screen and "404" sits to the right of its head, in its line of sight */
.nf.nf-eagle { position: relative; overflow: hidden; isolation: isolate; color: #E8E6DF; min-height: 100vh; min-height: 100svh; align-items: center; }
.nf-bg { position: absolute; inset: 0; z-index: -1; background: var(--img) 90% 40% / cover no-repeat #1D2A26; }
.nf-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, rgba(8,14,13,.45) 75%, rgba(8,14,13,.62)); }
.nf-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.nf-copy { grid-column: 9 / span 4; display: grid; gap: 18px; }
.nf .nf-code { margin: 0 0 -.06em; font: 700 clamp(120px, 17vw, 300px)/.8 var(--display); letter-spacing: -.01em; color: #E8E6DF; text-shadow: 0 10px 40px rgba(0,0,0,.35); }
.nf-eagle h1 { color: #E8E6DF; font-size: clamp(30px, 3.2vw, 48px); }
.nf-eagle p { color: rgba(232,230,223,.86); }
.nf-eagle .lbl { color: rgba(232,230,223,.8); }
@media (max-width: 900px) {
	.nf.nf-eagle { align-items: flex-end; padding-bottom: 48px; }
	.nf-bg { background-image: var(--img-sm); background-position: 32% top; background-size: auto 70%; background-color: #16211E; }
	.nf-bg::after { background: linear-gradient(180deg, transparent 40%, #16211E 70%); }
	.nf-copy { grid-column: 1 / -1; }
	.nf .nf-code { font-size: clamp(110px, 34vw, 220px); }
}

/* ================================================================ round 19 */
/* green house animation: a thick white sticker edge drawn around the whole house (slab ends included), with a soft shadow.
   The backing is 832px square with the 720px video frame inset 56px (6.73%), so the video sits inside that padding. */
.vid.vid-house { padding: 6.73%; background: none !important; box-shadow: none !important; outline: 0 !important; }
.vid.vid-house::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("media/house-sticker.webp") center / 100% 100% no-repeat; }
.vid.vid-house .vid-poster { inset: auto; top: 6.73%; left: 6.73%; width: 86.54%; height: 86.54%; }
.vid.vid-house .vid-canvas, .vid.vid-house video, .vid.vid-house .vid-poster { -webkit-mask-image: none; mask-image: none; }

/* credentials eagle: the calcite panel's top edge rises toward the heading on the right (about 9 degrees) */
.cred-eagle .win.win-cred { inset: 30% 0 14px 0; -webkit-clip-path: polygon(0 36%, 100% 0, 100% 100%, 0 100%) !important; clip-path: polygon(0 36%, 100% 0, 100% 100%, 0 100%) !important; box-shadow: none; }

/* FAQs: the open answer sits on its own panel with an orange edge, in full-strength text, so it reads apart from the list */
.faq details { transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.faq details[open] { --fx: min(22px, calc(var(--gut) - 4px)); margin: 6px calc(-1 * var(--fx)); padding: 0 var(--fx); border-bottom-color: transparent; background: rgba(255,255,255,.66); box-shadow: inset 4px 0 0 var(--thermal), 0 22px 44px -34px rgba(26,29,28,.55); }
html[data-theme="dark"] .faq details[open] { background: rgba(232,230,223,.07); box-shadow: inset 4px 0 0 var(--thermal), 0 22px 44px -30px rgba(0,0,0,.8); }
.faq details[open] > summary { font-weight: 700; }
.faq details[open] > p, .faq details[open] > .sup-a { color: var(--ink); font-size: 17px; line-height: 1.7; }
.faq details[open] .sup-helpful { color: var(--sub); font-size: 14px; }

/* Check a ticket: a solid panel like the site's forms (green top edge, orange corner marks), not see-through glass */
.sup-dlg { width: min(640px, calc(100vw - 32px)); }
.sup-dlg::backdrop { background: rgba(14,18,16,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sup-dlg-in { background: var(--calcite); border: 1px solid var(--line); border-top: 6px solid var(--olive); box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="dark"] .sup-dlg-in { background: #141A17; border-top-color: #4C5F3D; }
.sup-dlg-in .corner.tl { top: -6px; }
.sup-dlg-x { top: 14px; right: 14px; width: 40px; height: 40px; border: 1px solid var(--line); font-size: 24px; line-height: 1; display: grid; place-items: center; }
.sup-dlg-x:hover { border-color: var(--ink); }
.sup-check .lbl { margin-bottom: -6px; }

/* no light gap above the footer where a page ends on a full photo */
.pg-our-credentials .blur-end, .wgs-404 .blur-end, .pg-contact-request .blur-end, .pg-user-portal .blur-end { display: none; }

/* those two pages also skip the bottom blur strip, which would otherwise park over the photo just above the footer */
.pg-our-credentials .blurbar, .wgs-404 .blurbar, .pg-contact-request .blurbar, .pg-user-portal .blurbar { display: none; }

/* ================================================================ round 20 */
/* Keep the section hairline and spacing without the small numbered labels. */
.lbl.sec { display: flex; align-items: center; width: 100%; min-height: 1em; }
.lbl.sec::after { content: ""; flex: 1 1 24px; min-width: 24px; height: 1px; background: linear-gradient(90deg, var(--thermal) 0 32px, var(--line) 32px); }
.acr.green .lbl.sec::after { background: linear-gradient(90deg, var(--solar) 0 32px, rgba(232,230,223,.3) 32px); }
.head > .lbl.sec { margin-bottom: 10px; }

/* the same rhythm between every section; the eagle no longer needs extra room */
.heritage { padding: clamp(60px, 7.5vw, 112px) 0; }
.heritage-in > .eagle-stage { padding: 0; }

/* house animation: no panel behind it, and a thinner, crisp edge with mitred corners (house-edge.webp, 780px square,
   video frame inset 30px = 3.846%) */
.vid.vid-house { padding: 3.846%; }
.vid.vid-house::before { background-image: url("media/house-edge.webp"); }
.vid.vid-house .vid-poster { top: 3.846%; left: 3.846%; width: 92.308%; height: 92.308%; }
.house-media { display: grid; place-items: center; }
.house-media .vid.vid-house { width: min(100%, 560px); }

/* credentials eagle: the calcite panel's top edge now falls toward the heading on the right (about 9 degrees) */
.cred-eagle .win.win-cred { inset: 30% 0 14px 0; -webkit-clip-path: polygon(0 0, 100% 36%, 100% 100%, 0 100%) !important; clip-path: polygon(0 0, 100% 36%, 100% 100%, 0 100%) !important; }

/* Meet the owner: a glass card in the same right-hand column as the page heading, signed, over the softened pines */
.cred-sky .owner-card.acr { grid-column: 8 / span 5; padding: clamp(24px, 3vw, 40px); gap: 16px; --glass: rgba(236,234,227,.64); background-color: var(--glass); background-image: var(--grain); }
html[data-theme="dark"] .cred-sky .owner-card.acr { --glass: rgba(12,16,14,.64); }
.cred-sky .owner-card::before { content: none; }
.cred-sky .owner-card h2 { font-size: clamp(30px, 3.2vw, 44px); }
.owner-card .owner-sign { display: flex; align-items: center; gap: 14px; margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--line); max-width: none; font: 700 14px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.owner-sign small { display: block; margin-top: 4px; font: 500 14px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--sub); }
.owner-mark { flex: none; display: block; }
.owner-mark img { height: 36px; width: auto; }
@media (max-width: 1100px) { .cred-sky .owner-card.acr { grid-column: 6 / span 7; } }
@media (max-width: 900px) { .cred-sky .owner-card.acr { grid-column: 1 / -1; } }

/* service area: hero like every inner page, then one panel: the regions lockup beside the town question */
.area-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
.area-lock { display: grid; place-items: center; padding: clamp(28px, 4vw, 56px); border-right: 1px solid var(--line); }
.area-lock .regions { width: min(100%, 360px); margin: 0; }
.area-ask { display: grid; gap: 16px; align-content: center; padding: clamp(28px, 4vw, 56px); }
.area-ask h2 { font-size: clamp(30px, 3.4vw, 48px); text-transform: uppercase; }
.area-call { font-size: 15px; color: var(--sub); }
.area-call a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.area-call a:hover { color: var(--thermal); }
.pg-service-area .phero-media.map img { max-width: 520px; margin-left: auto; }
@media (max-width: 860px) { .area-panel { grid-template-columns: minmax(0, 1fr); } .area-lock { border-right: 0; border-bottom: 1px solid var(--line); } }

/* FAQ answers (Radon resources uses a div so an answer can hold a list) */
.faq-a { padding: 0 0 22px; color: var(--sub); max-width: 40em; }
.faq details[open] > .faq-a { color: var(--ink); font-size: 17px; line-height: 1.7; }
.faq-a ul, .sup-a ul { margin: 12px 0 0; padding-left: 1.25em; display: grid; gap: 6px; }
.faq-a li::marker, .sup-a li::marker { color: var(--thermal); }
/* while an answer slides shut, its panel and the + mark return to rest straight away */
.faq details[open].is-closing { background-color: transparent; box-shadow: none; }
.faq details[open].is-closing summary .ic { transform: none; }

/* cookie choice: a hazard sign. .ck-s is drawn at 400 × 346 and scaled down on narrow screens */
.ck { --s: 1; position: fixed; z-index: 150; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); width: calc(400px * var(--s)); height: calc(346px * var(--s)); color: #1A1D1C; transform-origin: 40% 100%; filter: drop-shadow(0 18px 28px rgba(10,12,11,.32)); }
.ck[hidden] { display: none !important; }
.ck.in { animation: ck-in .95s cubic-bezier(.2, .9, .25, 1.15) both; }
.ck.out { animation: ck-out .45s cubic-bezier(.7, 0, .2, 1) both; pointer-events: none; }
@keyframes ck-in { 0% { opacity: 0; transform: translateY(56px) rotate(-7deg); } 55% { opacity: 1; transform: translateY(-6px) rotate(1.5deg); } 80% { transform: translateY(2px) rotate(-.5deg); } 100% { opacity: 1; transform: none; } }
@keyframes ck-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(80px) rotate(5deg); } }
html[data-theme="dark"] .ck { filter: drop-shadow(0 0 1px rgba(232,230,223,.6)) drop-shadow(0 20px 34px rgba(0,0,0,.65)); }
.ck-s { position: absolute; left: 0; bottom: 0; width: 400px; height: 346px; transform: scale(var(--s)); transform-origin: 0 100%; }
.ck-tri { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ck-edge { fill: #1A1D1C; stroke: #1A1D1C; stroke-width: 24; stroke-linejoin: round; }
.ck-face { fill: #FC9100; stroke: #FC9100; stroke-width: 8; stroke-linejoin: round; }
/* the text keeps inside the slopes: two floats shaped like the triangle's sides */
.ck-in { position: absolute; left: 0; top: 0; width: 400px; height: 250px; padding-top: 92px; text-align: center; }
.ck-fl, .ck-fr { width: calc(50% - .5px); height: 158px; }
.ck-fl { float: left; -webkit-shape-outside: polygon(0 0, 93.5% 0, 47.5% 100%, 0 100%); shape-outside: polygon(0 0, 93.5% 0, 47.5% 100%, 0 100%); }
.ck-fr { float: right; -webkit-shape-outside: polygon(100% 0, 6.5% 0, 52.5% 100%, 100% 100%); shape-outside: polygon(100% 0, 6.5% 0, 52.5% 100%, 100% 100%); }
.ck-ico { line-height: 0; }
.ck-mark { display: inline-block; width: 30px; height: 30px; fill: #1A1D1C; }
.ck-mark .ck-chip { fill: #FC9100; }
.wgs .ck-k { margin-top: 8px; font: 700 19px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; }
.wgs .ck-t { margin-top: 8px; font: 500 14px/1.35 var(--body); }
.ck-t a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.ck-b { position: absolute; left: 50%; top: 262px; transform: translateX(-50%); display: flex; gap: 8px; }
.ck-b button { width: 112px; height: 40px; padding: 0; border: 2px solid #1A1D1C; font: 700 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s; }
.ck-yes { background: #1A1D1C; color: #FC9100; }
.ck-yes:hover { background: #000; color: #FFB347; }
.ck-no { background: transparent; color: #1A1D1C; }
.ck-no:hover { background: rgba(26,29,28,.12); }
.ck :focus-visible { outline: 2px solid #1A1D1C; outline-offset: 2px; }
@media (max-width: 440px) { .ck { --s: .84; left: 0; right: 0; margin: 0 auto; } }
@media (max-width: 360px) { .ck { --s: .76; } }
@media print { .ck { display: none !important; } }

/* fit pass: nothing leaves its container at any width.
   On tablets and phones every two-column row stacks; the desktop placements (e.g. ".split > .split-txt") carry more
   weight than the old phone rule, so the stacking rule is stated with !important here. */
@media (max-width: 900px) {
	.split > .split-txt, .split > .split-media, .split.rev > .split-txt, .split.rev > .split-media,
	.head > .lbl, .head > h2, .head > p, .head > h2:last-child,
	.heritage-in > .split-txt, .heritage-in > .eagle-stage, .faq-grid > :first-child, .faq-grid > .faq,
	.phero-in > .phero-txt, .phero-in > :last-child:not(.phero-txt), .phero-in:has(.cred-eagle) > *,
	.owner-bg-in > .owner-card, .nf-grid > .nf-copy, .sup-help-in > .sup-help-txt, .sup-help-in > .sup-form { grid-column: 1 / -1 !important; }
	.split.rev > .split-media { order: -1; }
	.steps li:nth-child(2n) .step-mark { right: 0; }
}
@media (max-width: 520px) { .steps li .step-mark { right: 0; } }
/* the "on this page" links wrap onto a second line rather than running off the screen */
.jump { flex-wrap: wrap; overflow: visible; }
/* 404: the text column never grows past its grid track */
.nf-copy { grid-template-columns: minmax(0, 1fr); }
.nf-copy > * { min-width: 0; }
.wgs h1, .wgs h2 { overflow-wrap: break-word; }

/* ================================================================ round 21 */
/* service area: the regions as three equal columns on one ruled line, then the town question in one calm panel */
.area-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.area-list li { position: relative; display: grid; gap: 8px; align-content: start; padding: 26px 24px 30px; border-left: 1px solid var(--line); }
.area-list li:first-child { border-left: 0; padding-left: 0; }
.area-list li::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 3px; background: var(--thermal); }
.area-list li:not(:first-child)::before { left: 24px; }
.area-list small { font: 700 13px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--sub); }
.area-list b { font: 700 clamp(26px, 2.6vw, 38px)/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.area-sec2 .area-ask { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px; margin-top: clamp(32px, 4vw, 52px); padding: clamp(22px, 3vw, 36px); }
.area-sec2 .area-ask > div:first-child { display: grid; gap: 8px; }
.area-sec2 .area-ask h2 { font-size: clamp(24px, 2.4vw, 32px); text-transform: uppercase; }
.area-sec2 .area-ask p { color: var(--sub); }
/* light mode: the regions sit on solid calcite that fades up into the topography behind the map */
html:not([data-theme="dark"]) .pg-service-area .area-sec2 { background: linear-gradient(to bottom, rgba(232,230,223,0) 0, #E8E6DF clamp(90px, 10vw, 160px)); padding-top: clamp(100px, 11vw, 170px); }
html:not([data-theme="dark"]) .pg-service-area .blur-end { position: relative; z-index: 1; background: #E8E6DF; }

/* testing page: four different shapes so the sections don't repeat each other */
.t-why-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px; align-items: start; }
.t-why-txt { grid-column: 1 / span 7; display: grid; gap: 28px; }
.t-why-txt h2.h3 { font-size: clamp(24px, 2.2vw, 30px); text-transform: uppercase; margin-bottom: 10px; }
.t-when { grid-column: 9 / span 4; padding: clamp(22px, 3vw, 34px); display: grid; gap: 14px; }
.t-when h2.h3 { font-size: 26px; text-transform: uppercase; }
.t-when ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.t-when li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 16px; line-height: 1.4; }
.t-when li::before { content: ""; width: 10px; height: 10px; margin-top: 6px; background: var(--solar); }
.t-steps-band { --glass: rgba(52,70,47,.92); --glass-edge: rgba(190,210,175,.3); --glass-hl: rgba(220,232,210,.2); color: #E8E6DF; padding: clamp(28px, 4vw, 56px); }
html[data-theme="dark"] .t-steps-band { --glass: rgba(52,70,47,.6); }
.t-steps-band .lbl.sec::after { background: linear-gradient(90deg, var(--solar) 0 32px, rgba(232,230,223,.28) 32px); }
.t-steps-band .head p { color: rgba(232,230,223,.8); }
/* how a test works: a timeline. Across on wide screens (rail through the nodes), down the left edge on narrow ones. */
.t-steps-list { --node: 18px; list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
.t-steps-list::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--node) / 2 - 1px); height: 2px; background: linear-gradient(90deg, var(--solar) 0 12%, rgba(232,230,223,.32) 12%); }
.t-steps-list li { position: relative; display: grid; gap: 10px; align-content: start; padding: calc(var(--node) + 26px) 28px 0 0; }
.t-dot { position: absolute; left: 0; top: 0; width: var(--node); height: var(--node); background: #34462F; border: 2px solid var(--solar); }
.t-steps-list li:first-child .t-dot { background: var(--solar); }
.t-steps-list li:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--node) / 2 - 4px); right: 14px; width: 8px; height: 8px; border-top: 2px solid rgba(232,230,223,.5); border-right: 2px solid rgba(232,230,223,.5); transform: rotate(45deg); }
.t-num { font: 700 clamp(40px, 4.2vw, 60px)/.85 var(--display); color: var(--solar); }
.t-steps-list h3 { font-size: 26px; text-transform: uppercase; }
.t-steps-list p { color: rgba(232,230,223,.82); }
.t-types { border-top: 1px solid var(--line); }
.t-type { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 8px var(--col-gap); padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.t-type b { font: 700 clamp(22px, 2vw, 28px)/1.1 var(--display); text-transform: uppercase; }
.t-type p { color: var(--sub); font-size: 17px; }
@media (max-width: 900px) {
	.t-why-txt, .t-when { grid-column: 1 / -1 !important; }
	.t-steps-list { grid-template-columns: minmax(0, 1fr); }
	.t-steps-list::before { left: calc(var(--node) / 2 - 1px); right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, var(--solar) 0 18%, rgba(232,230,223,.32) 18%); }
	.t-steps-list li { grid-template-columns: 58px minmax(0, 1fr); column-gap: 14px; padding: 0 0 30px calc(var(--node) + 22px); }
	.t-steps-list li:last-child { padding-bottom: 0; }
	.t-steps-list li::after { display: none; }
	.t-steps-list .t-num { grid-row: span 2; font-size: 44px; }
	.t-steps-list h3 { align-self: end; }
}
@media (max-width: 560px) {
	.t-steps-list li { grid-template-columns: minmax(0, 1fr); }
	.t-steps-list .t-num { grid-row: auto; font-size: 36px; }
	.t-type { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
	.area-list { grid-template-columns: minmax(0, 1fr); }
	.area-list li, .area-list li:first-child { border-left: 0; padding: 22px 0; border-bottom: 1px solid var(--line); }
	.area-list li:not(:first-child)::before { left: 0; }
}

/* FAQ sections link to each other */
.faq-more { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid var(--line); max-width: 420px; }
.faq-more b { font: 700 12px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--sub); padding: 14px 0 6px; }
.faq-more a { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.faq-more a small { font: 700 13px/1 var(--display); color: var(--sub); min-width: 26px; text-align: right; }
.faq-more a svg { width: 16px; height: 16px; color: var(--solar); transition: transform .3s var(--ease); }
.faq-more a:hover svg { transform: translateX(4px); }
.sup-arts .faq-more { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 40px; }
.sup-arts .faq-more b { grid-column: 1 / -1; }
@media (max-width: 760px) { .sup-arts .faq-more { grid-template-columns: minmax(0, 1fr); } }
/* the Support search has its own clear button, so the browser's built-in one is hidden (it showed a second ×) */
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
input[type=search]::-ms-clear { display: none; }

/* ------------------------------------------------------------------ client portal (signed in): full width, steady */
.acct-portal .wrap { max-width: var(--max); }
.acct-portal .portal-embed { overflow: visible; view-transition-name: none; font-size: 16px; }
.portal-embed { view-transition-name: none; }

/* portal: a thin bar along the top of the content while a tab is on its way (only when it takes a moment) */
.portal-embed .p-main { position: relative; }
.portal-embed .p-main.is-busy::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 2px; background: linear-gradient(90deg, transparent, var(--olive), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: wg-busy 1s linear infinite; }
@keyframes wg-busy { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* ---- round 42 ---- */
/* text flows evenly: headings balanced, paragraphs without a lonely last word (PHP also joins the last two words) */
h1, h2, h3, h4, .lead, .h3 { text-wrap: balance; }
p, li, dd, dt, blockquote, figcaption { text-wrap: pretty; }
/* the soft blur at the bottom of the screen stays off pages where people read details or fill something in */
.pg-contact .blur-end, .pg-contact .blurbar, .pg-sign-in .blur-end, .pg-sign-in .blurbar, .pg-sign-up .blur-end, .pg-sign-up .blurbar,
.pg-support .blur-end, .pg-support .blurbar, .pg-field-office .blur-end, .pg-field-office .blurbar, .pg-activate .blur-end, .pg-activate .blurbar,
.pg-sign-out .blur-end, .pg-sign-out .blurbar { display: none !important; }
/* laptops and other short screens: a shallower blur, so less of the page sits under it */
@media (max-height: 900px) { :root { --blur-h: 96px; } }
@media (max-height: 700px) { :root { --blur-h: 64px; } }
/* How a test works in night mode: a solid card (no see-through glass sampling the moving layers behind it) */
html[data-theme="dark"] .t-steps-band { --glass: #26311F; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- round 43 ---- */
/* home: the small card under the hero starts with the question itself */
.hero-card .hc-q { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
/* page FAQs: "More questions" lines up with the bottom of the last question */
@media (min-width: 901px) {
	.faq-grid { align-items: stretch; }
	.faq-grid > :first-child { display: flex; flex-direction: column; }
	.faq-grid > :first-child > .head { margin-bottom: 26px; }
	.faq-grid > :first-child > .faq-more { margin-top: auto; }
}
/* Support: the topics come in as one wave, left to right */
.sup-cats.wave { opacity: 1; transform: none; }
.sup-cats.wave:not(.in) > .sup-cat { opacity: 0; }
.sup-cats.wave.in > .sup-cat { animation: wgs-wave .75s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes wgs-wave { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sup-cats.wave > .sup-cat { opacity: 1 !important; animation: none !important; } }
/* sign in: "Forgot password?" on the password label's line */
.auth-f-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-f .auth-forgot { min-height: 0; font: 600 13px/1.2 var(--body); letter-spacing: 0; text-transform: none; color: var(--sub); }
.auth-f .auth-forgot:hover { color: var(--thermal); }
.auth-linkgo { justify-items: start; }
form.auth[method=post] .auth-f { max-width: 460px; }
/* short labels (stats, hours) break evenly instead of leaving one word behind */
.stat p, .hours-note, .t-type p, .card p { text-wrap: balance; }

/* 2026-10-19: Services dropdown indicator is the FAQ plus, turning to an x when open */
.ind { width: 14px; height: 14px; display: inline-flex; background: none; opacity: .6; }
.ind .ic, .ind svg { width: 14px; height: 14px; }
.dd.open .ind { background: none; color: var(--thermal); }
/* 2026-10-19: support topics animate down each column in turn (1:1, 1:2, 2:1, 2:2, 3:1, 3:2) */
@media (min-width: 1001px) {
	.sup-cats > .sup-cat:nth-child(1) { --i: 0 !important; } .sup-cats > .sup-cat:nth-child(4) { --i: 1 !important; }
	.sup-cats > .sup-cat:nth-child(2) { --i: 2 !important; } .sup-cats > .sup-cat:nth-child(5) { --i: 3 !important; }
	.sup-cats > .sup-cat:nth-child(3) { --i: 4 !important; } .sup-cats > .sup-cat:nth-child(6) { --i: 5 !important; }
}
@media (min-width: 601px) and (max-width: 1000px) {
	.sup-cats > .sup-cat:nth-child(1) { --i: 0 !important; } .sup-cats > .sup-cat:nth-child(3) { --i: 1 !important; } .sup-cats > .sup-cat:nth-child(5) { --i: 2 !important; }
	.sup-cats > .sup-cat:nth-child(2) { --i: 3 !important; } .sup-cats > .sup-cat:nth-child(4) { --i: 4 !important; } .sup-cats > .sup-cat:nth-child(6) { --i: 5 !important; }
}
/* 2026-10-19: top strip no longer has the tagline; links stay on the right */
@media (min-width: 1101px) { .strip-in { justify-content: flex-end; } }

/* ================================================================ 2026-10-20 phone/tablet menu */
/* solid sheet (no see-through glass), sized to the screen, its own scroll, big tap targets */
.sheet.acr { --glass: #E8E6DF; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 30px 60px -30px rgba(26,29,28,.55); }
html[data-theme="dark"] .sheet.acr { --glass: #1A1D1C; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.sheet { max-width: calc(var(--max) - 2 * var(--gut)); margin: 0 auto; max-height: calc(100vh - var(--bar-h, 64px) - 64px); max-height: calc(100dvh - var(--bar-h, 64px) - 64px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet > a { min-height: 54px; padding: 0 12px; font-size: 18px; line-height: 1.15; gap: 12px; }
.sheet > a:active { background: rgba(76,95,61,.12); }
.sheet-act { gap: 10px; padding: 14px 4px 4px; }
.sheet-act > a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; height: auto; }
/* "Signed in as Name · Sign out": one centred row, Sign out vertically level with the name */
.sheet-act .who-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; min-height: 50px; padding: 10px 14px; line-height: 1.3; }
.sheet-act .who-line .who-sep { display: none; }
.sheet-act .who-line .who-n { min-width: 0; overflow-wrap: anywhere; }
.sheet-act .who-line a { display: inline-flex; align-items: center; height: auto; min-height: 36px; padding: 0 2px; line-height: 1; }
/* lock the page behind an open menu */
html:has(.sheet.open), html:has(.sheet.open) body { overflow: hidden; }
@media (max-width: 640px) {
	.sheet > a { font-size: 17px; }
}
@media (min-width: 641px) and (max-width: 1240px) {
	/* tablets: two columns of links, actions in a row */
	.sheet.open { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
	.sheet-act { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
	.sheet-act .who-line { grid-column: 1 / -1; }
}
/* open menu covers the whole page under the header bar, so nothing behind it can be tapped */
@media (max-width: 1240px) {
	.sheet.acr.open { position: fixed; inset: 0; z-index: -1; max-width: none; max-height: none; margin: 0; border: 0; box-shadow: none; align-content: start;
		padding: var(--sheet-top, 120px) max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))) max(24px, env(safe-area-inset-bottom)); overflow-y: auto; }
	.sheet.open { animation: none; }
}
/* menu open: above everything (the portal's phone tab bar too), and the page's side scroll rail is hidden */
.hdr:has(.sheet.open) { z-index: 10000; }
html:has(.sheet.open) .rail { display: none; }
/* condensed so the whole menu fits a phone screen without scrolling; actions in a 2 x 2 grid
   (Portal | Sign in, Contact us | phone); signed in, Portal takes the full row; staff get Field Office as a last full row */
@media (max-width: 1240px) {
	.sheet > a { min-height: clamp(40px, 6.2vh, 52px); min-height: clamp(40px, 6.2dvh, 52px); font-size: 16.5px; }
	.sheet-act { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0 0; }
	.sheet-act > a { min-height: clamp(42px, 5.8dvh, 48px); padding: 0 8px; font-size: 14px; gap: 8px; white-space: nowrap; }
	.sheet-act.in .portal, .sheet-act .sheet-fo { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 1240px) {
	.sheet-act { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sheet-act.in .portal { grid-column: auto; }
}
/* menu buttons: phone | Contact us, then Sign in (or Field Office for staff), then a larger User portal at the bottom;
   the header's own Contact us hides while the menu is open */
.hdr:has(.sheet.open) .act .req { display: none; }
@media (max-width: 1240px) {
	.sheet-act { grid-template-columns: 1fr 1fr; }
	.sheet-act > a:nth-child(n+3) { grid-column: 1 / -1; }
	.sheet-act > a.portal { min-height: clamp(50px, 7.4dvh, 60px); font-size: 16px; }
	.sheet-act > a.portal .ic { width: 20px; height: 20px; }
}
@media (max-width: 1240px) { .sheet-act.in > a.portal { grid-column: 1 / -1; } }

/* ================================================================ 2026-10-20 signed in: User portal is the header button */
/* signed-in visitors get User portal in the header bar on every screen size; Contact us moves to the menu */
@media (max-width: 640px) {
	.hdr:has(.sheet-act.in) .act .portal { display: inline-flex; height: 38px; padding: 0 10px 0 12px; gap: 7px; font-size: 12.5px; letter-spacing: .07em; }
	.hdr:has(.sheet-act.in) .act .portal span { display: inline; }
	.hdr:has(.sheet-act.in) .act .req { display: none; }
}
@media (min-width: 641px) and (max-width: 1240px) {
	.hdr:has(.sheet-act.in) .act .portal span { display: inline; }
	.hdr:has(.sheet-act.in) .act .req { display: none; }
}
@media (max-width: 350px) { .hdr:has(.sheet-act.in) .act .portal span { display: none; } }
/* signed in on narrow phones: the logo drops to the mark so User portal and the menu button stay inside the bar */
.bar .act > * { flex: none; }
@media (max-width: 440px) { .hdr:has(.sheet-act.in) .bar .logo .word { display: none; } }

/* ================================================================ 2026-10-20 menu matches the portal's */
/* phone/tablet menu: page tiles in two columns, User portal (and Field Office for staff) set apart,
   then Contact us, phone, theme and Sign in/out pinned to the bottom */
@media (max-width: 1240px) {
	.sheet.acr.open { display: flex; flex-direction: column; }
	.sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
	.sheet-grid a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: clamp(52px, 7.6vh, 64px); min-height: clamp(52px, 7.6dvh, 64px); padding: 0 14px; background: var(--glass); color: var(--ink); font: 700 15px/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; }
	.sheet-grid a .ic { flex: none; color: var(--thermal); }
	.sheet-grid a.on { box-shadow: inset 3px 0 0 var(--olive); }
	.sheet-x { margin: 12px 0 16px; }
	.sheet-x a { justify-content: flex-start; }
	.sheet-x a .ic { color: currentColor; }
	.sheet-x .sheet-portal { grid-column: 1 / -1; min-height: 56px; background: var(--olive); color: #E8E6DF; box-shadow: inset 3px 0 0 var(--thermal); font-size: 16px; }
	.sheet-x:has(> a + a) .sheet-portal { grid-column: auto; }
	.sheet .sheet-act { margin-top: auto; grid-template-columns: 1fr; gap: 10px; padding: 14px 0 max(4px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
	.sheet-act > a.sheet-req { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0; background: var(--thermal); color: var(--charcoal); font: 700 15px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
	.sheet-row { display: flex; align-items: center; gap: 14px; min-height: 42px; }
	.sheet-tel { flex: 1; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 600; }
	.sheet-row .theme-t { flex: none; width: 40px; height: 40px; }
	.sheet-acc { flex: none; color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 380px) { .sheet-grid a { font-size: 13.5px; padding: 0 10px; } }
@media (max-width: 1240px) { .sheet-row a { height: auto; min-height: 42px; display: inline-flex; align-items: center; justify-content: flex-start; padding: 0; border: 0; } .sheet-row .sheet-tel { flex: 1; } }
/* 2026-10-21: with the menu open the header's User portal button folds away (the menu has its own) */
.hdr:has(.sheet.open) .act .portal { display: none !important; }
/* green buttons use white text */
.portal, .sheet-x .sheet-portal { color: #fff; }