/* PWP Private Clients · site stylesheet, design round two
   Direction D (design/direction.md), then Adam's steer of 19 Oct night: the
   logo's square edges throughout, the red light animated around the dark
   blocks, our own drawn icons instead of stock images, and no highlight on
   placeholders that a visitor can see. White page, Inter, dark navy blocks,
   the logo's navy and red as the accents, its overlapping squares as corner
   brackets, bullets, numbering and the favicon. Motion is slow and switched
   off for anyone who asks for reduced motion. */
:root{
  --white:#FFFFFF; --ink:#101014; --ink-2:#4F5560; --navy:#141829; --navy-2:#1B2033; --navy-3:#0F1220;
  --brand:#324160; --brand-2:#7A8DB0; --red:#CF3E38; --red-2:#B33530; --red-bright:#E0493F;
  --grey:#F5F5F5; --grey-2:#ECEDF1; --bluegrey:#E9ECF2;
  --on-dark:#D0D1DB; --rule:#DCDEE4; --rule-d:rgba(255,255,255,.1); --gold:#E3A52F;
  --body:'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw:1160px; --gutter:clamp(1rem,3.5vw,2.25rem);
  --r-block:4px; --r-card:3px; --r-btn:3px;
}
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--body);color:var(--ink);background:var(--white);line-height:1.55;font-size:1.0625rem;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block;height:auto}
h1,h2,h3{line-height:1.1;letter-spacing:-.025em;font-weight:800}
h1,h2{text-wrap:balance}
h1{font-size:clamp(2.2rem,4.8vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.5rem)}
h3{font-size:1.2rem;letter-spacing:-.015em;font-weight:700}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:.6rem 1rem;z-index:100;text-decoration:none;font-weight:600}
.skip:focus{left:8px}
/* placeholders are plain here; the studio preview colours them */
.ph{color:inherit}
.tag{display:inline-block;color:var(--brand);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.7rem}
.tag.light{color:var(--on-dark)}
/* every section title: the label above, a short red bar beneath */
.sec-head h2::after,.text-sec h2::after{content:"";display:block;width:40px;height:3px;background:var(--red);margin:.9rem 0 0}
.sec-head:not(.left) h2::after{margin-left:auto;margin-right:auto}
.rv .sec-head h2::after,.rv .text-sec h2::after{transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1) .25s}
.sec-head:not(.left) h2::after{transform-origin:center}
.rv.on .sec-head h2::after,.rv.on .text-sec h2::after{transform:none}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;padding:.8rem 1.5rem;border-radius:var(--r-btn);font-weight:600;text-decoration:none;font-size:1rem;border:1.5px solid transparent;cursor:pointer;font-family:var(--body);transition:background .15s,border-color .15s,transform .15s}
.btn svg{width:18px;height:18px}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-2)}
.btn-red::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:28%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-120%) skewX(-18deg);transition:transform .6s ease}
.btn-red:hover::after{transform:translateX(560%) skewX(-18deg)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:#000}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.link{color:var(--brand);font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline;text-underline-offset:3px}
section{padding:clamp(1.4rem,3.2vw,2.4rem) 0}
section:first-of-type{padding-top:0}
.sec-head{text-align:center;max-width:44rem;margin:0 auto 2rem}
.sec-head p{color:var(--ink-2);margin-top:1rem;font-size:1.1rem}
.sec-head.left{text-align:left;margin-left:0}
.sec-head .btn{margin-top:1.2rem}
.p{color:var(--ink);font-size:1.08rem;line-height:1.65;margin-bottom:1.1rem}

/* ---------- motion: the glow, the travelling light, the drawn mark, reveals ---------- */
@keyframes breathe{from{opacity:.5;transform:scale(1)}to{opacity:1;transform:scale(1.14)}}
@keyframes orbit{to{--a:360deg}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{0%,100%{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1.6)}}
.glow{position:absolute;left:-12%;bottom:-30%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(207,62,56,.6),rgba(207,62,56,.2) 45%,transparent 72%);filter:blur(24px);pointer-events:none;z-index:0;animation:breathe 7s ease-in-out infinite alternate}
.glow.small{width:44%;left:-10%;bottom:-26%;z-index:-1;animation-duration:9s}
.glow-c{position:absolute;left:-20%;bottom:-20%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,80,66,.8),rgba(207,62,56,.3) 45%,transparent 72%);filter:blur(14px);mix-blend-mode:screen;pointer-events:none;animation:breathe 5.5s ease-in-out infinite alternate}
.card3:nth-child(2) .glow-c{animation-delay:-1.8s}
.card3:nth-child(3) .glow-c{animation-delay:-3.7s}
/* A red light that travels around the edge of a dark block: a conic gradient
   masked down to a 2px frame, its start angle animated. Browsers without
   @property show a still frame. */
