@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{--ink:#07181b;--ink2:#0b2428;--mint:#91e8c5;--mint2:#d9fff0;--paper:#f6f8f3;--line:rgba(8,34,38,.12);--muted:#67767a;--white:#fff;--radius:28px;--shadow:0 25px 80px rgba(5,25,28,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#071b20!important;overscroll-behavior-y:none;color-scheme:dark}body{margin:0;background:#071b20!important;color:var(--ink);font-family:'DM Sans',sans-serif;overflow-x:hidden;overscroll-behavior-y:none;min-height:100dvh}#root{min-height:100dvh;background:var(--paper)}.shell{width:min(1180px,calc(100% - 40px));margin:auto}.section{padding:118px 0}.glass{background:rgba(255,255,255,.76);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.75);box-shadow:0 12px 45px rgba(5,20,23,.12)}
button,a{font:inherit}.navWrap{position:fixed;z-index:50;top:0;left:0;width:100%;padding-top:18px;pointer-events:none;background:linear-gradient(180deg,#071b20 0 18px,rgba(7,27,32,0) 18px)}.nav{width:min(1180px,calc(100% - 32px));margin:auto;height:72px;border-radius:22px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 18px;pointer-events:auto}.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}.brandMark{height:37px;width:42px;border-radius:9px;background:var(--ink);display:grid;place-items:center;position:relative;overflow:hidden}.brandMark b{font:800 21px/1 'Manrope';color:white;position:relative;z-index:2}.brandMark i{position:absolute;right:0;top:0;height:100%;width:5px;background:var(--mint)}.brandMark.light{background:white}.brandMark.light b{color:var(--ink)}.brandText{display:flex;flex-direction:column;line-height:.93}.brandText strong{font:800 15px/1 'Manrope';letter-spacing:.15em}.brandText small{font-size:11px;letter-spacing:.12em;color:#698084;margin-top:5px}.navLinks{display:flex;align-items:center;gap:28px}.navLinks>a{color:#31494d;text-decoration:none;font-size:13px;font-weight:600}.navCta,.primary{border:0;cursor:pointer;background:var(--ink);color:white;border-radius:14px;padding:14px 18px;display:inline-flex;align-items:center;gap:9px;font-weight:700}.navCta{padding:12px 16px}.menuBtn{display:none;border:0;background:none;color:var(--ink)}
.hero{height:min(920px,100svh);min-height:760px;position:relative;display:flex;align-items:flex-end;overflow:hidden;background:#07171a}.heroBg,.heroShade,.heroGrid{position:absolute;inset:0;width:100%;height:100%}.heroBg{object-fit:cover;filter:saturate(.8) contrast(1.05) brightness(.9);transform:scale(1.02)}.heroShade{background:linear-gradient(180deg,rgba(4,19,23,.82) 0%,rgba(4,19,23,.52) 18%,rgba(4,19,23,.18) 40%,rgba(4,19,23,.16) 60%,rgba(4,19,23,.54) 82%,rgba(4,19,23,.82) 100%),linear-gradient(90deg,rgba(3,17,19,.94) 0%,rgba(3,17,19,.72) 45%,rgba(3,17,19,.34) 74%,rgba(3,17,19,.42) 100%),radial-gradient(120% 78% at 50% 8%,rgba(34,211,226,.08),transparent 48%)}.heroGrid{opacity:.18;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to right,black,transparent 78%)}.heroContent{position:relative;z-index:2;color:white;padding-bottom:76px}.eyebrow,.kicker{display:inline-flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:800}.eyebrow{color:#dff9ef;margin-bottom:24px}.liveDot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 7px rgba(145,232,197,.15)}.hero h1{font:600 clamp(58px,8.4vw,118px)/.91 'Manrope';letter-spacing:-.065em;max-width:930px;margin:0}.hero h1 span{color:#22d3e2}.heroLead{font-size:18px;line-height:1.6;max-width:660px;color:#dbe7e5;margin:28px 0 32px}.heroActions{display:flex;align-items:center;gap:12px}.primary{padding:16px 20px;border-radius:15px;transition:.25s transform,.25s background}.primary:hover{transform:translateY(-2px);background:#12363b}.secondary{display:inline-flex;align-items:center;gap:8px;padding:15px 18px;color:white;text-decoration:none;font-weight:700}.trustRow{display:flex;gap:0;margin-top:55px;border-top:1px solid rgba(255,255,255,.19);width:min(760px,100%)}.trustRow div{padding:18px 34px 0 0;margin-right:34px;border-right:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column}.trustRow div:last-child{border:0}.trustRow strong{font:700 18px 'Manrope'}.trustRow span{font-size:12px;color:#a9bcba;margin-top:3px}.heroFloat{position:absolute;right:6vw;bottom:65px;z-index:3;padding:13px 14px;border-radius:16px;display:flex;align-items:center;gap:10px;color:var(--ink)}.estateHealthIcon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#eaf7ff,#d8efff);color:#1686d9;position:relative;box-shadow:0 7px 20px rgba(22,134,217,.16)}.estateHealthIcon svg{display:block;margin:0}.estateHealthIcon::after{content:"";position:absolute;inset:-4px;border:1px solid rgba(22,134,217,.42);border-radius:13px;animation:healthPing 2.4s ease-out infinite;pointer-events:none}@keyframes healthPing{0%{transform:scale(.84);opacity:.85}72%,100%{transform:scale(1.28);opacity:0}}.heroFloat div{display:flex;flex-direction:column}.heroFloat small{font-size:10px;color:#677}.heroFloat strong{font:700 14px 'Manrope'}.heroFloat>span{font-size:9px;text-transform:uppercase;letter-spacing:.1em;background:#eaf2ee;border-radius:999px;padding:5px 7px;margin-left:8px}
.logoStrip{height:84px;display:flex;align-items:center;justify-content:center;gap:28px;border-bottom:1px solid var(--line);background:white;color:#506267}.logoStrip span{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#9aabaa}.logoStrip b{font:700 13px 'Manrope';letter-spacing:.03em}.logoStrip i{width:3px;height:3px;border-radius:50%;background:#b6c5c2}
.sectionHead{margin-bottom:50px}.sectionHead.split{display:grid;grid-template-columns:1.15fr .75fr;gap:70px;align-items:end}.kicker{color:#55706f;margin-bottom:15px}.sectionHead h2,.portalCopy h2,.proofCopy h2,.ctaInner h2{font:600 clamp(38px,5vw,66px)/1 'Manrope';letter-spacing:-.045em;margin:0}.sectionHead p,.portalCopy>p,.proofCopy>p{font-size:17px;line-height:1.7;color:var(--muted);margin:0}.featureGrid{display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:1fr 1fr;gap:18px}
/* PW4E hero brand accent: mirrors the aqua/cyan 4E treatment in the logo. */
.hero h1 .heroBrandAqua{
  color:#22d3e2!important;
  background:linear-gradient(135deg,#35d9dc 0%,#22d3e2 50%,#18b8d0 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:0 0 22px rgba(34,211,226,.08);
}
.featureCard{background:white;border:1px solid rgba(8,34,38,.08);border-radius:var(--radius);padding:30px;min-height:270px;position:relative;overflow:hidden;box-shadow:0 15px 45px rgba(12,45,50,.04)}.featureBig{grid-row:1/3;min-height:560px;background:linear-gradient(145deg,#fff,#edf6f0)}.featureCard .cardIcon{height:46px;width:46px;border-radius:14px;background:#e7f6ef;display:grid;place-items:center;margin-bottom:48px}.featureCard .mini{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#81908e}.featureCard h3{font:600 27px/1.12 'Manrope';letter-spacing:-.03em;max-width:450px;margin:12px 0}.featureBig h3{font-size:44px;margin-top:16px}.featureCard p{color:#6d7f80;line-height:1.6;max-width:450px}.metric{position:absolute;left:30px;right:30px;bottom:30px;border-top:1px solid var(--line);padding-top:25px;display:flex;align-items:flex-end;gap:18px}.metric strong{font:700 54px/1 'Manrope';letter-spacing:-.05em}.metric span{font-size:12px;color:#728280}.imageCard{background-size:cover;background-position:center;color:white}.imageCard .cardIcon{background:rgba(255,255,255,.14);backdrop-filter:blur(10px)}.imageCard .mini,.imageCard p{color:#d5e1df}.imageCard h3{margin-top:10px}.sustainabilityCard{background:linear-gradient(145deg,#082529 0%,#0c3438 60%,#0a2a2e 100%);color:white;border-color:rgba(145,232,197,.17);box-shadow:0 20px 55px rgba(5,35,39,.14)}.sustainabilityCard::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 24%,rgba(53,217,220,.14),transparent 30%),linear-gradient(135deg,transparent 0 59%,rgba(145,232,197,.055) 59% 60%,transparent 60%);pointer-events:none}.sustainabilityCard .cardIcon{position:relative;z-index:3;background:rgba(145,232,197,.10);border:1px solid rgba(145,232,197,.15);color:var(--mint);backdrop-filter:blur(8px)}.sustainabilityCard .mini,.sustainabilityCard p{position:relative;z-index:3;color:#b8cecb}.sustainabilityCard h3{position:relative;z-index:3;margin-top:10px}.panelCycleGraphic{position:absolute;right:18px;top:18px;width:142px;height:118px;opacity:.78;z-index:1}.panelMiniDisplay{position:absolute;right:14px;top:17px;width:92px;height:60px;border:1.5px solid rgba(145,232,197,.52);border-radius:9px;display:grid;place-items:center;color:#72e4ca;background:linear-gradient(145deg,rgba(145,232,197,.06),rgba(53,217,220,.035));box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 0 35px rgba(53,217,220,.05)}.panelMiniDisplay::after{content:"";position:absolute;left:34%;right:34%;bottom:-11px;height:10px;border-left:1.5px solid rgba(145,232,197,.4);border-right:1.5px solid rgba(145,232,197,.4);border-bottom:1.5px solid rgba(145,232,197,.4);border-radius:0 0 5px 5px}.cycleArc{position:absolute;border:1px solid rgba(53,217,220,.24);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(22deg)}.cycleArcOne{width:124px;height:92px;right:0;top:2px}.cycleArcTwo{width:104px;height:76px;right:10px;top:10px;border-color:rgba(145,232,197,.18);border-left-color:transparent;border-bottom-color:transparent;animation:cycleBreathe 4.8s ease-in-out infinite}@keyframes cycleBreathe{0%,100%{opacity:.48;transform:rotate(22deg) scale(.98)}50%{opacity:.95;transform:rotate(22deg) scale(1.02)}}
.darkSection{background:var(--ink);color:white;padding:118px 0}.lightHead p{color:#a8bcbb}.mint{color:var(--mint)}.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:54px}.step{position:relative;padding:24px 20px 28px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);min-height:210px}.stepTop{display:flex;justify-content:space-between;align-items:center;color:var(--mint)}.stepTop span{font:700 11px 'Manrope';letter-spacing:.14em}.step h3{font:600 22px 'Manrope';margin:30px 0 7px}.step p{font-size:13px;line-height:1.6;color:#9fb3b2}.stepLine{position:absolute;height:1px;width:25px;right:-21px;top:50%;background:var(--mint);opacity:.5}.triageDemo{margin-top:74px;border-radius:32px;background:linear-gradient(120deg,#0f3136,#123f43);border:1px solid rgba(255,255,255,.08);padding:50px;display:grid;grid-template-columns:1fr .9fr;gap:60px;align-items:center;box-shadow:0 40px 100px rgba(0,0,0,.25)}.triageCopy h3{font:600 38px/1.1 'Manrope';margin:8px 0 15px;letter-spacing:-.035em}.triageCopy p{color:#aec1bf;line-height:1.7}.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}.chips button{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#eaf8f4;padding:10px 12px;border-radius:999px;cursor:pointer}.glassDark{background:rgba(2,15,17,.45);border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(18px)}.assistantCard{border-radius:24px;min-height:340px;padding:20px}.assistantTop{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:16px;font-size:12px}.assistantTop div{display:flex;gap:7px;align-items:center}.assistantTop span{font-size:9px;text-transform:uppercase;letter-spacing:.1em;background:rgba(145,232,197,.12);color:var(--mint);padding:5px 8px;border-radius:99px}.assistantEmpty{height:255px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#b0c1c0}.assistantEmpty svg{color:var(--mint);margin-bottom:13px}.assistantEmpty strong{color:white}.assistantEmpty p{font-size:12px}.assistantResult{padding-top:28px}.assistantResult small{text-transform:uppercase;letter-spacing:.12em;color:var(--mint)}.assistantResult h4{font:600 24px 'Manrope';margin:8px 0 20px}.resultRow{display:flex;gap:9px;align-items:center;font-size:12px;color:#c1d0cf;margin:10px 0}.resultRow svg{width:15px;color:var(--mint)}.assistantResult button{margin-top:20px;border:0;background:var(--mint);color:var(--ink);padding:12px 14px;border-radius:12px;font-weight:700;display:flex;gap:8px;align-items:center;cursor:pointer}
.calcWrap{display:grid;grid-template-columns:1.05fr .95fr;gap:20px}.calcControls{padding:38px;background:white;border-radius:28px;border:1px solid var(--line)}.calcControls label{display:block;padding:5px 0 31px;margin-bottom:25px;border-bottom:1px solid var(--line)}.calcControls label>span{display:flex;justify-content:space-between;font-size:13px;color:#536567}.calcControls label b{font:700 16px 'Manrope';color:var(--ink)}input[type=range]{appearance:none;width:100%;height:4px;background:#dfe7e2;border-radius:999px;margin-top:21px;accent-color:var(--ink)}input[type=range]::-webkit-slider-thumb{appearance:none;height:20px;width:20px;border-radius:50%;background:var(--ink);border:5px solid var(--mint);box-shadow:0 0 0 4px rgba(145,232,197,.25)}.calcNote{font-size:11px;line-height:1.5;color:#9aa9a7}.calcResult{background:linear-gradient(145deg,#0b282c,#07191c);border-radius:28px;color:white;padding:40px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.calcResult:after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:var(--mint);filter:blur(100px);opacity:.08;right:-100px;top:-100px}.calcResult>span{text-transform:uppercase;font-size:10px;letter-spacing:.15em;color:var(--mint)}.calcResult>strong{font:700 clamp(54px,7vw,90px)/1 'Manrope';letter-spacing:-.06em;margin:15px 0}.calcResult>p{color:#adc0be;line-height:1.6;max-width:450px}.resultMini{display:flex;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,.1);padding-top:22px;margin-top:12px}.resultMini svg{color:var(--mint)}.resultMini div{display:flex;flex-direction:column}.resultMini b{font:700 18px 'Manrope'}.resultMini small{color:#8fa5a3}.invert{align-self:flex-start;margin-top:28px;background:var(--mint);color:var(--ink)}
.portalSection{position:relative;min-height:760px;background:var(--ink);color:white;overflow:hidden}.portalPhoto{position:absolute;inset:0;background-size:cover;background-position:center}.portalInner{position:relative;z-index:2;min-height:760px;display:grid;grid-template-columns:1fr .75fr;gap:80px;align-items:center}.portalCopy h2{max-width:660px;margin:8px 0 18px}.portalCopy>p{color:#b8c8c6;max-width:600px}.portalBullets{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0}.portalBullets span{font-size:13px;color:#d2dfdd;display:flex;align-items:center;gap:8px}.portalBullets svg{width:16px;color:var(--mint)}.outlineLight{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:white;padding:13px 16px;border-radius:13px;font-weight:700;display:flex;align-items:center;gap:8px;cursor:pointer}.phoneMock{justify-self:center;width:330px;height:625px;background:linear-gradient(180deg,#cfe3e1 0 108px,#e9f1ee 108px 154px,#f6f8f3 154px 100%);color:var(--ink);border-radius:42px;border:8px solid #152e32;padding:24px 18px 18px;box-shadow:0 35px 90px rgba(0,0,0,.4);position:relative;transform:rotate(2deg)}.phoneNotch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:96px;height:24px;border-radius:20px;background:#152e32}.phoneMock::before{content:"";position:absolute;left:14px;right:14px;top:16px;height:120px;border-radius:26px;background:linear-gradient(180deg,rgba(7,40,44,.10),rgba(255,255,255,0));pointer-events:none}.phoneHead{margin-top:20px;display:flex;justify-content:space-between;align-items:center}.phoneHead .brandText{display:none}.phoneHead .brandMark{width:34px;height:32px}.bellDot{width:31px;height:31px;border-radius:50%;background:white;border:1px solid #dbe3df;position:relative}.bellDot span{width:7px;height:7px;border-radius:50%;background:#ff6f61;position:absolute;right:2px;top:2px;border:2px solid white}.phoneWelcome{display:flex;flex-direction:column;margin-top:28px}.phoneWelcome small{color:#768784}.phoneWelcome strong{font:700 18px 'Manrope';margin-top:3px}.phoneStat{margin-top:20px;background:var(--ink);color:white;border-radius:22px;padding:20px}.phoneStat>span{font-size:11px;color:#9fb4b2}.phoneStat>strong{display:block;font:700 38px 'Manrope';margin-top:10px}.phoneStat>strong small{font-size:12px;color:#95aaa8}.progress{height:5px;border-radius:99px;background:rgba(255,255,255,.12);margin-top:14px;overflow:hidden}.progress i{display:block;height:100%;background:var(--mint)}.phoneTickets{margin-top:15px}.phoneTickets>span{font-size:11px;color:#748682}.phoneTickets>div{margin-top:9px;padding:13px 14px;background:white;border-radius:15px;display:flex;align-items:center;gap:7px;font-size:12px;box-shadow:0 8px 25px rgba(10,30,30,.06)}.phoneTickets svg{margin-left:auto}.phoneTickets b{font:700 18px 'Manrope'}.phoneBtn{position:absolute;bottom:18px;left:18px;right:18px;border:0;border-radius:16px;background:var(--ink);color:white;padding:14px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700}
.proofSection{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.proofPhoto{min-height:600px;border-radius:30px;background-size:cover;background-position:center;position:relative}.proofBadge{position:absolute;left:25px;bottom:25px;border-radius:18px;padding:14px;display:grid;grid-template-columns:38px 1fr;column-gap:10px;min-width:245px}.proofBadge svg{grid-row:1/3;background:#e6fff4;border-radius:10px;padding:8px;width:38px;height:38px}.proofBadge strong{font-size:13px}.proofBadge span{font-size:11px;color:#71807f}.proofCopy h2{margin:8px 0 20px}.proofList{margin-top:34px;display:grid;gap:16px}.proofList>div{display:flex;gap:13px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--line)}.proofList svg{color:#2e6f63}.proofList span{display:flex;flex-direction:column}.proofList b{font:700 14px 'Manrope'}.proofList small{color:#849391;margin-top:3px}.ctaBand{background:#0d3035;color:white;padding:85px 0}.ctaInner{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.lightBtn{background:var(--mint);color:var(--ink);white-space:nowrap}.footer{background:#041113;color:white;padding:65px 0 25px}.footerTop{display:flex;justify-content:space-between;gap:60px}.footerTop>div:first-child p{color:#738a88;font-size:12px;max-width:310px;line-height:1.6;margin-top:16px}.footer .brandText small{color:#79918e}.footerCols{display:flex;gap:90px}.footerCols>div{display:flex;flex-direction:column;gap:10px}.footerCols b{font-size:12px;margin-bottom:6px}.footerCols a,.footerCols button{color:#8ca19f;text-decoration:none;font-size:12px;background:transparent;border:0;text-align:left;padding:0;cursor:pointer}.footerBottom{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;margin-top:48px;display:flex;justify-content:space-between;color:#607573;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;opacity:0;visibility:hidden;transition:.45s opacity,.45s visibility}.loader.show{opacity:1;visibility:visible}.loaderLogo{width:74px;height:74px;border-radius:20px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;position:relative;overflow:hidden}.loaderH{font:800 37px 'Manrope'}.loaderScan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(145,232,197,.7) 50%,transparent 62%);animation:scan 1.2s infinite}.loaderLine{width:180px;height:2px;background:rgba(255,255,255,.1);margin-top:24px;overflow:hidden}.loaderLine i{display:block;height:100%;width:45%;background:var(--mint);animation:load 1.1s infinite}.loader p{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#78908e;margin-top:15px}@keyframes scan{from{transform:translateY(-100%)}to{transform:translateY(100%)}}@keyframes load{from{transform:translateX(-120%)}to{transform:translateX(250%)}}
.modalBack{position:fixed;inset:0;z-index:80;background:rgba(2,13,15,.72);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}.modal{width:min(650px,100%);background:#f9fbf7;border-radius:28px;padding:40px;position:relative;box-shadow:0 40px 120px rgba(0,0,0,.32)}.modalClose{position:absolute;right:18px;top:18px;border:0;background:#e8eeea;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;line-height:1;appearance:none;-webkit-appearance:none}.modalClose svg{display:none!important}.modalClose::before{content:'×';display:block;font-family:Arial,Helvetica,sans-serif;font-size:30px;font-weight:300;line-height:1;color:#2476d2;transform:translateY(-1px);width:100%;text-align:center}.modal h3{font:600 36px 'Manrope';letter-spacing:-.04em;margin:8px 0 10px}.modal>p{color:#72817f;line-height:1.6}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.modal input,.modal textarea{width:100%;border:1px solid #d9e2dc;background:white;border-radius:12px;padding:13px;outline:none}.modal textarea{height:110px;margin-top:10px;resize:vertical}.full{width:100%;justify-content:center;margin-top:10px}
@media(max-width:900px){.navLinks{position:absolute;top:80px;left:0;right:0;margin:auto;width:calc(100% - 16px);background:#f7faf5;border-radius:20px;padding:18px;flex-direction:column;align-items:stretch;gap:3px;box-shadow:0 18px 60px rgba(5,20,23,.18);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s}.navLinks.open{opacity:1;visibility:visible;transform:none}.navLinks>a{padding:13px}.menuBtn{display:grid;place-items:center}.heroFloat{display:none}.hero{min-height:720px;height:100svh}.heroContent{padding-bottom:44px}.hero h1{font-size:clamp(56px,15vw,82px);max-width:95%}.heroLead{font-size:16px}.trustRow{margin-top:38px}.section{padding:84px 0}.sectionHead.split,.triageDemo,.calcWrap,.portalInner,.proofSection{grid-template-columns:1fr;gap:35px}.featureGrid{grid-template-columns:1fr;grid-template-rows:auto}.featureBig{grid-row:auto;min-height:430px}.timeline{grid-template-columns:1fr 1fr}.stepLine{display:none}.triageDemo{padding:30px}.portalInner{padding:80px 0}.phoneMock{width:305px;height:590px}.proofPhoto{min-height:450px;order:2}.ctaInner{align-items:flex-start;flex-direction:column}.logoStrip{overflow:hidden;justify-content:flex-start;padding-left:20px;white-space:nowrap}.footerTop{flex-direction:column}.footerCols{gap:60px}}
@media(max-width:600px){.shell{width:min(100% - 28px,1180px)}.nav{width:calc(100% - 18px);height:64px;border-radius:18px;padding-left:12px}.brandMark{width:36px;height:33px}.brandText strong{font-size:13px}.hero{min-height:700px}.heroContent{padding-bottom:34px}.hero h1{font-size:15vw}.eyebrow{font-size:9px}.heroLead{font-size:14px;max-width:92%;margin:20px 0 22px}.heroActions{align-items:stretch;flex-direction:column;width:fit-content}.secondary{padding-left:4px}.trustRow{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.trustRow div{padding:13px 6px 0 0;margin:0}.trustRow strong{font-size:14px}.trustRow span{font-size:9px}.logoStrip{height:66px;gap:18px}.section{padding:70px 0}.sectionHead.split{gap:22px}.sectionHead h2,.portalCopy h2,.proofCopy h2,.ctaInner h2{font-size:39px}.sectionHead p,.portalCopy>p,.proofCopy>p{font-size:14px}.featureCard{border-radius:22px;padding:24px;min-height:270px}.featureBig{min-height:420px}.featureCard .cardIcon{margin-bottom:35px}.featureBig h3{font-size:34px}.metric{left:24px;right:24px;bottom:24px}.metric strong{font-size:45px}.darkSection{padding:76px 0}.timeline{grid-template-columns:1fr}.step{min-height:auto}.triageDemo{margin-top:45px;padding:22px;border-radius:22px}.triageCopy h3{font-size:31px}.assistantCard{min-height:315px}.calcControls,.calcResult{padding:25px;border-radius:22px}.calcResult>strong{font-size:54px}.portalSection,.portalInner{min-height:auto}.portalInner{padding:70px 0 55px}.portalBullets{grid-template-columns:1fr}.phoneMock{margin-top:20px;transform:none;width:min(310px,92vw)}.proofPhoto{min-height:390px;border-radius:22px}.proofSection{gap:30px}.ctaBand{padding:65px 0}.footer{padding-top:50px}.footerCols{gap:45px}.footerBottom{gap:15px;flex-direction:column}.formGrid{grid-template-columns:1fr}.modal{padding:32px 22px 24px;border-radius:22px}.modal h3{font-size:30px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Demo polish pass: intentional motion + interactive workflow previews */
@keyframes softPulse{0%,100%{box-shadow:0 0 0 0 rgba(145,232,197,0)}50%{box-shadow:0 0 0 10px rgba(145,232,197,.08)}}
@keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(145,232,197,.46)}70%{box-shadow:0 0 0 11px rgba(145,232,197,0)}100%{box-shadow:0 0 0 0 rgba(145,232,197,0)}}
@keyframes demoGlow{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 0 rgba(145,232,197,0))}50%{transform:translateY(-1px);filter:drop-shadow(0 0 10px rgba(145,232,197,.22))}}
.liveDot{animation:dotPulse 2.1s infinite}.heroActions .primary{animation:softPulse 4.6s ease-in-out infinite}.heroFloat>span,.assistantTop>span{animation:demoGlow 2.8s ease-in-out infinite}.bellDot span{animation:dotPulse 2.3s infinite}.assistPulse{animation:demoGlow 2s ease-in-out infinite}
.stepClickable{cursor:pointer;transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;outline:none}.stepClickable:hover,.stepClickable:focus-visible{transform:translateY(-4px);border-color:rgba(145,232,197,.42);background:rgba(255,255,255,.065);box-shadow:0 18px 45px rgba(0,0,0,.13)}.stepClickable .stepTop svg{transition:transform .22s ease}.stepClickable:hover .stepTop svg,.stepClickable:focus-visible .stepTop svg{transform:scale(1.08)}.stepPreview{position:absolute;left:20px;bottom:17px;display:inline-flex;align-items:center;gap:5px;color:var(--mint);font-size:10px;font-weight:700;letter-spacing:.04em;opacity:.72}.step{padding-bottom:48px}.stepPreview svg{width:13px;height:13px}
.assistantEmpty{padding:10px 20px}.assistantEmpty p{max-width:450px;line-height:1.65;margin:10px auto 0}.assistantHint{margin-top:16px;color:var(--mint);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.chips button{transition:transform .18s ease,background .18s ease,border-color .18s ease}.chips button:hover,.chips button:focus-visible{transform:translateY(-2px);background:rgba(145,232,197,.12);border-color:rgba(145,232,197,.38);outline:none}.chips button:first-child{animation:softPulse 4.2s ease-in-out 1.2s infinite}
.workflowModal{max-width:600px}.workflowIcon{width:52px;height:52px;border-radius:16px;background:#e6f8f0;color:#205d54;display:grid;place-items:center;margin-bottom:18px}.workflowPoints{display:grid;gap:10px;margin:24px 0}.workflowPoints>div{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:12px;background:#f4f8f5;color:#425b5c;font-size:13px}.workflowPoints svg{color:#2d7468;flex:0 0 auto;margin-top:1px}.demoNote{display:flex;align-items:flex-start;gap:9px;padding:13px 14px;margin:4px 0 20px;border-radius:13px;background:#0d3035;color:#c9dcda;font-size:12px;line-height:1.5}.demoNote svg{color:var(--mint);flex:0 0 auto}.demoNote b{color:white}.workflowModal .full{justify-content:center;width:100%}
.proofPhoto{background-size:cover;background-position:center center;image-rendering:auto}
@media(max-width:600px){.stepClickable{min-height:245px}.stepPreview{bottom:20px}.assistantEmpty{height:auto;min-height:255px;padding:25px 10px}.assistantEmpty p{font-size:11px;max-width:100%}.workflowModal{max-height:88svh;overflow:auto}.heroActions .primary{animation:softPulse 5.2s ease-in-out infinite}}
@media(prefers-reduced-motion:reduce){.liveDot,.heroActions .primary,.heroFloat>span,.assistantTop>span,.bellDot span,.assistPulse,.chips button:first-child{animation:none!important}}

/* PanelCare Assist interactive demo overlay */
.triageModal{width:min(620px,100%);overflow:hidden}.triageModalTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.demoPill{display:inline-flex;align-items:center;gap:8px;font:800 9px 'Manrope';letter-spacing:.12em;color:#315c55;background:#e8f6ef;border:1px solid #d2eee1;border-radius:999px;padding:8px 10px}.demoPill .liveDot{width:7px;height:7px;box-shadow:0 0 0 0 rgba(80,196,151,.45);animation:livePulse 2.2s infinite}.triageStatus{display:flex;align-items:center;gap:8px;margin:4px 0 14px;padding:11px 13px;background:#edf8f3;border:1px solid #d7eee3;border-radius:13px;color:#194d43;font-size:12px}.triageStatus svg{color:#44a783}.triageOutcome{margin:18px 0 6px;padding:17px 18px;border-radius:16px;background:linear-gradient(135deg,#092b2e,#103f40);color:white;box-shadow:0 14px 34px rgba(6,35,37,.14)}.triageOutcome small{display:block;color:#8fe7c7;font:800 9px 'Manrope';letter-spacing:.13em;margin-bottom:7px}.triageOutcome strong{display:block;font:600 13px/1.55 'Manrope'}.triageBack{animation:fadeIn .18s ease both}.triageModal{animation:modalPop .28s cubic-bezier(.2,.9,.25,1.1) both}@keyframes modalPop{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@media(max-width:600px){.triageModal{padding:28px 21px 22px}.triageModalTop{padding-right:42px}.triageOutcome{padding:15px}.demoPill{font-size:8px;padding:7px 9px}}@media(prefers-reduced-motion:reduce){.triageBack,.triageModal{animation:none!important}}

/* Final demo pass: inline Assist flow, portal preview and back-to-top */
.assistFlow{padding:22px!important;text-align:left!important}.assistResultHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.resetAssist{border:0;background:transparent;color:#8fb0ad;font:700 10px 'Manrope';letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.assistStatus{display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid rgba(145,232,197,.16);background:rgba(145,232,197,.07);border-radius:12px;color:#bfe9db;margin:13px 0}.assistStatus b{font-size:12px}.assistIntro{color:#a9bfbd!important;font-size:12px!important;line-height:1.6!important;margin:0 0 14px!important}.assistChecks{display:grid;gap:8px}.assistChecks>div{display:grid;grid-template-columns:30px 1fr 18px;gap:8px;align-items:center;padding:10px 11px;border-radius:11px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}.assistChecks span{color:var(--mint);font:800 9px 'Manrope';letter-spacing:.08em}.assistChecks p{margin:0!important;font-size:11px!important;color:#d2dfde!important;line-height:1.45!important}.assistChecks svg{color:var(--mint)}.assistOutcome{margin:13px 0 14px;padding:13px 14px;border-radius:12px;background:linear-gradient(135deg,rgba(145,232,197,.11),rgba(145,232,197,.035));border:1px solid rgba(145,232,197,.13)}.assistOutcome small{color:var(--mint);font:800 8px 'Manrope';letter-spacing:.12em}.assistOutcome p{margin:5px 0 0!important;color:#e9f2f1!important;font-size:11px!important;line-height:1.5!important}.assistFlow>button{width:100%;justify-content:center}.assistantCard{min-height:500px}
.portalPreviewModal{width:min(780px,100%);max-height:90svh;overflow:auto}.portalDemoShell{margin-top:22px;border:1px solid #dce5df;border-radius:20px;background:#eef4f0;padding:16px}.portalDemoBar{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 14px}.portalDemoBar .brandText strong{color:#102a2d}.portalDemoGrid{display:grid;gap:12px}.portalDemoStats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.portalDemoStats>div{background:white;border-radius:15px;padding:16px;border:1px solid #e0e7e2}.portalDemoStats small{display:block;color:#788a87;font-size:10px}.portalDemoStats b{display:block;color:#102a2d;font:700 24px 'Manrope';margin:5px 0}.portalDemoStats span{font-size:10px;color:#4a746c}.portalTicket{background:#092c30;color:white;border-radius:17px;padding:17px}.ticketHead{display:flex;align-items:center;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:12px}.ticketHead span{display:flex;gap:8px;align-items:center;font-weight:700}.ticketHead b{font-size:10px;color:var(--mint)}.demoField{padding:8px 0}.demoField small,.typingDemo small,.portalRoute small{display:block;color:#7fa19f;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.demoField strong{font-size:12px;font-weight:600}.typingDemo{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:flex-start;margin:11px 0;padding:12px;border-radius:13px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}.avatarMini{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#dff6ed;color:#174d44;font:800 10px 'Manrope'}.typingDemo p{margin:6px 0 0;color:#e5efee;font-size:12px;line-height:1.5}.typingCaret{display:inline-block;width:1px;height:13px;background:var(--mint);margin-left:3px;vertical-align:-2px;animation:caret 1s steps(1) infinite}@keyframes caret{50%{opacity:0}}.portalRoute{display:flex;gap:10px;align-items:center;padding:12px;border-radius:13px;background:rgba(145,232,197,.1);margin:10px 0 13px}.portalRoute svg{color:var(--mint)}.portalRoute strong{display:block;font-size:11px;margin-top:3px}.backTop{position:fixed;right:18px;bottom:22px;z-index:55;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:#22b8c9;color:white;display:grid;place-items:center;box-shadow:0 12px 32px rgba(6,65,73,.28);opacity:0;visibility:hidden;transform:translateY(10px) scale(.92);transition:.22s;cursor:pointer}.backTop.show{opacity:1;visibility:visible;transform:none}.backTop::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(34,184,201,.32);animation:topPulse 2.8s ease-out infinite}@keyframes topPulse{0%{transform:scale(.85);opacity:.8}70%,100%{transform:scale(1.22);opacity:0}}
@media(max-width:600px){.assistantCard{min-height:560px}.assistFlow{padding:18px!important}.portalPreviewModal{padding:28px 18px 20px}.portalDemoShell{padding:11px}.portalDemoStats{grid-template-columns:1fr}.portalDemoBar .demoPill{display:none}.backTop{width:44px;height:44px;right:14px;bottom:18px}.portalTicket{padding:14px}}
@media(prefers-reduced-motion:reduce){.typingCaret,.backTop::after{animation:none!important}}


/* Final reliability + mobile refinement */
.chips button.active{background:var(--mint);border-color:var(--mint);color:#09282c;box-shadow:0 9px 24px rgba(145,232,197,.15);font-weight:800}
.assistNav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:9px;margin:10px 0 12px}.assistNav button{margin:0!important;padding:9px 10px!important;border:1px solid rgba(255,255,255,.1)!important;background:rgba(255,255,255,.045)!important;color:#dcebea!important;border-radius:10px!important;font:700 10px 'Manrope'!important;justify-content:center!important}.assistNav button:last-child{justify-self:stretch}.assistNav span{text-align:center;color:#7fa7a4;font:800 9px 'Manrope';letter-spacing:.09em}.assistantResult>button{background:var(--mint)!important;color:#08272b!important;border:0!important}
.stepPreview{font-size:12px;font-weight:800;opacity:.95;letter-spacing:.02em}.step{min-height:190px;padding:20px 18px 45px}.step h3{margin:23px 0 6px;font-size:20px}.step p{font-size:12px}
@media(max-width:600px){.timeline{gap:11px}.stepClickable{min-height:168px!important;padding:18px 18px 42px!important;border-radius:18px}.step h3{margin:18px 0 5px;font-size:20px}.step p{font-size:12px;line-height:1.5;max-width:92%}.stepPreview{left:18px;bottom:15px;font-size:11px}.stepTop span{font-size:10px}.triageCopy .chips{gap:8px}.triageCopy .chips button{padding:10px 13px;font-size:13px}.assistantCard{min-height:0}.assistFlow{min-height:430px}.assistNav{grid-template-columns:1fr auto 1fr}.assistNav button{font-size:9px!important;padding:9px 6px!important}}

/* Final branded Hayward PanelCare logo */
.logoMark{width:48px;height:48px;display:block;flex:0 0 auto;filter:drop-shadow(0 5px 12px rgba(22,163,163,.12))}.brand{gap:12px}.brandText{display:inline-grid;grid-template-rows:auto auto;row-gap:6px;line-height:.95;width:max-content;min-width:0}.brandText strong{display:block;width:100%;font-size:16px;letter-spacing:.18em}.brandText small{font-size:10px;letter-spacing:.22em;color:#4f9e91;margin-top:0;font-weight:700}.brandLight .brandText strong{color:white}.brandLight .brandText small{color:var(--mint)}.loaderBrandMark{width:68px;height:68px;filter:drop-shadow(0 12px 28px rgba(63,220,207,.18))}.mobileScrollCue{display:none}
@media(max-width:600px){.logoMark{width:44px;height:44px}.brandText strong{font-size:14px;letter-spacing:.17em}.brandText small{font-size:9px;letter-spacing:0}.mobileScrollCue{position:absolute;display:grid;place-items:center;left:50%;bottom:18px;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;color:#84ead0;text-decoration:none;background:rgba(4,27,31,.7);border:1px solid rgba(132,234,208,.28);box-shadow:0 0 0 10px rgba(34,184,201,.04),0 12px 28px rgba(0,0,0,.18);z-index:4;animation:scrollBob 1.7s ease-in-out infinite}.mobileScrollCue::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(132,234,208,.25);animation:scrollRing 1.7s ease-out infinite}.heroContent{position:relative;padding-bottom:96px!important}}
@keyframes scrollBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
@keyframes scrollRing{0%{transform:scale(.82);opacity:.8}80%,100%{transform:scale(1.28);opacity:0}}

/* Release candidate finishing polish: visible deep-green H outline + steel navigation surface */
.nav.glass{
  background:linear-gradient(135deg,rgba(252,253,252,.95) 0%,rgba(224,230,231,.93) 46%,rgba(247,249,249,.96) 100%);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 14px 46px rgba(3,27,31,.16),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(74,100,103,.10);
}
.logoMark{
  filter:drop-shadow(0 2px 0 rgba(10,52,56,.20)) drop-shadow(0 7px 14px rgba(9,52,56,.13));
}
/* Make the suggested first triage option gently breathe, not flash. */
.chips button:first-child:not(.active){animation:softPulse 4.2s ease-in-out 1.2s infinite}
.chips button.active{animation:none}
@media(prefers-reduced-motion:reduce){.chips button:first-child:not(.active){animation:none!important}}

/* Precision icon alignment pass: keep every glyph dead-centre inside its control/container. */
.modalClose,.cardIcon,.workflowIcon,.backTop,.mobileScrollCue,.brandMark,.avatarMini,
.estateHealthIcon,.assistantEmpty>svg,.portalRoute>svg,.stepTop>svg{
  align-items:center;
  justify-content:center;
}
.modalClose,.cardIcon,.workflowIcon,.backTop,.mobileScrollCue,.brandMark,.avatarMini{display:flex}
.modalClose::before{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:auto;height:auto;text-align:center;line-height:1;transform:none}
.modalClose svg{display:none!important}
.cardIcon svg,.workflowIcon svg,.backTop svg,.mobileScrollCue svg,.brandMark svg,.avatarMini svg,
.estateHealthIcon,.assistantEmpty>svg,.portalRoute>svg,.stepTop>svg{
  display:block;
  margin:0!important;
  flex:0 0 auto;
  transform:none;
}
button>svg,a>svg{vertical-align:middle}


/* Hayward brand correction + exact PanelCare wordmark alignment */
.brandText{min-width:0}
.brandText strong{display:block;white-space:nowrap}
.brandText .panelCareWord{position:relative;display:grid!important;grid-template-columns:repeat(9,1fr);align-items:center;width:100%;padding-top:6px;letter-spacing:0!important;white-space:nowrap}
.brandText .panelCareWord::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(53,217,220,.08),rgba(53,217,220,.45),rgba(142,230,196,.9),rgba(53,217,220,.45),rgba(53,217,220,.08))}
.brandText .panelCareWord>span{display:block;line-height:1;text-align:center}
/* Keep the blue estate-health status lively but restrained. */
.heroFloat .estateHealthIcon{animation:healthBreathe 3.4s ease-in-out infinite}
@keyframes healthBreathe{0%,100%{transform:translateY(0);box-shadow:0 7px 20px rgba(22,134,217,.16)}50%{transform:translateY(-1px);box-shadow:0 9px 27px rgba(22,134,217,.28)}}
@media(prefers-reduced-motion:reduce){.estateHealthIcon,.estateHealthIcon::after{animation:none!important}}

/* Mobile audience strip fit: preserve the white strip style while keeping every label visible */
@media (max-width:600px){
  .logoStrip{
    height:auto;
    min-height:108px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-content:center;
    justify-items:center;
    gap:8px 10px;
    padding:14px 14px 13px;
    white-space:normal;
    overflow:visible;
  }
  .logoStrip span{
    grid-column:1 / -1;
    font-size:10px;
    letter-spacing:.18em;
    line-height:1;
    text-align:center;
  }
  .logoStrip b{
    width:100%;
    font-size:11.5px;
    line-height:1.15;
    text-align:center;
    white-space:nowrap;
  }
  .logoStrip i{display:none}
}
@media (max-width:390px){
  .logoStrip{gap:8px 6px;padding-left:10px;padding-right:10px}
  .logoStrip b{font-size:10.8px;letter-spacing:.01em}
}
@media (max-width:340px){
  .logoStrip{min-height:112px;gap:8px 4px;padding-left:8px;padding-right:8px}
  .logoStrip span{font-size:9px}
  .logoStrip b{font-size:10px}
}

/* FINAL PREMIUM BRAND PASS — dark floating navigation + aligned lockup */
.nav.glass{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(135deg,#041113 0%,#06171b 48%,#071b20 100%)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 16px 44px rgba(3,17,19,.28),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
/* Four deliberately spaced lines reference stacked display panels rather than a generic wave. */
.nav.glass::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  right:72px;
  top:0;
  width:430px;
  height:100%;
  opacity:.72;
  border-radius:0 22px 22px 0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%2322c8c5' stroke-width='1.2'%3E%3Cpath stroke-opacity='.16' d='M0 102 C110 102 148 42 260 42 C356 42 390 72 452 72 C500 72 528 56 560 42'/%3E%3Cpath stroke-opacity='.21' d='M0 88 C112 88 150 31 261 31 C357 31 392 61 453 61 C502 61 530 45 560 31'/%3E%3Cpath stroke-opacity='.27' d='M0 74 C114 74 152 20 262 20 C358 20 394 50 454 50 C503 50 532 34 560 20'/%3E%3Cpath stroke-opacity='.13' d='M0 116 C108 116 146 53 259 53 C355 53 388 83 451 83 C498 83 526 68 560 54'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100% 100%;
  background-repeat:no-repeat;
  mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%);
}
.nav .brand{position:relative;z-index:2;gap:14px;flex:0 0 auto}
.nav .logoMark{width:52px;height:52px;filter:drop-shadow(0 8px 16px rgba(2,211,204,.15))}
.nav .brandText{
  box-sizing:border-box;
  width:194px;
  min-width:194px;
  padding-left:16px;
  border-left:2px solid #d6a93d;
  display:grid;
  grid-template-rows:auto auto;
  row-gap:6px;
}
.nav .brandText strong{
  display:block;
  width:100%;
  color:#fff;
  font:800 18px/1 'Manrope';
  letter-spacing:.165em;
  white-space:nowrap;
  text-shadow:0 1px 12px rgba(255,255,255,.08);
}
/* PANELCARE + gold end strokes occupy exactly the same 194px width as HAYWARD. */
.nav .brandText .panelCareWord{
  box-sizing:border-box;
  width:100%;
  min-width:100%;
  padding:0!important;
  margin:0;
  color:#35d9dc;
  display:grid!important;
  grid-template-columns:16px repeat(9,minmax(0,1fr)) 16px;
  align-items:center;
  column-gap:1px;
  font:800 9.5px/1 'Manrope';
  letter-spacing:0!important;
  white-space:nowrap;
}
.nav .brandText .panelCareWord::before,
.nav .brandText .panelCareWord::after{
  content:"";
  position:static;
  display:block;
  width:100%;
  height:2px;
  background:#d6a93d;
  border-radius:999px;
  opacity:.96;
}
.nav .brandText .panelCareWord>span{display:block;min-width:0;line-height:1;text-align:center}
.nav .navLinks>a{color:rgba(255,255,255,.82)}
.nav .navLinks>a:hover{color:#fff}
.nav .navCta{background:linear-gradient(135deg,#d7a83b,#f0c759);color:#07181b;box-shadow:0 7px 20px rgba(215,168,59,.18)}
.nav .menuBtn{color:#fff;position:relative;z-index:3;width:48px;height:48px;border-radius:14px;align-items:center;justify-content:center}
.nav .menuBtn:hover{background:rgba(255,255,255,.06)}

/* Keep opened navigation legible against the dark floating bar. */
@media(max-width:900px){
  /* The dropdown must escape the rounded floating bar. The previous overflow:hidden
     clipped it completely on mobile, making the hamburger appear unresponsive. */
  .nav.glass{overflow:visible}
  .navLinks{z-index:20;background:linear-gradient(145deg,#06171b,#0a2429)!important;border:1px solid rgba(255,255,255,.09);box-shadow:0 20px 60px rgba(2,15,18,.38)!important}
  .navLinks>a{color:rgba(255,255,255,.86)!important}
  .navLinks>a:hover{background:rgba(255,255,255,.045);border-radius:12px;color:#fff!important}
  .navLinks .navCta{margin-top:8px}
}

@media(max-width:600px){
  .navWrap{top:14px}
  .nav{width:calc(100% - 24px);height:80px;border-radius:24px;padding:0 10px 0 14px}
  .nav.glass::after{right:52px;width:55%;border-radius:0 24px 24px 0;opacity:.78;background-size:128% 100%;background-position:center right}
  .nav .logoMark{width:54px;height:54px}
  .nav .brand{gap:11px}
  .nav .brandText{width:181px;min-width:181px;padding-left:13px;row-gap:6px}
  .nav .brandText strong{font-size:17px;letter-spacing:.15em}
  .nav .brandText .panelCareWord{grid-template-columns:14px repeat(9,minmax(0,1fr)) 14px;font-size:9px;column-gap:.5px}
  .nav .menuBtn{width:46px;height:46px}
  .navLinks{top:90px!important;width:calc(100% - 6px)!important}
}
@media(max-width:390px){
  .nav{width:calc(100% - 18px);padding-left:9px;padding-right:7px}
  .nav .logoMark{width:48px;height:48px}
  .nav .brand{gap:8px}
  .nav .brandText{width:160px;min-width:160px;padding-left:10px}
  .nav .brandText strong{font-size:15px;letter-spacing:.135em}
  .nav .brandText .panelCareWord{grid-template-columns:11px repeat(9,minmax(0,1fr)) 11px;font-size:7.9px;column-gap:0}
  .nav .menuBtn{width:43px;height:43px}
}
@media(max-width:350px){
  .nav .brandText{width:148px;min-width:148px}
  .nav .brandText strong{font-size:14px;letter-spacing:.115em}
  .nav .brandText .panelCareWord{font-size:7.3px;grid-template-columns:10px repeat(9,minmax(0,1fr)) 10px}
}

/* Estate-health badge: stronger, optically centred status mark on desktop. */
.heroFloat{align-items:center}
.heroFloat .estateHealthIcon{
  box-sizing:border-box;
  width:48px!important;
  height:48px!important;
  min-width:48px;
  margin:0!important;
  padding:0!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(145deg,#eef9ff,#d8efff)!important;
  color:#1686d9!important;
  box-shadow:0 8px 22px rgba(22,134,217,.18)!important;
}
.heroFloat .estateHealthIcon svg{width:27px!important;height:27px!important;display:block!important;margin:0!important;transform:none!important}
.heroFloat .estateHealthIcon::after{inset:-4px;border-radius:17px}
.heroFloat>span:last-child{font-size:9px;text-transform:uppercase;letter-spacing:.1em;background:#eaf2ee;border-radius:999px;padding:5px 7px;margin-left:8px}

/* Footer lockup scales up and uses the exact same width discipline. */
.footer{position:relative;overflow:hidden;background:linear-gradient(145deg,#031012,#06171b 55%,#041113)!important}
.footer::after{
  content:"";
  position:absolute;
  right:-28px;
  bottom:-22px;
  width:min(820px,96vw);
  height:330px;
  pointer-events:none;
  opacity:.48;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 820 330' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%2322c8c5' stroke-width='1.2'%3E%3Cpath stroke-opacity='.14' d='M0 270 C150 270 194 208 332 208 C456 208 500 252 594 252 C674 252 740 212 820 202'/%3E%3Cpath stroke-opacity='.19' d='M0 290 C150 290 198 228 336 228 C460 228 504 272 598 272 C678 272 742 232 820 222'/%3E%3Cpath stroke-opacity='.24' d='M0 310 C152 310 202 248 340 248 C464 248 508 292 602 292 C682 292 744 252 820 242'/%3E%3Cpath stroke-opacity='.10' d='M70 330 C198 330 242 270 365 270 C478 270 522 312 612 312 C690 312 752 276 820 266'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.footerTop,.footerBottom{position:relative;z-index:1}
.footer .brand{align-items:center;gap:14px}
.footer .logoMark{width:56px;height:56px}
.footer .brandText{
  box-sizing:border-box;
  width:218px;
  min-width:218px;
  max-width:218px;
  padding-left:16px;
  border-left:2px solid #d6a93d;
  display:grid;
  grid-template-rows:auto auto;
  row-gap:7px;
  overflow:visible;
}
.footer .brandText strong{display:block;width:100%;color:#fff;font:800 20px/1 'Manrope';letter-spacing:.18em;white-space:nowrap}
.footer .brandText .panelCareWord{
  box-sizing:border-box;
  width:100%;min-width:100%;
  padding:0!important;margin:0;
  color:#35d9dc;
  display:grid!important;
  grid-template-columns:18px repeat(9,minmax(0,1fr)) 18px;
  align-items:center;
  column-gap:1px;
  font:800 10px/1 'Manrope';
  letter-spacing:0!important;
  white-space:nowrap;
}
.footer .brandText .panelCareWord::before,.footer .brandText .panelCareWord::after{content:"";position:static;display:block;width:100%;height:2px;background:#d6a93d;border-radius:999px}
.footer .brandText .panelCareWord>span{display:block;min-width:0;line-height:1;text-align:center}

/* Same restrained pulsing cue on desktop and mobile. */
.mobileScrollCue{position:absolute;display:grid!important;place-items:center;left:50%;bottom:20px;transform:translateX(-50%);width:50px;height:50px;border-radius:50%;color:#84ead0;text-decoration:none;background:rgba(4,27,31,.76);border:1px solid rgba(132,234,208,.32);box-shadow:0 0 0 9px rgba(34,184,201,.035),0 12px 28px rgba(0,0,0,.2);z-index:4;animation:scrollBob 1.7s ease-in-out infinite}
.mobileScrollCue::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(132,234,208,.24);animation:scrollRing 1.7s ease-out infinite}
@media(max-width:600px){
  .footer .brand{gap:12px}
  .footer .logoMark{width:58px;height:58px}
  .footer .brandText{width:224px;min-width:224px;max-width:224px;padding-left:15px}
  .footer .brandText strong{font-size:20px;letter-spacing:.175em}
  .footer .brandText .panelCareWord{grid-template-columns:18px repeat(9,minmax(0,1fr)) 18px;font-size:10px}
  .mobileScrollCue{width:54px;height:54px;bottom:18px}
}
@media(max-width:390px){
  .footer .brandText{width:205px;min-width:205px;max-width:205px}
  .footer .brandText strong{font-size:18px;letter-spacing:.16em}
  .footer .brandText .panelCareWord{grid-template-columns:15px repeat(9,minmax(0,1fr)) 15px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){.mobileScrollCue,.mobileScrollCue::before,.estateHealthIcon,.estateHealthIcon::after{animation:none!important}}


/* FINAL LOGO GEOMETRY — HAYWARD and the full gold-line / PANELCARE row share one exact measure. */
.nav .brandText strong.haywardWord,
.footer .brandText strong.haywardWord{
  width:100%!important;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  letter-spacing:0!important;
  white-space:nowrap;
}
.nav .brandText strong.haywardWord>span,
.footer .brandText strong.haywardWord>span{
  display:block;
  flex:0 0 auto;
  line-height:1;
}
.nav .brandText .panelCareWord,
.footer .brandText .panelCareWord{
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
}
/* Slightly lower second line for a balanced two-line lockup. */
.nav .brandText{row-gap:8px!important}
.footer .brandText{row-gap:9px!important}

/* Desktop lockup proportions. */
.nav .brandText{width:194px!important;min-width:194px!important}
.nav .brandText strong.haywardWord{font-size:18px!important}
.nav .brandText .panelCareWord{grid-template-columns:16px repeat(9,minmax(0,1fr)) 16px!important;font-size:9.4px!important}
.footer .brandText{width:218px!important;min-width:218px!important;max-width:218px!important}
.footer .brandText strong.haywardWord{font-size:20px!important}
.footer .brandText .panelCareWord{grid-template-columns:18px repeat(9,minmax(0,1fr)) 18px!important;font-size:10px!important}

@media(max-width:600px){
  .nav .brandText{width:181px!important;min-width:181px!important;row-gap:7px!important}
  .nav .brandText strong.haywardWord{font-size:17px!important}
  .nav .brandText .panelCareWord{grid-template-columns:14px repeat(9,minmax(0,1fr)) 14px!important;font-size:9px!important}
  .footer .brandText{width:224px!important;min-width:224px!important;max-width:224px!important;row-gap:8px!important}
  .footer .brandText strong.haywardWord{font-size:20px!important}
  .footer .brandText .panelCareWord{grid-template-columns:18px repeat(9,minmax(0,1fr)) 18px!important;font-size:10px!important}
}
@media(max-width:390px){
  .nav .brandText{width:160px!important;min-width:160px!important}
  .nav .brandText strong.haywardWord{font-size:15px!important}
  .nav .brandText .panelCareWord{grid-template-columns:11px repeat(9,minmax(0,1fr)) 11px!important;font-size:7.9px!important}
  .footer .brandText{width:205px!important;min-width:205px!important;max-width:205px!important}
  .footer .brandText strong.haywardWord{font-size:18px!important}
  .footer .brandText .panelCareWord{grid-template-columns:15px repeat(9,minmax(0,1fr)) 15px!important;font-size:9px!important}
}
@media(max-width:350px){
  .nav .brandText{width:148px!important;min-width:148px!important}
  .nav .brandText strong.haywardWord{font-size:14px!important}
  .nav .brandText .panelCareWord{grid-template-columns:10px repeat(9,minmax(0,1fr)) 10px!important;font-size:7.3px!important}
}


/* FINAL MOBILE HERO FLOW FIX — reserve real space below the floating nav.
   The lifecycle label remains in document flow, followed by the headline, so
   neither can overlap regardless of Safari address-bar state. */
.heroEyebrowMobile{display:none!important}
@media(max-width:600px){
  .hero{
    align-items:stretch!important;
    height:100svh!important;
    min-height:700px!important;
  }
  .heroContent{
    box-sizing:border-box;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding-top:112px!important;
    padding-bottom:94px!important;
  }
  .heroContent>.eyebrow{
    display:inline-flex!important;
    align-self:flex-start;
    margin:0 0 17px 0!important;
    line-height:1.15;
    white-space:nowrap;
  }
  .heroContent>h1{margin-top:0!important}
  .mobileScrollCue{bottom:18px!important}
}
@media(max-width:390px){
  .heroContent{padding-top:108px!important;padding-bottom:90px!important}
  .heroContent>.eyebrow{font-size:8.5px!important;letter-spacing:.11em!important;margin-bottom:15px!important}
}
@media(max-width:350px){
  .heroContent{padding-top:104px!important}
  .heroContent>.eyebrow{font-size:8px!important;letter-spacing:.09em!important}
}


/* FINAL WORKFLOW NUMBER POLISH — 01/02/03/04 hierarchy only */
.stepTop .stepNumber{
  display:inline-block;
  min-width:2.1ch;
  font:800 clamp(36px,3.25vw,54px)/.82 'Manrope',sans-serif;
  letter-spacing:-.055em;
  background:linear-gradient(135deg,#eafff7 0%,#91e8c5 48%,#35d9dc 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  opacity:.92;
  filter:drop-shadow(0 5px 18px rgba(53,217,220,.08));
}
.stepTop{align-items:flex-start}
.stepTop>svg{margin-top:1px!important}
@media(max-width:600px){
  .stepTop .stepNumber{font-size:44px;line-height:.84;opacity:.94}
  .step h3{margin-top:22px}
}

/* Final premium workflow numeral treatment */
.stepCard{position:relative;overflow:hidden}
.stepTop{position:relative;z-index:2}
.stepTop .stepNumber{
  position:absolute;
  left:-2px;
  top:-18px;
  font:800 clamp(62px,7vw,92px)/1 'Manrope',sans-serif !important;
  letter-spacing:-.07em !important;
  background:linear-gradient(145deg,rgba(231,255,245,.98) 0%,rgba(145,232,197,.94) 42%,rgba(53,217,220,.76) 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  opacity:.26 !important;
  pointer-events:none;
  user-select:none;
}
.stepCard h3,.stepCard p,.stepCard .textLink,.stepCard>svg{position:relative;z-index:3}
.stepCard h3{margin-top:46px}
@media(max-width:600px){
  .stepTop .stepNumber{font-size:76px !important;top:-16px}
  .stepCard h3{margin-top:48px}
}

/* iPhone Pro Max landscape should use the tablet/desktop navigation treatment.
   Width alone previously kept landscape iPhone inside the mobile breakpoint. */
@media (orientation:landscape) and (min-width:700px) and (max-height:500px){
  .desktopNav{display:flex !important}
  .menuButton{display:none !important}
  .mobileMenu{display:none !important}
  .navInner{padding:0 20px !important}
  .navBrand{flex:0 0 auto}
  .hero{min-height:100svh}
}


/* ===== FINAL PRO LANDSCAPE + WORKFLOW PASS ===== */
/* Use the actual navigation classes in this build. iPhone Pro Max landscape
   gets the wide/tablet navigation layout instead of the collapsed mobile menu. */
@media (orientation:landscape) and (min-width:700px) and (max-height:520px){
  .navWrap{top:10px}
  .nav{height:68px;width:min(1180px,calc(100% - 28px));padding:0 14px 0 18px}
  .navLinks{
    position:static!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:18px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  .navLinks>a{padding:8px 0!important;font-size:11px!important;white-space:nowrap}
  .navLinks .navCta{margin:0 0 0 2px!important;padding:11px 13px!important;font-size:11px!important}
  .menuBtn{display:none!important}
  .brandLockup{transform:scale(.88);transform-origin:left center}
  .hero{min-height:620px;height:auto}
  .heroContent{padding-top:118px!important;padding-bottom:48px!important}
  .hero h1{font-size:clamp(58px,7.8vw,86px)!important;max-width:860px!important}
  .heroLead{max-width:720px!important;font-size:15px!important}
  .trustRow{margin-top:30px!important}
}

/* Workflow cards: bold sequence number + independent icon badge, no collisions. */
.stepTop{
  position:relative!important;
  z-index:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  min-height:56px;
}
.stepTop .stepNumber{
  position:static!important;
  inset:auto!important;
  display:block!important;
  font:800 clamp(46px,4.4vw,62px)/.85 'Manrope',sans-serif!important;
  letter-spacing:-.065em!important;
  background:linear-gradient(135deg,#effff9 0%,#9aefd0 44%,#38d9dc 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  opacity:.9!important;
  text-shadow:none!important;
  transform:none!important;
}
.stepTop>svg{
  width:42px!important;
  height:42px!important;
  box-sizing:border-box;
  padding:10px!important;
  margin:0!important;
  border-radius:13px;
  color:#a7f3d8!important;
  background:linear-gradient(145deg,rgba(145,232,197,.16),rgba(53,217,220,.07));
  border:1px solid rgba(145,232,197,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.10);
  flex:0 0 auto;
}
.step h3{margin:24px 0 7px!important;position:relative;z-index:3}
.step p,.stepPreview{position:relative;z-index:3}
.stepClickable:hover .stepTop>svg,.stepClickable:focus-visible .stepTop>svg{transform:translateY(-1px) scale(1.03)!important}

@media(max-width:600px){
  .stepClickable{min-height:218px!important;padding:22px 22px 48px!important}
  .stepTop{min-height:60px}
  .stepTop .stepNumber{font-size:58px!important;line-height:.84!important;opacity:.92!important}
  .stepTop>svg{width:44px!important;height:44px!important;padding:10px!important;border-radius:14px}
  .step h3{margin:24px 0 7px!important;font-size:23px!important}
  .step p{font-size:13px!important;line-height:1.55!important;max-width:94%!important}
}


/* ===== FINAL RESPONSIVE STATE FIX =====
   iPhone Pro Max landscape behaves as compact tablet: full nav + estate badge.
   Portrait retains the mobile nav and centered scroll cue. */
@media (orientation:landscape) and (min-width:700px) and (max-width:950px) and (max-height:520px){
  .navWrap{top:10px!important}
  .nav{height:66px!important;width:calc(100% - 28px)!important;max-width:none!important;padding:0 14px 0 18px!important}
  .navLinks{
    position:static!important;display:flex!important;flex-direction:row!important;align-items:center!important;
    gap:15px!important;width:auto!important;margin:0!important;padding:0!important;background:transparent!important;
    border:0!important;box-shadow:none!important;opacity:1!important;visibility:visible!important;transform:none!important;
  }
  .navLinks>a{padding:7px 0!important;font-size:10.5px!important;white-space:nowrap!important}
  .navLinks .navCta{margin-left:2px!important;padding:10px 12px!important;font-size:10.5px!important}
  .menuBtn{display:none!important}
  .brandLockup{transform:scale(.84)!important;transform-origin:left center!important}

  .hero{height:auto!important;min-height:535px!important;align-items:flex-end!important}
  .heroContent{padding-top:104px!important;padding-bottom:42px!important}
  .heroContent>.eyebrow{margin-bottom:15px!important}
  .hero h1{font-size:clamp(48px,7vw,72px)!important;max-width:720px!important}
  .heroLead{max-width:650px!important;font-size:14px!important;margin:18px 0 20px!important}
  .heroActions{gap:10px!important}
  .trustRow{width:min(620px,72%)!important;margin-top:24px!important}
  .trustRow div{padding-top:13px!important;margin-right:20px!important;padding-right:20px!important}
  .trustRow strong{font-size:15px!important}.trustRow span{font-size:10px!important}

  /* restore tablet/desktop estate badge, hidden by the generic <=900px rule */
  .heroFloat{
    display:flex!important;right:22px!important;bottom:30px!important;padding:11px 12px!important;
    transform:scale(.9)!important;transform-origin:right bottom!important;z-index:6!important;
  }
  .heroFloat .estateHealthIcon{width:48px!important;height:48px!important;border-radius:14px!important}
  .heroFloat .estateHealthIcon svg{width:25px!important;height:25px!important}
  .mobileScrollCue{display:none!important}

  /* audience strip should read as tablet, not mobile */
  .logoStrip{height:72px!important;display:flex!important;justify-content:center!important;gap:22px!important;padding:0 16px!important;white-space:nowrap!important;overflow:hidden!important}
  .logoStrip span{font-size:10px!important}.logoStrip b{font-size:12px!important}.logoStrip i{display:block!important}
}

/* Portrait mobile cue: centered cleanly beneath the proof row, clear of Safari chrome. */
@media (orientation:portrait) and (max-width:600px){
  .heroContent{padding-bottom:112px!important}
  .mobileScrollCue{
    left:50%!important;right:auto!important;bottom:28px!important;transform:translateX(-50%)!important;
    width:52px!important;height:52px!important;z-index:8!important;
  }
}
@media (orientation:portrait) and (max-width:390px){
  .heroContent{padding-bottom:106px!important}
  .mobileScrollCue{bottom:24px!important;width:50px!important;height:50px!important}
}

/* FINAL EDGE-TO-EDGE COMPACT LANDSCAPE PASS
   Removes browser-visible white side gutters on rotated phones while preserving
   normal contained desktop/tablet layouts. */
@media (orientation:landscape) and (min-width:700px) and (max-width:950px) and (max-height:520px){
  html,body,#root,main{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
  }
  html,body{background:#07171a!important}
  .hero,
  .logoStrip,
  .darkSection,
  .portalSection,
  .ctaBand,
  .footer{
    width:100dvw!important;
    max-width:none!important;
    margin-left:calc(50% - 50dvw)!important;
    margin-right:calc(50% - 50dvw)!important;
  }
  .hero{
    border-left:0!important;
    border-right:0!important;
  }
  .navWrap{
    left:0!important;
    right:0!important;
    width:100dvw!important;
  }
  .nav{
    width:calc(100dvw - 20px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .shell{
    width:calc(100% - 32px)!important;
    max-width:1180px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .heroContent.shell{
    width:calc(100% - 40px)!important;
    max-width:1180px!important;
  }
  .heroFloat{
    right:18px!important;
  }
}

/* Android landscape can expose slightly taller compact browser viewports. */
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (min-height:521px) and (max-height:620px){
  html,body,#root,main{width:100%!important;max-width:none!important;margin:0!important;overflow-x:hidden!important}
  html,body{background:#07171a!important}
  .hero{width:100dvw!important;max-width:none!important;margin-left:calc(50% - 50dvw)!important;margin-right:calc(50% - 50dvw)!important}
  .navWrap{width:100dvw!important}
  .nav{width:calc(100dvw - 24px)!important;max-width:none!important}
}


/* FINAL MOBILE AUDIENCE PILLS — balanced 3 x 2 audience matrix */
.mobileAudienceOnly{display:none!important}
@media (max-width:600px) and (orientation:portrait){
  .logoStrip{
    min-height:154px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px 9px!important;
    padding:17px 14px 18px!important;
    background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
  }
  .logoStrip span{
    margin-bottom:2px!important;
    color:#93a0a6!important;
    font-size:9.5px!important;
    letter-spacing:.22em!important;
  }
  .logoStrip b,
  .logoStrip .mobileAudienceOnly{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:38px!important;
    padding:8px 7px!important;
    border-radius:999px!important;
    background:linear-gradient(145deg,#eef8ff 0%,#dff2ff 100%)!important;
    border:1px solid rgba(62,142,190,.14)!important;
    box-shadow:0 5px 16px rgba(41,104,142,.07),inset 0 1px 0 rgba(255,255,255,.9)!important;
    color:#35515f!important;
    font:700 11px/1.1 'Manrope',sans-serif!important;
    letter-spacing:.01em!important;
    white-space:nowrap!important;
  }
  .logoStrip b::before{
    content:"";
    width:5px;height:5px;border-radius:50%;
    background:linear-gradient(135deg,#6fdcc8,#55bde6);
    box-shadow:0 0 0 3px rgba(111,220,200,.09);
    margin-right:7px;
    flex:0 0 auto;
  }
  .logoStrip i{display:none!important}
}
@media (max-width:390px) and (orientation:portrait){
  .logoStrip{gap:8px 6px!important;padding-left:10px!important;padding-right:10px!important}
  .logoStrip b,.logoStrip .mobileAudienceOnly{font-size:10px!important;padding-left:5px!important;padding-right:5px!important}
  .logoStrip b::before{width:4px;height:4px;margin-right:5px}
}

/* ===== FINAL VISUAL POLISH: AUDIENCE PILLS + WORKFLOW CARDS ===== */
/* Mobile audience pills: clean interior, blue outline and a restrained breathing emphasis. */
@media (max-width:600px) and (orientation:portrait){
  .logoStrip b,
  .logoStrip .mobileAudienceOnly{
    background:rgba(255,255,255,.72)!important;
    border:1.25px solid rgba(47,150,211,.46)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 4px 14px rgba(35,113,156,.045)!important;
    color:#2f5060!important;
    animation:audiencePillBreathe 4.8s ease-in-out infinite;
  }
  .logoStrip b:nth-of-type(2),.logoStrip b:nth-of-type(5){animation-delay:.35s}
  .logoStrip b:nth-of-type(3),.logoStrip .mobileAudienceOnly{animation-delay:.7s}
  .logoStrip b::before{
    background:#47bfe7!important;
    box-shadow:0 0 0 3px rgba(71,191,231,.10),0 0 9px rgba(71,191,231,.28)!important;
  }
}
@keyframes audiencePillBreathe{
  0%,100%{border-color:rgba(47,150,211,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 4px 14px rgba(35,113,156,.035),0 0 0 0 rgba(71,191,231,0)}
  50%{border-color:rgba(47,150,211,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 6px 18px rgba(35,113,156,.065),0 0 0 3px rgba(71,191,231,.045)}
}

/* Workflow: oversized fading sequence number behind the heading, independent pulsing icon badge. */
.step{
  isolation:isolate;
  overflow:hidden;
}
.stepTop{
  position:relative!important;
  z-index:1!important;
  min-height:82px!important;
  align-items:flex-start!important;
}
.stepTop .stepNumber{
  position:absolute!important;
  left:-3px!important;
  top:-8px!important;
  z-index:0!important;
  display:block!important;
  font:800 clamp(78px,7.2vw,106px)/.78 'Manrope',sans-serif!important;
  letter-spacing:-.085em!important;
  background:linear-gradient(180deg,#cffff0 2%,#71e2c7 42%,rgba(53,217,220,.38) 68%,rgba(53,217,220,0) 98%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  opacity:.76!important;
  filter:drop-shadow(0 8px 24px rgba(43,194,183,.08))!important;
  pointer-events:none!important;
  user-select:none!important;
}
.stepTop>svg{
  position:relative!important;
  z-index:3!important;
  margin-left:auto!important;
  width:46px!important;
  height:46px!important;
  padding:11px!important;
  border-radius:15px!important;
  color:#a9f6dd!important;
  background:linear-gradient(145deg,rgba(145,232,197,.12),rgba(53,217,220,.045))!important;
  border:1px solid rgba(88,212,192,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 9px 24px rgba(0,0,0,.10),0 0 0 0 rgba(72,217,204,0)!important;
  animation:workflowIconBreathe 3.6s ease-in-out infinite!important;
}
.step:nth-child(2) .stepTop>svg{animation-delay:.3s!important}
.step:nth-child(3) .stepTop>svg{animation-delay:.6s!important}
.step:nth-child(4) .stepTop>svg{animation-delay:.9s!important}
.step h3{
  position:relative!important;
  z-index:3!important;
  margin:2px 0 8px!important;
}
.step p,.stepPreview{position:relative!important;z-index:3!important}
@keyframes workflowIconBreathe{
  0%,100%{transform:translateY(0) scale(1);border-color:rgba(88,212,192,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 9px 24px rgba(0,0,0,.10),0 0 0 0 rgba(72,217,204,0)}
  50%{transform:translateY(-1px) scale(1.025);border-color:rgba(88,212,192,.52);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 11px 28px rgba(0,0,0,.13),0 0 0 5px rgba(72,217,204,.045)}
}
.stepClickable:hover .stepTop>svg,.stepClickable:focus-visible .stepTop>svg{animation-play-state:paused!important;transform:translateY(-2px) scale(1.05)!important}

@media(max-width:600px){
  .stepClickable{min-height:236px!important;padding:24px 22px 50px!important}
  .stepTop{min-height:96px!important}
  .stepTop .stepNumber{
    left:-2px!important;
    top:-5px!important;
    font-size:96px!important;
    line-height:.78!important;
    opacity:.82!important;
  }
  .stepTop>svg{width:48px!important;height:48px!important;padding:11px!important;border-radius:15px!important}
  .step h3{margin:-2px 0 9px!important;font-size:24px!important;letter-spacing:-.025em!important}
  .step p{font-size:13px!important;line-height:1.58!important;max-width:95%!important}
}

@media(prefers-reduced-motion:reduce){
  .logoStrip b,.logoStrip .mobileAudienceOnly,.stepTop>svg{animation:none!important}
}


/* ===== MAXIMISED CONCEPT BUILD ===== */
.siteProgress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none;background:rgba(255,255,255,.04)}
.siteProgress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#35d9dc,#91e8c5 62%,#d4af37);box-shadow:0 0 12px rgba(53,217,220,.35);transition:width .08s linear}

/* lifecycle bridge */
.lifecycleSection{padding:112px 0;background:linear-gradient(180deg,#eff5f0 0%,#f8faf6 100%);border-top:1px solid rgba(8,34,38,.07);border-bottom:1px solid rgba(8,34,38,.07)}
.lifecycleHead{margin-bottom:48px}
.lifeRail{display:grid;grid-template-columns:1fr 70px 1.12fr 70px 1fr;align-items:stretch;gap:0}
.lifeStage{position:relative;background:white;border:1px solid rgba(8,34,38,.09);border-radius:24px;padding:28px;min-height:245px;box-shadow:0 16px 50px rgba(5,25,28,.055);overflow:hidden}
.lifeStage>span{font:800 10px 'Manrope';letter-spacing:.16em;color:#7b8e8c}.lifeIcon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#e9f7f0;color:#246b61;margin:35px 0 19px}.lifeStage h3{font:650 25px/1.05 'Manrope';letter-spacing:-.03em;margin:0 0 10px}.lifeStage p{color:#71817f;line-height:1.55;margin:0;font-size:14px}.lifeStageActive{background:linear-gradient(145deg,#08272b,#0e3a3e);color:white;border-color:rgba(145,232,197,.27);box-shadow:0 24px 70px rgba(5,35,39,.18)}.lifeStageActive>span{color:var(--mint)}.lifeStageActive .lifeIcon{background:rgba(145,232,197,.11);color:var(--mint);border:1px solid rgba(145,232,197,.18)}.lifeStageActive p{color:#b8ccca}.lifePulse{position:absolute;right:18px;bottom:18px;border:1px solid rgba(145,232,197,.22);border-radius:999px;padding:7px 9px;color:var(--mint);font:800 8px 'Manrope';letter-spacing:.12em;animation:lifeBadgePulse 3.8s ease-in-out infinite}.lifeConnector{display:grid;place-items:center}.lifeConnector i{width:56%;height:1px;background:linear-gradient(90deg,rgba(47,112,105,.18),rgba(47,112,105,.6),rgba(47,112,105,.18));position:relative}.lifeConnector i::after{content:"";position:absolute;right:-1px;top:50%;width:6px;height:6px;border-top:1.5px solid #4d817b;border-right:1.5px solid #4d817b;transform:translateY(-50%) rotate(45deg)}
.swapBanner{margin-top:20px;border-radius:22px;background:white;border:1px solid rgba(8,34,38,.09);padding:22px 24px;display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:18px;box-shadow:0 14px 40px rgba(8,34,38,.05)}.swapMark{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#dff8ed,#eaf8ff);color:#147a7c;box-shadow:inset 0 0 0 1px rgba(29,146,155,.12)}.swapBanner span{display:block;color:#63817f;font:800 9px 'Manrope';letter-spacing:.14em;margin-bottom:4px}.swapBanner strong{display:block;font:650 18px 'Manrope';letter-spacing:-.02em}.swapBanner p{margin:5px 0 0;color:#758582;font-size:12px}.swapBanner small{font-size:9px;color:#879491;text-align:right;max-width:150px;line-height:1.4}
@keyframes lifeBadgePulse{0%,100%{box-shadow:0 0 0 0 rgba(145,232,197,0)}50%{box-shadow:0 0 0 5px rgba(145,232,197,.045)}}

/* Lifecycle intelligence */
.intelSection{padding:112px 0;background:#071b1f;color:white;position:relative;overflow:hidden}.intelSection::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 18%,rgba(53,217,220,.08),transparent 28%),linear-gradient(115deg,transparent 0 60%,rgba(145,232,197,.025) 60% 61%,transparent 61%);pointer-events:none}.intelHead{position:relative;z-index:2;margin-bottom:42px}.intelHead h2{color:white}.intelHead p{color:#a9bdbb}.lifeCalc{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid rgba(145,232,197,.14);border-radius:28px;overflow:hidden;background:rgba(255,255,255,.025);box-shadow:0 25px 90px rgba(0,0,0,.16)}.lifeCalcControls{padding:34px;background:rgba(255,255,255,.025)}.lifeCalcControls label{display:block;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.075)}.lifeCalcControls label span{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#adc2bf}.lifeCalcControls label b{color:white;font-size:13px}.lifeCalcControls input{width:100%;margin-top:14px;accent-color:#69dfc5}.rangeHint{display:block;margin-top:7px;color:#6f928d;font-size:9px;line-height:1.35}.methodologyPill{display:flex;align-items:center;gap:10px;margin-top:20px;padding:11px 12px;border-radius:13px;border:1px solid rgba(145,232,197,.13);background:rgba(145,232,197,.055);color:#9bc6be;font-size:10px;line-height:1.4}.methodologyPill svg{color:var(--mint);flex:0 0 auto}.lifeCalcResults{padding:36px;background:linear-gradient(145deg,rgba(145,232,197,.06),rgba(53,217,220,.025));display:flex;flex-direction:column;justify-content:center}.lifeHeroMetric small{display:block;text-transform:uppercase;letter-spacing:.13em;color:#75a29b;font-size:9px}.lifeHeroMetric strong{display:block;font:700 clamp(48px,6vw,76px)/1 'Manrope';letter-spacing:-.055em;color:var(--mint);margin:8px 0}.lifeHeroMetric span{color:#b4c7c4;font-size:12px}.lifeMetricGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}.lifeMetricGrid>div{border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);padding:17px}.lifeMetricGrid svg{color:#6de4cc}.lifeMetricGrid b{display:block;font:650 22px 'Manrope';margin:9px 0 3px}.lifeMetricGrid span{font-size:10px;color:#8fa9a6}.intelDisclaimer{margin:18px 0 0;color:#708b87;font-size:9px;line-height:1.5}.closedLoop{position:relative;z-index:2;margin-top:22px;border:1px solid rgba(145,232,197,.12);border-radius:26px;padding:28px;background:rgba(255,255,255,.018)}.closedLoopHead{display:grid;grid-template-columns:.7fr 1fr;column-gap:50px;align-items:end}.closedLoopHead .kicker{grid-column:1/-1}.closedLoopHead h3{font:650 32px 'Manrope';letter-spacing:-.035em;margin:0}.closedLoopHead p{margin:0;color:#93aaa7;font-size:13px;line-height:1.55}.loopSteps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px}.loopStep{position:relative;border-radius:17px;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.035);padding:18px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:9px;min-height:78px}.loopStep>span{font:800 10px 'Manrope';color:#5c8580}.loopStep svg{color:var(--mint)}.loopStep b{grid-column:1/-1;font:650 13px 'Manrope';color:#dae6e4}

/* About */
.aboutSection{padding:112px 0;background:linear-gradient(180deg,#f8faf6,#eef5f0)}.peopleGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.personCard,.personCard:not(.personLead){display:grid;grid-template-columns:210px 1fr;background:white;border:1px solid rgba(8,34,38,.09);border-radius:28px;overflow:hidden;box-shadow:0 18px 55px rgba(8,34,38,.065);min-height:330px}.personPhotoWrap{min-height:100%;background:#e8efeb;overflow:hidden}.personPhotoWrap img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top}.personCopy{padding:30px;align-self:center}.personCopy>span{font:800 9px 'Manrope';letter-spacing:.15em;color:#4c8e84}.personCopy h3{font:650 30px/1 'Manrope';letter-spacing:-.035em;margin:8px 0 13px}.personCopy p{color:#6f817f;font-size:13px;line-height:1.6;margin:0}.personTags{display:flex;flex-wrap:wrap;gap:7px;margin-top:19px}.personTags b{font:700 9px 'Manrope';color:#456c67;border:1px solid rgba(55,122,112,.16);background:#f2f8f4;border-radius:999px;padding:7px 9px}

/* Nav expansion finesse */
@media(min-width:901px){.navLinks{gap:20px}.navLinks>a{font-size:12px}.navCta{padding:12px 14px}}

@media(max-width:900px){
  .lifecycleSection,.intelSection,.aboutSection{padding:78px 0}
  .lifeRail{grid-template-columns:1fr;gap:10px}.lifeConnector{height:20px}.lifeConnector i{width:1px;height:18px}.lifeConnector i::after{right:auto;left:50%;top:auto;bottom:-1px;transform:translateX(-50%) rotate(135deg)}
  .lifeStage{min-height:200px}.swapBanner{grid-template-columns:50px 1fr}.swapBanner small{grid-column:2;text-align:left;max-width:none}
  .lifeCalc{grid-template-columns:1fr}.closedLoopHead{grid-template-columns:1fr;gap:10px}.loopSteps{grid-template-columns:1fr 1fr}
  .peopleGrid{grid-template-columns:1fr}.personCard,.personCard:not(.personLead){grid-template-columns:220px 1fr}
}

@media(max-width:600px){
  .siteProgress{height:2px}
  .lifecycleSection,.intelSection,.aboutSection{padding:70px 0}
  .lifecycleHead{margin-bottom:28px}.lifeStage{padding:22px;min-height:178px;border-radius:21px}.lifeIcon{margin:22px 0 14px}.lifeStage h3{font-size:22px}.lifePulse{position:static;display:inline-flex;margin-top:16px}
  .swapBanner{padding:18px;grid-template-columns:46px 1fr;gap:12px}.swapMark{width:46px;height:46px;border-radius:14px}.swapBanner strong{font-size:15px;line-height:1.3}.swapBanner p{font-size:11px}.swapBanner small{font-size:8px}
  .lifeCalc{border-radius:22px}.lifeCalcControls,.lifeCalcResults{padding:23px}.lifeHeroMetric strong{font-size:50px}.lifeMetricGrid{grid-template-columns:1fr}.closedLoop{padding:22px;border-radius:22px}.closedLoopHead h3{font-size:29px}.loopSteps{grid-template-columns:1fr 1fr;gap:8px}.loopStep{padding:14px;min-height:70px}
  .peopleGrid{gap:12px}.personCard,.personCard:not(.personLead){grid-template-columns:108px 1fr;min-height:220px;border-radius:22px}.personCopy{padding:20px 16px}.personCopy h3{font-size:23px}.personCopy p{font-size:11px;line-height:1.5}.personTags{gap:5px;margin-top:13px}.personTags b{font-size:8px;padding:6px 7px}.personPhotoWrap img{object-position:center top}
}

/* Compact landscape phones: keep full-width established layout, fit extra nav items, and avoid vertical bloat. */
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){
  .navLinks{gap:10px!important}.navLinks>a{font-size:9.5px!important}.navLinks .navCta{font-size:9.5px!important;padding:9px 10px!important}.brandLockup{transform:scale(.78)!important}
  .lifecycleSection,.intelSection,.aboutSection{padding:58px 0!important}.lifeRail{grid-template-columns:1fr 48px 1.1fr 48px 1fr!important;gap:0!important}.lifeConnector{height:auto!important}.lifeConnector i{width:55%!important;height:1px!important}.lifeStage{min-height:180px!important;padding:20px!important}.lifeIcon{width:40px;height:40px;margin:20px 0 12px!important}.lifeStage h3{font-size:20px!important}.lifeStage p{font-size:11px!important}.lifePulse{font-size:7px!important}.swapBanner{grid-template-columns:46px 1fr auto!important;padding:16px 18px!important}.swapBanner small{grid-column:auto!important;text-align:right!important;max-width:130px!important}
  .lifeCalc{grid-template-columns:.9fr 1.1fr!important}.lifeCalcControls,.lifeCalcResults{padding:24px!important}.closedLoopHead{grid-template-columns:.7fr 1fr!important}.loopSteps{grid-template-columns:repeat(4,1fr)!important}.peopleGrid{grid-template-columns:1fr 1fr!important}.personCard,.personCard:not(.personLead){grid-template-columns:150px 1fr!important;min-height:250px!important}.personCopy{padding:20px!important}.personCopy h3{font-size:24px!important}.personCopy p{font-size:11px!important}
}

@media(prefers-reduced-motion:reduce){.lifePulse,.cycleArcTwo{animation:none!important}.siteProgress i{transition:none!important}}

/* ===== PANELED BRAND DIRECTION — 2026-08-13 ===== */
.paneledBrand .paneledBrandText{box-sizing:border-box;display:grid!important;grid-template-rows:auto auto;align-items:center;border-left:2px solid #d6a93d!important;overflow:visible!important}
.paneledBrand .paneledWord{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;align-items:center!important;justify-items:center!important;column-gap:0!important;width:100%!important;padding:0!important;margin:0!important;color:#fff!important;font-family:'Manrope',sans-serif!important;font-weight:800!important;line-height:.92!important;letter-spacing:0!important;white-space:nowrap!important}
.paneledBrand .paneledWord .paneledLetter{display:block;width:100%;text-align:center;color:#fff!important}
.paneledBrand .paneledWord .paneledEd{color:#35d9dc!important;background:linear-gradient(135deg,#35d9dc 0%,#8ee6c4 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
.paneledBrand .brandDescriptor{display:block!important;width:100%!important;margin:0!important;padding:0!important;color:#35d9dc!important;font-family:'Manrope',sans-serif!important;font-weight:750!important;line-height:1!important;letter-spacing:0!important;white-space:nowrap!important;text-align:center!important}
.nav .paneledBrandText{width:270px!important;min-width:270px!important;padding-left:16px!important;row-gap:6px!important}.nav .paneledWord{font-size:23px!important}.nav .brandDescriptor{font-size:8.45px!important;letter-spacing:.02em!important;transform:none!important}
.footer .paneledBrandText{width:308px!important;min-width:308px!important;max-width:308px!important;padding-left:17px!important;row-gap:7px!important}.footer .paneledWord{font-size:27px!important}.footer .brandDescriptor{font-size:9.95px!important;letter-spacing:.02em!important;transform:none!important}.footerBrandBlock>p{max-width:460px!important}
.brandDirection{position:relative;z-index:2;margin-top:34px!important;padding:24px 0 20px;border-top:1px solid rgba(145,232,197,.12);border-bottom:1px solid rgba(145,232,197,.10)}
.brandDirectionLabel{display:inline-flex;align-items:center;gap:8px;color:#7edecb;font:800 9px/1 'Manrope';letter-spacing:.16em;text-transform:uppercase;margin-bottom:17px}
.brandDirectionGrid{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:26px}.brandDirectionGrid>div{position:relative;padding-left:15px;border-left:1px solid rgba(145,232,197,.13)}.brandDirectionGrid b{display:block;color:#fff;font:700 12px/1.2 'Manrope';margin-bottom:7px}.brandDirectionGrid p{margin:0;color:#829795;font-size:10.5px;line-height:1.55;max-width:390px}.brandLegalLine{display:flex;justify-content:space-between;gap:24px;margin-top:18px;color:#617876;font-size:8.5px;line-height:1.4;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:900px){.nav .paneledBrandText{width:232px!important;min-width:232px!important;row-gap:5px!important}.nav .paneledWord{font-size:21px!important}.nav .brandDescriptor{font-size:7.15px!important;letter-spacing:.015em!important}.brandDirectionGrid{grid-template-columns:1fr 1fr;gap:20px}.brandDirectionGrid>div:last-child{grid-column:1/-1}}
@media(max-width:600px){.nav .paneledBrandText{width:218px!important;min-width:218px!important;padding-left:13px!important;row-gap:5px!important}.nav .paneledWord{font-size:20px!important}.nav .brandDescriptor{font-size:6.8px!important;letter-spacing:.01em!important}.footer .paneledBrandText{width:264px!important;min-width:264px!important;max-width:264px!important;padding-left:15px!important;row-gap:6px!important}.footer .paneledWord{font-size:24px!important}.footer .brandDescriptor{font-size:7.85px!important;letter-spacing:.015em!important}.brandDirection{margin-top:28px!important;padding:22px 0 18px}.brandDirectionGrid{grid-template-columns:1fr;gap:16px}.brandDirectionGrid>div:last-child{grid-column:auto}.brandDirectionGrid>div{padding-left:13px}.brandDirectionGrid p{font-size:10px}.brandLegalLine{flex-direction:column;gap:7px;font-size:8px}}
@media(max-width:390px){.nav .paneledBrandText{width:192px!important;min-width:192px!important;padding-left:10px!important;row-gap:4px!important}.nav .paneledWord{font-size:17px!important}.nav .brandDescriptor{font-size:5.85px!important;letter-spacing:0!important}.footer .paneledBrandText{width:232px!important;min-width:232px!important;max-width:232px!important;row-gap:5px!important}.footer .paneledWord{font-size:21px!important}.footer .brandDescriptor{font-size:6.95px!important;letter-spacing:.01em!important}}
@media(max-width:350px){.nav .paneledBrandText{width:176px!important;min-width:176px!important;row-gap:4px!important}.nav .paneledWord{font-size:15.8px!important}.nav .brandDescriptor{font-size:5.05px!important;letter-spacing:0!important}}
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){.nav .paneledBrandText{width:202px!important;min-width:202px!important;padding-left:11px!important;row-gap:4px!important}.nav .paneledWord{font-size:17.5px!important}.nav .brandDescriptor{font-size:5.75px!important;letter-spacing:0!important}}

/* Final PanelEd descriptor geometry: no gold end-strokes; descriptor spans the wordmark exactly. */
.paneledBrand .brandDescriptorText{display:block;width:100%;text-align:justify;text-align-last:justify;white-space:nowrap}.paneledBrand .brandDescriptorText::after{content:'';display:inline-block;width:100%}
.nav .paneledBrandText{row-gap:6px!important}
.nav .brandDescriptor{font-size:8.45px!important;transform:none!important}
.footer .paneledBrandText{row-gap:7px!important}
.footer .brandDescriptor{font-size:9.95px!important;transform:none!important}
.heroActions .primary{text-decoration:none}
@media(max-width:900px){.nav .brandDescriptor{font-size:7.15px!important}}
@media(max-width:600px){.nav .paneledBrandText{row-gap:5px!important}.nav .brandDescriptor{font-size:6.8px!important}.footer .brandDescriptor{font-size:7.85px!important}}
@media(max-width:390px){.nav .brandDescriptor{font-size:5.85px!important}.footer .brandDescriptor{font-size:6.95px!important}}
@media(max-width:350px){.nav .brandDescriptor{font-size:5.05px!important}}
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){.nav .brandDescriptor{font-size:5.75px!important}}


/* TRUE FINAL PANELED LOCKUP — SVG descriptor fills the exact visual P-to-D measure */
.paneledBrand .brandDescriptor{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
.paneledBrand .brandDescriptorSvg{
  display:block!important;
  width:92%!important;
  height:auto!important;
  overflow:visible!important;
}
.paneledBrand .brandDescriptorSvgText{
  fill:#35d9dc!important;
  font-family:'Manrope',sans-serif!important;
  font-size:36px!important;
  font-weight:750!important;
  letter-spacing:0!important;
}
.paneledBrand .brandDescriptorText{display:none!important}
.paneledBrand .brandDescriptor::before,.paneledBrand .brandDescriptor::after{display:none!important;content:none!important}
.nav .paneledBrandText{row-gap:4px!important}
.footer .paneledBrandText{row-gap:5px!important}
@media(max-width:600px){
  .nav .paneledBrandText{row-gap:3px!important}
  .footer .paneledBrandText{row-gap:4px!important}
  .paneledBrand .brandDescriptorSvg{width:92%!important}
}
@media(max-width:390px){.paneledBrand .brandDescriptorSvg{width:91.5%!important}}
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){.paneledBrand .brandDescriptorSvg{width:92%!important}}

/* PHONE MOCK BRAND LOCKUP — compact only inside the customer-portal handset */
.phoneHead{gap:8px!important;overflow:hidden!important}
.phoneHead .paneledBrand{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;max-width:calc(100% - 39px)!important;overflow:hidden!important}
.phoneHead .logoMark{width:36px!important;height:36px!important;flex:0 0 36px!important}
.phoneHead .paneledBrandText{
  display:grid!important;
  width:150px!important;
  min-width:150px!important;
  max-width:150px!important;
  padding-left:8px!important;
  row-gap:2px!important;
  border-left:1.5px solid #d6a93d!important;
  overflow:hidden!important;
}
.phoneHead .paneledWord{font-size:12px!important;line-height:.95!important}
.phoneHead .brandDescriptor{display:block!important;width:100%!important;overflow:hidden!important}
.phoneHead .brandDescriptorSvg{display:block!important;width:92%!important;height:auto!important;margin:0 auto!important;overflow:hidden!important}
.phoneHead .brandDescriptorSvgText{font-size:34px!important}
.phoneHead .bellDot{flex:0 0 31px!important}
@media(max-width:600px){
  .phoneHead .paneledBrandText{width:142px!important;min-width:142px!important;max-width:142px!important;padding-left:7px!important}
  .phoneHead .paneledWord{font-size:11.3px!important}
  .phoneHead .logoMark{width:34px!important;height:34px!important;flex-basis:34px!important}
}

/* ===== PANELWISE ALIGNMENT + ALI WEBSITE GUIDANCE — 2026-08-18 ===== */
:root{--pw-navy:#081420;--pw-teal:#0f2b33;--pw-aqua:#22d3e2;--pw-gold:#d2a94f;--pw-off:#f5f7fa}

/* PanelWise customer-facing lockup. The icon remains an image, while the wordmark stays HTML/SVG for crisp responsive rendering. */
.panelwiseBrand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;position:relative;z-index:3}
.panelwiseBrandMark{display:block;width:58px;height:58px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 8px 18px rgba(34,211,226,.18))}
.panelwiseBrandText{display:grid;grid-template-rows:auto auto;row-gap:4px;width:248px;min-width:248px;padding-left:13px;border-left:2px solid var(--pw-gold);overflow:visible}
.panelwiseWord{display:block;font:800 29px/.94 'Manrope',sans-serif;letter-spacing:-.055em;white-space:nowrap}
.panelwiseWord .panelWord{color:#09232d}.panelwiseWord .wiseWord{background:linear-gradient(135deg,#22d3e2 4%,#86e6cf 68%,#22b9d1 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.panelwiseDescriptor{display:block;width:100%;height:11px;line-height:0;overflow:visible}
.panelwiseDescriptorSvg{display:block;width:100%;height:11px;overflow:visible}
.panelwiseDescriptorSvg text{fill:var(--pw-gold);font-family:'Manrope',sans-serif;font-weight:800;font-size:31px;letter-spacing:0}
.nav .panelWord,.footer .panelWord,.brandLight .panelWord{color:#fff}
.nav .panelwiseBrandText{width:236px;min-width:236px}
.nav .panelwiseWord{font-size:27px}
.nav .panelwiseBrandMark{width:54px;height:54px}
.nav .panelwiseDescriptor,.nav .panelwiseDescriptorSvg{height:10px}
.footer .panelwiseBrandMark{width:72px;height:72px}.footer .panelwiseBrandText{width:310px;min-width:310px;padding-left:16px;row-gap:6px}.footer .panelwiseWord{font-size:38px}.footer .panelwiseDescriptor,.footer .panelwiseDescriptorSvg{height:13px}.footer .panelwiseDescriptorSvg text{font-size:32px}

/* Preserve the premium dark floating navigation, now balanced around the wider PanelWise mark. */
.nav.glass{background:linear-gradient(135deg,#04131d 0%,#06212a 55%,#071b25 100%)!important;border:1px solid rgba(34,211,226,.15)!important;box-shadow:0 18px 52px rgba(2,18,25,.28),inset 0 1px 0 rgba(255,255,255,.055)!important}
.nav.glass::after{opacity:.84;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%2322d3e2' stroke-width='1.2'%3E%3Cpath stroke-opacity='.14' d='M0 102 C110 102 148 42 260 42 C356 42 390 72 452 72 C500 72 528 56 560 42'/%3E%3Cpath stroke-opacity='.20' d='M0 88 C112 88 150 31 261 31 C357 31 392 61 453 61 C502 61 530 45 560 31'/%3E%3Cpath stroke-opacity='.27' d='M0 74 C114 74 152 20 262 20 C358 20 394 50 454 50 C503 50 532 34 560 20'/%3E%3Cpath stroke='%23d2a94f' stroke-opacity='.12' d='M0 116 C108 116 146 53 259 53 C355 53 388 83 451 83 C498 83 526 68 560 54'/%3E%3C/g%3E%3C/svg%3E")}
.nav .navLinks{gap:16px}.nav .navLinks>a{font-size:11.5px;white-space:nowrap;color:rgba(255,255,255,.83)}.nav .navCta{padding:11px 14px;font-size:11.5px;background:linear-gradient(135deg,#d2a94f,#f0c55c)}

/* PanelWise loading state: no legacy H. */
.loaderLogo{width:auto!important;height:92px!important;border:0!important;border-radius:0!important;display:flex!important;align-items:center!important;gap:17px!important;overflow:visible!important;background:transparent!important}
.loaderBrandMark{width:82px!important;height:82px!important;filter:drop-shadow(0 14px 34px rgba(34,211,226,.24));animation:pwLoaderFloat 2.6s ease-in-out infinite}
.loaderWord{font:800 40px/.9 'Manrope',sans-serif;letter-spacing:-.055em;white-space:nowrap}.loaderWord span{color:#fff}.loaderWord b{font-weight:800;background:linear-gradient(135deg,#22d3e2,#91e8c5);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.loaderScan{display:none!important}.loaderLine{margin-top:19px!important;background:rgba(255,255,255,.08)!important}.loaderLine i{background:linear-gradient(90deg,#22d3e2,#91e8c5,#d2a94f)!important}
@keyframes pwLoaderFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.015)}}

/* MAT planning section. */
.matSection{padding:108px 0;background:linear-gradient(180deg,#f7faf7 0%,#eef5f1 100%);border-top:1px solid rgba(8,34,38,.06);border-bottom:1px solid rgba(8,34,38,.07)}
.matHead{margin-bottom:38px}.matSteps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.matStep{position:relative;min-height:225px;padding:25px 22px;border-radius:23px;background:#fff;border:1px solid rgba(8,34,38,.09);box-shadow:0 17px 45px rgba(7,30,34,.045);overflow:hidden}.matStep>span{font:800 42px/.9 'Manrope';letter-spacing:-.06em;color:rgba(15,92,96,.15)}.matStep>svg{position:absolute;right:20px;top:22px;color:#36bdbb}.matStep h3{font:700 19px/1.08 'Manrope';letter-spacing:-.025em;margin:45px 0 8px}.matStep p{margin:0;color:#6f8180;font-size:12px;line-height:1.55}.matCallout{margin-top:14px;display:flex;align-items:center;gap:13px;padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,#092b31,#0c3a40);color:#fff;border:1px solid rgba(34,211,226,.15)}.matCallout>svg{color:#72e6d1;flex:0 0 auto}.matCallout>div{display:flex;flex-direction:column;gap:3px}.matCallout b{font:700 13px 'Manrope'}.matCallout span{font-size:11px;color:#a9c0be;line-height:1.45}.matAlignment{margin-top:26px;display:grid;grid-template-columns:auto repeat(3,1fr);align-items:stretch;gap:9px}.matAlignment>span{align-self:center;font:800 8px/1.4 'Manrope';letter-spacing:.16em;color:#6b817f;writing-mode:vertical-rl;transform:rotate(180deg);padding:8px}.matAlignment>div{display:grid;grid-template-columns:28px 1fr;column-gap:8px;row-gap:3px;align-items:start;padding:14px;border-radius:16px;background:rgba(255,255,255,.65);border:1px solid rgba(8,34,38,.07)}.matAlignment>div svg{grid-row:1/3;color:#2a8278;margin-top:1px}.matAlignment b{font:700 11px 'Manrope'}.matAlignment small{font-size:9.5px;line-height:1.4;color:#758684}

/* Current estate slider, deliberately commercial-figure free. */
.planningCalc .calcControls,.planningCalc .calcResult{min-height:410px}.estatePresetRow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:-4px 0 21px}.estatePresetRow button{border:1px solid rgba(8,34,38,.12);background:#fff;color:#49605f;border-radius:10px;padding:8px 5px;font-size:9px;font-weight:700;cursor:pointer}.estatePresetRow button.active{background:#092e34;color:#fff;border-color:#092e34;box-shadow:0 8px 22px rgba(9,46,52,.13)}.planningCalc .scenarioName{font:700 clamp(38px,4.3vw,61px)/.93 'Manrope';letter-spacing:-.05em;display:block;margin:8px 0 16px}.planningMetrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:22px 0}.planningMetrics>div{padding:14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column}.planningMetrics b{font:700 26px 'Manrope';color:#91e8c5}.planningMetrics small{font-size:9px;line-height:1.35;color:#9db1af;margin-top:3px}.planningCalc .calcNote{font-size:10px!important;line-height:1.5!important;color:#879795!important;margin-top:10px!important}

/* ESG section, deliberately methodology-led rather than publishing invented carbon claims. */
.esgSection{padding:110px 0;background:linear-gradient(145deg,#06171d 0%,#08282e 58%,#071a20 100%);color:#fff;position:relative;overflow:hidden}.esgSection::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 86% 18%,rgba(34,211,226,.10),transparent 28%),radial-gradient(circle at 12% 86%,rgba(210,169,79,.07),transparent 25%)}.esgSection>.shell{position:relative;z-index:2}.esgHead p{color:#a9bdbb}.esgGrid{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:12px}.esgCard{position:relative;min-height:280px;padding:27px;border-radius:24px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);overflow:hidden}.esgCard::after{content:"";position:absolute;inset:auto -20% -50% 20%;height:170px;border:1px solid rgba(34,211,226,.10);border-radius:50%;transform:rotate(-8deg)}.esgCard>span{font:800 9px 'Manrope';letter-spacing:.15em;color:#71ded5}.esgCard>svg{display:block;margin:34px 0 21px;color:#91e8c5}.esgCard h3{font:650 24px/1.05 'Manrope';letter-spacing:-.03em;margin:0 0 11px;max-width:320px}.esgCard p{font-size:12px;line-height:1.58;color:#9eb3b1;max-width:340px}.esgCardLead{background:linear-gradient(145deg,rgba(34,211,226,.10),rgba(145,232,197,.035));border-color:rgba(34,211,226,.18)}.esgPath{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.07)}.esgPath>div{display:grid;grid-template-columns:auto 1fr;column-gap:9px;row-gap:2px;padding:14px 18px;background:#071b20}.esgPath span{grid-row:1/3;font:800 19px 'Manrope';color:#d2a94f}.esgPath b{font:700 11px 'Manrope'}.esgPath small{font-size:9px;color:#819997}

/* Lifecycle scope note. */
.intelScopeNote{margin-top:14px;padding:18px 20px;border:1px solid rgba(145,232,197,.12);border-radius:17px;background:rgba(145,232,197,.04);display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:start}.intelScopeNote b{font:700 12px 'Manrope';color:#dff6ed}.intelScopeNote p{margin:0;color:#8fa7a4;font-size:10.5px;line-height:1.55}

/* Moxton social proof — prominent enough to establish credibility without looking like a review widget. */
.quoteSection{padding:94px 0;background:#f3f7f3;border-top:1px solid rgba(8,34,38,.06);border-bottom:1px solid rgba(8,34,38,.06)}.moxtonQuote{display:grid;grid-template-columns:110px 1fr;gap:36px;align-items:start;max-width:1040px}.quoteMark{width:104px;height:104px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(145deg,#08252b,#0d3c42);color:#91e8c5;font:700 82px/.75 Georgia,serif;box-shadow:0 18px 50px rgba(6,34,38,.12)}.moxtonQuote blockquote{font:500 clamp(24px,3vw,39px)/1.25 'Manrope';letter-spacing:-.035em;margin:4px 0 19px;color:#0b252a}.moxtonQuote cite{font-style:normal;font-size:11px;font-weight:700;color:#6d817f;letter-spacing:.04em}

/* About: only founder + company story per Ali's conflict note. */
.singleFounder{grid-template-columns:1.05fr .95fr!important}.companyStoryCard{position:relative;border-radius:26px;padding:32px;background:linear-gradient(145deg,#08272c,#0b363b);color:#fff;min-height:340px;overflow:hidden}.companyStoryCard::after{content:"";position:absolute;width:310px;height:180px;border:1px solid rgba(34,211,226,.14);border-radius:50%;right:-110px;bottom:-75px;transform:rotate(-15deg)}.companyStoryCard h3{font:650 31px/1.08 'Manrope';letter-spacing:-.035em;max-width:500px;margin:8px 0 13px}.companyStoryCard p{font-size:13px;line-height:1.6;color:#a8bfbd;max-width:480px}.companyStoryPills{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}.companyStoryPills b{padding:8px 10px;border-radius:999px;background:rgba(145,232,197,.08);border:1px solid rgba(145,232,197,.14);color:#c8f2e6;font-size:9px}

/* FAQs give Ali a clean place to replace wording later without changing layout. */
.faqSection{padding:108px 0;background:#fff}.faqGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.faqItem{border:1px solid rgba(8,34,38,.10);border-radius:18px;background:#f8faf7;overflow:hidden}.faqItem summary{list-style:none;cursor:pointer;padding:18px 20px;font:700 13px 'Manrope';display:flex;align-items:center;justify-content:space-between;gap:20px}.faqItem summary::-webkit-details-marker{display:none}.faqItem summary span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e4f4ed;color:#26796e;transition:.2s transform}.faqItem[open] summary span{transform:rotate(45deg)}.faqItem p{margin:0;padding:0 20px 19px;color:#6d7f7e;font-size:11.5px;line-height:1.6}

.footerServiceNote{margin-top:34px;padding:16px 0;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;gap:20px;color:#6b8280;font-size:9px;letter-spacing:.04em;text-transform:uppercase}.footerBottom{margin-top:22px!important}

/* Compact brand inside customer portal handset and portal modal. */
.phoneHead{gap:8px!important;overflow:hidden!important}.phoneHead .panelwiseBrand{gap:6px!important;max-width:calc(100% - 38px)!important;overflow:hidden!important}.phoneHead .panelwiseBrandMark{width:34px!important;height:34px!important;flex:0 0 34px!important}.phoneHead .panelwiseBrandText{width:151px!important;min-width:151px!important;padding-left:7px!important;border-left-width:1.5px!important;row-gap:2px!important}.phoneHead .panelwiseWord{font-size:15px!important}.phoneHead .panelwiseDescriptor,.phoneHead .panelwiseDescriptorSvg{height:5px!important}.phoneHead .panelwiseDescriptorSvg text{fill:#157f80!important;font-size:33px!important}.portalDemoBar .panelwiseBrandMark{width:37px;height:37px}.portalDemoBar .panelwiseBrandText{width:165px;min-width:165px;padding-left:8px;row-gap:2px}.portalDemoBar .panelwiseWord{font-size:16px}.portalDemoBar .panelwiseDescriptor,.portalDemoBar .panelwiseDescriptorSvg{height:6px}.portalDemoBar .panelwiseDescriptorSvg text{fill:#9a7424;font-size:32px}

/* Responsive / tablet / landscape. */
@media(max-width:1100px) and (min-width:901px){.nav .navLinks{gap:10px}.nav .navLinks>a,.nav .navCta{font-size:10px}.nav .panelwiseBrandText{width:215px;min-width:215px}.nav .panelwiseWord{font-size:24px}.nav .panelwiseBrandMark{width:50px;height:50px}}
@media(max-width:900px){
  .nav .panelwiseBrandText{width:215px;min-width:215px}.nav .panelwiseWord{font-size:24px}.nav .panelwiseBrandMark{width:50px;height:50px}
  .matSteps{grid-template-columns:1fr 1fr}.matAlignment{grid-template-columns:1fr 1fr}.matAlignment>span{grid-column:1/-1;writing-mode:horizontal-tb;transform:none;padding:0 0 4px}.esgGrid{grid-template-columns:1fr 1fr}.esgCardLead{grid-column:1/-1}.singleFounder{grid-template-columns:1fr!important}.faqGrid{grid-template-columns:1fr}.moxtonQuote{grid-template-columns:84px 1fr;gap:24px}.quoteMark{width:80px;height:80px;border-radius:22px;font-size:66px}.intelScopeNote{grid-template-columns:1fr;gap:5px}.footerServiceNote{flex-direction:column;gap:6px}
}
@media(max-width:600px){
  .nav{height:80px!important}.nav .panelwiseBrandMark{width:50px!important;height:50px!important}.nav .panelwiseBrand{gap:8px!important}.nav .panelwiseBrandText{width:184px!important;min-width:184px!important;padding-left:9px!important;row-gap:3px!important}.nav .panelwiseWord{font-size:21px!important}.nav .panelwiseDescriptor,.nav .panelwiseDescriptorSvg{height:8px!important}.nav .panelwiseDescriptorSvg text{font-size:32px!important}.navLinks{top:90px!important}
  .loaderLogo{height:80px!important;gap:10px!important}.loaderBrandMark{width:70px!important;height:70px!important}.loaderWord{font-size:31px}
  .matSection,.esgSection,.quoteSection,.faqSection{padding:72px 0}.matSteps{grid-template-columns:1fr;gap:9px}.matStep{min-height:180px;padding:21px}.matStep h3{margin-top:30px}.matAlignment{grid-template-columns:1fr}.matCallout{align-items:flex-start}.estatePresetRow{grid-template-columns:1fr 1fr}.planningMetrics{grid-template-columns:1fr}.esgGrid{grid-template-columns:1fr}.esgCardLead{grid-column:auto}.esgCard{min-height:230px;padding:22px}.esgPath{grid-template-columns:1fr}.moxtonQuote{grid-template-columns:1fr;gap:16px}.quoteMark{width:58px;height:58px;border-radius:17px;font-size:48px}.moxtonQuote blockquote{font-size:24px}.footer .panelwiseBrandMark{width:60px;height:60px}.footer .panelwiseBrandText{width:255px;min-width:255px;padding-left:12px}.footer .panelwiseWord{font-size:31px}.footer .panelwiseDescriptor,.footer .panelwiseDescriptorSvg{height:11px}.companyStoryCard{padding:24px;min-height:300px}.companyStoryCard h3{font-size:27px}.faqItem summary{padding:16px;font-size:12px}.faqItem p{padding:0 16px 17px}.phoneHead .panelwiseBrandText{width:142px!important;min-width:142px!important}.phoneHead .panelwiseWord{font-size:14px!important}
}
@media(max-width:390px){.nav .panelwiseBrandText{width:164px!important;min-width:164px!important;padding-left:8px!important}.nav .panelwiseWord{font-size:19px!important}.nav .panelwiseBrandMark{width:46px!important;height:46px!important}.nav .panelwiseDescriptor,.nav .panelwiseDescriptorSvg{height:7px!important}.footer .panelwiseBrandText{width:225px;min-width:225px}.footer .panelwiseWord{font-size:27px}.phoneHead .panelwiseBrandText{width:132px!important;min-width:132px!important}.phoneHead .panelwiseWord{font-size:13px!important}}

/* Rotated iPhone/Android: keep the established compact tablet layout and make the wider brand/navigation fit. */
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){
  .nav .panelwiseBrandMark{width:40px!important;height:40px!important}.nav .panelwiseBrand{gap:7px!important}.nav .panelwiseBrandText{width:156px!important;min-width:156px!important;padding-left:7px!important;row-gap:2px!important}.nav .panelwiseWord{font-size:18px!important}.nav .panelwiseDescriptor,.nav .panelwiseDescriptorSvg{height:6px!important}.nav .navLinks{gap:7px!important}.nav .navLinks>a{font-size:8.5px!important;padding:6px 2px!important}.nav .navCta{font-size:8.5px!important;padding:8px 9px!important}.matSection,.esgSection,.quoteSection,.faqSection{padding:54px 0!important}.matSteps{grid-template-columns:repeat(4,1fr)!important}.matStep{min-height:170px!important;padding:16px!important}.matStep h3{font-size:17px;margin-top:22px}.matStep p{font-size:10px}.matAlignment{grid-template-columns:auto repeat(3,1fr)!important}.matAlignment>span{grid-column:auto;writing-mode:vertical-rl;transform:rotate(180deg)}.esgGrid{grid-template-columns:1.15fr .85fr .85fr!important}.esgCardLead{grid-column:auto!important}.esgCard{min-height:220px!important;padding:18px!important}.esgCard h3{font-size:19px}.esgCard p{font-size:10px}.moxtonQuote{grid-template-columns:70px 1fr!important}.moxtonQuote blockquote{font-size:25px!important}.faqGrid{grid-template-columns:1fr 1fr!important}.singleFounder{grid-template-columns:1.05fr .95fr!important}
}
@media(prefers-reduced-motion:reduce){.loaderBrandMark{animation:none!important}}

/* Fixed floating navigation should never obscure anchored section headings. */
section[id],header[id]{scroll-margin-top:112px}
@media(max-width:600px){section[id],header[id]{scroll-margin-top:104px}}
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){section[id],header[id]{scroll-margin-top:92px}}


/* ===== READABILITY + JOURNEY CLARITY PASS — 2026-08-18 ===== */
/* The large planning card should never collide with its supporting metric. */
.featureBig{display:flex;flex-direction:column;min-height:560px}
.featureBig .metric{position:static!important;left:auto!important;right:auto!important;bottom:auto!important;margin-top:auto;padding-top:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px;width:100%}
.featureBig .metric strong{font-size:clamp(42px,5.2vw,64px);line-height:.88;max-width:100%;overflow-wrap:anywhere}
.featureBig .metric span{text-align:right;max-width:150px;line-height:1.35}

/* MAT planning is a pre-service planning journey, visually related to the support workflow but clearly separate. */
.matSection{background:linear-gradient(180deg,#f7faf7 0%,#edf4f1 100%)}
.matSteps{position:relative;gap:14px}
.matSteps::before{content:"";position:absolute;left:5%;right:5%;top:54px;height:1px;background:linear-gradient(90deg,rgba(34,211,226,.12),rgba(34,211,226,.48),rgba(210,169,79,.35),rgba(34,211,226,.12));z-index:0}
.matStep{z-index:1;min-height:235px;padding:22px 21px 24px;background:linear-gradient(155deg,#fff 0%,#f8fbf8 100%);border-color:rgba(9,58,62,.10);box-shadow:0 18px 50px rgba(7,30,34,.055)}
.matStep>span{display:block;font:800 54px/.82 'Manrope';letter-spacing:-.065em;background:linear-gradient(145deg,#0f595d 0%,#29b8b9 48%,#d2a94f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.22}
.matStep>svg{right:18px;top:18px;width:42px;height:42px;padding:10px;border-radius:13px;background:rgba(34,211,226,.07);border:1px solid rgba(34,211,226,.15);color:#2aa9a8;animation:matIconPulse 3.8s ease-in-out infinite}
.matStep:nth-child(2)>svg{animation-delay:.35s}.matStep:nth-child(3)>svg{animation-delay:.7s}.matStep:nth-child(4)>svg{animation-delay:1.05s}
@keyframes matIconPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,211,226,.05);transform:translateY(0)}50%{box-shadow:0 0 0 8px rgba(34,211,226,0);transform:translateY(-1px)}}
.matStep h3{margin:38px 0 8px;font-size:20px}.matStep p{font-size:11.5px;line-height:1.58}

/* Moxton proof should read as independent validation rather than disappear into a pale section. */
.quoteSection{padding:94px 0;background:linear-gradient(135deg,#07191e 0%,#092d33 58%,#0b363c 100%);border-top:1px solid rgba(34,211,226,.11);border-bottom:1px solid rgba(34,211,226,.10);color:#fff}
.moxtonQuote{max-width:1080px;padding:36px 38px;border-radius:30px;background:rgba(255,255,255,.035);border:1px solid rgba(145,232,197,.11);box-shadow:0 28px 80px rgba(0,0,0,.18)}
.quoteMark{background:linear-gradient(145deg,rgba(34,211,226,.13),rgba(210,169,79,.08));border:1px solid rgba(145,232,197,.15);color:#8de7d2;box-shadow:none}
.quoteBody h2{font:650 clamp(24px,3vw,38px)/1.05 'Manrope';letter-spacing:-.035em;margin:8px 0 18px;color:#fff}
.moxtonQuote blockquote{font:450 clamp(18px,2.1vw,26px)/1.48 'Manrope';letter-spacing:-.018em;margin:0 0 20px;color:#dce9e7}
.moxtonQuote cite{color:#8fb5b0;font-size:10.5px}

@media(max-width:900px){
  .matSteps::before{display:none}
}
@media(max-width:600px){
  .featureBig{min-height:auto!important}
  .featureBig .cardIcon{margin-bottom:28px}
  .featureBig h3{font-size:38px!important;line-height:1.02;margin-top:14px}
  .featureBig p{font-size:14px;line-height:1.55;margin-bottom:0}
  .featureBig .metric{margin-top:34px!important;padding-top:20px;grid-template-columns:1fr;gap:7px}
  .featureBig .metric strong{font-size:42px!important;line-height:.9}
  .featureBig .metric span{text-align:left;max-width:none;font-size:11px}
  .matStep{min-height:190px!important;padding:20px!important}
  .matStep>span{font-size:50px}.matStep>svg{width:40px;height:40px;padding:9px}.matStep h3{margin-top:26px;font-size:20px}
  .moxtonQuote{padding:24px 21px;border-radius:24px}.quoteBody h2{font-size:29px}.moxtonQuote blockquote{font-size:17px!important;line-height:1.55}
}
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){
  .featureBig{min-height:430px}.featureBig .metric strong{font-size:44px}
  .matStep{min-height:185px!important}.matStep>span{font-size:42px}.matStep>svg{width:38px;height:38px;padding:9px}.matStep h3{margin-top:20px!important}
  .moxtonQuote{padding:26px 28px}.moxtonQuote blockquote{font-size:19px!important}.quoteBody h2{font-size:28px}
}
@media(prefers-reduced-motion:reduce){.matStep>svg{animation:none!important}}


/* ===== WEIGHTED PANELWISE LOCKUP + MAT JOURNEY FINAL PASS — 2026-08-18 ===== */
/* PanelWise and the descriptor now share the exact same visual measure. */
.panelwiseWord{display:none!important}
.panelwiseWordSvg{display:block;width:100%;height:31px;overflow:visible}
.panelwiseWordSvg text{font-family:'Manrope',sans-serif;font-weight:800;font-size:112px;letter-spacing:-4px}
.panelwiseWordSvg .panelSvgPart{fill:#09232d}
.panelwiseWordSvg .wiseSvgPart{fill:#22cbd7}
.nav .panelwiseWordSvg .panelSvgPart,.footer .panelwiseWordSvg .panelSvgPart,.brandLight .panelwiseWordSvg .panelSvgPart{fill:#fff}
.nav .panelwiseWordSvg .wiseSvgPart,.footer .panelwiseWordSvg .wiseSvgPart,.brandLight .panelwiseWordSvg .wiseSvgPart{fill:#39d4d8}
.nav .panelwiseWordSvg{height:29px}
.footer .panelwiseWordSvg{height:39px}
.phoneHead .panelwiseWordSvg{height:15px!important}
.portalDemoBar .panelwiseWordSvg{height:17px!important}

/* The MAT section is the pre-service planning journey. Give it the same premium language as fault-to-fix, with a distinct strategic treatment. */
.matSteps{gap:14px}
.matStep{min-height:242px!important;padding:22px 21px 24px!important;background:linear-gradient(145deg,#08272d 0%,#0b353a 58%,#09282d 100%)!important;border:1px solid rgba(91,220,214,.16)!important;box-shadow:0 22px 58px rgba(7,30,34,.12)!important;color:#fff;overflow:hidden}
.matStep::after{content:"";position:absolute;inset:auto -25% -30% 18%;height:150px;border:1px solid rgba(34,211,226,.11);border-radius:50%;transform:rotate(-10deg);pointer-events:none}
.matStep>span{position:relative;z-index:2;font:800 68px/.78 'Manrope'!important;letter-spacing:-.07em!important;background:linear-gradient(145deg,#91e8c5 0%,#22d3e2 56%,#d2a94f 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;opacity:.36!important}
.matStep>svg{z-index:3;right:18px!important;top:18px!important;width:44px!important;height:44px!important;padding:10px!important;border-radius:14px!important;background:rgba(145,232,197,.08)!important;border:1px solid rgba(145,232,197,.18)!important;color:#80e2cf!important;box-shadow:0 0 0 0 rgba(34,211,226,0);animation:matIconPulse 3.8s ease-in-out infinite!important}
.matStep h3{position:relative;z-index:2;margin:34px 0 8px!important;font:700 21px/1.08 'Manrope'!important;letter-spacing:-.025em;color:#fff}
.matStep p{position:relative;z-index:2;margin:0;color:#a9bfbd!important;font-size:11.5px!important;line-height:1.6!important;max-width:310px}
.matSteps::before{top:58px!important;background:linear-gradient(90deg,rgba(34,211,226,.10),rgba(34,211,226,.42),rgba(210,169,79,.34),rgba(34,211,226,.10))!important}
.matCallout{margin-top:18px!important}

@media(max-width:900px){
  .nav .panelwiseWordSvg{height:27px}
  .matSteps::before{display:none!important}
}
@media(max-width:600px){
  .nav .panelwiseWordSvg{height:24px!important}
  .footer .panelwiseWordSvg{height:32px!important}
  .matSteps{gap:12px!important}
  .matStep{min-height:210px!important;padding:20px!important}
  .matStep>span{font-size:62px!important}
  .matStep>svg{width:42px!important;height:42px!important;padding:9px!important}
  .matStep h3{margin-top:28px!important;font-size:22px!important}
  .matStep p{font-size:12px!important;line-height:1.6!important;max-width:none}
}
@media(max-width:390px){
  .nav .panelwiseWordSvg{height:22px!important}
  .footer .panelwiseWordSvg{height:29px!important}
}
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){
  .nav .panelwiseWordSvg{height:20px!important}
  .matStep{min-height:185px!important;padding:16px!important}
  .matStep>span{font-size:46px!important}
  .matStep>svg{width:38px!important;height:38px!important;padding:8px!important}
  .matStep h3{margin-top:18px!important;font-size:17px!important}
  .matStep p{font-size:9.8px!important}
}


/* Canonical PanelWise lockup: single source of truth for site + brand pack */
.panelwiseBrandImage{display:block!important;min-width:0!important;text-decoration:none!important;border:0!important;line-height:0!important}
.panelwiseBrandImage .panelwiseLockupImage{display:block!important;width:100%!important;height:auto!important;max-width:none!important;object-fit:contain!important}
.nav .panelwiseBrandImage{width:300px!important;flex:0 0 300px!important}
.footer .panelwiseBrandImage{width:390px!important;max-width:min(390px,92vw)!important}
.phoneHead .panelwiseBrandImage{width:198px!important;max-width:calc(100% - 39px)!important;flex:0 1 198px!important;overflow:hidden!important}
.portalDemoBar .panelwiseBrandImage{width:215px!important;max-width:64%!important}
.loaderLogo{width:min(560px,82vw)!important;height:auto!important;display:block!important}
.loaderPanelWiseLockup{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 34px rgba(34,211,226,.18));animation:pwLoaderFloat 2.6s ease-in-out infinite}
@keyframes pwLoaderFloat{0%,100%{transform:translateY(0);opacity:.96}50%{transform:translateY(-4px);opacity:1}}
.panelwiseBrandImage .panelwiseBrandMark,.panelwiseBrandImage .panelwiseBrandText,.panelwiseBrandImage .panelwiseWordSvg,.panelwiseBrandImage .panelwiseDescriptor{display:none!important}
.footerServiceNote{display:flex!important;flex-wrap:wrap!important;gap:8px 16px!important;align-items:center!important}
.footerDomain{color:#5dded7!important;text-decoration:none!important;font-weight:800!important;letter-spacing:.03em!important}
.footerDomain:hover{text-decoration:underline!important}
@media(max-width:1100px) and (min-width:901px){.nav .panelwiseBrandImage{width:258px!important;flex-basis:258px!important}}
@media(max-width:900px){.nav .panelwiseBrandImage{width:286px!important;flex-basis:286px!important}}
@media(max-width:600px){
  .nav .panelwiseBrandImage{width:272px!important;flex:0 1 272px!important;max-width:calc(100% - 54px)!important}
  .footer .panelwiseBrandImage{width:350px!important;max-width:100%!important}
  .phoneHead .panelwiseBrandImage{width:184px!important;flex-basis:184px!important}
  .portalDemoBar .panelwiseBrandImage{width:190px!important}
  .footerServiceNote{align-items:flex-start!important;flex-direction:column!important}
}
@media(max-width:390px){
  .nav .panelwiseBrandImage{width:246px!important;flex-basis:246px!important}
  .footer .panelwiseBrandImage{width:310px!important}
  .phoneHead .panelwiseBrandImage{width:168px!important;flex-basis:168px!important}
}
@media(max-width:350px){.nav .panelwiseBrandImage{width:224px!important;flex-basis:224px!important}}
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){
  .nav .panelwiseBrandImage{width:225px!important;flex-basis:225px!important}
  .footer .panelwiseBrandImage{width:320px!important}
}


/* ===== CANONICAL PANELWISE LOCKUP PROPORTION FIX - 2026-08-18 =====
   Use the weekend brand mock proportions without stretching the artwork. */
.panelwiseBrandImage{display:flex!important;align-items:center!important;min-width:0!important;line-height:0!important;overflow:visible!important}
.panelwiseBrandImage .panelwiseLockupImage{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;object-fit:contain!important;object-position:left center!important;aspect-ratio:1925 / 430!important}
.nav .panelwiseBrandImage{width:285px!important;flex:0 0 285px!important}
.footer .panelwiseBrandImage{width:355px!important;max-width:min(355px,100%)!important}
.phoneHead .panelwiseBrandImage{width:178px!important;max-width:calc(100% - 42px)!important;flex:0 1 178px!important}
.portalDemoBar .panelwiseBrandImage{width:195px!important;max-width:60%!important}
.loaderLogo{width:min(520px,82vw)!important;height:auto!important;display:block!important}
.loaderPanelWiseLockup{display:block!important;width:100%!important;height:auto!important;aspect-ratio:1925 / 430!important;object-fit:contain!important;filter:drop-shadow(0 14px 34px rgba(34,211,226,.16));animation:pwLoaderFloat 2.6s ease-in-out infinite}
@media(max-width:1100px) and (min-width:901px){.nav .panelwiseBrandImage{width:255px!important;flex-basis:255px!important}}
@media(max-width:900px){.nav .panelwiseBrandImage{width:250px!important;flex-basis:250px!important}}
@media(max-width:600px){
  .nav .panelwiseBrandImage{width:230px!important;flex:0 1 230px!important;max-width:calc(100% - 58px)!important}
  .footer .panelwiseBrandImage{width:300px!important;max-width:100%!important}
  .phoneHead .panelwiseBrandImage{width:164px!important;flex-basis:164px!important}
  .portalDemoBar .panelwiseBrandImage{width:174px!important}
  .loaderLogo{width:min(470px,84vw)!important}
}
@media(max-width:390px){
  .nav .panelwiseBrandImage{width:216px!important;flex-basis:216px!important}
  .footer .panelwiseBrandImage{width:282px!important}
  .phoneHead .panelwiseBrandImage{width:152px!important;flex-basis:152px!important}
}
@media(max-width:350px){.nav .panelwiseBrandImage{width:200px!important;flex-basis:200px!important}}
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){
  .nav .panelwiseBrandImage{width:215px!important;flex-basis:215px!important}
  .footer .panelwiseBrandImage{width:300px!important}
}

/* Final calibrated dimensions for corrected 1396x300 lockup */
.panelwiseBrandImage .panelwiseLockupImage,.loaderPanelWiseLockup{aspect-ratio:1396 / 300!important}
.nav .panelwiseBrandImage{width:238px!important;flex-basis:238px!important}
.footer .panelwiseBrandImage{width:320px!important;max-width:100%!important}
.loaderLogo{width:min(470px,80vw)!important}
@media(max-width:1100px) and (min-width:901px){.nav .panelwiseBrandImage{width:230px!important;flex-basis:230px!important}}
@media(max-width:900px){.nav .panelwiseBrandImage{width:232px!important;flex-basis:232px!important}}
@media(max-width:600px){
  .nav .panelwiseBrandImage{width:222px!important;flex:0 1 222px!important;max-width:calc(100% - 58px)!important}
  .footer .panelwiseBrandImage{width:292px!important}
  .loaderLogo{width:min(440px,82vw)!important}
}
@media(max-width:390px){.nav .panelwiseBrandImage{width:210px!important;flex-basis:210px!important}.footer .panelwiseBrandImage{width:276px!important}}
@media(max-width:350px){.nav .panelwiseBrandImage{width:194px!important;flex-basis:194px!important}}
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){.nav .panelwiseBrandImage{width:205px!important;flex-basis:205px!important}.footer .panelwiseBrandImage{width:285px!important}}

/* ===== 2026-08-18 WORKSHOP + ACCESSIBILITY + MOBILE MENU PASS ===== */
.skipLink{position:fixed;left:16px;top:10px;z-index:9999;transform:translateY(-160%);background:#fff;color:#07181b;padding:12px 16px;border-radius:12px;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.18);transition:transform .18s ease}.skipLink:focus{transform:translateY(0)}
:where(a,button,input,textarea,summary):focus-visible{outline:3px solid #22d3e2!important;outline-offset:3px!important}
main section[id]{scroll-margin-top:110px}
.menuBtn,.modalClose,.backTop{min-width:44px;min-height:44px}
.fieldLabel{display:flex;flex-direction:column;gap:7px;color:#40585a;font-size:11px;font-weight:800}.fieldLabel>span{padding-left:2px}.fieldLabel input,.fieldLabel textarea{width:100%}.fieldLabelFull{margin-top:10px}.fieldLabelFull textarea{min-height:120px;resize:vertical}

/* Extend vs Replace workshop: visually distinct from the live fault-to-fix journey. */
.workshopIntro{display:grid;grid-template-columns:1.35fr .65fr;gap:14px;margin:-10px 0 18px}.workshopLead,.workshopOutcome{border-radius:24px;position:relative;overflow:hidden}.workshopLead{padding:30px;background:linear-gradient(145deg,#fff,#eef7f2);border:1px solid rgba(8,34,38,.08);box-shadow:0 18px 48px rgba(7,30,34,.05)}.workshopLead::after{content:"";position:absolute;width:360px;height:180px;right:-120px;bottom:-90px;border:1px solid rgba(34,211,226,.13);border-radius:50%;transform:rotate(-12deg)}.workshopLead>span{font:800 9px/1 'Manrope';letter-spacing:.16em;color:#2f7975}.workshopLead h3{font:700 clamp(27px,3.3vw,43px)/1.03 'Manrope';letter-spacing:-.04em;margin:12px 0 12px;max-width:690px}.workshopLead p{margin:0;color:#677a7a;line-height:1.65;font-size:13px;max-width:760px}.workshopOutcome{padding:26px;background:linear-gradient(145deg,#071d25,#0b3036);border:1px solid rgba(34,211,226,.16);color:white;display:flex;align-items:flex-start;gap:14px}.workshopOutcome>svg{width:48px;height:48px;padding:11px;border-radius:15px;flex:0 0 auto;color:#8ce8d6;background:rgba(145,232,197,.08);border:1px solid rgba(145,232,197,.15)}.workshopOutcome div{display:flex;flex-direction:column;gap:8px}.workshopOutcome b{font:700 17px/1.2 'Manrope'}.workshopOutcome span{font-size:11px;line-height:1.6;color:#a8bfbd}.workshopCallout{background:linear-gradient(135deg,#071d25,#0b343a)!important}.workshopSteps .matStep{min-height:252px!important}.workshopSteps .matStep h3{max-width:190px}.workshopSteps .matStep p{max-width:250px}

/* Accessibility statement: discreet in the footer, substantial when opened. */
.footerAccessibilityLink,.accessibilityStatus{appearance:none;border:0;background:transparent;cursor:pointer}.footerAccessibilityLink{color:#8ca19f!important;font-size:12px!important;text-align:left!important;padding:0!important}.footerAccessibilityLink:hover,.footerAccessibilityLink:focus-visible{color:#d9fff0!important}.accessibilityStatus{color:#9bded7!important;font-size:9px!important;line-height:1.3!important;font-weight:800!important;letter-spacing:.04em!important;text-transform:uppercase!important;padding:0!important}.accessibilityStatus:hover{text-decoration:underline}.accessibilityModal{max-width:720px!important}.accessibilityModal h3{max-width:620px}.accessibilityGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}.accessibilityGrid>div{display:flex;flex-direction:column;gap:7px;padding:17px;border-radius:16px;background:#f2f7f4;border:1px solid rgba(8,34,38,.08)}.accessibilityGrid b{font:700 12px 'Manrope'}.accessibilityGrid span{font-size:11px;line-height:1.55;color:#586a6a}.accessibilityHelp{padding:14px 16px;border-left:3px solid #22d3e2;background:rgba(34,211,226,.05);border-radius:0 12px 12px 0;font-size:12px!important;line-height:1.6!important}

/* Mobile menu refinement: larger, denser, clearer and easier to tap. */
@media(max-width:900px){
  .navLinks{top:90px!important;width:calc(100% - 8px)!important;padding:12px!important;gap:2px!important;border-radius:22px!important;max-height:calc(100svh - 118px)!important;overflow-y:auto!important;overscroll-behavior:contain!important}
  .navLinks>a{display:flex!important;align-items:center!important;min-height:50px!important;padding:13px 15px!important;font-size:16px!important;line-height:1.2!important;font-weight:700!important;border-radius:13px!important;color:#e8f2f0!important;border-bottom:1px solid rgba(255,255,255,.055)!important}
  .navLinks>a:last-of-type{border-bottom:0!important}
  .navLinks>a:hover,.navLinks>a:focus-visible{background:rgba(145,232,197,.08)!important;color:#fff!important}
  .navLinks .navCta{margin:8px 2px 2px!important;min-height:52px!important;justify-content:center!important;padding:14px 18px!important;font-size:16px!important;border-radius:14px!important}
  .menuBtn{width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important}
  .workshopIntro{grid-template-columns:1fr!important}
  .workshopOutcome{min-height:150px}
}
@media(max-width:600px){
  .navLinks{top:90px!important}
  .navLinks>a{font-size:17px!important;min-height:52px!important;padding:14px 16px!important}
  .navLinks .navCta{font-size:17px!important;min-height:54px!important}
  .workshopLead{padding:24px}.workshopLead p{font-size:13px}.workshopOutcome{padding:22px}.workshopSteps .matStep{min-height:218px!important}.accessibilityGrid{grid-template-columns:1fr}
  .footerServiceNote{gap:10px!important}
}

/* Keep landscape phone behaving like compact tablet, but preserve comfortable target sizes. */
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){
  .nav .navLinks>a{font-size:10px!important;min-height:40px!important;padding:8px 3px!important}.nav .navCta{font-size:10px!important;min-height:40px!important;padding:9px 10px!important}.workshopIntro{grid-template-columns:1.25fr .75fr!important}.workshopLead{padding:22px!important}.workshopLead h3{font-size:28px!important}.workshopLead p{font-size:10px!important}.workshopOutcome{padding:18px!important;min-height:auto!important}.workshopOutcome b{font-size:13px!important}.workshopOutcome span{font-size:9px!important}.workshopSteps .matStep{min-height:190px!important}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.loaderPanelWiseLockup{animation:none!important}.estateHealthIcon::after{display:none!important}}


/* FINAL PUBLIC POLISH: readable mobile menu + optional portal service note. */
.portalDecisionNote{display:flex;gap:12px;align-items:flex-start;max-width:610px;margin:4px 0 24px;padding:15px 16px;border:1px solid rgba(145,232,197,.16);border-radius:15px;background:rgba(145,232,197,.065);color:#d7e7e4}.portalDecisionNote>svg{flex:0 0 auto;color:var(--mint);margin-top:2px}.portalDecisionNote>div{display:flex;flex-direction:column;gap:5px}.portalDecisionNote b{font:700 12px/1.3 'Manrope'}.portalDecisionNote span{font-size:11px;line-height:1.6;color:#aac0bd}
@media(max-width:900px){
  .navLinks{top:88px!important;padding:16px 14px!important;gap:4px!important;border-radius:24px!important;background:linear-gradient(180deg,#071f27,#082a31)!important;border:1px solid rgba(145,232,197,.13)!important;box-shadow:0 24px 70px rgba(0,0,0,.34)!important}
  .navLinks>a{min-height:56px!important;padding:16px 18px!important;font-size:19px!important;line-height:1.15!important;font-weight:700!important;letter-spacing:-.01em!important;border-radius:14px!important;color:#eef7f5!important}
  .navLinks .navCta{min-height:58px!important;margin-top:9px!important;font-size:18px!important;font-weight:800!important}
}
@media(max-width:600px){
  .navLinks{top:84px!important;width:calc(100% - 12px)!important;max-height:calc(100svh - 106px)!important;padding:15px 13px!important}
  .navLinks>a{font-size:19px!important;min-height:56px!important;padding:16px 17px!important}
  .navLinks .navCta{font-size:18px!important;min-height:58px!important}
  .portalDecisionNote{margin:4px 0 22px;padding:14px}.portalDecisionNote span{font-size:11px}
}
@media(max-width:390px){.navLinks>a{font-size:18px!important;min-height:54px!important;padding:15px 16px!important}.navLinks .navCta{font-size:17px!important;min-height:56px!important}}


/* ===== 2026-08-18 FINAL MOBILE SAFARI CUE + RHYTHM PASS =====
   Keep the existing pulsing scroll cue but place it below the proof row,
   and trim only excess mobile vertical whitespace without changing anchors. */
@media (orientation:portrait) and (max-width:600px){
  .heroContent{padding-bottom:88px!important}
  .mobileScrollCue{
    bottom:7px!important;
    width:52px!important;
    height:52px!important;
    z-index:8!important;
  }

  /* Slightly tighter vertical rhythm between full-width content sections. */
  .section{padding-top:64px!important;padding-bottom:64px!important}
  .darkSection{padding-top:68px!important;padding-bottom:68px!important}
  .matSection,.esgSection,.quoteSection,.faqSection{padding-top:64px!important;padding-bottom:64px!important}
  .portalInner{padding-top:62px!important;padding-bottom:50px!important}
  .ctaBand{padding-top:58px!important;padding-bottom:58px!important}
  .footer{padding-top:44px!important}
}
@media (orientation:portrait) and (max-width:390px){
  .heroContent{padding-bottom:84px!important}
  .mobileScrollCue{bottom:6px!important;width:50px!important;height:50px!important}
  .section,.matSection,.esgSection,.quoteSection,.faqSection{padding-top:60px!important;padding-bottom:60px!important}
  .darkSection{padding-top:64px!important;padding-bottom:64px!important}
  .portalInner{padding-top:58px!important;padding-bottom:48px!important}
}


/* ===== PW4E BRAND LOCKUP FINAL REBRAND — 2026-08-19 ===== */
.panelwiseBrandImage .panelwiseLockupImage{aspect-ratio:auto!important;object-fit:contain!important;object-position:left center!important}
.nav .panelwiseBrandImage{width:250px!important;flex:0 0 250px!important}
.footer .panelwiseBrandImage{width:330px!important;max-width:min(330px,100%)!important}
.phoneHead .panelwiseBrandImage{width:168px!important;flex-basis:168px!important}
.portalDemoBar .panelwiseBrandImage{width:190px!important}
.loaderPanelWiseLockup{aspect-ratio:auto!important;object-fit:contain!important;max-height:250px!important}
@media(max-width:900px){.nav .panelwiseBrandImage{width:238px!important;flex-basis:238px!important}}
@media(max-width:560px){.nav .panelwiseBrandImage{width:225px!important;flex:0 1 225px!important;max-width:calc(100% - 58px)!important}.footer .panelwiseBrandImage{width:300px!important}.phoneHead .panelwiseBrandImage{width:152px!important;flex-basis:152px!important}}
@media(max-width:390px){.nav .panelwiseBrandImage{width:210px!important;flex-basis:210px!important}.footer .panelwiseBrandImage{width:280px!important}}


/* ===== PW4E TRANSPARENT LOCKUP FINAL PASS — 2026-08-19 =====
   The approved PW4E lockup is a true transparent PNG. Never place or stretch it as a rectangular artwork block. */
.panelwiseBrandImage{background:transparent!important;border:0!important;box-shadow:none!important}
.panelwiseBrandImage .panelwiseLockupImage{display:block!important;background:transparent!important;width:100%!important;height:auto!important;object-fit:contain!important;object-position:left center!important;filter:drop-shadow(0 6px 14px rgba(34,211,226,.10))!important}
.nav .panelwiseBrandImage{width:250px!important;flex:0 0 250px!important}
.footer .panelwiseBrandImage{width:330px!important;max-width:min(330px,100%)!important}
.loaderLogo{width:min(520px,82vw)!important;background:transparent!important}
.loaderPanelWiseLockup{display:block!important;width:100%!important;height:auto!important;background:transparent!important;object-fit:contain!important;filter:drop-shadow(0 14px 34px rgba(34,211,226,.16))!important}
@media(max-width:900px){.nav .panelwiseBrandImage{width:238px!important;flex-basis:238px!important}}
@media(max-width:560px){.nav .panelwiseBrandImage{width:225px!important;flex:0 1 225px!important;max-width:calc(100% - 58px)!important}.footer .panelwiseBrandImage{width:300px!important}}
@media(max-width:390px){.nav .panelwiseBrandImage{width:210px!important;flex-basis:210px!important}.footer .panelwiseBrandImage{width:280px!important}}

/* FAQ category and policy refinement */
.faqCategories{display:grid;gap:28px}.faqCategory h3{font:700 15px 'Manrope',sans-serif;color:#163033;margin:0 0 11px}.faqCategory .faqGrid{align-items:start}.policyModal{max-width:780px!important;max-height:min(86vh,820px);overflow:auto}.policyBody{display:grid;gap:8px;margin-top:18px}.policyBody h4{margin:13px 0 0;font:700 13px 'Manrope',sans-serif;color:#102a2d}.policyBody p{margin:0;color:#627574;font-size:12px;line-height:1.65}.footerCols button.footerAccessibilityLink{display:block;margin-top:0}.footerCols>div{align-content:start}
@media(max-width:600px){.faqCategories{gap:22px}.faqCategory h3{font-size:14px}.policyModal{max-height:88vh}.policyBody p{font-size:11.5px}.policyBody h4{font-size:12.5px}}

/* 27 Aug 2026 · Ali annotated scan refinement pass */
.whyHead{max-width:900px}.whyHead h2{max-width:860px}
.heroRecommendation{margin-top:17px;display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(145,232,197,.24);background:rgba(5,31,35,.58);color:#eefaf6;border-radius:14px;padding:10px 13px;backdrop-filter:blur(12px);cursor:pointer;text-align:left;transition:transform .2s ease,background .2s ease,border-color .2s ease}
.heroRecommendation:hover{transform:translateY(-2px);background:rgba(11,55,60,.72);border-color:rgba(145,232,197,.42)}
.heroRecommendation>span{display:flex;flex-direction:column;line-height:1.15}.heroRecommendation b{font:700 11px 'Manrope';letter-spacing:.01em}.heroRecommendation small{font-size:9px;color:#9fc3be;margin-top:3px}.heroRecommendation>svg:first-child{color:var(--mint)}.heroRecommendation>svg:last-child{opacity:.72;margin-left:2px}
.impactExample{margin-top:26px;padding:26px;border-radius:24px;background:linear-gradient(135deg,rgba(4,25,29,.98),rgba(10,55,60,.96));color:white;display:grid;grid-template-columns:minmax(250px,.85fr) 1.15fr;gap:26px;align-items:center;border:1px solid rgba(145,232,197,.12);box-shadow:0 18px 54px rgba(4,26,30,.12)}
.impactExampleHead h3{font:650 27px/1.08 'Manrope';letter-spacing:-.035em;margin:8px 0 10px}.impactExampleHead p{font-size:12px;line-height:1.6;color:#a9c3bf;margin:0}.impactStats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.impactStats>div{padding:15px 12px;border-radius:17px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;min-height:94px;justify-content:flex-end}.impactStats strong{font:700 24px 'Manrope';color:#fff}.impactStats span{font-size:9px;line-height:1.35;color:#9eb8b4;margin-top:6px}.impactDisclaimer{grid-column:1/-1;color:#708f8a;font-size:9px}
.founderStatement{margin-top:14px!important;padding-top:14px;border-top:1px solid rgba(55,122,112,.13);font-style:italic;color:#345d58!important}
.moxtonModal{background:linear-gradient(145deg,#071b20,#0a3338);color:#fff;border:1px solid rgba(145,232,197,.13);box-shadow:0 38px 130px rgba(0,0,0,.42)}.moxtonModal h3{color:#fff}.moxtonModal blockquote{margin:18px 0 20px;font:500 18px/1.6 'Manrope';letter-spacing:-.012em;color:#d8e8e5}.moxtonModal cite{display:block;font-style:normal;color:#8fb5b0;font-size:10px;font-weight:700;letter-spacing:.04em}.moxtonModal .modalClose{background:rgba(255,255,255,.1)}.moxtonModal .modalClose::before{color:#91e8c5}
@media(max-width:900px){.impactExample{grid-template-columns:1fr}.impactStats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.heroRecommendation{margin-top:12px;padding:9px 10px;max-width:92%}.heroRecommendation b{font-size:10px}.heroRecommendation small{font-size:8px}.impactExample{padding:20px;border-radius:20px}.impactExampleHead h3{font-size:25px}.impactStats{grid-template-columns:1fr 1fr}.impactStats strong{font-size:22px}.moxtonModal blockquote{font-size:15px;line-height:1.55}}


/* ===== 27 Aug 2026 · FINAL POLISH / MOTION PASS ===== */
/* One-time premium reveal. Elements stay visible after their first viewport entry. */
.revealItem{opacity:0;transform:translate3d(0,18px,0) scale(.988);filter:blur(2px);transition:opacity .5s cubic-bezier(.22,.8,.26,1) var(--reveal-delay,0ms),transform .58s cubic-bezier(.22,.8,.26,1) var(--reveal-delay,0ms),filter .45s ease var(--reveal-delay,0ms);will-change:opacity,transform,filter}
.revealItem.isVisible{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
.sectionHead.revealItem{transform:translate3d(0,12px,0)}
.sectionHead.revealItem.isVisible{transform:none}

/* Moxton is a deliberate proof point: prominent, centred on compact screens and clear of the scroll cue. */
.heroRecommendation{position:relative;isolation:isolate;box-shadow:0 12px 34px rgba(0,0,0,.12),0 0 0 0 rgba(145,232,197,0);animation:moxtonSpotlight 2.7s ease-in-out infinite}
.heroRecommendation::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(145,232,197,.22);pointer-events:none;animation:moxtonRing 2.7s ease-out infinite}
@keyframes moxtonSpotlight{0%,100%{border-color:rgba(145,232,197,.25);box-shadow:0 12px 34px rgba(0,0,0,.12),0 0 0 0 rgba(145,232,197,0)}50%{border-color:rgba(145,232,197,.58);box-shadow:0 14px 38px rgba(0,0,0,.16),0 0 0 6px rgba(145,232,197,.075)}}
@keyframes moxtonRing{0%,42%{transform:scale(1);opacity:.56}82%,100%{transform:scale(1.035);opacity:0}}

/* Range controls: make the draggable handles unmistakable without turning them into a gimmick. */
.planningCalc input[type="range"],.lifeCalc input[type="range"]{appearance:none;-webkit-appearance:none;height:26px;background:transparent;cursor:pointer;touch-action:pan-y}
.planningCalc input[type="range"]::-webkit-slider-runnable-track,.lifeCalc input[type="range"]::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:linear-gradient(90deg,rgba(39,181,177,.72),rgba(145,232,197,.88));box-shadow:inset 0 0 0 1px rgba(8,34,38,.08)}
.planningCalc input[type="range"]::-webkit-slider-thumb,.lifeCalc input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8.5px;border-radius:50%;border:3px solid #fff;background:#23c9c8;box-shadow:0 0 0 0 rgba(35,201,200,.42),0 5px 14px rgba(4,37,42,.22);animation:rangeThumbPing 1.9s ease-out infinite}
.planningCalc input[type="range"]::-moz-range-track,.lifeCalc input[type="range"]::-moz-range-track{height:5px;border-radius:999px;background:linear-gradient(90deg,rgba(39,181,177,.72),rgba(145,232,197,.88))}
.planningCalc input[type="range"]::-moz-range-thumb,.lifeCalc input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:3px solid #fff;background:#23c9c8;box-shadow:0 0 0 0 rgba(35,201,200,.42),0 5px 14px rgba(4,37,42,.22);animation:rangeThumbPing 1.9s ease-out infinite}
@keyframes rangeThumbPing{0%,35%,100%{box-shadow:0 0 0 0 rgba(35,201,200,.34),0 5px 14px rgba(4,37,42,.22)}68%{box-shadow:0 0 0 9px rgba(35,201,200,0),0 7px 18px rgba(4,37,42,.26)}}

/* Lifecycle / ESG movement: restrained icon breathing and a soft sequential loop through the circularity tiles. */
.lifeStage .lifeIcon,.esgCard>svg{animation:sectionIconBreathe 3.4s ease-in-out infinite}
.lifeStage:nth-child(3) .lifeIcon,.esgCard:nth-child(2)>svg{animation-delay:.45s}.lifeStage:nth-child(5) .lifeIcon,.esgCard:nth-child(3)>svg{animation-delay:.9s}
.loopStep{transition:transform .25s ease,border-color .25s ease,background .25s ease;animation:loopTileBreathe 4.2s ease-in-out infinite}
.loopStep:nth-child(2){animation-delay:.45s}.loopStep:nth-child(3){animation-delay:.9s}.loopStep:nth-child(4){animation-delay:1.35s}
@keyframes sectionIconBreathe{0%,100%{transform:translateY(0) scale(1);box-shadow:0 0 0 0 rgba(145,232,197,0)}50%{transform:translateY(-2px) scale(1.035);box-shadow:0 0 0 6px rgba(145,232,197,.055)}}
@keyframes loopTileBreathe{0%,100%{transform:translateY(0);border-color:rgba(255,255,255,.075);background:rgba(255,255,255,.035)}50%{transform:translateY(-3px);border-color:rgba(145,232,197,.2);background:rgba(145,232,197,.055)}}

/* Restore a more natural crop of Alistair's supplied portrait, especially on phones. */
.personPhotoWrap{background:#eef2ef}.personPhotoWrap img{object-position:center 8%!important}

/* Footer: keep the statement available, but make no public WCAG target claim at this stage. */
.footerServiceNote{grid-template-columns:auto 1fr auto}

@media(max-width:900px){
  .heroRecommendation{display:flex;width:min(520px,92%);margin:18px auto 0!important;justify-content:center;align-items:center}
}
@media(orientation:portrait) and (max-width:600px){
  .heroContent{padding-bottom:30px!important}
  .heroRecommendation{width:100%;max-width:100%;margin:18px auto 0!important;padding:12px 14px!important;justify-content:center;text-align:center}
  .heroRecommendation>span{align-items:center}.heroRecommendation b{font-size:11px!important}.heroRecommendation small{font-size:8.5px!important}
  .mobileScrollCue{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;margin:20px auto 0!important;width:52px!important;height:52px!important;z-index:8!important}
  .personCard,.personCard:not(.personLead){grid-template-columns:148px 1fr!important;min-height:236px!important}
  .personPhotoWrap img{object-position:center 7%!important}
}
@media(max-width:390px){
  .personCard,.personCard:not(.personLead){grid-template-columns:138px 1fr!important}
  .personCopy{padding:18px 14px!important}.personCopy h3{font-size:21px!important}.personCopy p{font-size:10.5px!important}
}
@media(prefers-reduced-motion:reduce){
  .revealItem{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .heroRecommendation,.heroRecommendation::after,.planningCalc input[type="range"]::-webkit-slider-thumb,.lifeCalc input[type="range"]::-webkit-slider-thumb,.planningCalc input[type="range"]::-moz-range-thumb,.lifeCalc input[type="range"]::-moz-range-thumb,.lifeStage .lifeIcon,.esgCard>svg,.loopStep{animation:none!important}
}
/* Keep the now in-flow mobile scroll cue centred while it bobs. */
@keyframes scrollBobFlow{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(orientation:portrait) and (max-width:600px){.mobileScrollCue{animation:scrollBobFlow 1.7s ease-in-out infinite!important}}
@media(prefers-reduced-motion:reduce){.mobileScrollCue{animation:none!important}}


/* ===== 27 Aug 2026 · SHARE + ROTATED PHONE FINALISATION =====
   Compact landscape phones use the same premium hamburger treatment as portrait.
   This prevents a seven-item desktop menu being squeezed beside the PW4E lockup. */
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:520px){
  .navWrap{top:10px!important}
  .nav{height:62px!important;width:calc(100dvw - 20px)!important;max-width:none!important;padding:0 10px 0 14px!important;border-radius:19px!important}
  .nav .panelwiseBrandImage{width:190px!important;flex:0 1 190px!important;max-width:calc(100% - 60px)!important}
  .menuBtn{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;color:#fff!important;border-radius:13px!important}
  .navLinks{
    position:absolute!important;top:70px!important;left:8px!important;right:8px!important;width:auto!important;margin:0!important;
    padding:12px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important;
    background:linear-gradient(180deg,#071f27,#082a31)!important;border:1px solid rgba(145,232,197,.13)!important;
    border-radius:20px!important;box-shadow:0 24px 70px rgba(0,0,0,.34)!important;
    opacity:0!important;visibility:hidden!important;transform:translateY(-7px)!important;transition:opacity .2s ease,transform .2s ease,visibility .2s!important;
    max-height:calc(100svh - 92px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;z-index:70!important;
  }
  .navLinks.open{opacity:1!important;visibility:visible!important;transform:none!important}
  .navLinks>a{display:flex!important;align-items:center!important;min-height:42px!important;padding:10px 13px!important;font-size:14px!important;line-height:1.15!important;font-weight:700!important;border-radius:11px!important;color:#eef7f5!important;border-bottom:1px solid rgba(255,255,255,.05)!important}
  .navLinks>a:last-of-type{border-bottom:0!important}
  .navLinks .navCta{margin:6px 0 0!important;min-height:44px!important;justify-content:center!important;padding:11px 14px!important;font-size:14px!important;border-radius:12px!important}

  .hero{height:auto!important;min-height:510px!important;align-items:flex-end!important}
  .heroContent.shell{width:calc(100% - 38px)!important;padding-top:92px!important;padding-bottom:34px!important}
  .heroContent>.eyebrow{margin-bottom:10px!important;font-size:9px!important;letter-spacing:.11em!important}
  .hero h1{font-size:clamp(44px,6.1vw,56px)!important;line-height:.94!important;max-width:700px!important;letter-spacing:-.055em!important}
  .heroLead{max-width:680px!important;font-size:12.5px!important;line-height:1.48!important;margin:14px 0 14px!important}
  .heroActions{gap:8px!important}.heroActions .primary,.heroActions .secondary{padding:11px 14px!important;font-size:13px!important}
  .trustRow{width:min(620px,76%)!important;margin-top:16px!important}.trustRow div{padding-top:10px!important;margin-right:16px!important;padding-right:16px!important}.trustRow strong{font-size:13px!important}.trustRow span{font-size:8.5px!important}
  .heroRecommendation{width:min(420px,58%)!important;margin:13px 0 0!important;padding:9px 11px!important;justify-content:flex-start!important;text-align:left!important}
  .heroRecommendation>span{align-items:flex-start!important}.heroRecommendation b{font-size:9.5px!important}.heroRecommendation small{font-size:7.5px!important}
  .heroFloat,.mobileScrollCue{display:none!important}
}

/* Slightly taller landscape browsers/tablets keep the desktop nav, but reduce its visual weight. */
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (min-height:521px) and (max-height:620px){
  .nav{height:64px!important;padding-left:14px!important;padding-right:10px!important}
  .nav .panelwiseBrandImage{width:195px!important;flex-basis:195px!important}
  .nav .navLinks{gap:7px!important}.nav .navLinks>a{font-size:9px!important}.nav .navCta{font-size:9px!important;padding:9px 10px!important}
  .heroContent{padding-top:98px!important}.hero h1{font-size:clamp(46px,6.4vw,60px)!important;max-width:740px!important}.heroLead{font-size:13px!important;max-width:690px!important}
}


/* ===== 27 Aug 2026 · SAFARI MOBILE / LANDSCAPE FINAL PASS =====
   Final device-specific fixes requested after live Safari QA. */

/* Keep Alistair's supplied square portrait stable before/after image decode. */
.personPhotoWrap{position:relative;min-width:0}
.personPhotoWrap img{
  width:100%!important;height:100%!important;min-width:100%!important;max-width:none!important;
  aspect-ratio:1/1;object-fit:cover!important;object-position:center 6%!important;
  transform:none!important;
}

/* Portrait phones: compact the lower hero so proof stays above Safari chrome,
   and put the pulsing down cue on the pupil's green shirt beside the CTA. */
@media (orientation:portrait) and (max-width:600px){
  .hero{height:auto!important;min-height:max(760px,100svh)!important;overflow:hidden!important}
  .heroContent{padding-top:108px!important;padding-bottom:30px!important}
  .heroActions{position:relative!important;margin-bottom:0!important}
  .trustRow{margin-top:24px!important}
  .trustRow div{padding-top:11px!important}
  .heroRecommendation{
    width:100%!important;max-width:100%!important;margin:10px auto 0!important;
    padding:11px 13px!important;min-height:58px!important;justify-content:center!important;
    text-align:center!important;z-index:9!important;
  }
  .mobileScrollCue{
    position:absolute!important;
    left:auto!important;right:15%!important;top:61%!important;bottom:auto!important;
    margin:0!important;transform:none!important;
    width:50px!important;height:50px!important;z-index:9!important;
    animation:scrollBobFlow 1.7s ease-in-out infinite!important;
  }
  .personCard,.personCard:not(.personLead){grid-template-columns:158px minmax(0,1fr)!important;min-height:242px!important}
  .personPhotoWrap{width:158px!important;min-width:158px!important}
  .personPhotoWrap img{object-position:center 5%!important}
}
@media (orientation:portrait) and (max-width:390px){
  .heroContent{padding-top:104px!important}
  .trustRow{margin-top:21px!important}
  .heroRecommendation{margin-top:9px!important;min-height:56px!important}
  .mobileScrollCue{right:13%!important;top:60.5%!important;width:48px!important;height:48px!important}
  .personCard,.personCard:not(.personLead){grid-template-columns:148px minmax(0,1fr)!important}
  .personPhotoWrap{width:148px!important;min-width:148px!important}
}

/* Rotated phones: use the compact tablet/desktop navigation rather than the
   portrait hamburger, with iPhone/Android cut-out safe areas respected. */
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){
  .navWrap{
    top:8px!important;
    padding-left:max(8px,env(safe-area-inset-left))!important;
    padding-right:max(8px,env(safe-area-inset-right))!important;
  }
  .nav{
    width:100%!important;max-width:none!important;height:62px!important;margin:0!important;
    padding:0 10px!important;border-radius:18px!important;gap:8px!important;
  }
  .nav .panelwiseBrandImage{width:194px!important;flex:0 0 194px!important;max-width:194px!important}
  .menuBtn{display:none!important}
  .navLinks{
    position:static!important;inset:auto!important;width:auto!important;max-width:none!important;max-height:none!important;
    margin:0 0 0 auto!important;padding:0!important;display:flex!important;flex-direction:row!important;
    align-items:center!important;justify-content:flex-end!important;gap:6px!important;overflow:visible!important;
    background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
    opacity:1!important;visibility:visible!important;transform:none!important;transition:none!important;
  }
  .navLinks>a{
    min-height:36px!important;padding:7px 2px!important;font-size:9.2px!important;line-height:1!important;
    font-weight:700!important;border:0!important;border-radius:8px!important;white-space:nowrap!important;color:rgba(255,255,255,.88)!important;
  }
  .navLinks .navCta{
    margin:0 0 0 2px!important;min-height:38px!important;padding:8px 10px!important;font-size:9.5px!important;
    border-radius:11px!important;white-space:nowrap!important;
  }
  .hero{height:auto!important;min-height:500px!important;align-items:flex-end!important}
  .heroContent.shell{
    width:auto!important;max-width:none!important;
    margin-left:max(20px,calc(env(safe-area-inset-left) + 12px))!important;
    margin-right:max(20px,calc(env(safe-area-inset-right) + 12px))!important;
    padding-top:86px!important;padding-bottom:28px!important;
  }
  .heroContent>.eyebrow{margin-bottom:8px!important;font-size:8.5px!important}
  .hero h1{font-size:clamp(42px,5.8vw,54px)!important;line-height:.94!important;max-width:690px!important}
  .heroLead{font-size:11.5px!important;line-height:1.42!important;max-width:650px!important;margin:12px 0 12px!important}
  .heroActions{flex-direction:row!important;align-items:center!important;gap:7px!important}
  .heroActions .primary,.heroActions .secondary{padding:10px 12px!important;font-size:12px!important}
  .trustRow{width:min(590px,74%)!important;margin-top:13px!important}
  .trustRow div{padding-top:8px!important;margin-right:13px!important;padding-right:13px!important}
  .trustRow strong{font-size:12px!important}.trustRow span{font-size:8px!important}
  .heroRecommendation{width:min(390px,56%)!important;margin:9px 0 0!important;padding:8px 10px!important;min-height:42px!important;justify-content:flex-start!important;text-align:left!important}
  .heroRecommendation>span{align-items:flex-start!important}.heroRecommendation b{font-size:9px!important}.heroRecommendation small{font-size:7px!important}
  .heroFloat,.mobileScrollCue{display:none!important}
}

/* Very narrow landscape phones get a slightly smaller lockup/navigation set,
   while still retaining the tablet-style visible menu. */
@media (orientation:landscape) and (min-width:700px) and (max-width:820px) and (max-height:620px){
  .nav .panelwiseBrandImage{width:176px!important;flex-basis:176px!important;max-width:176px!important}
  .navLinks{gap:4px!important}.navLinks>a{font-size:8.4px!important;padding-inline:1px!important}.navLinks .navCta{font-size:8.7px!important;padding-inline:8px!important}
}


/* Final portrait placement refinement: the down cue belongs beside Explore PW4E,
   not underneath the Moxton proof point. */
.mobileActionCue{display:none}
@media (orientation:portrait) and (max-width:600px){
  .hero{height:auto!important;min-height:100svh!important}
  .heroContent{height:auto!important;min-height:100svh!important;padding-bottom:34px!important}
  .heroActions{position:relative!important}
  .mobileActionCue{
    position:absolute!important;display:grid!important;place-items:center!important;
    left:calc(100% + 58px)!important;top:3px!important;
    width:50px!important;height:50px!important;border-radius:50%!important;
    color:#84ead0!important;text-decoration:none!important;background:rgba(4,27,31,.76)!important;
    border:1px solid rgba(132,234,208,.34)!important;
    box-shadow:0 0 0 9px rgba(34,184,201,.035),0 12px 28px rgba(0,0,0,.2)!important;
    z-index:10!important;animation:actionCueBob 1.7s ease-in-out infinite!important;
  }
  .mobileActionCue::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(132,234,208,.25);animation:scrollRing 1.7s ease-out infinite}
  .mobileScrollCue{display:none!important}
  .trustRow{margin-top:18px!important}
  .heroRecommendation{margin-top:8px!important}
}
@media (orientation:portrait) and (max-width:390px){
  .mobileActionCue{left:calc(100% + 48px)!important;width:48px!important;height:48px!important}
  .trustRow{margin-top:16px!important}.heroRecommendation{margin-top:7px!important}
}
@keyframes actionCueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.mobileActionCue,.mobileActionCue::before{animation:none!important}}


/* ===== 27 Aug 2026 · PREMIUM FROST / HERO BALANCE PASS ===== */
.nav{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(3,18,24,.78),rgba(5,27,34,.58))!important;border:1px solid rgba(145,232,197,.16)!important;box-shadow:0 18px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)!important;backdrop-filter:blur(24px) saturate(1.35)!important;-webkit-backdrop-filter:blur(24px) saturate(1.35)!important}.nav::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 42%);pointer-events:none}.nav::after{content:"";position:absolute;right:22px;top:14px;width:180px;height:42px;background:radial-gradient(120% 120% at 100% 0,rgba(145,232,197,.1),transparent 56%);opacity:.8;pointer-events:none}.navLinks>a,.menuBtn{color:#eef8f6!important}.navLinks>a{opacity:.94}.navLinks>a:hover,.navLinks>a:focus-visible{color:#fff!important}.navCta{background:linear-gradient(135deg,#f2d174,#d7ae46)!important;color:#082126!important;box-shadow:0 12px 28px rgba(212,175,76,.26)!important}

.heroProofBar{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;max-width:1060px;margin-top:42px}.heroProofBar .trustRow{margin-top:0!important;flex:1 1 560px;width:auto!important;min-width:min(560px,100%)}.heroProofBar .heroRecommendation{margin-top:0!important;flex:0 0 clamp(300px,31vw,388px);min-height:68px;padding:14px 18px;border-radius:18px;background:linear-gradient(135deg,rgba(5,33,39,.68),rgba(10,42,49,.42))!important;border:1px solid rgba(145,232,197,.22)!important;backdrop-filter:blur(22px) saturate(1.28)!important;-webkit-backdrop-filter:blur(22px) saturate(1.28)!important;box-shadow:0 20px 42px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.06)!important}.heroProofBar .heroRecommendation b{font-size:12px!important;letter-spacing:.01em}.heroProofBar .heroRecommendation small{font-size:9px!important;color:#b6d7d2!important}.heroProofBar .heroRecommendation>svg:first-child{width:18px;height:18px}.heroProofBar .heroRecommendation>svg:last-child{margin-left:auto!important}

.featureCard .cardIcon,.lifeIcon,.workshopStep>svg,.matAlignment>div>svg,.stepTop svg,.esgCard>svg{position:relative;animation:premiumIconDrift 3.8s ease-in-out infinite}.featureCard .cardIcon::after,.lifeIcon::after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:1px solid rgba(96,212,197,.18);opacity:0;animation:premiumIconRing 3.8s ease-out infinite}.featureCard:nth-child(2) .cardIcon,.lifeStage:nth-child(3) .lifeIcon,.step:nth-child(2) .stepTop svg,.esgCard:nth-child(2)>svg{animation-delay:.35s}.featureCard:nth-child(3) .cardIcon,.lifeStage:nth-child(5) .lifeIcon,.step:nth-child(3) .stepTop svg,.esgCard:nth-child(3)>svg{animation-delay:.7s}.featureCard .cardIcon svg,.lifeIcon svg,.workshopStep>svg,.matAlignment>div>svg,.stepTop svg,.esgCard>svg{filter:drop-shadow(0 8px 14px rgba(34,184,201,.12))}@keyframes premiumIconDrift{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.03)}}@keyframes premiumIconRing{0%,20%{opacity:.54;transform:scale(.94)}70%,100%{opacity:0;transform:scale(1.16)}}

@media (min-width:900px){.heroProofBar{align-items:stretch!important}.heroProofBar .heroRecommendation{align-self:flex-end!important}}
@media (orientation:portrait) and (max-width:600px){.heroProofBar{display:block!important;max-width:none!important;margin-top:18px!important}.heroProofBar .trustRow{width:100%!important;min-width:0!important}.heroProofBar .heroRecommendation{display:flex!important;width:100%!important;max-width:100%!important;min-height:60px!important;margin:10px auto 0!important;padding:12px 14px!important;justify-content:center!important;text-align:center!important}.heroProofBar .heroRecommendation>span{align-items:center!important}.heroActions{position:relative!important}.mobileActionCue{left:calc(100% + 82px)!important;top:50%!important;transform:translateY(-50%)!important;width:54px!important;height:54px!important}.heroRecommendation{margin-top:0!important}}
@media (orientation:portrait) and (max-width:390px){.mobileActionCue{left:calc(100% + 68px)!important;width:50px!important;height:50px!important}}
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){.nav{background:linear-gradient(135deg,rgba(5,23,29,.8),rgba(8,34,41,.62))!important}.nav::after{right:18px;top:13px;width:126px;height:32px;opacity:.62}.heroProofBar{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(250px,320px)!important;align-items:end!important;gap:14px!important;max-width:930px!important;margin-top:12px!important}.heroProofBar .trustRow{width:100%!important;min-width:0!important}.heroProofBar .heroRecommendation{width:100%!important;max-width:none!important;min-height:48px!important;padding:10px 12px!important;align-self:end!important}.heroProofBar .heroRecommendation b{font-size:9.8px!important}.heroProofBar .heroRecommendation small{font-size:7.5px!important}.heroProofBar .heroRecommendation>svg:first-child{width:15px!important;height:15px!important}.heroProofBar .heroRecommendation>svg:last-child{width:14px!important;height:14px!important}.mobileActionCue{display:none!important}}

/* ===== 27 Aug 2026 · SAFARI FROST + HERO CUE MICRO-FIX ===== */
/* Make the header read as frosted glass in Safari instead of a flat dark bar, while keeping the PW4E branding crisp. */
.nav{
  background-color:rgba(7,27,33,.34)!important;
  background-image:linear-gradient(135deg,rgba(7,27,33,.42),rgba(10,41,48,.24))!important;
  border:1px solid rgba(145,232,197,.18)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(28px) saturate(1.55)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.55)!important;
}
.nav::before{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 34%,rgba(255,255,255,0) 70%)!important;
}
.nav::after{
  right:18px!important;top:12px!important;width:170px!important;height:44px!important;
  background:radial-gradient(120% 120% at 100% 0,rgba(145,232,197,.14),transparent 55%)!important;
  opacity:.92!important;
}
.menuBtn{position:relative;z-index:2}

/* Portrait mobile: keep the down cue to the right of the primary CTA and align it with the button rather than between CTAs. */
@media (orientation:portrait) and (max-width:600px){
  .heroActions{padding-right:82px!important}
  .mobileActionCue{
    left:calc(100% + 24px)!important;
    top:8px!important;
    transform:none!important;
    width:56px!important;height:56px!important;
    background:rgba(5,30,35,.64)!important;
    backdrop-filter:blur(16px) saturate(1.35)!important;
    -webkit-backdrop-filter:blur(16px) saturate(1.35)!important;
    box-shadow:0 0 0 10px rgba(34,184,201,.03),0 14px 32px rgba(0,0,0,.22)!important;
  }
  .mobileActionCue::before{inset:-8px!important}
}
@media (orientation:portrait) and (max-width:390px){
  .heroActions{padding-right:74px!important}
  .mobileActionCue{left:calc(100% + 16px)!important;width:52px!important;height:52px!important}
}

/* Landscape / browser-tablet hero nav: preserve the frosted feel and keep the right-side highlight visible. */
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){
  .nav{
    background-color:rgba(6,24,30,.38)!important;
    background-image:linear-gradient(135deg,rgba(6,24,30,.46),rgba(11,39,46,.28))!important;
    backdrop-filter:blur(26px) saturate(1.5)!important;
    -webkit-backdrop-filter:blur(26px) saturate(1.5)!important;
  }
  .nav::after{right:14px!important;top:11px!important;width:118px!important;height:30px!important;opacity:.9!important}
}

/* ===== 27 Aug 2026 · GLASS WAVE FINAL TUNE ===== */
/* User wants the header to feel more like frosted glass over the hero image,
   without losing the PW4E lockup or the wave detail. So reduce tint opacity,
   keep stronger blur, and use light-edge highlights rather than a flat dark fill. */
.nav{
  background-color:rgba(6,21,27,.18)!important;
  background-image:
    linear-gradient(135deg,rgba(8,32,39,.18),rgba(6,20,26,.08))!important;
  border:1px solid rgba(177,234,222,.20)!important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.03)!important;
  backdrop-filter:blur(26px) saturate(1.6) brightness(1.02)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.6) brightness(1.02)!important;
}
.nav::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 34%,rgba(255,255,255,0) 72%),
    linear-gradient(90deg,rgba(34,184,201,.04),rgba(145,232,197,.03) 52%,rgba(255,255,255,0));
}
.nav::after{
  right:20px!important;
  top:10px!important;
  width:188px!important;
  height:48px!important;
  background:
    radial-gradient(115% 115% at 100% 0,rgba(145,232,197,.13),transparent 52%),
    radial-gradient(90% 100% at 82% 35%,rgba(34,184,201,.08),transparent 60%)!important;
  opacity:.95!important;
  filter:blur(.2px);
}
.nav .panelwiseBrandImage,
.nav .panelwiseBrandImage .panelwiseLockupImage,
.menuBtn{position:relative;z-index:2}
.nav .panelwiseBrandImage .panelwiseLockupImage{
  filter:drop-shadow(0 7px 14px rgba(6,19,24,.22)) drop-shadow(0 0 14px rgba(34,184,201,.06))!important;
}

/* Portrait mobile: nudge the action cue slightly further right and slightly higher
   so it aligns more cleanly off the Explore button. */
@media (orientation:portrait) and (max-width:600px){
  .heroActions{padding-right:96px!important}
  .mobileActionCue{
    left:calc(100% + 36px)!important;
    top:2px!important;
    width:55px!important;
    height:55px!important;
  }
}
@media (orientation:portrait) and (max-width:390px){
  .heroActions{padding-right:84px!important}
  .mobileActionCue{left:calc(100% + 24px)!important;top:0!important;width:52px!important;height:52px!important}
}

/* Browser/tablet landscape: keep the same glass behaviour and wave visibility. */
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){
  .nav{
    background-color:rgba(7,24,30,.2)!important;
    background-image:linear-gradient(135deg,rgba(8,31,39,.2),rgba(7,24,30,.08))!important;
    border-color:rgba(177,234,222,.18)!important;
    box-shadow:0 14px 36px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.1)!important;
    backdrop-filter:blur(24px) saturate(1.54) brightness(1.02)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.54) brightness(1.02)!important;
  }
  .nav::before{
    background:
      linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 36%,rgba(255,255,255,0) 72%),
      linear-gradient(90deg,rgba(34,184,201,.04),rgba(145,232,197,.02) 54%,rgba(255,255,255,0))!important;
  }
  .nav::after{right:14px!important;top:10px!important;width:126px!important;height:30px!important;opacity:.9!important}
}

/* ===== 27 Aug 2026 · TRUE GLASS HEADER FINAL FIX ===== */
/* Keep the header genuinely frosted, but preserve the wave motif sharply for both mobile and browser-tablet layouts. */
.nav.glass{
  background-color:rgba(6,22,28,.16)!important;
  background-image:linear-gradient(135deg,rgba(10,35,42,.16),rgba(6,20,26,.08))!important;
  border:1px solid rgba(190,236,227,.18)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.04)!important;
  backdrop-filter:blur(24px) saturate(1.55) brightness(1.03)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.55) brightness(1.03)!important;
  isolation:isolate!important;
}
.nav.glass::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 34%,rgba(255,255,255,0) 72%),
    linear-gradient(90deg,rgba(255,255,255,.01),rgba(34,184,201,.04) 58%,rgba(255,255,255,.01));
}
.nav.glass::after{
  content:"";
  position:absolute;
  z-index:1;
  pointer-events:none;
  right:28px;
  top:11px;
  width:250px;
  height:48px;
  opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%2329d2cf' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath stroke-opacity='.34' d='M0 102 C110 102 148 42 260 42 C356 42 390 72 452 72 C500 72 528 56 560 42'/%3E%3Cpath stroke-opacity='.5' d='M0 88 C112 88 150 31 261 31 C357 31 392 61 453 61 C502 61 530 45 560 31'/%3E%3Cpath stroke-opacity='.68' d='M0 74 C114 74 152 20 262 20 C358 20 394 50 454 50 C503 50 532 34 560 20'/%3E%3Cpath stroke-opacity='.24' d='M0 116 C108 116 146 53 259 53 C355 53 388 83 451 83 C498 83 526 68 560 54'/%3E%3C/g%3E%3C/svg%3E")!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  filter:drop-shadow(0 0 10px rgba(34,184,201,.08));
}
.nav.glass .panelwiseBrandImage,
.nav.glass .panelwiseBrandImage .panelwiseLockupImage,
.nav.glass .navLinks,
.nav.glass .menuBtn{position:relative;z-index:2}
.nav.glass .panelwiseBrandImage .panelwiseLockupImage{filter:drop-shadow(0 7px 16px rgba(8,21,24,.18))}

@media (max-width:600px){
  .nav.glass::after{
    right:18px!important;
    top:12px!important;
    width:172px!important;
    height:40px!important;
    opacity:.92!important;
  }
}
@media (max-width:390px){
  .nav.glass::after{right:16px!important;width:154px!important;height:36px!important}
}
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){
  .nav.glass{
    background-color:rgba(6,22,28,.18)!important;
    background-image:linear-gradient(135deg,rgba(10,35,42,.18),rgba(6,20,26,.08))!important;
    backdrop-filter:blur(22px) saturate(1.5) brightness(1.03)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.5) brightness(1.03)!important;
  }
  .nav.glass::after{
    right:16px!important;
    top:10px!important;
    width:140px!important;
    height:32px!important;
    opacity:.88!important;
  }
}

/* ===== 27 Aug 2026 · WAVE BALANCE FINAL TUNE ===== */
/* Restore better visual weight by increasing the visible wave field without increasing nav height. */
.nav.glass::after{
  right:20px!important;
  top:10px!important;
  width:286px!important;
  height:50px!important;
  opacity:.92!important;
  background-size:100% 100%!important;
  background-position:center right!important;
}
@media (max-width:600px){
  .nav.glass::after{
    right:12px!important;
    top:10px!important;
    width:214px!important;
    height:42px!important;
    opacity:.95!important;
  }
}
@media (max-width:390px){
  .nav.glass::after{
    right:10px!important;
    top:10px!important;
    width:194px!important;
    height:39px!important;
  }
}
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){
  .nav.glass::after{
    right:18px!important;
    top:11px!important;
    width:248px!important;
    height:36px!important;
    opacity:.92!important;
  }
}

/* ===== 27 Aug 2026 · CHIC NAV FINAL POLISH ===== */
/* Final live QA tune: slightly darker glass so it reads over light sections, bigger PW4E lockup on mobile,
   wave motif kept clear of the burger icon, and a darker frosted mobile dropdown. */
.nav.glass{
  background-color:rgba(6,20,25,.28)!important;
  background-image:linear-gradient(135deg,rgba(8,29,35,.34),rgba(8,22,27,.18))!important;
  border:1px solid rgba(185,233,224,.22)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(255,255,255,.03)!important;
  backdrop-filter:blur(24px) saturate(1.5) brightness(1.0)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.5) brightness(1.0)!important;
}
.nav.glass::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035) 34%,rgba(255,255,255,0) 72%),
    linear-gradient(90deg,rgba(255,255,255,.01),rgba(34,184,201,.03) 56%,rgba(255,255,255,0))!important;
}

/* Portrait mobile */
@media (max-width:600px){
  .nav{height:74px!important;padding:0 12px 0 16px!important}
  .nav .panelwiseBrandImage{width:248px!important;flex:0 1 248px!important;max-width:calc(100% - 74px)!important}
  .nav.glass::after{
    right:58px!important;
    top:11px!important;
    width:186px!important;
    height:38px!important;
    opacity:.9!important;
    background-position:center center!important;
  }
  .menuBtn{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
    border-radius:13px!important;background:rgba(255,255,255,.035)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
    backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;
  }
  .navLinks{
    position:absolute!important;z-index:72!important;
    background:linear-gradient(145deg,rgba(5,23,29,.88),rgba(7,28,35,.78))!important;
    border:1px solid rgba(185,233,224,.16)!important;
    box-shadow:0 26px 70px rgba(0,0,0,.36)!important;
    backdrop-filter:blur(24px) saturate(1.42)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.42)!important;
    overflow:hidden!important;
  }
  .navLinks::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02) 26%,rgba(255,255,255,0) 70%);
  }
  .navLinks>*{position:relative;z-index:1}
}
@media (max-width:390px){
  .nav .panelwiseBrandImage{width:232px!important;flex-basis:232px!important;max-width:calc(100% - 72px)!important}
  .nav.glass::after{right:52px!important;top:11px!important;width:170px!important;height:35px!important}
}

/* Rotated phones with hamburger menu */
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:520px){
  .nav .panelwiseBrandImage{width:210px!important;flex:0 1 210px!important;max-width:calc(100% - 68px)!important}
  .nav.glass::after{right:64px!important;top:12px!important;width:188px!important;height:34px!important;opacity:.9!important}
  .navLinks{
    background:linear-gradient(145deg,rgba(5,23,29,.88),rgba(7,28,35,.78))!important;
    border:1px solid rgba(185,233,224,.16)!important;
    box-shadow:0 26px 72px rgba(0,0,0,.36)!important;
    backdrop-filter:blur(24px) saturate(1.42)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.42)!important;
  }
}

/* Browser / tablet landscape with visible nav links */
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (min-height:521px) and (max-height:620px){
  .nav{height:66px!important;padding-left:15px!important;padding-right:12px!important}
  .nav .panelwiseBrandImage{width:220px!important;flex-basis:220px!important}
  .nav.glass{
    background-color:rgba(6,21,26,.26)!important;
    background-image:linear-gradient(135deg,rgba(8,29,35,.3),rgba(8,22,27,.16))!important;
  }
  .nav.glass::after{
    right:168px!important;
    top:11px!important;
    width:214px!important;
    height:34px!important;
    opacity:.88!important;
    background-position:center center!important;
  }
  .nav .navLinks{gap:8px!important}
  .nav .navLinks>a{font-size:9.4px!important}
  .nav .navCta{font-size:9.7px!important;padding:9px 11px!important}
}

/* ===== 27 Aug 2026 · FINAL MENU FROST + MOXTON ALIGN ===== */
/* Tight final QA pass:
   1) Mobile dropdown needs stronger frost/obscuration so page copy is not readable through it.
   2) Browser-tablet landscape needs the Moxton proof card shifted right so its right edge aligns with the Talk to us CTA. */

/* Mobile / portrait dropdown: darker frosted panel with stronger fill. */
@media (max-width:600px){
  .navLinks{
    background-color:rgba(4,18,23,.84)!important;
    background-image:linear-gradient(145deg,rgba(5,22,28,.96),rgba(7,27,33,.92))!important;
    border:1px solid rgba(185,233,224,.18)!important;
    box-shadow:0 28px 76px rgba(0,0,0,.42)!important;
    backdrop-filter:blur(28px) saturate(1.46) brightness(.82)!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.46) brightness(.82)!important;
  }
  .navLinks::before{
    background:
      linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015) 18%,rgba(4,18,23,.14) 52%,rgba(4,18,23,.22) 100%)!important;
  }
}

/* Rotated phones that still use the hamburger dropdown get the same stronger frost. */
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:520px){
  .navLinks{
    background-color:rgba(4,18,23,.84)!important;
    background-image:linear-gradient(145deg,rgba(5,22,28,.96),rgba(7,27,33,.92))!important;
    border:1px solid rgba(185,233,224,.18)!important;
    box-shadow:0 28px 76px rgba(0,0,0,.42)!important;
    backdrop-filter:blur(28px) saturate(1.46) brightness(.82)!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.46) brightness(.82)!important;
  }
}

/* Browser / tablet landscape with visible nav links: keep the Moxton card on the same horizontal line,
   but shift it right so its right edge lines up with the Talk to us CTA. */
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (min-height:521px) and (max-height:620px){
  .heroProofBar{
    width:100%!important;
    max-width:none!important;
    grid-template-columns:minmax(0,1fr) 318px!important;
    column-gap:18px!important;
    align-items:end!important;
  }
  .heroProofBar .heroRecommendation{
    width:318px!important;
    max-width:318px!important;
    justify-self:end!important;
    margin-left:auto!important;
    margin-right:0!important;
  }
}

/* ===== 27 Aug 2026 · FINAL MOBILE GLASS + FAQ PREMIUM PASS ===== */
/* Final tidy based on live mobile QA:
   - dropdown menu should feel more frosted and integrated, not too dark / opaque
   - FAQ blocks need a bit more PW4E character without becoming gimmicky */

/* Mobile / rotated-phone dropdown menu: lighter than the previous pass, but with stronger blur so content behind becomes illegible. */
@media (max-width:600px){
  .navLinks{
    background-color:rgba(8,28,34,.68)!important;
    background-image:linear-gradient(145deg,rgba(8,28,34,.82),rgba(9,36,43,.74))!important;
    border:1px solid rgba(185,233,224,.20)!important;
    box-shadow:0 28px 76px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08)!important;
    backdrop-filter:blur(34px) saturate(1.44) brightness(.94)!important;
    -webkit-backdrop-filter:blur(34px) saturate(1.44) brightness(.94)!important;
  }
  .navLinks::before{
    background:
      linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 18%,rgba(255,255,255,0) 48%),
      linear-gradient(145deg,rgba(4,18,23,.10),rgba(4,18,23,.18))!important;
  }
}
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:520px){
  .navLinks{
    background-color:rgba(8,28,34,.68)!important;
    background-image:linear-gradient(145deg,rgba(8,28,34,.82),rgba(9,36,43,.74))!important;
    border:1px solid rgba(185,233,224,.20)!important;
    box-shadow:0 28px 76px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08)!important;
    backdrop-filter:blur(34px) saturate(1.44) brightness(.94)!important;
    -webkit-backdrop-filter:blur(34px) saturate(1.44) brightness(.94)!important;
  }
}

/* FAQ section: keep structure the same, but make it feel more premium and on-brand. */
.faqSection{
  background:linear-gradient(180deg,#fbfcfb 0%,#f6faf8 100%)!important;
}
.faqCategories{
  gap:32px!important;
}
.faqCategory{
  position:relative;
}
.faqCategory h3{
  display:flex;align-items:center;gap:10px;
  font:800 18px 'Manrope',sans-serif!important;
  letter-spacing:-.02em;
  color:#113135!important;
  margin:0 0 14px!important;
}
.faqCategory h3::before{
  content:"";
  width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,#2ac6cf,#8fe8c5);
  box-shadow:0 0 0 7px rgba(143,232,197,.10);
  flex:0 0 auto;
}
.faqCategory .faqGrid{
  gap:12px!important;
}
.faqItem{
  border:1px solid rgba(16,48,53,.10)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,251,249,.98))!important;
  box-shadow:0 12px 34px rgba(8,34,38,.05), inset 0 1px 0 rgba(255,255,255,.86)!important;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.faqItem:hover{
  transform:translateY(-1px);
  border-color:rgba(42,198,207,.20)!important;
  box-shadow:0 14px 36px rgba(8,34,38,.07),0 0 0 4px rgba(143,232,197,.08)!important;
}
.faqItem summary{
  padding:19px 20px!important;
  font:800 13px/1.4 'Manrope',sans-serif!important;
  color:#102a2d!important;
}
.faqItem summary span{
  width:32px!important;height:32px!important;
  background:linear-gradient(135deg,rgba(143,232,197,.24),rgba(42,198,207,.16))!important;
  border:1px solid rgba(42,198,207,.16)!important;
  color:#1a736b!important;
  box-shadow:0 6px 18px rgba(42,198,207,.10)!important;
}
.faqItem[open]{
  border-color:rgba(42,198,207,.24)!important;
  background:linear-gradient(180deg,#ffffff 0%,#f4fbf8 100%)!important;
  box-shadow:0 16px 40px rgba(8,34,38,.08),0 0 0 5px rgba(143,232,197,.07)!important;
}
.faqItem[open] summary span{
  background:linear-gradient(135deg,#2ac6cf,#8fe8c5)!important;
  color:#0b2c2f!important;
  transform:rotate(45deg) scale(1.02)!important;
}
.faqItem p{
  padding:0 20px 21px!important;
  color:#607573!important;
  font-size:12px!important;
  line-height:1.7!important;
}
@media(max-width:600px){
  .faqCategories{gap:26px!important}
  .faqCategory h3{font-size:16px!important;margin-bottom:12px!important}
  .faqItem{border-radius:20px!important}
  .faqItem summary{padding:17px 16px!important;font-size:12.5px!important}
  .faqItem summary span{width:30px!important;height:30px!important}
  .faqItem p{padding:0 16px 18px!important;font-size:11.5px!important}
}

/* ===== 27 Aug 2026 · FINAL MENU BLUR + FAQ OPEN STATE ===== */
/* Last micro-pass:
   - mobile dropdown keeps the same dark feel, but with a stronger glass blur so content behind is no longer readable
   - opened FAQ cards become more obviously active / premium
   - long FAQ rows keep the plus icon perfectly circular
   - tablet landscape Moxton callout shifts a little further right for better weighting */

@media (max-width:600px){
  .navLinks{
    background-color:rgba(7,26,31,.62)!important;
    background-image:linear-gradient(145deg,rgba(6,24,30,.82),rgba(8,31,37,.76))!important;
    border:1px solid rgba(185,233,224,.17)!important;
    box-shadow:0 26px 72px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05)!important;
    backdrop-filter:blur(44px) saturate(1.34) brightness(.88)!important;
    -webkit-backdrop-filter:blur(44px) saturate(1.34) brightness(.88)!important;
  }
  .navLinks::before{
    background:
      linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012) 20%,rgba(5,20,24,.12) 52%,rgba(5,20,24,.20) 100%)!important;
  }
  .navLinks::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:linear-gradient(145deg,rgba(6,23,28,.08),rgba(6,23,28,.16));
  }
  .navLinks>*{position:relative;z-index:1}
}
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:520px){
  .navLinks{
    background-color:rgba(7,26,31,.62)!important;
    background-image:linear-gradient(145deg,rgba(6,24,30,.82),rgba(8,31,37,.76))!important;
    border:1px solid rgba(185,233,224,.17)!important;
    box-shadow:0 26px 72px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05)!important;
    backdrop-filter:blur(44px) saturate(1.34) brightness(.88)!important;
    -webkit-backdrop-filter:blur(44px) saturate(1.34) brightness(.88)!important;
  }
}

.faqItem summary span{
  flex:0 0 32px!important;
}
.faqItem[open]{
  border-color:rgba(42,198,207,.24)!important;
  background:linear-gradient(160deg,rgba(6,29,34,.98),rgba(7,35,41,.94))!important;
  box-shadow:0 18px 42px rgba(8,34,38,.12),0 0 0 4px rgba(143,232,197,.08)!important;
}
.faqItem[open] summary{
  color:#ffffff!important;
}
.faqItem[open] summary span{
  background:linear-gradient(135deg,#79e6ce,#28bfca)!important;
  border-color:rgba(143,232,197,.42)!important;
  color:#0c3134!important;
  box-shadow:0 8px 20px rgba(42,198,207,.18)!important;
}
.faqItem[open] p{
  color:#c8dfda!important;
}
@media(max-width:600px){
  .faqItem summary span{flex:0 0 30px!important}
}

@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (min-height:521px) and (max-height:620px){
  .heroProofBar{
    grid-template-columns:minmax(0,1fr) 342px!important;
  }
  .heroProofBar .heroRecommendation{
    width:342px!important;
    max-width:342px!important;
    margin-right:-4px!important;
  }
}

/* ===== 27 Aug 2026 · FOUNDATION PASS v14 ===== */
/* Final foundation tidy:
   1) Portrait mobile dropdown becomes a true blurred glass panel so copy behind is no longer readable.
   2) Rotated phones inherit the compact tablet-style inline navigation.
   3) MAT workshop step icons sit in line with the step numerals and keep a subtle pulse.
   4) Tablet/browser Moxton recommendation shifts right so it visually finishes under the Talk to us CTA. */

/* Portrait mobile hamburger panel: keep the same tone, but give it a cleaner glass blur and a little more fill. */
@media (orientation:portrait) and (max-width:600px){
  .navLinks{
    background-color:rgba(7,25,30,.78)!important;
    background-image:linear-gradient(145deg,rgba(7,25,30,.88),rgba(9,34,40,.80))!important;
    border:1px solid rgba(185,233,224,.18)!important;
    box-shadow:0 28px 76px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07)!important;
    backdrop-filter:blur(30px) saturate(1.3) brightness(.92)!important;
    -webkit-backdrop-filter:blur(30px) saturate(1.3) brightness(.92)!important;
  }
  .navLinks::before{
    background:
      linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 20%,rgba(255,255,255,0) 52%),
      linear-gradient(145deg,rgba(4,16,20,.14),rgba(4,16,20,.22))!important;
  }
  .navLinks::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:radial-gradient(120% 90% at 100% 0,rgba(111,225,214,.08),transparent 54%),linear-gradient(160deg,rgba(3,14,18,.08),rgba(3,14,18,.18));
  }
  .navLinks>*{position:relative;z-index:1}
}

/* Rotated phones should always behave like the compact tablet/browser navigation, not the portrait pop-out menu. */
@media (orientation:landscape) and (min-width:700px) and (max-width:980px) and (max-height:620px){
  .menuBtn{display:none!important}
  .navLinks{
    position:static!important;inset:auto!important;width:auto!important;max-width:none!important;max-height:none!important;
    margin:0 0 0 auto!important;padding:0!important;display:flex!important;flex-direction:row!important;
    align-items:center!important;justify-content:flex-end!important;gap:8px!important;overflow:visible!important;
    background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
    opacity:1!important;visibility:visible!important;transform:none!important;transition:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .navLinks::before,.navLinks::after{display:none!important}
  .navLinks>a{
    min-height:36px!important;padding:7px 2px!important;font-size:9.4px!important;line-height:1!important;
    font-weight:700!important;border:0!important;border-radius:8px!important;white-space:nowrap!important;color:rgba(255,255,255,.88)!important;
  }
  .navLinks .navCta{
    margin:0 0 0 2px!important;min-height:40px!important;padding:9px 12px!important;font-size:9.7px!important;
    border-radius:12px!important;white-space:nowrap!important;
  }
}

/* Workshop step cards: align icons with the step numbers and keep the premium pulse. */
.workshopSteps .workshopStep>svg{
  left:24px!important;
  right:auto!important;
  top:82px!important;
  width:44px!important;
  height:44px!important;
  padding:10px!important;
  border-radius:14px!important;
  background:rgba(145,232,197,.08)!important;
  border:1px solid rgba(145,232,197,.18)!important;
  color:#80e2cf!important;
  box-shadow:0 0 0 0 rgba(34,211,226,0)!important;
  animation:matIconPulse 3.8s ease-in-out infinite!important;
}
.workshopSteps .workshopStep h3{
  margin-top:92px!important;
}
@media (max-width:900px){
  .workshopSteps .workshopStep>svg{left:20px!important;top:74px!important;width:40px!important;height:40px!important;padding:9px!important}
  .workshopSteps .workshopStep h3{margin-top:80px!important}
}
@media (max-width:600px){
  .workshopSteps .workshopStep>svg{left:18px!important;top:72px!important;width:38px!important;height:38px!important;padding:8px!important}
  .workshopSteps .workshopStep h3{margin-top:74px!important}
}

/* Browser / tablet landscape hero: carry the Moxton recommendation a little further right so it finishes in line with the CTA. */
@media (orientation:landscape) and (min-width:981px) and (max-width:1400px){
  .heroProofBar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 430px!important;
    align-items:end!important;
    gap:18px!important;
    width:100%!important;
    max-width:none!important;
  }
  .heroProofBar .trustRow{
    width:100%!important;
    min-width:0!important;
  }
  .heroProofBar .heroRecommendation{
    width:430px!important;
    max-width:430px!important;
    justify-self:end!important;
    margin-left:auto!important;
    margin-right:-108px!important;
  }
}

/* ===== 27 Aug 2026 · FINAL FOUNDATION TUNE v15 ===== */
/* 1) Mobile menu panel: lighter glass, stronger blur, no readable page content bleeding through.
   2) Workshop step icons: sit tighter under the numerals and directly above the step title.
   3) Tablet/browser hero: Moxton recommendation pulled slightly left so the right edge aligns with the Talk to us CTA. */

@media (orientation:portrait) and (max-width:600px){
  .navLinks{
    background-color:rgba(7,29,34,.84)!important;
    background-image:linear-gradient(145deg,rgba(7,29,34,.84),rgba(7,34,40,.80))!important;
    border:1px solid rgba(185,233,224,.16)!important;
    box-shadow:0 26px 72px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06)!important;
    backdrop-filter:blur(34px) saturate(1.2) brightness(.94)!important;
    -webkit-backdrop-filter:blur(34px) saturate(1.2) brightness(.94)!important;
    overflow:hidden!important;
    isolation:isolate!important;
  }
  .navLinks::before{
    background:
      linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.016) 22%,rgba(255,255,255,0) 56%),
      linear-gradient(150deg,rgba(2,14,18,.04),rgba(2,14,18,.10))!important;
    opacity:1!important;
  }
  .navLinks::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:
      radial-gradient(120% 96% at 100% 0,rgba(111,225,214,.075),transparent 56%),
      linear-gradient(160deg,rgba(6,23,29,.07),rgba(6,23,29,.13));
    opacity:1!important;
  }
  .navLinks>*{position:relative;z-index:1}
}

/* Workshop step card icon alignment */
.workshopSteps .workshopStep>svg{
  left:22px!important;
  right:auto!important;
  top:58px!important;
  width:42px!important;
  height:42px!important;
  padding:9px!important;
}
.workshopSteps .workshopStep h3{
  margin-top:56px!important;
}
@media (max-width:900px){
  .workshopSteps .workshopStep>svg{left:20px!important;top:56px!important;width:40px!important;height:40px!important;padding:9px!important}
  .workshopSteps .workshopStep h3{margin-top:54px!important}
}
@media (max-width:600px){
  .workshopSteps .workshopStep>svg{left:18px!important;top:54px!important;width:38px!important;height:38px!important;padding:8px!important}
  .workshopSteps .workshopStep h3{margin-top:50px!important}
}

/* Tablet/browser landscape hero recommendation weighting */
@media (orientation:landscape) and (min-width:981px) and (max-width:1400px){
  .heroProofBar{
    grid-template-columns:minmax(0,1fr) 404px!important;
  }
  .heroProofBar .heroRecommendation{
    width:404px!important;
    max-width:404px!important;
    margin-right:-26px!important;
  }
}

/* ===== 27 Aug 2026 · FINAL SIGN-OFF FIX v16 ===== */
/* 1) Mobile dropdown: true frosted glass feel without readable bleed-through.
   2) MAT workshop steps: icon sits directly beneath the numeral and above the title.
   3) Tablet/browser hero: Moxton recommendation pulled back left and weighted under CTA.
   4) Small performance pass for Safari smoothness. */

/* Small compositing help for Safari smoothness */
.nav,
.navLinks,
.heroProofBar .heroRecommendation,
.workshopSteps .workshopStep{
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (orientation:portrait) and (max-width:600px){
  .navLinks{
    background-color:rgba(5,22,27,.76)!important;
    background-image:linear-gradient(145deg,rgba(5,22,27,.78),rgba(8,33,38,.72))!important;
    border:1px solid rgba(185,233,224,.14)!important;
    box-shadow:0 24px 60px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05)!important;
    backdrop-filter:blur(22px) saturate(1.18) brightness(.92)!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.18) brightness(.92)!important;
    isolation:isolate!important;
    overflow:hidden!important;
  }
  .navLinks::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:
      linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 20%,rgba(255,255,255,0) 48%),
      linear-gradient(145deg,rgba(4,16,20,.32),rgba(4,16,20,.26))!important;
    opacity:1!important;
  }
  .navLinks::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:
      radial-gradient(120% 92% at 100% 0,rgba(111,225,214,.05),transparent 54%),
      linear-gradient(160deg,rgba(5,20,25,.34),rgba(5,20,25,.28))!important;
    opacity:1!important;
  }
  .navLinks>*{position:relative;z-index:1}
  .navLinks>a{
    background:rgba(255,255,255,.022)!important;
    border:1px solid rgba(255,255,255,.035)!important;
  }
}

/* Put MAT step icon into the flow so there is no awkward gap beneath the number */
.workshopSteps .workshopStep>span{
  display:block!important;
  margin-bottom:10px!important;
  line-height:.86!important;
}
.workshopSteps .workshopStep>svg{
  position:relative!important;
  left:0!important;
  right:auto!important;
  top:0!important;
  display:block!important;
  margin:0 0 14px!important;
  width:42px!important;
  height:42px!important;
  padding:9px!important;
}
.workshopSteps .workshopStep h3{
  margin-top:0!important;
}
@media (max-width:900px){
  .workshopSteps .workshopStep>span{margin-bottom:8px!important}
  .workshopSteps .workshopStep>svg{margin:0 0 12px!important;width:40px!important;height:40px!important;padding:9px!important}
  .workshopSteps .workshopStep h3{margin-top:0!important}
}
@media (max-width:600px){
  .workshopSteps .workshopStep>span{margin-bottom:8px!important}
  .workshopSteps .workshopStep>svg{margin:0 0 12px!important;width:38px!important;height:38px!important;padding:8px!important}
  .workshopSteps .workshopStep h3{margin-top:0!important}
}

/* Tablet/browser landscape hero weighting */
@media (orientation:landscape) and (min-width:981px) and (max-width:1400px){
  .heroProofBar{
    grid-template-columns:minmax(0,1fr) 390px!important;
  }
  .heroProofBar .heroRecommendation{
    width:390px!important;
    max-width:390px!important;
    margin-left:auto!important;
    margin-right:8px!important;
    justify-self:end!important;
  }
}

/* ===== 28 Aug 2026 · LAUNCH READINESS PASS ===== */
/* Privacy/cookie UX, contact form states and desktop proof-point alignment. */

/* Desktop / MacBook: align Moxton recommendation to the same shell edge as the nav CTA. Tablet rules remain untouched. */
@media (orientation:landscape) and (min-width:1100px){
  .heroProofBar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 404px!important;
    width:100%!important;
    max-width:none!important;
    gap:18px!important;
    align-items:end!important;
  }
  .heroProofBar .trustRow{
    width:100%!important;
    min-width:0!important;
  }
  .heroProofBar .heroRecommendation{
    width:404px!important;
    max-width:404px!important;
    justify-self:end!important;
    margin-left:auto!important;
    margin-right:0!important;
  }
}

/* Premium essential-cookie notice */
.cookieNotice{
  position:fixed;
  z-index:95;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(920px,calc(100% - 28px));
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:15px;
  align-items:center;
  padding:15px 16px;
  border-radius:22px;
  color:#eef9f6;
  background:linear-gradient(135deg,rgba(5,25,31,.90),rgba(7,40,45,.84));
  border:1px solid rgba(145,232,197,.22);
  box-shadow:0 24px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(24px) saturate(1.35);
  -webkit-backdrop-filter:blur(24px) saturate(1.35);
}
.cookieNoticeIcon{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  color:#8fe8c5;background:rgba(145,232,197,.09);border:1px solid rgba(145,232,197,.15);
}
.cookieNoticeCopy{display:flex;flex-direction:column;gap:4px;min-width:0}
.cookieNoticeCopy b{font:800 13px/1.2 'Manrope',sans-serif;color:#fff}
.cookieNoticeCopy span{font-size:10.5px;line-height:1.5;color:#b7cdca}
.cookieNoticeActions{display:flex;align-items:center;gap:8px;white-space:nowrap}
.cookieNoticeActions button{border:0;cursor:pointer;font-weight:800;border-radius:12px;padding:11px 14px}
.cookiePolicyLink{background:rgba(255,255,255,.06);color:#d5e7e4;border:1px solid rgba(255,255,255,.08)!important}
.cookieContinue{background:linear-gradient(135deg,#8fe8c5,#31cad1);color:#08272c;box-shadow:0 9px 24px rgba(49,202,209,.16)}
.cookieNoticeActions button:hover{transform:translateY(-1px)}

/* Privacy / legal presentation */
.policyModal{max-height:min(82vh,760px);overflow:auto;overscroll-behavior:contain}
.policyBody h4{font:800 13px/1.25 'Manrope',sans-serif;color:#17383b;margin:22px 0 7px}
.policyBody p{margin:0 0 10px;color:#617572;line-height:1.65;font-size:12px}
.footerCompanyMeta{
  padding-top:18px;padding-bottom:18px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#79908e;font-size:9.5px;line-height:1.5;
}

/* Real enquiry form */
.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.formPrivacy{margin:12px 2px 0;color:#718481;font-size:10px;line-height:1.5}
.formPrivacy button{border:0;background:none;color:#257b78;text-decoration:underline;cursor:pointer;padding:0;font:inherit;font-weight:700}
.formError{margin:10px 0 0;padding:10px 12px;border-radius:11px;background:#fff2ef;color:#9a3328;font-size:11px}
.formSuccess{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;margin-top:22px;padding:20px;border-radius:18px;background:linear-gradient(145deg,#edf9f4,#f7fbf9);border:1px solid rgba(42,168,153,.16)}
.formSuccess>svg{color:#278e83;margin-top:2px}
.formSuccess>div{display:flex;flex-direction:column;gap:4px}
.formSuccess b{font:800 13px 'Manrope',sans-serif;color:#153b3d}
.formSuccess span{font-size:11px;line-height:1.5;color:#677d7b}
.formSuccess .primary{grid-column:1/-1;margin-top:4px}
.primary:disabled{opacity:.65;cursor:wait}

@media(max-width:700px){
  .cookieNotice{grid-template-columns:auto 1fr;gap:11px;padding:13px;border-radius:19px;bottom:max(12px,env(safe-area-inset-bottom))}
  .cookieNoticeActions{grid-column:1/-1;width:100%;display:grid;grid-template-columns:1fr 1fr}
  .cookieNoticeActions button{width:100%;justify-content:center}
  .cookieNoticeCopy span{font-size:9.5px}
  .footerCompanyMeta{flex-direction:column;gap:5px;font-size:9px}
}

/* ===== 28 Aug 2026 · PW4E ASSIST ===== */
.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.assistLauncher{
  position:fixed;z-index:90;left:18px;bottom:max(18px,env(safe-area-inset-bottom));
  min-height:52px;padding:7px 13px 7px 8px;border-radius:18px;border:1px solid rgba(145,232,197,.24);
  display:flex;align-items:center;gap:9px;cursor:pointer;color:#effbf7;
  background:linear-gradient(135deg,rgba(5,28,34,.76),rgba(8,45,51,.62));
  box-shadow:0 16px 44px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px) saturate(1.35);-webkit-backdrop-filter:blur(20px) saturate(1.35);
  transition:transform .2s ease,border-color .2s ease,background .2s ease,bottom .25s ease;
}
.assistLauncher:hover{transform:translateY(-2px);border-color:rgba(145,232,197,.42)}
.assistLauncher.active{background:linear-gradient(135deg,rgba(8,42,48,.9),rgba(8,56,60,.78))}
.assistLauncher.cookieUp{bottom:124px}
.assistLauncherIcon{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;color:#8fe8c5;background:linear-gradient(145deg,rgba(145,232,197,.12),rgba(34,211,226,.08));border:1px solid rgba(145,232,197,.18);position:relative}
.assistLauncher:not(.active) .assistLauncherIcon::after{content:"";position:absolute;inset:-5px;border-radius:16px;border:1px solid rgba(145,232,197,.22);animation:assistPing 2.8s ease-out infinite}
.assistLauncherText{display:flex;flex-direction:column;text-align:left;line-height:1.05}.assistLauncherText b{font:800 11px 'Manrope',sans-serif}.assistLauncherText small{font-size:8.5px;color:#a9c7c2;margin-top:4px}
@keyframes assistPing{0%,30%{opacity:.52;transform:scale(.93)}80%,100%{opacity:0;transform:scale(1.12)}}

.assistPanel{
  position:fixed;z-index:94;left:18px;bottom:82px;width:min(390px,calc(100% - 36px));max-height:min(650px,72svh);
  display:flex;flex-direction:column;overflow:hidden;border-radius:26px;color:#eefaf7;
  background:linear-gradient(145deg,rgba(4,24,30,.92),rgba(7,41,47,.86));
  border:1px solid rgba(145,232,197,.22);box-shadow:0 32px 90px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(28px) saturate(1.35);-webkit-backdrop-filter:blur(28px) saturate(1.35);
  animation:assistIn .22s ease both;
}
.assistPanel.cookieUp{bottom:184px}
@keyframes assistIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.assistHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 13px;border-bottom:1px solid rgba(255,255,255,.075);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0))}
.assistBrand{display:flex;align-items:center;gap:10px;min-width:0}.assistMark{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;color:#0c3134;background:linear-gradient(135deg,#8fe8c5,#31cad1);box-shadow:0 8px 24px rgba(49,202,209,.12)}
.assistBrand>div{display:flex;flex-direction:column;min-width:0}.assistBrand b{font:800 13px 'Manrope',sans-serif;color:#fff}.assistBrand small{font-size:9px;color:#9ebdb8;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.assistClose{width:42px;height:42px;border:0;border-radius:13px;display:grid;place-items:center;cursor:pointer;color:#d9ece8;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}
.assistMessages{min-height:118px;max-height:310px;overflow-y:auto;overscroll-behavior:contain;padding:15px 15px 8px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:rgba(145,232,197,.25) transparent}
.assistMessage{max-width:92%;padding:11px 12px;border-radius:16px}.assistMessage.assistant{align-self:flex-start;background:linear-gradient(145deg,rgba(145,232,197,.09),rgba(34,211,226,.045));border:1px solid rgba(145,232,197,.12)}.assistMessage.user{align-self:flex-end;background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.08)}
.assistMessage b{display:block;font:800 10.5px 'Manrope',sans-serif;color:#dffff4;margin-bottom:5px}.assistMessage p{margin:0;font-size:10.5px;line-height:1.58;color:#c0d6d2}.assistMessage.user p{color:#f3faf8}
.assistSectionLink{margin-top:9px;padding:0;border:0;background:none;color:#8fe8c5;display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;cursor:pointer}
.assistPrompts{padding:3px 15px 10px;display:flex;flex-wrap:wrap;gap:7px}.assistPrompts button{border:1px solid rgba(145,232,197,.13);background:rgba(255,255,255,.045);color:#d7e9e5;border-radius:999px;padding:8px 10px;font-size:9px;line-height:1.15;cursor:pointer}.assistPrompts button:hover{background:rgba(145,232,197,.09);color:#fff}
.assistForm{margin:0 12px 10px;padding:5px 5px 5px 12px;display:flex;align-items:center;gap:7px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.assistInputWrap{flex:1;min-width:0}.assistInputWrap input{width:100%;min-height:42px;border:0;outline:0;background:transparent;color:#fff;font:500 16px 'DM Sans',sans-serif}.assistInputWrap input::placeholder{color:#8ba7a3}
.assistSend{width:42px;height:42px;flex:0 0 42px;border:0;border-radius:13px;display:grid;place-items:center;cursor:pointer;color:#08272c;background:linear-gradient(135deg,#8fe8c5,#31cad1);transition:opacity .18s ease,transform .18s ease}.assistSend:disabled{opacity:.32;cursor:default}.assistSend:not(:disabled):hover{transform:translateY(-1px)}
.assistFoot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 15px 14px;color:#779a95;font-size:8.5px;line-height:1.35}.assistFoot span{max-width:250px}.assistFoot button{border:0;background:none;color:#e5c461;font:800 9px 'Manrope',sans-serif;padding:0;cursor:pointer;white-space:nowrap}

@media(max-width:600px){
  .assistLauncher{left:14px;bottom:max(14px,env(safe-area-inset-bottom));min-height:48px;padding:6px 10px 6px 6px;border-radius:17px}
  .assistLauncher.cookieUp{bottom:136px}
  .assistLauncherIcon{width:36px;height:36px;border-radius:12px}.assistLauncherText b{font-size:10.5px}.assistLauncherText small{font-size:8px}
  .assistPanel{left:10px;bottom:72px;width:calc(100% - 20px);max-height:68svh;border-radius:24px}
  .assistPanel.cookieUp{bottom:190px}
  .assistHead{padding:13px 13px 11px}.assistMark{width:36px;height:36px}.assistClose{width:40px;height:40px}
  .assistMessages{max-height:260px;padding:13px 12px 7px}.assistMessage{max-width:94%;padding:10px 11px}.assistMessage p{font-size:10px}
  .assistPrompts{padding:2px 12px 9px;gap:6px}.assistPrompts button{font-size:8.7px;padding:8px 9px}
  .assistForm{margin:0 10px 9px}.assistFoot{padding:0 12px 12px;font-size:8px}.assistFoot span{max-width:220px}
}
@media(max-width:390px){.assistLauncherText small{display:none}.assistLauncher{padding-right:9px}.assistPanel{max-height:66svh}.assistMessages{max-height:230px}}
@media(prefers-reduced-motion:reduce){.assistLauncherIcon::after,.assistPanel{animation:none!important}.assistLauncher{transition:none!important}}

/* ===== 28 Aug 2026 · PW4E ASSIST MOBILE DOCK + RESET v19 ===== */
.assistLauncherIcon img,.assistMark img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.assistLauncherIcon{overflow:hidden;padding:3px!important;background:rgba(3,24,31,.78)!important}
.assistMark{overflow:hidden;padding:3px!important;background:rgba(3,24,31,.82)!important;border:1px solid rgba(143,232,197,.18)}
.assistHeadLeft{display:flex;align-items:center;gap:9px;min-width:0}
.assistBack{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.045);color:#cfe6e1;cursor:pointer;transition:background .18s ease,transform .18s ease}
.assistBack:hover,.assistBack:focus-visible{background:rgba(145,232,197,.10);transform:translateX(-1px)}

@media(max-width:600px){
  /* Keep Assist away from the Moxton proof strip. It lives on the right side of the viewport,
     wakes while the visitor is moving, then tucks back to a subtle edge icon after 2.1s. */
  .assistLauncher,.assistLauncher.cookieUp{
    left:auto!important;right:10px!important;top:54%!important;bottom:auto!important;
    width:148px;min-height:52px;padding:6px 10px 6px 6px!important;border-radius:18px!important;
    transform:translateY(-50%);transform-origin:right center;
    transition:opacity .28s ease,transform .28s ease,width .28s ease,border-color .2s ease,background .2s ease!important;
  }
  .assistLauncher.awake:not(.active){opacity:1;transform:translateY(-50%) translateX(0);width:148px}
  .assistLauncher.idle:not(.active){opacity:.16;transform:translateY(-50%) translateX(31px);width:54px;padding-right:6px!important}
  .assistLauncher.idle:not(.active) .assistLauncherText{opacity:0;max-width:0;overflow:hidden;margin:0}
  .assistLauncher.awake:not(.active) .assistLauncherText{opacity:1;max-width:92px}
  .assistLauncherText{transition:opacity .2s ease,max-width .24s ease;white-space:nowrap}
  .assistLauncher.active{opacity:0!important;pointer-events:none!important;transform:translateY(-50%) translateX(30px)!important}
  .assistLauncher:hover{transform:translateY(-50%)!important}
  .assistLauncherIcon{width:40px!important;height:40px!important;flex:0 0 40px!important;border-radius:13px!important}
  .assistLauncher:not(.active) .assistLauncherIcon::after{inset:-4px;border-radius:16px}

  /* Chat sheet sits clear of the floating launcher and existing back-to-top button. */
  .assistPanel,.assistPanel.cookieUp{left:10px!important;right:10px!important;bottom:12px!important;width:auto!important;max-height:72svh!important}
  .assistHead{padding:12px 12px 10px!important}
  .assistHeadLeft{gap:7px}
  .assistBack{width:36px;height:36px;flex-basis:36px;border-radius:11px}
  .assistMark{width:36px!important;height:36px!important;flex-basis:36px!important}
  .assistBrand{gap:8px!important}
  .assistBrand b{font-size:12px!important}.assistBrand small{font-size:8.5px!important}
}
@media(max-width:390px){
  .assistLauncher,.assistLauncher.cookieUp{right:8px!important;top:52%!important;width:138px}
  .assistLauncher.awake:not(.active){width:138px}
  .assistLauncher.idle:not(.active){width:52px;transform:translateY(-50%) translateX(29px)}
  .assistLauncherIcon{width:38px!important;height:38px!important;flex-basis:38px!important}
  .assistPanel,.assistPanel.cookieUp{left:8px!important;right:8px!important;bottom:10px!important;max-height:70svh!important}
}
@media(prefers-reduced-motion:reduce){
  .assistLauncher.awake:not(.active),.assistLauncher.idle:not(.active){transition:none!important}
}


/* ===== 28 Aug 2026 · PW4E ASSIST QUIET DOCK v20 ===== */
/* Introduce once, then remain as a discreet edge dock so content stays unobstructed. */
.assistLauncher{transform-origin:right center!important;transition:opacity .3s ease,transform .3s ease,width .3s ease,border-color .2s ease,background .2s ease!important}
.assistLauncherText{transition:opacity .22s ease,max-width .28s ease!important;white-space:nowrap!important}
.assistLauncher.awake:not(.active) .assistLauncherText{opacity:1;max-width:102px}
.assistLauncher.idle:not(.active) .assistLauncherText{opacity:0;max-width:0;overflow:hidden;margin:0}
.assistLauncher.idle:not(.active) .assistLauncherIcon::after{animation:none!important;opacity:0!important}

@media (max-width:600px){
  .assistLauncher,.assistLauncher.cookieUp{left:auto!important;right:8px!important;top:42%!important;bottom:auto!important;width:148px!important;min-height:52px!important;padding:6px 10px 6px 6px!important;border-radius:18px!important;transform:translateY(-50%)!important}
  .assistLauncher.awake:not(.active){width:148px!important;opacity:1!important;transform:translateY(-50%) translateX(0)!important}
  .assistLauncher.idle:not(.active){width:52px!important;padding-right:6px!important;opacity:.48!important;transform:translateY(-50%) translateX(27px)!important;background:linear-gradient(135deg,rgba(5,28,34,.58),rgba(8,45,51,.44))!important}
  .assistLauncher.active{opacity:0!important;pointer-events:none!important;transform:translateY(-50%) translateX(28px)!important}
  .assistLauncherIcon{width:40px!important;height:40px!important;flex:0 0 40px!important}
  .assistPanel,.assistPanel.cookieUp{left:8px!important;right:8px!important;bottom:10px!important;width:auto!important;max-height:70svh!important}
}
@media (max-width:390px){
  .assistLauncher,.assistLauncher.cookieUp{right:7px!important;top:41%!important;width:140px!important}
  .assistLauncher.awake:not(.active){width:140px!important}
  .assistLauncher.idle:not(.active){width:50px!important;transform:translateY(-50%) translateX(26px)!important}
}

@media (min-width:601px) and (max-width:1100px){
  .assistLauncher,.assistLauncher.cookieUp{left:auto!important;right:16px!important;top:54%!important;bottom:auto!important;width:156px!important;transform:translateY(-50%)!important}
  .assistLauncher.awake:not(.active){opacity:1!important;width:156px!important;transform:translateY(-50%) translateX(0)!important}
  .assistLauncher.idle:not(.active){opacity:.5!important;width:56px!important;padding-right:7px!important;transform:translateY(-50%) translateX(30px)!important;background:linear-gradient(135deg,rgba(5,28,34,.58),rgba(8,45,51,.44))!important}
  .assistLauncher.active{opacity:0!important;pointer-events:none!important;transform:translateY(-50%) translateX(30px)!important}
  .assistPanel,.assistPanel.cookieUp{left:auto!important;right:18px!important;bottom:18px!important;width:min(390px,calc(100% - 36px))!important}
}

@media (min-width:1101px){
  .assistLauncher,.assistLauncher.cookieUp{left:auto!important;right:22px!important;bottom:22px!important;width:156px!important}
  .assistLauncher.awake:not(.active){opacity:1!important;width:156px!important}
  .assistLauncher.idle:not(.active){opacity:.56!important;width:56px!important;padding-right:7px!important;transform:translateX(30px)!important;background:linear-gradient(135deg,rgba(5,28,34,.58),rgba(8,45,51,.44))!important}
  .assistLauncher.active{opacity:0!important;pointer-events:none!important;transform:translateX(30px)!important}
  .assistPanel,.assistPanel.cookieUp{left:auto!important;right:22px!important;bottom:82px!important}
}
@media(prefers-reduced-motion:reduce){.assistLauncher{transition:none!important}}

/* ===== 28 Aug 2026 · PW4E ASSIST RESPONSIVE SAFE DOCK v21 ===== */
/* Introduce the assistant without covering important copy, then keep it available as a quiet edge dock. */

/* Base compact/awake behaviour */
.assistLauncher{
  transform-origin:right center!important;
  transition:opacity .28s ease,transform .28s ease,width .28s ease,border-color .18s ease,background .18s ease!important;
}
.assistLauncherText{transition:opacity .2s ease,max-width .24s ease!important;white-space:nowrap!important}
.assistLauncher.awake:not(.active) .assistLauncherText{opacity:1!important;max-width:104px!important}
.assistLauncher.idle:not(.active) .assistLauncherText{opacity:0!important;max-width:0!important;overflow:hidden!important;margin:0!important}
.assistLauncher.idle:not(.active) .assistLauncherIcon::after{animation:none!important;opacity:0!important}

/* Phones: introduce it alongside the upper hero image, clear of the headline/body copy and Moxton strip. */
@media (max-width:600px){
  .assistLauncher,.assistLauncher.cookieUp{
    left:auto!important;
    right:8px!important;
    top:30%!important;
    bottom:auto!important;
    width:148px!important;
    min-height:52px!important;
    padding:6px 10px 6px 6px!important;
    border-radius:18px!important;
    transform:translateY(-50%)!important;
  }
  .assistLauncher.awake:not(.active){
    width:148px!important;
    opacity:1!important;
    transform:translateY(-50%) translateX(0)!important;
  }
  .assistLauncher.idle:not(.active){
    width:52px!important;
    padding-right:6px!important;
    opacity:.48!important;
    transform:translateY(-50%) translateX(27px)!important;
    background:linear-gradient(135deg,rgba(5,28,34,.58),rgba(8,45,51,.44))!important;
  }
  .assistLauncher.active{
    opacity:0!important;
    pointer-events:none!important;
    transform:translateY(-50%) translateX(28px)!important;
  }
  .assistLauncherIcon{width:40px!important;height:40px!important;flex:0 0 40px!important}
  .assistPanel,.assistPanel.cookieUp{
    left:8px!important;
    right:8px!important;
    bottom:10px!important;
    width:auto!important;
    max-height:70svh!important;
  }
}
@media (max-width:390px){
  .assistLauncher,.assistLauncher.cookieUp{right:7px!important;top:29%!important;width:140px!important}
  .assistLauncher.awake:not(.active){width:140px!important}
  .assistLauncher.idle:not(.active){width:50px!important;transform:translateY(-50%) translateX(26px)!important}
}

/* Tablet / narrower browser windows: right-edge dock so it never sits across the reading column. */
@media (min-width:601px) and (max-width:1179px){
  .assistLauncher,.assistLauncher.cookieUp{
    left:auto!important;
    right:12px!important;
    top:43%!important;
    bottom:auto!important;
    width:154px!important;
    min-height:52px!important;
    padding:6px 10px 6px 6px!important;
    border-radius:18px!important;
    transform:translateY(-50%)!important;
  }
  .assistLauncher.awake:not(.active){
    opacity:1!important;
    width:154px!important;
    transform:translateY(-50%) translateX(0)!important;
  }
  .assistLauncher.idle:not(.active){
    opacity:.5!important;
    width:54px!important;
    padding-right:6px!important;
    transform:translateY(-50%) translateX(28px)!important;
    background:linear-gradient(135deg,rgba(5,28,34,.58),rgba(8,45,51,.44))!important;
  }
  .assistLauncher.active{
    opacity:0!important;
    pointer-events:none!important;
    transform:translateY(-50%) translateX(28px)!important;
  }
  .assistPanel,.assistPanel.cookieUp{
    left:auto!important;
    right:18px!important;
    bottom:18px!important;
    width:min(390px,calc(100% - 36px))!important;
    max-height:72svh!important;
  }
}

/* Large laptop / desktop: the full pill can live unobtrusively at bottom-left, as on the wider MacBook view. */
@media (min-width:1180px){
  .assistLauncher,.assistLauncher.cookieUp{
    left:22px!important;
    right:auto!important;
    top:auto!important;
    bottom:22px!important;
    width:156px!important;
    opacity:1!important;
    transform:none!important;
  }
  .assistLauncher.idle:not(.active),
  .assistLauncher.awake:not(.active){
    width:156px!important;
    opacity:1!important;
    transform:none!important;
  }
  .assistLauncher.idle:not(.active) .assistLauncherText,
  .assistLauncher.awake:not(.active) .assistLauncherText{
    opacity:1!important;
    max-width:104px!important;
  }
  .assistLauncher.active{opacity:0!important;pointer-events:none!important;transform:translateX(-10px)!important}
  .assistPanel,.assistPanel.cookieUp{left:22px!important;right:auto!important;bottom:82px!important}
}

@media(prefers-reduced-motion:reduce){.assistLauncher{transition:none!important}}

/* ===== 28 Aug 2026 · PW4E ASSIST UNIVERSAL EDGE DOCK v22 ===== */
/* Final responsive behaviour: introduce once, then retract into a quiet edge watermark.
   Mobile retracts right; tablet / laptop / desktop retract left. */

/* Mobile: move the initial pill higher into the clear hero-image area so it does not cover headline/body copy. */
@media (max-width:600px){
  .assistLauncher,.assistLauncher.cookieUp{
    left:auto!important;
    right:8px!important;
    top:23.5%!important;
    bottom:auto!important;
    width:148px!important;
    transform:translateY(-50%)!important;
  }
  .assistLauncher.awake:not(.active){
    width:148px!important;
    opacity:1!important;
    transform:translateY(-50%) translateX(0)!important;
  }
  .assistLauncher.idle:not(.active){
    width:52px!important;
    padding-right:6px!important;
    opacity:.48!important;
    transform:translateY(-50%) translateX(27px)!important;
    background:linear-gradient(135deg,rgba(5,28,34,.58),rgba(8,45,51,.44))!important;
  }
  .assistLauncher.idle:not(.active) .assistLauncherText{opacity:0!important;max-width:0!important;overflow:hidden!important;margin:0!important}
}
@media (max-width:390px){
  .assistLauncher,.assistLauncher.cookieUp{right:7px!important;top:22.5%!important;width:140px!important}
  .assistLauncher.awake:not(.active){width:140px!important}
  .assistLauncher.idle:not(.active){width:50px!important;transform:translateY(-50%) translateX(26px)!important}
}

/* Tablet / compact browser: introduce bottom-left, then retract into the left edge. */
@media (min-width:601px) and (max-width:1179px){
  .assistLauncher,.assistLauncher.cookieUp{
    left:14px!important;
    right:auto!important;
    top:auto!important;
    bottom:18px!important;
    width:154px!important;
    min-height:52px!important;
    padding:6px 10px 6px 6px!important;
    border-radius:18px!important;
    transform:none!important;
    transform-origin:left center!important;
  }
  .assistLauncher.awake:not(.active){
    width:154px!important;
    opacity:1!important;
    transform:translateX(0)!important;
  }
  .assistLauncher.idle:not(.active){
    width:54px!important;
    padding-right:6px!important;
    opacity:.5!important;
    transform:translateX(-28px)!important;
    background:linear-gradient(135deg,rgba(5,28,34,.58),rgba(8,45,51,.44))!important;
  }
  .assistLauncher.idle:not(.active) .assistLauncherText{opacity:0!important;max-width:0!important;overflow:hidden!important;margin:0!important}
  .assistLauncher.active{opacity:0!important;pointer-events:none!important;transform:translateX(-28px)!important}
  .assistPanel,.assistPanel.cookieUp{
    left:18px!important;
    right:auto!important;
    bottom:18px!important;
    width:min(390px,calc(100% - 36px))!important;
    max-height:72svh!important;
  }
}

/* Laptop / desktop / iMac / Windows browser: same intro, then quiet left-edge watermark. */
@media (min-width:1180px){
  .assistLauncher,.assistLauncher.cookieUp{
    left:22px!important;
    right:auto!important;
    top:auto!important;
    bottom:22px!important;
    width:156px!important;
    min-height:52px!important;
    padding:6px 10px 6px 6px!important;
    border-radius:18px!important;
    transform-origin:left center!important;
  }
  .assistLauncher.awake:not(.active){
    width:156px!important;
    opacity:1!important;
    transform:translateX(0)!important;
  }
  .assistLauncher.idle:not(.active){
    width:56px!important;
    padding-right:7px!important;
    opacity:.56!important;
    transform:translateX(-30px)!important;
    background:linear-gradient(135deg,rgba(5,28,34,.58),rgba(8,45,51,.44))!important;
  }
  .assistLauncher.idle:not(.active) .assistLauncherText{opacity:0!important;max-width:0!important;overflow:hidden!important;margin:0!important}
  .assistLauncher.active{opacity:0!important;pointer-events:none!important;transform:translateX(-30px)!important}
  .assistPanel,.assistPanel.cookieUp{left:22px!important;right:auto!important;bottom:82px!important}
}


/* ===== 28 Aug 2026 · PW4E ASSIST FOCUS MODAL v23 ===== */
/* Keep launcher behaviour exactly as-is. Only improve the opened assistant: larger, clearer and focused. */
.assistBackdrop{
  position:fixed;inset:0;z-index:93;border:0;padding:0;margin:0;cursor:default;
  background:rgba(2,13,17,.30);
  backdrop-filter:blur(12px) saturate(.92);
  -webkit-backdrop-filter:blur(12px) saturate(.92);
  animation:assistBackdropIn .18s ease both;
}
@keyframes assistBackdropIn{from{opacity:0}to{opacity:1}}
.assistPanel{z-index:94!important}

/* Phones: generous reading space without becoming a full-screen takeover. */
@media (max-width:600px){
  .assistBackdrop{background:rgba(2,13,17,.34);backdrop-filter:blur(14px) saturate(.9);-webkit-backdrop-filter:blur(14px) saturate(.9)}
  .assistPanel,.assistPanel.cookieUp{
    left:8px!important;right:8px!important;top:auto!important;bottom:max(12px,env(safe-area-inset-bottom))!important;
    width:auto!important;max-height:80svh!important;border-radius:26px!important;
  }
  .assistHead{padding:15px 15px 13px!important}
  .assistHeadLeft{gap:9px!important}
  .assistMark{width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:14px!important}
  .assistBack{width:40px!important;height:40px!important;flex-basis:40px!important}
  .assistClose{width:46px!important;height:46px!important;border-radius:14px!important}
  .assistBrand b{font-size:14px!important}
  .assistBrand small{font-size:10px!important}
  .assistMessages{min-height:132px!important;max-height:36svh!important;padding:16px 16px 9px!important;gap:11px!important}
  .assistMessage{padding:13px 14px!important;border-radius:18px!important;max-width:94%!important}
  .assistMessage b{font-size:12px!important;margin-bottom:6px!important}
  .assistMessage p{font-size:12px!important;line-height:1.6!important}
  .assistSectionLink{font-size:11px!important;margin-top:10px!important}
  .assistPrompts{padding:5px 16px 12px!important;gap:8px!important}
  .assistPrompts button{font-size:10.8px!important;padding:10px 12px!important}
  .assistForm{margin:0 12px 11px!important;padding:6px 6px 6px 14px!important;border-radius:18px!important}
  .assistInputWrap input{min-height:48px!important;font-size:17px!important}
  .assistSend{width:48px!important;height:48px!important;flex-basis:48px!important;border-radius:14px!important}
  .assistFoot{padding:1px 15px 15px!important;font-size:9.4px!important}
  .assistFoot span{max-width:260px!important}
  .assistFoot button{font-size:10px!important}
}
@media (max-width:390px){
  .assistPanel,.assistPanel.cookieUp{left:6px!important;right:6px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;max-height:79svh!important}
  .assistMessages{max-height:34svh!important}
}

/* Tablet / compact browser: larger panel, still comfortably framed by the page. */
@media (min-width:601px) and (max-width:1179px){
  .assistBackdrop{background:rgba(2,13,17,.28);backdrop-filter:blur(13px) saturate(.92);-webkit-backdrop-filter:blur(13px) saturate(.92)}
  .assistPanel,.assistPanel.cookieUp{
    left:50%!important;right:auto!important;bottom:24px!important;top:auto!important;
    width:min(500px,calc(100% - 48px))!important;max-height:78svh!important;
    transform:translateX(-50%)!important;border-radius:28px!important;
  }
  .assistHead{padding:17px 18px 14px!important}
  .assistMark{width:44px!important;height:44px!important;flex-basis:44px!important}
  .assistBrand b{font-size:14px!important}.assistBrand small{font-size:10px!important}
  .assistMessages{max-height:36svh!important;padding:17px 18px 10px!important}
  .assistMessage b{font-size:12px!important}.assistMessage p{font-size:12px!important}
  .assistPrompts{padding:5px 18px 13px!important;gap:8px!important}.assistPrompts button{font-size:10.5px!important;padding:10px 12px!important}
  .assistForm{margin:0 15px 12px!important}.assistFoot{padding:0 18px 16px!important;font-size:9px!important}
}

/* Laptops / desktop browsers: noticeably easier to read, but never dominates the screen. */
@media (min-width:1180px){
  .assistBackdrop{background:rgba(2,13,17,.24);backdrop-filter:blur(11px) saturate(.94);-webkit-backdrop-filter:blur(11px) saturate(.94)}
  .assistPanel,.assistPanel.cookieUp{
    left:32px!important;right:auto!important;bottom:32px!important;top:auto!important;
    width:min(520px,calc(100% - 64px))!important;max-height:min(720px,76svh)!important;
    border-radius:28px!important;
  }
  .assistHead{padding:17px 18px 14px!important}
  .assistMark{width:44px!important;height:44px!important;flex-basis:44px!important}
  .assistBrand b{font-size:14px!important}.assistBrand small{font-size:10px!important}
  .assistMessages{max-height:350px!important;padding:17px 18px 10px!important}
  .assistMessage b{font-size:12px!important}.assistMessage p{font-size:12px!important}
  .assistPrompts{padding:5px 18px 13px!important}.assistPrompts button{font-size:10.5px!important;padding:10px 12px!important}
  .assistForm{margin:0 15px 12px!important}.assistFoot{padding:0 18px 16px!important;font-size:9px!important}
}

@media(prefers-reduced-motion:reduce){.assistBackdrop{animation:none!important}}

/* ===== 29 Aug 2026 · HERO BRAND AQUA PASS ===== */
/* Tie the hero message directly back to the cyan / blue PW4E '4E' treatment across every viewport. */
.hero h1 span{
  color:#22d3e2!important;
  background:linear-gradient(135deg,#22d3e2 0%,#35d9dc 54%,#22b9d1 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:0 0 28px rgba(34,211,226,.08);
}


/* ===== 29 Aug 2026 · ALI READY HERO SPLIT + MOXTON TRUST PULSE v26 ===== */
/* Keep "switched" tied to the PW4E 4E aqua, while restoring "on." to the original mint.
   Strengthen the Moxton recommendation cue across mobile, tablet and desktop without changing layout. */
.hero h1 .heroBrandMint{
  color:var(--mint)!important;
  background:linear-gradient(110deg,#d9fff0 0%,#bdf6df 15%,#8fe8c5 34%,#64dfcf 49%,#9aefd0 64%,#d2fbe8 82%,#91e8c5 100%)!important;
  background-size:340% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:0 0 22px rgba(145,232,197,.10);
  animation:heroMintFlow 3.35s cubic-bezier(.45,0,.2,1) infinite!important;
  will-change:background-position;
}
@keyframes heroMintFlow{
  0%{background-position:0% 50%}
  28%{background-position:55% 50%}
  58%{background-position:100% 50%}
  78%{background-position:66% 50%}
  100%{background-position:0% 50%}
}
@media(prefers-reduced-motion:reduce){
  .hero h1 .heroBrandMint{animation:none!important;background-position:50% 50%!important}
}

.heroRecommendation{
  overflow:visible!important;
  animation:moxtonTrustPulse 2.15s cubic-bezier(.4,0,.2,1) infinite!important;
}
.heroRecommendation::after{
  inset:-2px!important;
  border:1px solid rgba(145,232,197,.45)!important;
  box-shadow:0 0 18px rgba(34,211,226,.10)!important;
  animation:moxtonTrustRing 2.15s ease-out infinite!important;
}
.heroRecommendation>svg:first-child{
  filter:drop-shadow(0 0 8px rgba(145,232,197,.35));
  animation:moxtonIconPop 2.15s ease-in-out infinite;
}
.heroRecommendation>svg:last-child{
  animation:moxtonArrowNudge 2.15s ease-in-out infinite;
}
@keyframes moxtonTrustPulse{
  0%,100%{
    border-color:rgba(145,232,197,.30);
    box-shadow:0 18px 42px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.06),0 0 0 0 rgba(145,232,197,0);
    transform:translateY(0) scale(1);
  }
  48%{
    border-color:rgba(145,232,197,.78);
    box-shadow:0 20px 46px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.08),0 0 0 7px rgba(145,232,197,.10),0 0 28px rgba(34,211,226,.12);
    transform:translateY(-1px) scale(1.008);
  }
}
@keyframes moxtonTrustRing{
  0%,35%{transform:scale(1);opacity:.78}
  78%,100%{transform:scale(1.045);opacity:0}
}
@keyframes moxtonIconPop{
  0%,100%{transform:scale(1)}
  48%{transform:scale(1.12)}
}
@keyframes moxtonArrowNudge{
  0%,100%{transform:translateX(0);opacity:.72}
  48%{transform:translateX(4px);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .heroRecommendation,
  .heroRecommendation::after,
  .heroRecommendation>svg:first-child,
  .heroRecommendation>svg:last-child{animation:none!important;transform:none!important}
}


/* ===== 29 Aug 2026 · ALI MEETING READY ASSIST PASS v28 ===== */
/* Larger readable PW4E Assist across phones/tablets/laptops, centred controls, stronger focus blur. */
.assistClose,.assistBack,.assistSend{display:grid!important;place-items:center!important;padding:0!important;line-height:0!important}
.assistClose svg,.assistBack svg,.assistSend svg{display:block!important;margin:auto!important;position:static!important;transform:none!important}
.assistFaqTarget{animation:assistFaqTargetPulse 1.7s ease both!important;scroll-margin-top:120px!important}
@keyframes assistFaqTargetPulse{0%,100%{box-shadow:0 16px 40px rgba(8,34,38,.08),0 0 0 5px rgba(143,232,197,.07)}35%{box-shadow:0 20px 48px rgba(8,34,38,.12),0 0 0 8px rgba(42,198,207,.16)}}

@media (max-width:600px){
  .assistBackdrop{background:rgba(2,13,17,.36)!important;backdrop-filter:blur(17px) saturate(.88)!important;-webkit-backdrop-filter:blur(17px) saturate(.88)!important}
  .assistPanel,.assistPanel.cookieUp{left:6px!important;right:6px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;width:auto!important;max-height:86svh!important;border-radius:27px!important}
  .assistHead{padding:17px 16px 14px!important}
  .assistMark{width:46px!important;height:46px!important;flex-basis:46px!important}
  .assistClose{width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;border-radius:15px!important}
  .assistBack{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;border-radius:14px!important}
  .assistBrand b{font-size:15px!important}.assistBrand small{font-size:10.5px!important}
  .assistMessages{min-height:154px!important;max-height:40svh!important;padding:18px 17px 10px!important;gap:12px!important}
  .assistMessage{padding:14px 15px!important;border-radius:19px!important;max-width:95%!important}
  .assistMessage b{font-size:13px!important}.assistMessage p{font-size:13px!important;line-height:1.62!important}
  .assistSectionLink{font-size:11.5px!important}
  .assistPrompts{padding:6px 17px 13px!important;gap:8px!important}.assistPrompts button{font-size:11.2px!important;padding:10px 12px!important}
  .assistForm{margin:0 12px 12px!important;padding:7px 7px 7px 15px!important;border-radius:19px!important}
  .assistInputWrap input{min-height:52px!important;font-size:17px!important}
  .assistSend{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;flex-basis:52px!important;border-radius:15px!important}
  .assistFoot{padding:1px 16px 16px!important;font-size:9.8px!important}.assistFoot button{font-size:10.5px!important}
}

@media (min-width:601px) and (max-width:1179px){
  .assistBackdrop{background:rgba(2,13,17,.31)!important;backdrop-filter:blur(16px) saturate(.9)!important;-webkit-backdrop-filter:blur(16px) saturate(.9)!important}
  .assistPanel,.assistPanel.cookieUp{left:50%!important;right:auto!important;bottom:24px!important;width:min(650px,calc(100% - 42px))!important;max-height:84svh!important;transform:translateX(-50%)!important;border-radius:30px!important}
  .assistHead{padding:19px 20px 16px!important}.assistMark{width:50px!important;height:50px!important;flex-basis:50px!important}
  .assistClose{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;border-radius:16px!important}
  .assistBack{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important}
  .assistBrand b{font-size:16px!important}.assistBrand small{font-size:11px!important}
  .assistMessages{min-height:170px!important;max-height:42svh!important;padding:20px 21px 12px!important;gap:13px!important}
  .assistMessage{padding:15px 16px!important;max-width:94%!important}.assistMessage b{font-size:13.5px!important}.assistMessage p{font-size:13.5px!important;line-height:1.62!important}
  .assistPrompts{padding:6px 21px 15px!important;gap:9px!important}.assistPrompts button{font-size:11.6px!important;padding:11px 13px!important}
  .assistForm{margin:0 18px 14px!important;padding:7px 7px 7px 16px!important}.assistInputWrap input{min-height:54px!important;font-size:17px!important}
  .assistSend{width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;flex-basis:54px!important;border-radius:16px!important}
  .assistFoot{padding:1px 21px 18px!important;font-size:10px!important}
}

@media (min-width:1180px){
  .assistBackdrop{background:rgba(2,13,17,.27)!important;backdrop-filter:blur(14px) saturate(.92)!important;-webkit-backdrop-filter:blur(14px) saturate(.92)!important}
  .assistPanel,.assistPanel.cookieUp{left:34px!important;right:auto!important;bottom:34px!important;width:min(640px,calc(100% - 68px))!important;max-height:min(780px,80svh)!important;border-radius:30px!important}
  .assistHead{padding:19px 20px 16px!important}.assistMark{width:50px!important;height:50px!important;flex-basis:50px!important}
  .assistClose{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;border-radius:16px!important}
  .assistBack{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important}
  .assistBrand b{font-size:16px!important}.assistBrand small{font-size:11px!important}
  .assistMessages{max-height:420px!important;padding:20px 21px 12px!important;gap:13px!important}
  .assistMessage{padding:15px 16px!important}.assistMessage b{font-size:13.5px!important}.assistMessage p{font-size:13.5px!important;line-height:1.62!important}
  .assistPrompts{padding:6px 21px 15px!important;gap:9px!important}.assistPrompts button{font-size:11.6px!important;padding:11px 13px!important}
  .assistForm{margin:0 18px 14px!important;padding:7px 7px 7px 16px!important}.assistInputWrap input{min-height:54px!important;font-size:17px!important}
  .assistSend{width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important;flex-basis:54px!important;border-radius:16px!important}
  .assistFoot{padding:1px 21px 18px!important;font-size:10px!important}
}

/* ===== 29 Aug 2026 · FINAL PRE-MEETING MODAL + NAV FIX v29 ===== */
/* Robust footer top action, responsive scrollable modals, visible scroll cues,
   and a clear temporary contact-routing message while direct phone/email details are finalised. */

.footerContactPending{color:#8fe8c5!important;font-weight:700!important;letter-spacing:.02em}

/* All dialog surfaces must fit the current viewport and be independently scrollable. */
.modalBack{
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom))!important;
}
.modal{
  max-height:min(88svh,840px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  scroll-padding-top:78px;
  scrollbar-width:thin;
  scrollbar-color:rgba(38,125,120,.26) transparent;
}
.workflowModal{width:min(680px,100%)!important;padding-bottom:30px!important}
.contactModal{width:min(720px,100%)!important;padding-bottom:30px!important}
.contactModal input,.contactModal textarea{font-size:16px!important}
.contactModal textarea{min-height:128px!important;height:128px!important}

.contactHoldingNote{
  margin:14px 0 0;padding:12px 13px;border-radius:14px;
  display:flex;align-items:flex-start;gap:9px;
  color:#476b68;background:linear-gradient(145deg,rgba(143,232,197,.13),rgba(34,211,226,.07));
  border:1px solid rgba(42,168,153,.13);font-size:10.5px;line-height:1.55;
}
.contactHoldingNote svg{flex:0 0 auto;margin-top:1px;color:#278e83}

.modalScrollHint{display:none}
@media (max-width:1100px), (max-height:900px){
  .modalScrollHint{
    display:inline-flex;align-items:center;justify-content:center;
    position:sticky;top:0;z-index:4;
    margin:0 0 10px;padding:9px 12px;border-radius:999px;
    background:linear-gradient(135deg,rgba(39,142,131,.16),rgba(34,211,226,.08));
    border:1px solid rgba(39,142,131,.18);
    color:#255f59;font:800 9.5px/1 'Manrope',sans-serif;letter-spacing:.05em;
    box-shadow:0 8px 18px rgba(6,40,44,.07);
  }
}

@media(max-width:700px){
  .modalBack{place-items:start center!important;padding:10px 8px max(12px,env(safe-area-inset-bottom))!important}
  .modal{
    width:100%!important;max-width:100%!important;max-height:calc(100svh - 20px)!important;
    margin:0!important;padding:30px 20px 26px!important;border-radius:24px!important;
  }
  .workflowModal,.contactModal{width:100%!important;max-width:100%!important}
  .modalClose{right:14px!important;top:14px!important;z-index:5!important}
  .workflowIcon{margin-top:30px!important}
  .workflowPoints{gap:7px!important}
  .workflowPoints>div{padding:12px 13px!important}
  .demoNote{margin-top:14px!important}
  .contactModal h3{padding-right:52px!important;font-size:30px!important;line-height:1.08!important}
  .contactModal>p{font-size:13px!important;line-height:1.58!important}
  .contactHoldingNote{font-size:10.5px!important}
  .formGrid{gap:12px!important}
  .fieldLabel span{font-size:11px!important}
  .contactModal input{min-height:52px!important;padding:14px 13px!important}
  .contactModal textarea{min-height:136px!important;height:136px!important;padding:14px 13px!important}
  .contactModal .primary.full{min-height:54px!important;margin-bottom:2px!important}
}

@media (min-width:701px) and (max-width:1100px){
  .modal{max-height:min(84svh,760px)!important}
  .workflowModal{width:min(720px,calc(100% - 40px))!important}
  .contactModal{width:min(760px,calc(100% - 40px))!important}
}


/* ===== 29 Aug 2026 · SAFARI / CHROME MOBILE CHROME FIX v33 ===== */
/* Safari 26 derives its toolbar tint from the page canvas/header rather than reliably
   honoring theme-color alone. Keep the browser-facing canvas dark while preserving
   PW4E's light content sections inside #root. */
html,body{background:#071b20!important}
#root{background:var(--paper)}

/* The first fixed element now attaches to the viewport top with a brand-dark 18px cap.
   The nav itself stays in exactly the same visual position. */
.navWrap{top:0!important;padding-top:18px!important}

/* Keep the Designed for audience strip clean and distinct from the dark hero.
   Safari/Chrome tint handling stays on the page canvas/header; the content section itself remains white. */
@media (max-width:600px) and (orientation:portrait){
  .logoStrip{
    height:auto!important;
    min-height:154px!important;
    padding:17px 14px 18px!important;
    align-items:center!important;
    background:#fff!important;
    border-bottom:0!important;
    box-shadow:inset 0 1px 0 rgba(8,34,38,.05)!important;
  }
}

/* Preserve dark browser tint on compact landscape / tablet WebKit too. */
@media (orientation:landscape) and (max-height:620px){
  html,body{background:#071b20!important}
}


/* ===== 29 Aug 2026 · MOXTON ASSURANCE MODAL v35 =====
   Keep the independent education recommendation centred and prominent on every viewport.
   PW4E Assist deliberately recedes behind the recommendation while it is open. */
.modalBack.moxtonBack{
  z-index:98!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  justify-content:center!important;
  min-height:100dvh!important;
  padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom))!important;
  background:rgba(2,15,18,.58)!important;
  backdrop-filter:blur(18px) saturate(.88)!important;
  -webkit-backdrop-filter:blur(18px) saturate(.88)!important;
  overflow:auto!important;
}
.moxtonModal{
  width:min(680px,calc(100vw - 28px))!important;
  max-width:680px!important;
  max-height:min(82dvh,760px)!important;
  margin:auto!important;
  overflow-y:auto!important;
  border:1.5px solid rgba(145,232,197,.72)!important;
  box-shadow:0 36px 110px rgba(0,0,0,.48),0 0 0 1px rgba(145,232,197,.12),0 0 0 0 rgba(145,232,197,0)!important;
  animation:moxtonAssurancePulse 2.25s ease-in-out infinite!important;
  transform:none!important;
}
.assistLauncher.moxtonBehind{
  opacity:.12!important;
  filter:blur(2px) saturate(.7)!important;
  pointer-events:none!important;
  transform:scale(.94)!important;
  transition:opacity .22s ease,filter .22s ease,transform .22s ease!important;
}
@keyframes moxtonAssurancePulse{
  0%,100%{border-color:rgba(145,232,197,.50);box-shadow:0 36px 110px rgba(0,0,0,.48),0 0 0 1px rgba(145,232,197,.10),0 0 0 0 rgba(145,232,197,0)}
  50%{border-color:rgba(145,232,197,.96);box-shadow:0 36px 110px rgba(0,0,0,.48),0 0 0 1px rgba(145,232,197,.18),0 0 0 7px rgba(145,232,197,.10)}
}
@media(max-width:700px){
  .modalBack.moxtonBack{
    place-items:center!important;
    padding:max(14px,env(safe-area-inset-top)) 10px max(14px,env(safe-area-inset-bottom))!important;
  }
  .moxtonModal{
    width:calc(100vw - 22px)!important;
    max-width:none!important;
    max-height:78dvh!important;
    padding:30px 22px 26px!important;
    border-radius:25px!important;
  }
  .moxtonModal h3{font-size:clamp(30px,8vw,38px)!important;line-height:1.08!important;padding-right:48px!important}
  .moxtonModal blockquote{font-size:15px!important;line-height:1.55!important;margin:17px 0 18px!important}
  .moxtonModal cite{font-size:9.5px!important;line-height:1.45!important}
}
@media(min-width:701px) and (max-width:1100px){
  .moxtonModal{width:min(720px,calc(100vw - 56px))!important;max-height:80dvh!important;padding:38px!important}
}
@media(prefers-reduced-motion:reduce){
  .moxtonModal{animation:none!important}
  .assistLauncher.moxtonBehind{transition:none!important}
}

/* Sep 2026 policy alignment */
.policyBody ul{margin:10px 0 18px;padding-left:22px;color:inherit}.policyBody li{margin:0 0 8px;line-height:1.55}.footerContactPending{text-decoration:none}.footerContactPending:hover{text-decoration:underline}


/* ===== 11 Sep 2026 · CUSTOMER-FACING CONTACT PASS ===== */
.footerDomainStatic{cursor:default!important;text-decoration:none!important;pointer-events:none!important}
.footerDirectContact{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:2px}
.footerDirectContact a{display:inline-flex!important;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;border:1px solid rgba(145,232,197,.16);background:rgba(145,232,197,.055);color:#bceee0!important;text-decoration:none!important;font:700 10px/1.2 'Manrope',sans-serif;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.footerDirectContact a:hover,.footerDirectContact a:focus-visible{transform:translateY(-1px);border-color:rgba(145,232,197,.36);background:rgba(145,232,197,.10)}
.footerDirectContact svg{color:#71ded5;flex:0 0 auto}
.contactDirectCard{margin:18px 0 14px;padding:14px;border-radius:20px;border:1px solid rgba(39,142,131,.16);background:linear-gradient(145deg,rgba(39,142,131,.08),rgba(34,211,226,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.contactDirectIntro{display:flex;align-items:center;gap:10px;margin-bottom:11px;color:#12393c}
.contactDirectIntro>svg{width:36px;height:36px;padding:9px;border-radius:12px;background:rgba(145,232,197,.18);color:#278e83;flex:0 0 36px}
.contactDirectIntro span{display:flex;flex-direction:column;gap:2px}.contactDirectIntro b{font:800 12px/1.2 'Manrope',sans-serif}.contactDirectIntro small{font:500 9.5px/1.35 'Manrope',sans-serif;color:#6c8180}
.contactDirectActions{display:grid;grid-template-columns:.78fr 1.22fr;gap:8px}
.contactDirectAction{min-width:0;display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:14px;border:1px solid rgba(39,142,131,.13);background:rgba(255,255,255,.72);text-decoration:none!important;color:#0d3438!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.contactDirectAction:hover,.contactDirectAction:focus-visible{transform:translateY(-1px);border-color:rgba(39,142,131,.28);box-shadow:0 8px 22px rgba(7,48,52,.07)}
.contactDirectAction>svg{color:#278e83;flex:0 0 auto}.contactDirectAction span{min-width:0;display:flex;flex-direction:column;gap:2px}.contactDirectAction small{font:800 8px/1 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#78908d}.contactDirectAction b{font:750 10px/1.25 'Manrope',sans-serif;overflow-wrap:anywhere}
@media(max-width:650px){.contactDirectCard{margin:14px 0 12px;padding:12px;border-radius:17px}.contactDirectActions{grid-template-columns:1fr}.contactDirectAction{padding:10px 11px}.footerDirectContact{align-items:flex-start;flex-direction:column}.footerDirectContact a{max-width:100%;overflow-wrap:anywhere}}


/* v39 — customer-facing form readability: explicitly keep light form controls legible in iOS Safari/Chrome. */
.contactModal,
.contactModal form,
.contactModal .formGrid{
  color-scheme: light;
}
.contactModal input:not([type="hidden"]),
.contactModal textarea,
.contactModal select{
  color:#10272a !important;
  -webkit-text-fill-color:#10272a !important;
  caret-color:#12b9c8 !important;
  background:#ffffff !important;
  opacity:1 !important;
}
.contactModal input:not([type="hidden"])::placeholder,
.contactModal textarea::placeholder{
  color:#8a9899 !important;
  -webkit-text-fill-color:#8a9899 !important;
  opacity:1 !important;
}
.contactModal input:not([type="hidden"]):focus,
.contactModal textarea:focus,
.contactModal select:focus{
  color:#10272a !important;
  -webkit-text-fill-color:#10272a !important;
  background:#ffffff !important;
}
.contactModal input:-webkit-autofill,
.contactModal input:-webkit-autofill:hover,
.contactModal input:-webkit-autofill:focus,
.contactModal textarea:-webkit-autofill,
.contactModal textarea:-webkit-autofill:hover,
.contactModal textarea:-webkit-autofill:focus,
.contactModal select:-webkit-autofill,
.contactModal select:-webkit-autofill:hover,
.contactModal select:-webkit-autofill:focus{
  -webkit-text-fill-color:#10272a !important;
  caret-color:#12b9c8 !important;
  -webkit-box-shadow:0 0 0 1000px #f8fbf9 inset !important;
  box-shadow:0 0 0 1000px #f8fbf9 inset !important;
  transition:background-color 9999s ease-out 0s;
}

/* Harden light enquiry controls against browser/OS dark-mode text inheritance. */
.contactModal input:not([type="hidden"]):not([type="range"]),
.contactModal textarea,
.contactModal select{
  -webkit-appearance:none!important;
  appearance:none!important;
  color-scheme:light!important;
  color:#10272a!important;
  -webkit-text-fill-color:#10272a!important;
  background-color:#fff!important;
  font-family:'DM Sans',sans-serif!important;
}
.contactModal input:not([type="hidden"]):not([type="range"]):disabled,
.contactModal textarea:disabled,
.contactModal select:disabled{
  opacity:.72!important;
  color:#42595b!important;
  -webkit-text-fill-color:#42595b!important;
}
.contactModal input[type="number"]::-webkit-inner-spin-button,
.contactModal input[type="number"]::-webkit-outer-spin-button{opacity:1}

/* ===== 15 Sep 2026 · BRAND LOCKUP + TESTIMONIAL + FAQ FINDER ===== */
.heroRecommendationStatic{cursor:default!important;user-select:none!important}
.heroRecommendationStatic>svg:last-child{color:var(--mint)!important;opacity:.95!important;animation:none!important;transform:none!important}

.moxtonTestimonialSection{
  position:relative;
  padding:76px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 18%,rgba(34,211,226,.13),transparent 30%),
    radial-gradient(circle at 12% 88%,rgba(145,232,197,.10),transparent 34%),
    linear-gradient(145deg,#071b20 0%,#0a3036 56%,#08242a 100%)!important;
  border-top:1px solid rgba(145,232,197,.12);
  border-bottom:1px solid rgba(145,232,197,.12);
}
.moxtonTestimonialSection::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(90deg,transparent,black 18%,black 82%,transparent);
}
.moxtonTestimonialSection .moxtonQuote{position:relative;z-index:1;max-width:1120px;align-items:center}
.moxtonTestimonialSection .quoteMark{
  background:linear-gradient(145deg,rgba(145,232,197,.20),rgba(34,211,226,.10));
  color:#91e8c5;border:1px solid rgba(145,232,197,.22);
  box-shadow:0 20px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08)
}
.moxtonQuoteCopy{min-width:0}
.moxtonQuoteCopy .kicker{color:#91e8c5!important;margin-bottom:9px;display:block}
.moxtonQuoteCopy h2{margin:0 0 14px;color:#fff;font:700 clamp(23px,2.5vw,34px)/1.1 'Manrope',sans-serif;letter-spacing:-.035em}
.moxtonTestimonialSection .moxtonQuote blockquote{margin:0 0 18px;color:#dbeae7;font:500 clamp(18px,2.1vw,28px)/1.42 'Manrope',sans-serif;letter-spacing:-.02em}
.moxtonTestimonialSection .moxtonQuote cite{color:#9ec2bd;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase}

.faqTools{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:14px 18px;align-items:center;margin:0 0 28px}
.faqSearch{min-width:0;height:54px;display:flex;align-items:center;gap:10px;padding:0 14px 0 16px;border-radius:17px;border:1px solid rgba(8,34,38,.12);background:rgba(247,251,248,.96);box-shadow:0 12px 34px rgba(9,42,45,.055),inset 0 1px 0 rgba(255,255,255,.85);color:#278e83;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.faqSearch:focus-within{border-color:rgba(39,142,131,.42);background:#fff;box-shadow:0 14px 38px rgba(9,42,45,.075),0 0 0 3px rgba(34,211,226,.08)}
.faqSearch input{width:100%;min-width:0;border:0!important;outline:0!important;background:transparent!important;color:#153236!important;-webkit-text-fill-color:#153236!important;font:650 13px/1.2 'Manrope',sans-serif!important;appearance:none!important;-webkit-appearance:none!important;color-scheme:light!important}
.faqSearch input::placeholder{color:#8b9a98!important;-webkit-text-fill-color:#8b9a98!important;opacity:1}
.faqSearch input::-webkit-search-cancel-button{display:none}
.faqSearch>button{width:32px;height:32px;flex:0 0 32px;border:0;border-radius:10px;display:grid;place-items:center;background:rgba(39,142,131,.08);color:#377a73;cursor:pointer}
.faqTabs{grid-column:1/-1;display:flex;gap:8px;overflow-x:auto;padding:1px 1px 7px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.faqTabs::-webkit-scrollbar{display:none}
.faqTabs button{flex:0 0 auto;border:1px solid rgba(39,142,131,.17);border-radius:999px;background:#fff;color:#52706e;padding:10px 14px;font:750 10.5px/1 'Manrope',sans-serif;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.faqTabs button:hover,.faqTabs button:focus-visible{transform:translateY(-1px);border-color:rgba(39,142,131,.34);color:#1d625c}
.faqTabs button.active{color:#07262b;background:linear-gradient(135deg,#91e8c5,#46d8dc);border-color:transparent;box-shadow:0 8px 22px rgba(39,142,131,.17)}
.faqResultMeta{justify-self:end;color:#859794;font:700 10px/1.2 'Manrope',sans-serif;white-space:nowrap}
.faqCategories.filtered{gap:24px}
.faqEmpty{min-height:170px;border:1px dashed rgba(39,142,131,.22);border-radius:22px;background:linear-gradient(145deg,#fbfdfb,#f5faf7);display:grid;place-items:center;align-content:center;gap:8px;color:#62807d;text-align:center;padding:26px}
.faqEmpty svg{color:#278e83}.faqEmpty b{color:#173b3e;font:800 14px/1.2 'Manrope',sans-serif}.faqEmpty span{font-size:11.5px}

@media(max-width:700px){
  .moxtonTestimonialSection{padding:52px 0}
  .moxtonTestimonialSection .moxtonQuote{grid-template-columns:1fr!important;gap:16px!important}
  .moxtonTestimonialSection .quoteMark{width:58px!important;height:58px!important;border-radius:17px!important;font-size:48px!important}
  .moxtonQuoteCopy h2{font-size:25px}
  .moxtonTestimonialSection .moxtonQuote blockquote{font-size:17px;line-height:1.5}
  .faqTools{grid-template-columns:1fr;gap:10px;margin-bottom:22px}
  .faqSearch{height:50px;border-radius:16px}
  .faqTabs{grid-column:1;gap:7px;margin-right:-18px;padding-right:18px}
  .faqTabs button{padding:10px 13px;font-size:10px}
  .faqResultMeta{justify-self:start;font-size:9.5px}
}


/* ===== 15 Sep 2026 · v41 LOCKUP / MOXTON MODAL / MOBILE FAQ QA =====
   Keep all of the previously tuned responsive widths. Only prevent artwork distortion. */
.panelwiseBrandImage .panelwiseLockupImage,
.loaderPanelWiseLockup{
  width:100%!important;
  height:auto!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:left center!important;
}

/* Recommendation is again an interactive assurance cue. Modal remains centred and blurred. */
.heroRecommendation{cursor:pointer!important}
.heroRecommendation>svg:last-child{color:var(--mint)!important;opacity:.92!important}
.modalBack.moxtonBack{background:rgba(2,15,18,.62)!important;backdrop-filter:blur(19px) saturate(.9)!important;-webkit-backdrop-filter:blur(19px) saturate(.9)!important}
.moxtonModal .kicker{color:#91e8c5!important}

/* iOS Safari zooms focused controls below 16px. Keep the FAQ finder stable on phones/tablets. */
@media(max-width:900px){
  .faqSearch input{font-size:16px!important;line-height:1.25!important}
  .faqSearch{touch-action:manipulation!important}
}