.lit{position:relative;isolation:isolate}
.lit::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--a),transparent 0 66%,rgba(207,62,56,.15) 74%,rgba(224,73,63,.95) 83%,rgba(255,140,130,.9) 86%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:orbit 11s linear infinite}
.tile.lit::after{animation-duration:7s}
.card3:nth-child(2) .tile.lit::after{animation-delay:-2.3s}
.card3:nth-child(3) .tile.lit::after{animation-delay:-4.6s}
.how-block.lit::after{animation-delay:-3s}
.contact-block.lit::after{animation-delay:-6s}
/* corner brackets, the logo's geometry: a light bracket top-left, red bottom-right */
.corners{position:absolute;inset:14px;pointer-events:none;z-index:2}
.corners::before,.corners::after{content:"";position:absolute;width:22px;height:22px}
.corners::before{left:0;top:0;border-top:2px solid var(--brand-2);border-left:2px solid var(--brand-2)}
.corners::after{right:0;bottom:0;border-bottom:2px solid var(--red);border-right:2px solid var(--red)}
.six a .corners,.q .corners,.sit .corners{inset:10px}
.six a .corners::before,.q .corners::before,.sit .corners::before{border-color:var(--brand);opacity:.55}
.six a .corners::before,.six a .corners::after,.q .corners::before,.q .corners::after{width:14px;height:14px}
/* reveals: added by script, so nothing is hidden without it. A revealed group
   brings its children in one after another, with a little lift and scale. */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}
.rv .three>*,.rv .six>a,.rv .steps>.step,.rv .quotes>.q,.rv .sit li,.rv .faq details,.rv .creds>div,.rv .acards>a{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.on .three>*,.rv.on .six>a,.rv.on .steps>.step,.rv.on .quotes>.q,.rv.on .sit li,.rv.on .faq details,.rv.on .creds>div,.rv.on .acards>a{opacity:1;transform:none}
.rv.on :is(.three,.six,.steps,.quotes,.creds,.acards)>:nth-child(1),.rv.on .sit li:nth-child(1),.rv.on .faq details:nth-child(1){transition-delay:.05s}
.rv.on :is(.three,.six,.steps,.quotes,.creds,.acards)>:nth-child(2),.rv.on .sit li:nth-child(2),.rv.on .faq details:nth-child(2){transition-delay:.15s}
.rv.on :is(.three,.six,.steps,.quotes,.creds,.acards)>:nth-child(3),.rv.on .sit li:nth-child(3),.rv.on .faq details:nth-child(3){transition-delay:.25s}
.rv.on :is(.six)>:nth-child(4),.rv.on .sit li:nth-child(4),.rv.on .faq details:nth-child(4){transition-delay:.35s}
.rv.on :is(.six)>:nth-child(5),.rv.on .sit li:nth-child(5),.rv.on .faq details:nth-child(5){transition-delay:.45s}
.rv.on :is(.six)>:nth-child(6),.rv.on .sit li:nth-child(6){transition-delay:.55s}
.rv.on .sit li:nth-child(7){transition-delay:.65s}
.rv.on .sit li:nth-child(8){transition-delay:.75s}
/* the step numbers light up in turn once the block is on screen */
.rv .step .n{background:var(--navy-3);color:var(--on-dark);transition:background .4s ease,color .4s ease,box-shadow .4s ease}
.rv.on .step:nth-child(1) .n{transition-delay:.5s}
.rv.on .step:nth-child(2) .n{transition-delay:.9s}
.rv.on .step:nth-child(3) .n{transition-delay:1.3s}
.rv.on .step .n{background:var(--red);color:#fff}
.rv .steps::before{transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .5s}
.rv.on .steps::before{transform:none}
/* the hero copy arrives in order on load */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* only with script running, and never for long: content must not wait on an animation */
.js:not(.settled) .hero-copy>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>:nth-child(1){animation-delay:.05s}
.hero-copy>:nth-child(2){animation-delay:.15s}
.hero-copy>:nth-child(3){animation-delay:.3s}
.hero-copy>:nth-child(4){animation-delay:.45s}
.hero-copy>:nth-child(5){animation-delay:.6s}
/* hovers: lift, and the bracket corners draw out */
.six a,.q,.card3 .tile,.acard{transition:transform .25s ease,box-shadow .25s ease,background .15s}
.six a:hover,.acard:hover{box-shadow:0 14px 34px -18px rgba(16,24,41,.35)}
.card3:hover .tile{box-shadow:0 18px 40px -20px rgba(207,62,56,.45)}
.corners::before,.corners::after{transition:width .3s ease,height .3s ease}
a:hover>.corners::before,a:hover>.corners::after,.card3:hover .corners::before{width:30px;height:30px}
.faq summary::after{transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(180deg)}
.btn-ghost:hover{transform:translateY(-1px)}
.icon-pulse .ico .r,.icon-pulse .ico .rf{filter:drop-shadow(0 0 6px rgba(224,73,63,.8))}
.tile:hover .ico{transform:translateY(-3px)}
.tile .ico{transition:transform .3s ease}
.mark{position:absolute;pointer-events:none;line-height:0}
.mark svg{width:100%;height:auto;display:block}
.mark-hero{right:-3%;top:-12%;width:min(44%,400px);opacity:.09;z-index:0}
.mark-foot{right:2%;bottom:-10%;width:min(28%,240px);opacity:.08;z-index:-1}
.sq{position:relative;display:inline-block;flex:0 0 auto;width:13px;height:13px;border:2.5px solid var(--red)}
.sq::before{content:"";position:absolute;left:-7px;top:-7px;width:9px;height:9px;border-top:2.5px solid var(--brand);border-left:2.5px solid var(--brand)}
@media (prefers-reduced-motion:reduce){
  .glow,.glow-c,.lit::after,.nodes i{animation:none}
  .glow,.glow-c{opacity:.8}
  .mark-draw path{stroke-dashoffset:0 !important;animation:none}
  .rv,.rv *{opacity:1 !important;transform:none !important;transition:none !important}
  .hero-copy>*{animation:none}
  .btn-red::after{display:none}
}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);transition:box-shadow .2s}
.site-header.scrolled{box-shadow:0 4px 18px rgba(16,24,41,.07)}
.hd{display:flex;align-items:center;gap:1.4rem;min-height:76px}
.brand{display:block;line-height:0}
.logo{height:46px;width:auto}
nav.main{margin-left:auto;display:flex;gap:1.4rem}
nav.main a{text-decoration:none;font-size:.95rem;font-weight:500;color:var(--ink-2);padding:.3rem 0}
nav.main a:hover,nav.main a[aria-current]{color:var(--ink)}
nav.main a[aria-current]{box-shadow:inset 0 -2px 0 var(--red)}
.hd-right{display:flex;align-items:center;gap:1rem}
.hd-phone{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;font-weight:700;color:var(--red);white-space:nowrap}
.hd-phone svg{width:18px;height:18px}
.menu{display:none;margin-left:auto;min-height:44px;padding:0 1rem;background:#fff;border:1.5px solid var(--ink);border-radius:var(--r-btn);font:inherit;font-weight:600;color:var(--ink);cursor:pointer}
.drawer{display:none;border-top:1px solid var(--rule);background:#fff}
.drawer.open{display:block}
.drawer a{display:block;padding:.9rem var(--gutter);border-bottom:1px solid var(--rule);text-decoration:none;font-weight:600}
.drawer a.drawer-call{color:var(--red)}

/* ---------- hero ---------- */
/* section.hero, not .hero: the first-section rule above would otherwise win and zero it */
section.hero{padding-top:clamp(1.25rem,4.4vw,3.5rem)}
.hero-block{position:relative;overflow:hidden;border-radius:var(--r-block);background:var(--navy);color:#fff;padding:clamp(2.6rem,6vw,4.6rem) clamp(1.4rem,5vw,3.8rem);isolation:isolate}
/* a fine square grid in place of the stock photograph */
.hero-block::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;background-position:center}
.hero-block>*:not(.glow):not(.mark):not(.corners):not(.nodes){position:relative;z-index:1}
.hero-block.home{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:2rem;align-items:center}
.hero-block h1{margin:0 0 1.1rem;max-width:18ch}
.hero-block .lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--on-dark);max-width:38rem;margin:0 0 1.8rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-note{margin-top:1.1rem;font-size:.92rem;color:var(--on-dark)}
.hero-mark{display:flex;justify-content:flex-end;align-items:center}
.mark-draw{width:min(100%,300px);height:auto;overflow:visible}
.js:not(.settled) .mark-draw path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s cubic-bezier(.4,.6,.2,1) forwards}
.mark-draw .d1{animation-delay:.3s}
.mark-draw .d2{animation-delay:1s}
.mark-draw .d3{animation-delay:1.7s}
.nodes{position:absolute;inset:0;pointer-events:none;z-index:0}
.nodes i{position:absolute;width:6px;height:6px;background:var(--red-bright);box-shadow:0 0 12px 2px rgba(224,73,63,.6);animation:pulse 4s ease-in-out infinite;z-index:0}
.nodes i:nth-child(1){left:9%;top:18%;animation-delay:0s}
.nodes i:nth-child(2){left:38%;top:82%;animation-delay:-1.3s}
.nodes i:nth-child(3){left:62%;top:12%;animation-delay:-2.6s}
.nodes i:nth-child(4){left:88%;top:70%;animation-delay:-3.4s}
/* inner pages: text left, the drawn icon tile right */
.hero-page .hero-block{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;padding:clamp(2.2rem,5vw,3.6rem) clamp(1.4rem,5vw,3.6rem)}
.hero-page .hero-block.has-img{grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr)}
.hero-page .hero-block h1{max-width:22ch;font-size:clamp(1.9rem,4vw,3rem)}
.hero-page .hero-block .lead{max-width:40rem;margin-bottom:1.6rem}
.hero-img{justify-self:end;width:min(100%,300px)}
.hero-img img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-card)}
.hero-page .mark-hero{right:auto;left:46%;top:-30%;width:min(36%,320px);opacity:.06}

/* ---------- the drawn icon tiles ---------- */
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;aspect-ratio:1;width:100%;border-radius:var(--r-card);background:linear-gradient(160deg,var(--navy-2),var(--navy-3));overflow:hidden;isolation:isolate;padding:12%}
.tile .ico{width:56%;height:auto;position:relative;z-index:1;filter:drop-shadow(0 0 10px rgba(224,73,63,.18))}
.ico .r{stroke:var(--red-bright)}
.ico .rf{fill:var(--red-bright);stroke:none}
.tile::before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px}
.hero-img .tile{width:100%}

/* ---------- notice ---------- */
.notice{padding-top:0}
.notice-line{display:flex;gap:.9rem;align-items:flex-start;border:1px solid var(--rule);border-left:3px solid var(--red);border-radius:var(--r-card);padding:.9rem 1.1rem;font-size:.95rem;color:var(--ink-2);background:#fff}
.notice-line .sq{margin:.35rem 0 0 .4rem}
.notice-line span{flex:1}

/* ---------- three cards ---------- */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card3{text-align:center;text-decoration:none;display:block}
.card3 .tile{margin-bottom:1rem;transition:transform .25s ease}
.card3:hover .tile{transform:translateY(-4px)}
.card-img{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;margin-bottom:1rem;background:var(--navy);isolation:isolate}
.card3 img{width:100%;aspect-ratio:1;object-fit:cover}
.card3 h3{margin-bottom:.35rem}
.card3 p{color:var(--ink-2);font-size:1rem;margin-bottom:.5rem;padding:0 .5rem}
.card3:hover h3{text-decoration:underline;text-underline-offset:3px}

/* ---------- checklist ---------- */
.sit{position:relative;background:var(--grey);border-radius:var(--r-block);padding:clamp(1.6rem,4vw,2.6rem)}
.sit .sec-head{margin-bottom:1.4rem}
.sit ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem}
.sit li{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem 0;border-bottom:1px solid var(--rule);font-size:1.02rem}
.sit li .sq{margin:.45rem .35rem 0 .3rem}
.sit p.note{margin-top:1.3rem;color:var(--ink-2);text-align:center;max-width:46rem;margin-left:auto;margin-right:auto}

/* ---------- six cards ---------- */
.six{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.six a{position:relative;display:block;background:var(--grey);border-radius:var(--r-card);padding:1.5rem 1.5rem 1.4rem;text-decoration:none;transition:background .15s,transform .2s}
.six a:hover{background:var(--grey-2);transform:translateY(-3px)}
.six .n{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;color:var(--red);letter-spacing:.08em;margin-bottom:.7rem}
.six .n::before{content:"";width:9px;height:9px;border:2px solid var(--red)}
.six h3{margin-bottom:.35rem}
.six p{color:var(--ink-2);font-size:.97rem;margin-bottom:.6rem}
.six span.more{font-size:.9rem;font-weight:600;color:var(--brand)}

/* ---------- steps ---------- */
.how-block,.cta-block,.contact-block,.foot-block{position:relative;overflow:hidden;isolation:isolate;background:var(--navy);color:#fff;border-radius:var(--r-block)}
.how-block{padding:clamp(2.2rem,5vw,3.6rem) clamp(1.4rem,4vw,3rem)}
.how-block .sec-head p{color:var(--on-dark)}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.steps::before{content:"";position:absolute;left:8%;right:8%;top:calc(1.5rem + 19px);height:2px;background:linear-gradient(90deg,transparent,var(--red) 20%,var(--red) 80%,transparent);opacity:.5}
.step{position:relative;background:var(--navy-2);border:1px solid var(--rule-d);border-radius:var(--r-card);padding:1.5rem}
.step .n{width:38px;height:38px;background:var(--red);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;box-shadow:0 0 0 6px var(--navy-2)}
.step h3{margin-bottom:.4rem;color:#fff}
.step p{color:var(--on-dark);font-size:.98rem}

/* ---------- reviews ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.q{position:relative;background:var(--grey);border-radius:var(--r-card);padding:1.6rem 1.5rem 1.4rem;display:flex;flex-direction:column}
.q .stars{color:var(--gold);letter-spacing:.12em;font-size:.95rem;margin-bottom:.8rem}
.q blockquote{font-size:1.05rem;line-height:1.5;flex:1;margin-bottom:1.2rem}
.q cite{font-style:normal;font-size:.92rem;color:var(--ink-2)}
.q cite b{display:block;color:var(--ink);font-weight:700}

/* ---------- credentials ---------- */
.creds{background:var(--bluegrey);border-radius:var(--r-block);border-left:4px solid var(--brand);padding:1.8rem clamp(1.4rem,4vw,2.6rem);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1.2rem 2.5rem;font-size:.95rem}
.creds .lab{display:block;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand);margin-bottom:.3rem}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:1fr 1.7fr;gap:2rem 3.5rem;align-items:start}
.faq details{background:var(--grey);border-radius:var(--r-card);border-left:3px solid transparent;margin-bottom:.7rem;transition:border-color .2s}
.faq details[open]{border-left-color:var(--red)}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 3rem 1.1rem 1.3rem;font-weight:600;font-size:1.08rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.1rem;top:.85rem;font-size:1.5rem;color:var(--ink);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 1.3rem 1.2rem;color:var(--ink-2)}
.faq-more{margin-top:1rem}

/* ---------- text ---------- */
.text-col{max-width:48rem}
.text-sec h2{margin-bottom:1rem}
.text-link{margin-top:.4rem}

/* ---------- cta ---------- */
.cta-block{padding:clamp(2.2rem,5vw,3.4rem) clamp(1.4rem,4vw,3rem);text-align:center}
.cta-block h2{color:#fff;margin-bottom:.8rem}
.cta-block .lead{color:var(--on-dark);font-size:1.08rem;max-width:38rem;margin:0 auto 1.6rem}
.cta-block .hero-cta{justify-content:center}

/* ---------- contact ---------- */
.contact-block{padding:clamp(2rem,5vw,3.4rem) clamp(1.4rem,4vw,3rem);display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 3.5rem;align-items:start}
.contact-block h1,.contact-block h2{color:#fff;margin-bottom:.8rem}
.contact-block h1{font-size:clamp(1.8rem,3.4vw,2.5rem)}
.contact-block .lead{color:var(--on-dark);font-size:1.08rem;margin-bottom:1.6rem}
.cd{display:grid;gap:.9rem}
.cd div{display:grid;grid-template-columns:7rem 1fr;gap:.5rem;padding-bottom:.9rem;border-bottom:1px solid var(--rule-d)}
.cd .lab{color:var(--on-dark);font-weight:600}
.cd a,.cd span{color:#fff;text-decoration:none;font-weight:600}
.cd .small{display:block;font-weight:400;color:var(--on-dark);font-size:.9rem}
.follow{margin-top:1.4rem;color:var(--on-dark);font-size:.95rem}
.follow a{color:#fff}
form.card,.f-done{position:relative;z-index:3;background:#fff;border-radius:var(--r-card);padding:1.6rem;color:var(--ink)}
.f-done h3{margin-bottom:.5rem}
form label{display:block;font-weight:600;font-size:.95rem;margin:0 0 .35rem}
form label .opt{font-weight:400;color:var(--ink-2)}
form input,form textarea{width:100%;font:inherit;font-size:1.02rem;padding:.8rem .9rem;border:1.5px solid var(--rule);border-radius:var(--r-card);background:#fff;color:var(--ink);margin-bottom:1rem}
form input:focus,form textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
form textarea{min-height:120px;resize:vertical}
form .btn{width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.small{font-size:.88rem;color:var(--ink-2)}
.f-note{margin-top:.8rem}
.f-error,.f-limit{margin-top:.8rem;color:#8e1f0b;font-size:.95rem}
.f-error a,.f-limit a{color:inherit}
form.sent{display:none}

/* ---------- footer ---------- */
footer{padding:1.2rem 0 2rem}
.foot-block{color:var(--on-dark);padding:clamp(2rem,4vw,2.8rem) clamp(1.4rem,4vw,3rem);font-size:.92rem;line-height:1.55;border-top:3px solid var(--red)}
.foot-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem 3rem;margin-bottom:1.8rem}
.foot-cols p{max-width:32rem}
.foot-logo{display:inline-block;background:#fff;border-radius:var(--r-card);padding:.55rem .8rem;margin-bottom:1rem;line-height:0}
.foot-logo img{height:40px;width:auto;display:block}
footer h4{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:.6rem;font-weight:700}
footer ul{list-style:none}
footer li{margin-bottom:.4rem}
footer a{color:#fff;text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:3px}
footer .reg{border-top:1px solid var(--rule-d);padding-top:1.4rem;display:grid;gap:.7rem}
footer .reg .warn{color:#fff;font-weight:600}
/* the site's maker, where the Framer credit used to be: quiet, one line, a four-point star */
.powered{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--rule-d);display:flex;justify-content:flex-end}
.powered a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--on-dark);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75;transition:opacity .2s}
.powered a:hover{opacity:1;text-decoration:none}
.powered .pb-name{color:#fff;font-weight:700}
.powered .pb-mark{width:18px;height:18px;display:block;flex:0 0 auto;transition:filter .3s ease}
.powered a:hover .pb-mark{filter:drop-shadow(0 0 6px rgba(127,216,243,.6))}

/* ---------- articles ---------- */
.acards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.acard{display:block;background:var(--grey);border-radius:var(--r-card);overflow:hidden;text-decoration:none}
.acard-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.acard-img.none{height:6px;background:var(--navy)}
.acard-body{padding:1.2rem 1.3rem 1.3rem}
.acard-meta{font-size:.82rem;color:var(--ink-2);margin-bottom:.4rem}
.acard-draft{display:inline-block;font-size:.72rem;font-weight:700;background:var(--bluegrey);color:var(--brand);padding:.1rem .5rem;margin-bottom:.4rem}
.acard h3{margin-bottom:.4rem}
.acard p{color:var(--ink-2);font-size:.97rem;margin-bottom:.6rem}
.acard .go{font-size:.9rem;font-weight:600;color:var(--brand)}
.art .art-hero{padding-top:1.25rem}
.art-col{max-width:48rem}
.art-back{display:inline-block;font-size:.9rem;font-weight:600;color:var(--brand);text-decoration:none;margin-bottom:1rem}
.art-hero .eyebrow{font-size:.85rem;color:var(--ink-2);margin-bottom:.6rem}
.art-hero h1{margin-bottom:.8rem}
.art-hero .sub{color:var(--ink-2);font-size:1.1rem}
.art-main{padding:1.5rem 0 2.5rem}
.art-lead img{border-radius:var(--r-card);margin-bottom:1.6rem}
.art-body{font-size:1.08rem;line-height:1.7}
.art-body>*+*{margin-top:1em}
.art-body h2{font-size:1.6rem;margin-top:1.6em}
.art-body h3{font-size:1.25rem;margin-top:1.4em}
.art-body ul,.art-body ol{padding-left:1.4em}
.art-body blockquote{border-left:3px solid var(--red);padding-left:1rem;color:var(--ink-2)}
.art-body a{color:var(--brand)}
.art-body figure img{border-radius:var(--r-card)}
.art-by{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:baseline;font-size:.95rem;color:var(--ink-2)}
.art-by b{color:var(--ink)}
.art-more h2{margin-bottom:1.2rem}

/* ---------- consent ---------- */
#consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:70;background:#fff;border:1px solid var(--rule);border-left:4px solid var(--red);box-shadow:0 10px 30px rgba(16,24,41,.14);padding:1rem 1.2rem;display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:space-between;font-size:.92rem;max-width:720px;margin:0 auto}
#consent p{flex:1 1 320px}
#consent a{color:var(--brand)}
.cbtns{display:flex;gap:.5rem}
.cbtns button{font:inherit;font-weight:600;padding:.55rem 1rem;border-radius:var(--r-btn);border:1.5px solid var(--rule);background:#fff;cursor:pointer}
.cbtns .cn-yes{background:var(--navy);color:#fff;border-color:var(--navy)}
#consent[hidden]{display:none}

/* ---------- phone bar and small screens ---------- */
.bar{display:none}
@media (max-width:900px){
  nav.main,.hd-right .btn,.hd-phone .num{display:none}
  .hd{gap:.6rem}
  .hd-right{margin-left:auto}
  .hd-phone{width:44px;height:44px;justify-content:center;border:1.5px solid var(--ink);border-radius:var(--r-btn);color:var(--red)}
  .hd-phone svg{width:20px;height:20px}
  .menu{display:inline-flex;align-items:center;margin-left:0}
  .logo{height:38px}
  .three,.six,.steps,.quotes,.faq-grid,.contact-block,.creds,.foot-cols,.sit ul,.acards{grid-template-columns:1fr}
  .steps::before{display:none}
  .hero-block.home{grid-template-columns:1fr}
  .hero-mark{display:none}
  .hero-page .hero-block.has-img{grid-template-columns:1fr}
  .corners{inset:10px}
  .corners::before,.corners::after{width:16px;height:16px}
  .sec-head,.sec-head:not(.left){text-align:left;margin-left:0}
  .sec-head:not(.left) h2::after{margin-left:0;transform-origin:left}
  h2{font-size:clamp(1.6rem,6vw,2rem)}
  .three{gap:1.6rem}
  .card3{display:grid;grid-template-columns:84px 1fr;gap:.35rem 1.1rem;align-items:start;text-align:left}
  .card3 .tile,.card3 .card-img{grid-row:1/4;width:84px;max-width:none;padding:0;margin:0;gap:0}
  .card3 .tile .ico{width:62%}
  .card3 .glow-c{width:90%;left:-30%;bottom:-30%}
  .card3 h3{margin:0;font-size:1.1rem}
  .card3 p{padding:0;font-size:.97rem;margin-bottom:.2rem}
  .hero-page .hero-img{display:none}
  .sit p.note{text-align:left}
  .cd div{grid-template-columns:1fr;gap:.15rem}
  footer{padding-bottom:5.5rem}
  #consent{bottom:4.4rem}
  .bar{display:grid;grid-template-columns:1fr 1.4fr;position:fixed;left:0;right:0;bottom:0;z-index:50;box-shadow:0 -6px 20px rgba(0,0,0,.14)}
  .bar a{display:flex;align-items:center;justify-content:center;min-height:56px;text-decoration:none;font-weight:700;font-size:1rem}
  .bar .call{background:#fff;color:var(--ink);border-top:1px solid var(--rule)}
  .bar .tell{background:var(--red);color:#fff}
}
@media print{.bar,.menu,.glow,.glow-c,.lit::after,.nodes,#consent{display:none !important}.hero-block,.how-block,.cta-block,.contact-block,.foot-block{background:#fff;color:#000;border:1px solid #999}}