:root{
--w-bg:#F2F0ED; --w-ink:#1A2340; --w-mut:#6E7488; --w-rule:#DCD7D1; --w-card:#FFFFFF;
--ink:#011640; --blue:#495885; --deep:#263659; --gold:#BA860B;
--paper:#FFFFFF; --tint:#F7F6F4; --peri:#EBEEF7; --peri-line:#D5DCEE; --mut:#7C8398; --line:#E5E2DE;
/* Baskerville first so it renders true on a Mac. Libre Baskerville is the web-safe stand-in. */
--serif:"Baskerville Display PT",Baskerville,"Libre Baskerville",Georgia,serif;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){ --w-bg:#0C1222; --w-ink:#E8EDF7; --w-mut:#8D96AD; --w-rule:#232C42; --w-card:#121A2D; }
}
:root[data-theme="dark"]{ --w-bg:#0C1222; --w-ink:#E8EDF7; --w-mut:#8D96AD; --w-rule:#232C42; --w-card:#121A2D; }
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* ---------- site ---------- */
.h-xl{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.1;margin:0;color:var(--ink);text-wrap:balance}
/* the tagline sets as three lines, roman. Italics on First/Once/Smart read badly at hero size. */
.tagline{line-height:1.04;text-wrap:initial}
.tagline em{font-style:normal;color:#EBC14A}
.h-lg{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.16;margin:0;color:var(--ink);text-wrap:balance}
.h-md{font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.22;margin:0;color:var(--ink)}
.h-sm{font-family:var(--serif);font-weight:400;font-size:1.12rem;line-height:1.3;margin:0;color:var(--ink)}
em{font-style:italic}
.kicker{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0}
.lede{font-size:1.04rem;line-height:1.72;color:#404A63}
.body-s{font-size:.89rem;line-height:1.72;color:#4C5369}
.btn{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:.95rem 1.5rem;background:var(--ink);color:#fff;text-decoration:none}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.s-nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.15rem 2.4rem;border-bottom:1px solid var(--line);background:var(--paper)}
.s-nav .lk{height:34px;width:auto;display:block}
.s-nav ul{display:flex;gap:1.7rem;list-style:none;margin:0;padding:0;font-size:.71rem;letter-spacing:.11em;text-transform:uppercase;font-weight:500;color:var(--ink)}
.s-nav .cta{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#fff;background:var(--blue);padding:.72rem 1.15rem;white-space:nowrap}
.s-nav.over{position:absolute;top:0;left:0;right:0;z-index:3;background:transparent;border-bottom-color:rgba(255,255,255,.2)}
.s-nav.over ul{color:#fff}
.s-nav.over .cta{background:var(--gold);color:var(--ink)}
/* hero, video led */
.hero{position:relative;min-height:35rem;display:flex;align-items:flex-end;background:var(--ink);overflow:hidden}
.hero .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero .scrim{position:absolute;inset:0;background:
linear-gradient(to top,rgba(1,12,36,.93) 0%,rgba(1,12,36,.60) 36%,rgba(1,12,36,.16) 64%,rgba(1,12,36,.42) 88%,rgba(1,12,36,.62) 100%)}
.hero .core{position:relative;padding:calc(var(--navh, 7rem) + 3rem) 2.4rem 7.2rem;max-width:46rem;display:flex;flex-direction:column;gap:1.15rem}
.hero .h-xl,.hero .lede{color:#fff}
.hero .lede{color:#DCE2EF;max-width:34rem}
.hero .cta-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.5rem}
.rule-gold{height:1px;background:var(--gold);width:4.5rem}
/* front door, type only */
.door-head{padding:3.6rem 2.4rem 0;display:flex;flex-direction:column;gap:.85rem;align-items:center;text-align:center}
.door-head .h-lg{max-width:20ch}
.door-head p{max-width:48ch;margin:0}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;padding:2.4rem 2.4rem 3.4rem}
.door{display:flex;flex-direction:column;gap:.9rem;border-top:1px solid var(--gold);padding-top:1.3rem}
.door .who{font-size:.62rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--blue)}
.door .said{font-family:var(--serif);font-weight:400;font-size:1.34rem;line-height:1.28;color:var(--ink)}
.door .why{font-size:.86rem;line-height:1.7;color:#4C5369;flex:1}
.door .go{font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.door .go span{color:var(--gold)}
.qband{display:grid;grid-template-columns:1fr 1fr;background:var(--tint);border-top:1px solid var(--line)}
.qband>div{padding:2.8rem 2.4rem;display:flex;flex-direction:column;gap:.9rem}
.qband>div:first-child{border-right:1px solid var(--line)}
/* people */
.people{padding:3.6rem 2.4rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.people .txt{display:flex;flex-direction:column;gap:1rem;max-width:30rem}
.people .shot{width:100%;height:auto;display:block}
.bios{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;padding:0 2.4rem 3.4rem}
.bio{display:flex;gap:1.2rem;border-top:1px solid var(--line);padding-top:1.4rem}
.bio img{width:6.2rem;height:8rem;object-fit:cover;object-position:center 12%;display:block;flex:none}
.bio .t{display:flex;flex-direction:column;gap:.4rem}
.bio .rl{font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.bio .nm{font-family:var(--serif);font-weight:400;font-size:1.12rem;color:var(--ink)}
.bio .bi{font-size:.82rem;line-height:1.68;color:#4C5369}
.bio .lc{font-size:.61rem;letter-spacing:.07em;color:var(--mut)}
.s-foot{background:var(--ink);color:#B9C3DA;padding:2.8rem 2.4rem;display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.s-foot img{height:40px;width:auto;max-width:100%;object-fit:contain;align-self:flex-start;flex:none}
.s-foot img.mono{height:64px;width:64px}
.s-foot .col{display:flex;flex-direction:column;gap:.45rem;font-size:.75rem}
.s-foot .col b{color:#fff;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;margin-bottom:.3rem}
.s-foot .lic{font-size:.62rem;color:#8496B8;letter-spacing:.05em}
/* blog, simplified */
.blog-head{padding:3.4rem 2.4rem 2rem;display:flex;flex-direction:column;gap:.8rem;max-width:46rem}
.blog-filters{display:flex;flex-wrap:wrap;gap:1.4rem;padding:0 2.4rem 1.6rem;border-bottom:1px solid var(--line);
font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
.blog-filters .on{color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:.25rem}
.feature{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;padding:2.8rem 2.4rem;align-items:center;border-bottom:1px solid var(--line)}
.feature img{width:100%;height:auto;display:block}
.feature .t{display:flex;flex-direction:column;gap:.9rem}
.byline{font-size:.69rem;letter-spacing:.07em;color:var(--mut)}
/* the span, back in the situations block */
.span-wrap{padding:3rem 2.4rem 0;max-width:62rem;margin:0 auto}
.span-svg{display:block;width:100%;height:auto;color:var(--blue)}
.span-svg .cable,.span-svg .tower,.span-svg .susp{fill:none;stroke:currentColor}
.span-svg .cable{stroke-width:1.5}.span-svg .tower{stroke-width:1.5}
.span-svg .susp{stroke-width:.7;opacity:.45}
.span-svg .deck{stroke:var(--gold);stroke-width:2.6}
.span-svg .node{fill:var(--gold)}
.mini{width:100%;height:auto;display:block;margin:.2rem 0 .1rem}
.mini .r{stroke:#C9CEDC;stroke-width:1.4;fill:none}
.mini .gap{stroke:var(--gold);stroke-width:2.6;fill:none}
.mini .pin{fill:var(--blue)}
.mini text{font-family:Montserrat,sans-serif;font-size:9px;letter-spacing:.12em;text-transform:uppercase;fill:var(--mut);font-weight:600}
/* blog grid, bigger and better spaced */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem 2.2rem;padding:2.8rem 2.4rem 3.6rem}
.card{display:flex;flex-direction:column;gap:.85rem}
.card img{width:100%;height:auto;display:block}
.card .sit{font-size:.6rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.card .ttl{font-family:var(--serif);font-weight:400;font-size:1.26rem;line-height:1.28;color:var(--ink)}
.card .rd{font-size:.67rem;letter-spacing:.08em;color:var(--mut);border-top:1px solid var(--line);padding-top:.7rem;margin-top:auto}
/* second audience: the people who send us clients */
/* the situations sit on a plane that lifts over the hero */
.situations{position:relative;z-index:2;background:var(--paper);margin:-4.5rem 2.6rem 0;padding-bottom:.6rem;
box-shadow:0 -1px 0 var(--line)}
.situations .door-head{padding-top:2.6rem}
/* partner band gets two tonal planes and its own watermark */
.partners{position:relative;overflow:hidden}
.partners .wm{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:112%;max-width:none;
opacity:.13;color:#93A6D2;pointer-events:none}
.partners .inner{position:relative;z-index:1}
/* ---------- motion ----------
Default state is fully visible. Only when JS runs AND the viewer allows motion
do elements get a pre-state to animate from. */
.js-motion .reveal{opacity:0;transform:translateY(16px);
transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js-motion .reveal.in{opacity:1;transform:none}
.js-motion .reveal.d1{transition-delay:.09s}
.js-motion .reveal.d2{transition-delay:.18s}
.js-motion .reveal.d3{transition-delay:.27s}
.js-motion .hero .core>*{opacity:0;transform:translateY(18px);
animation:riseIn .85s cubic-bezier(.22,.61,.36,1) forwards}
.js-motion .hero .core>*:nth-child(1){animation-delay:.10s}
.js-motion .hero .core>*:nth-child(2){animation-delay:.20s}
.js-motion .hero .core>*:nth-child(3){animation-delay:.30s}
.js-motion .hero .core>*:nth-child(4){animation-delay:.40s}
@keyframes riseIn{to{opacity:1;transform:none}}
/* the span draws itself in: the loan being built across the gap */
.js-motion .span-svg .deck,.js-motion .span-svg .cable,.js-motion .span-svg .tower,.js-motion .span-svg .susp{
stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);
transition:stroke-dashoffset 1.5s cubic-bezier(.33,.72,.3,1)}
.js-motion .span-svg.in .deck,.js-motion .span-svg.in .cable,.js-motion .span-svg.in .tower,.js-motion .span-svg.in .susp{stroke-dashoffset:0}
.js-motion .span-svg .node{opacity:0;transition:opacity .5s ease .95s}
.js-motion .span-svg.in .node{opacity:1}
/* the gold gap in each door runs out to its length */
.js-motion .mini .gap{stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);
transition:stroke-dashoffset .9s cubic-bezier(.33,.72,.3,1) .25s}
.js-motion .mini.in .gap{stroke-dashoffset:0}
/* parallax layers. transform only, never background-attachment. */
.hero .shot{will-change:transform}
.partners .wm{will-change:transform}
@media (prefers-reduced-motion:reduce){
.js-motion .reveal,.js-motion .hero .core>*{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
.js-motion .span-svg *,.js-motion .mini *{stroke-dashoffset:0!important;opacity:1!important;transition:none!important}
.hero .shot,.partners .wm{transform:none!important}
}
/* proof, lifted above the doors */
.proofline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.7rem 1.3rem;
padding:1.15rem 2.4rem;background:var(--peri);border-bottom:1px solid var(--peri-line);text-align:center}
.proofline .badge{font-family:var(--serif);font-size:1.06rem;color:var(--ink);line-height:1.3}
.proofline .src{font-size:.62rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.proofline .dot{width:5px;height:5px;background:var(--gold);border-radius:50%;flex:none}
.proofline img{height:34px;width:auto;display:block;flex:none}
/* reviews, mapped to the three situations */
.reviews{padding:3.2rem 2.4rem 3.4rem;background:var(--tint);border-top:1px solid var(--line)}
.rev-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.2rem;margin-bottom:2rem}
.rev-head h2{font-family:var(--serif);font-weight:400;font-size:1.55rem;margin:0;color:var(--ink)}
.rev-head .gscore{display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.rev-head .gs{color:var(--gold);font-size:1rem;letter-spacing:.14em}
.rev-head b{font-family:var(--serif);font-size:1.24rem;font-weight:400;color:var(--ink)}
.rev-head i{font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.rev{background:var(--paper);padding:1.6rem 1.6rem 1.5rem;display:flex;flex-direction:column;gap:.9rem;
border-top:2px solid var(--gold)}
.rev .for{font-size:.58rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.rev .q{font-family:var(--serif);font-size:1.02rem;line-height:1.5;color:var(--ink)}
.rev .who{font-size:.71rem;letter-spacing:.04em;color:var(--mut);border-top:1px solid var(--line);
padding-top:.7rem;margin-top:auto}
.rev .stars{color:var(--gold);font-size:.8rem;letter-spacing:.18em}
/* sofia video placeholder */
.vid{position:relative;display:block;width:100%;background:var(--ink);overflow:hidden}
.vid img{width:100%;height:auto;display:block;opacity:.55}
.vid .play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem}
.vid .disc{width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.75);
display:flex;align-items:center;justify-content:center}
.vid .disc:after{content:"";border-left:15px solid #fff;border-top:9px solid transparent;
border-bottom:9px solid transparent;margin-left:4px}
.vid .cap{font-size:.63rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-align:center}
.vid .ph{position:absolute;top:.8rem;left:.8rem;font-size:.56rem;font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink);background:var(--gold);padding:.32rem .5rem}
/* stats, bigger and proud */
.proof{display:grid;grid-template-columns:repeat(4,1fr);background:var(--deep);color:#fff}
.proof .p{display:flex;flex-direction:column;gap:.5rem;padding:2.6rem 1.9rem;border-left:1px solid rgba(255,255,255,.16)}
.proof .p:first-child{border-left:0}
.proof .n{font-family:var(--serif);white-space:nowrap;font-size:clamp(2rem,2.6vw,2.9rem);font-weight:400;line-height:.95;color:var(--gold);font-variant-numeric:tabular-nums}
.proof .l{font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:#C3CDE4;line-height:1.55;min-height:2.6em;max-width:16rem}
/* how it works, compact */
.steps{padding:3.6rem 2.4rem 3.8rem;background:var(--stone,#F2EBE7);border-top:1px solid var(--line)}
.steps .sh{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:2.6rem}
.steps .sh h2{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin:0;color:var(--ink)}
.steps .sh p{margin:0;font-size:.85rem;color:var(--mut)}
.track{position:relative;max-width:60rem;margin:0 auto}
.track:before{content:"";position:absolute;left:8%;right:8%;top:22px;height:2px;background:var(--gold);opacity:.55}
.steprow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem}
.step .num{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--gold);
font-family:var(--serif);font-size:1.15rem;display:flex;align-items:center;justify-content:center;
position:relative;z-index:1;box-shadow:0 0 0 8px var(--stone,#F2EBE7)}
.step .st{font-family:var(--serif);font-size:1.2rem;color:var(--ink);line-height:1.28;margin-top:.3rem}
.step .sd{font-size:.86rem;line-height:1.7;color:#4C5369;max-width:20rem}
/* logo wall */
.wall{padding:2.8rem 2.4rem 3rem;background:var(--tint);border-top:1px solid var(--line);text-align:center}
.wall .wt{font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:1.9rem}
.wall .row{display:grid;grid-template-columns:repeat(6,1fr);gap:2.2rem 2rem;align-items:center;justify-items:center;
max-width:62rem;margin:0 auto}
.wall img{max-height:34px;max-width:112px;width:auto;height:auto;display:block;opacity:.78;filter:grayscale(1) contrast(1.1)}
/* 13 logos in a 6-up grid leaves one stranded in column 1. Let a lone last logo span the row
so it centres instead. Covers every column count the wall uses. */
.wall .row > :last-child:nth-child(6n+1),
.wall .row > :last-child:nth-child(4n+1),
.wall .row > :last-child:nth-child(3n+1),
.wall .row > :last-child:nth-child(2n+1){grid-column:1 / -1}
.wall img.tall{max-height:40px}
/* recent articles */
.arts{padding:3.2rem 2.4rem 3.4rem;border-top:1px solid var(--line)}
.arts .ah{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1.2rem;margin-bottom:1.8rem}
.arts .ah h2{font-family:var(--serif);font-weight:400;font-size:1.55rem;margin:0;color:var(--ink)}
.arts .ah a{font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.arts .ah a span{color:var(--gold)}
.artrow{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.art{display:flex;flex-direction:column;gap:.7rem}
.art img{width:100%;height:auto;display:block}
.art .sit{font-size:.58rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.art .ttl{font-family:var(--serif);font-size:1.14rem;line-height:1.28;color:var(--ink)}
.art .rd{font-size:.66rem;letter-spacing:.07em;color:var(--mut)}
/* referral band, slimmed to wayfinding */
.partners{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:2.2rem 2.4rem 2.4rem}
.partners .ph{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.3rem;margin-bottom:1.3rem}
.partners .ph h2{font-family:var(--serif);font-weight:400;font-size:1.4rem;margin:0;color:#fff}
.partners .ph p{margin:0;font-size:.83rem;color:#AEBBD6}
.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.pcard{background:none;padding:0;border-top:1px solid rgba(186,134,11,.6);padding-top:.9rem;
display:flex;flex-direction:column;gap:.35rem}
.pcard .pn{font-family:var(--serif);font-weight:400;font-size:1.04rem;color:#fff;line-height:1.25}
.pcard .pd{font-size:.79rem;line-height:1.6;color:#AEBBD6}
.pcard .pg{font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#fff;margin-top:.2rem}
.pcard .pg span{color:var(--gold)}
/* book a call, compact */
.book{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;
padding:2.2rem 2.4rem;background:var(--stone,#F2EBE7);border-top:1px solid var(--line)}
.book img{width:76px;height:76px;object-fit:cover;object-position:center 22%;border-radius:50%;display:block}
.book .bt{display:flex;flex-direction:column;gap:.3rem}
.book .bh{font-family:var(--serif);font-size:1.32rem;color:var(--ink);line-height:1.25}
.book .bd{font-size:.85rem;color:#4C5369;line-height:1.6}
.book .ba{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}
.book .tel{font-size:.78rem;color:var(--mut);letter-spacing:.03em}
.book .tel b{color:var(--ink);font-weight:600}
/* footer badges */
.fbadges{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:1rem}
.fbadges img{height:52px;width:auto;max-width:100%;object-fit:contain;display:block;flex:none}
.fbadges img.sq{height:62px;width:auto}
/* the qualifier, shown rather than mentioned */
.qual{display:grid;grid-template-columns:1.02fr .98fr;gap:3.2rem;align-items:center;
padding:3.4rem 2.4rem;background:var(--peri);border-top:1px solid var(--peri-line)}
.qual .qt{display:flex;flex-direction:column;gap:1rem;max-width:30rem}
.qual ul{margin:.2rem 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.55rem;font-size:.87rem;color:#4C5369;line-height:1.6}
.qual ul li::marker{color:var(--gold)}
.qwidget{background:var(--paper);border:1px solid var(--peri-line);padding:1.5rem 1.6rem 1.6rem;
display:flex;flex-direction:column;gap:1rem}
.qwidget .dots{display:flex;gap:.45rem;align-items:center}
.qwidget .dots i{width:26px;height:3px;background:var(--peri-line);display:block}
.qwidget .dots i.on{background:var(--gold)}
.qwidget .qstep{font-size:.6rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--mut)}
.qrow{display:flex;flex-direction:column;gap:.3rem}
.qrow .lb{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.qrow .fld{border:1px solid var(--line);padding:.62rem .75rem;font-size:.9rem;color:var(--ink);background:#fff}
.qrow .fld.muted{color:var(--mut)}
.qres{background:var(--ink);color:#fff;padding:1.15rem 1.2rem;display:flex;flex-direction:column;gap:.25rem;margin-top:.2rem}
.qres .rl{font-size:.58rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#9AA7C4}
.qres .rn{font-family:var(--serif);font-size:1.85rem;color:var(--gold);line-height:1.05;font-variant-numeric:tabular-nums}
.qres .rd{font-size:.72rem;color:#B9C3DA;line-height:1.5}
.qnote{font-size:.66rem;color:var(--mut);line-height:1.5}
.stepcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.stepcta .btn{text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:1024px){
.wrap{padding:0 1.5rem}
.doors{grid-template-columns:1fr;gap:1.8rem;padding:2rem 1.5rem 2.6rem}
.qband{grid-template-columns:1fr}
.qband>div:first-child{border-right:0;border-bottom:1px solid var(--line)}
.people{grid-template-columns:1fr;gap:1.8rem;padding:2.6rem 1.5rem}
.bios{grid-template-columns:1fr;gap:1.6rem;padding:0 1.5rem 2.6rem}
.feature{grid-template-columns:1fr;gap:1.6rem;padding:2.2rem 1.5rem}
.feature img{order:-1}
.hero{min-height:27rem}
.span-wrap{padding:2.2rem 1.5rem 0}
.post-grid{grid-template-columns:repeat(2,1fr);gap:2.2rem 1.6rem;padding:2.2rem 1.5rem 2.8rem}
.plist{grid-template-columns:1fr;gap:1.1rem}
.artrow{grid-template-columns:1fr;gap:1.5rem}
.steprow{grid-template-columns:1fr;gap:2rem}
.track:before{left:calc(50% - 1px);right:auto;top:8%;bottom:8%;width:2px;height:auto}
.qual{grid-template-columns:1fr;gap:1.8rem;padding:2.4rem 1.5rem}
.steps,.arts{padding:2.4rem 1.5rem 2.6rem}
.wall{padding:2rem 1.5rem 2.2rem}
.wall .row{grid-template-columns:repeat(4,1fr);gap:1.7rem 1.4rem}
.book{grid-template-columns:1fr;gap:1.1rem;padding:1.9rem 1.5rem}
.book .ba{align-items:flex-start}
.proof .n{font-size:2.3rem}
.proof .p{padding:2rem 1.5rem}
.rev-grid{grid-template-columns:1fr;gap:1.3rem}
.reviews{padding:2.4rem 1.5rem 2.6rem}
.proofline{padding:1rem 1.5rem}
.proof{grid-template-columns:repeat(2,1fr)}
.proof .p:nth-child(3){border-left:0}
.proof .p:nth-child(n+3){border-top:1px solid rgba(255,255,255,.15)}
.situations{margin:-3rem 1.6rem 0}
.hero .core{padding-bottom:5.2rem}
.situations .door-head{padding-top:2.2rem}
.partners{padding:2.3rem 1.5rem 2.5rem}
.mini text{font-size:11px}
}
@media (max-width:768px){
body{font-size:15px}
.wrap{padding:0 1.1rem}
.doc-head{padding:2.3rem 0 1rem}
.s-nav{padding:.9rem 1.2rem}.s-nav .lk{height:26px}
.hero{min-height:24rem}
.hero .core{padding:0 1.2rem 2rem;gap:.9rem}
.door-head{padding:2.4rem 1.2rem 0}
.doors{padding:1.7rem 1.2rem 2.2rem}
.qband>div{padding:1.9rem 1.2rem}
.proof{padding:1.3rem 1.2rem;gap:1.2rem}.proof .n{font-size:1.3rem}
.people,.bios{padding-left:1.2rem;padding-right:1.2rem}
.bio img{width:4.8rem;height:6.4rem}
.blog-head,.blog-filters{padding-left:1.2rem;padding-right:1.2rem}
.feature{padding:1.8rem 1.2rem}
.s-foot{padding:2rem 1.2rem}
.screen-label{padding:1.8rem 0 .7rem}
.span-wrap{padding:1.8rem 1.2rem 0}
.post-grid{grid-template-columns:1fr;gap:2rem;padding:1.8rem 1.2rem 2.4rem}
.partners{padding:2rem 1.2rem 2.2rem}
.proof{grid-template-columns:1fr}
.steps,.arts{padding:2rem 1.2rem 2.2rem}
.qual{padding:2rem 1.2rem}
.wall{padding:1.7rem 1.2rem 1.9rem}
.wall .row{grid-template-columns:repeat(3,1fr);gap:1.4rem 1rem}
.wall img{max-height:26px;max-width:84px}.wall img.tall{max-height:30px}
.book{padding:1.6rem 1.2rem}
.partners{padding:1.8rem 1.2rem 2rem}
.proof .n{font-size:2.1rem}
.reviews{padding:2rem 1.2rem 2.2rem}
.proofline{padding:.9rem 1.2rem;gap:.5rem .9rem}
.proof .p{border-left:0}
.proof .p:nth-child(n+2){border-top:1px solid rgba(255,255,255,.15)}
.proof .p{padding:1.3rem 1.2rem}
.situations{margin:-2rem 0 0}
.hero .core{padding-bottom:3.8rem}
.situations .door-head{padding-top:1.9rem}
.span-svg .deck{stroke-width:4.5}
.span-svg .cable,.span-svg .tower{stroke-width:2.4}
.mini text{font-size:13px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---------- shared link + page-type styles ---------- */
a{color:inherit;text-decoration:none}
.s-nav ul a:hover,.door .go:hover,.pcard .pg:hover,.arts .ah a:hover{color:var(--gold)}
.page{padding:0}
.phero{position:relative;min-height:20rem;display:flex;align-items:flex-end;background:var(--ink);overflow:hidden}
.phero .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(1,12,36,.93) 0%,rgba(1,12,36,.6) 42%,rgba(1,12,36,.28) 100%)}
.phero .core{position:relative;padding:5.4rem 2.4rem 2.4rem;max-width:46rem;display:flex;flex-direction:column;gap:1rem}
.phero .h-xl{font-size:clamp(2rem,3.9vw,3rem)}.phero .h-xl,.phero .lede{color:#fff}.phero .lede{color:#DCE2EF;max-width:34rem}
.phero .kicker{color:var(--gold)}
.crumbs{position:relative;padding:1rem 2.4rem;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--gold)}
.sec{padding:3.4rem 2.4rem;border-top:1px solid var(--line)}
.sec.tint{background:var(--tint)}.sec.stone{background:var(--stone,#F2EBE7)}.sec.peri{background:var(--peri)}
.sec.ink{background:var(--ink);color:#fff}.sec.ink h2,.sec.ink .h-lg{color:#fff}.sec.ink .body-s{color:#B9C3DA}
.measure{max-width:38rem}
.sec h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.18;margin:0 0 .9rem;color:var(--ink)}
.sec p{margin:0 0 1rem;font-size:.97rem;line-height:1.78;color:#404A63}
.sec p:last-child{margin-bottom:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.answer{background:var(--peri);border-left:2px solid var(--gold);padding:1.4rem 1.6rem;margin:.2rem 0 1.6rem}
.answer .t{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.answer p{margin:0;font-size:1rem;color:var(--ink);line-height:1.68}
.faq{display:flex;flex-direction:column;gap:0;max-width:48rem}
.faq details{border-top:1px solid var(--line);padding:1.1rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--serif);font-size:1.1rem;color:var(--ink);cursor:pointer;list-style:none;
display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--gold);font-family:Montserrat,sans-serif;font-size:1.1rem}
.faq details[open] summary:after{content:"\2212"}
.faq p{margin:.8rem 0 0;font-size:.93rem;line-height:1.75;color:#4C5369}
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;
padding:2.4rem;background:var(--ink);color:#fff}
.cta-band .h{font-family:var(--serif);font-size:1.5rem;line-height:1.25}
.cta-band p{margin:.4rem 0 0;font-size:.86rem;color:#B9C3DA;max-width:34rem}
@media (max-width:1024px){
.two{grid-template-columns:1fr;gap:1.8rem}
.sec{padding:2.6rem 1.5rem}
.phero .core{padding:5rem 1.5rem 2.2rem}
.crumbs{padding:.9rem 1.5rem}
.cta-band{padding:2rem 1.5rem}
}
@media (max-width:768px){
.sec{padding:2.1rem 1.2rem}
.phero{min-height:17rem}
.phero .core{padding:4.2rem 1.2rem 1.6rem}
.crumbs{padding:.8rem 1.2rem}
.cta-band{padding:1.7rem 1.2rem}
}
/* loan + region templates */
.ticks{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.ticks li{position:relative;padding-left:1.4rem;font-size:.92rem;line-height:1.65;color:#404A63}
.ticks li:before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--gold)}
.towns{font-family:var(--serif);font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.75;color:var(--ink);
max-width:52rem;margin:0}
.sec .steprow .step{align-items:flex-start;text-align:left;gap:.45rem}
.sec .steprow .step .st{margin-top:0}
.sec .steprow{gap:2.2rem}
@media (max-width:1024px){ .sec .steprow{grid-template-columns:1fr;gap:1.4rem} }
/* hero kickers sit over bright sky, so they need a brighter gold than the on-white one */
.hero .kicker,.phero .kicker{color:#EBC14A;text-shadow:0 1px 10px rgba(1,12,36,.55)}
.phero .lede,.hero .lede{text-shadow:0 1px 12px rgba(1,12,36,.4)}
.phero .h-xl,.hero .h-xl{text-shadow:0 2px 18px rgba(1,12,36,.35)}
/* article template */
.artwrap{display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:3.4rem;padding:2.6rem 2.4rem 3rem;align-items:start}
.artmain{max-width:38rem}
.artmain .sit{font-size:.6rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.artmain .byline{font-size:.72rem;letter-spacing:.06em;color:var(--mut);margin:0 0 .2rem}
.artmain h2{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.22;margin:2.1rem 0 .7rem;color:var(--ink);scroll-margin-top:1.5rem}
.artmain h3{font-family:var(--serif);font-weight:400;font-size:1.16rem;line-height:1.3;margin:1.5rem 0 .5rem;color:var(--ink)}
.artmain p{margin:0 0 1rem;font-size:.98rem;line-height:1.8;color:#3F465C}
.artside{display:flex;flex-direction:column;gap:1.5rem;position:sticky;top:1.5rem}
.toc{border-top:2px solid var(--gold);padding-top:1rem}
.toc .tt{font-size:.6rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--mut)}
.toc ul{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.toc a{font-size:.85rem;line-height:1.45;color:#4C5369}
.toc a:hover{color:var(--gold)}
.author{background:var(--tint);border:1px solid var(--line);padding:1.3rem}
.author img{width:100%;height:auto;display:block;margin-bottom:.85rem}
.author .nm{font-family:var(--serif);font-weight:400;font-size:1.08rem;color:var(--ink)}
.author .cr{font-size:.8rem;line-height:1.6;color:#4C5369;margin-top:.4rem}
.author .lic{font-size:.62rem;letter-spacing:.07em;color:var(--mut);margin-top:.7rem;border-top:1px solid var(--line);padding-top:.6rem}
.qbox{background:var(--ink);color:#fff;padding:1.4rem}
.qbox .h{font-family:var(--serif);font-size:1.14rem;line-height:1.25}
.qbox p{font-size:.79rem;line-height:1.6;color:#B9C3DA;margin:.55rem 0 1rem}
a.art .ttl{transition:color .2s}a.art:hover .ttl{color:var(--gold)}
@media (max-width:1024px){
.artwrap{grid-template-columns:1fr;gap:2rem;padding:2rem 1.5rem 2.4rem}
.artside{position:static}
}
@media (max-width:768px){ .artwrap{padding:1.7rem 1.2rem 2rem} }
/* ============ interior page system v2 ============ */
/* a white plane that lifts over the hero, same device as the homepage */
.lift{position:relative;z-index:2;background:var(--paper);margin:-4.5rem 2.6rem 0;
padding:3rem 3rem 2.6rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem}
.lift .t{font-size:.62rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.lift .a{font-family:var(--serif);font-size:clamp(1.25rem,2.3vw,1.72rem);line-height:1.42;color:var(--ink);max-width:34ch}
.lift .sub{font-size:.92rem;line-height:1.75;color:#4C5369;max-width:56ch}
/* alternating image + text */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:3.4rem;align-items:center;padding:3.6rem 2.4rem}
.split.rev .txt{order:2}
.split .txt{display:flex;flex-direction:column;gap:.9rem;max-width:32rem}
.split .txt h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.55rem,2.7vw,2.1rem);line-height:1.18;margin:0;color:var(--ink)}
.split .txt p{margin:0;font-size:.97rem;line-height:1.8;color:#404A63}
.split figure{margin:0;position:relative}
.split figure img{width:100%;height:auto;display:block}
.split figure figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:#fff;
font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.55rem .8rem}
.split .pull{border-left:2px solid var(--gold);padding-left:1rem;font-family:var(--serif);
font-size:1.12rem;line-height:1.5;color:var(--ink)}
/* the gap, drawn big */
.gapband{background:var(--peri);border-top:1px solid var(--peri-line);padding:3.4rem 2.4rem 3.6rem;text-align:center}
.gapband h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.55rem,2.7vw,2.1rem);margin:0 0 .6rem;color:var(--ink)}
.gapband p{margin:0 auto;max-width:52ch;font-size:.93rem;line-height:1.75;color:#4C5369}
.gapband .drawing{max-width:56rem;margin:2rem auto 0}
/* spec cards */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;padding:3.2rem 2.4rem;background:var(--stone,#F2EBE7)}
.spec{border-top:2px solid var(--gold);padding-top:1.1rem;display:flex;flex-direction:column;gap:.45rem}
.spec .k{font-family:var(--serif);font-size:1.5rem;color:var(--ink);line-height:1.1}
.spec .l{font-size:.62rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.spec .d{font-size:.85rem;line-height:1.65;color:#4C5369}
/* proof block with a photo */
.proofblock{display:grid;grid-template-columns:.95fr 1.05fr;gap:3rem;align-items:center;padding:3.4rem 2.4rem}
.proofblock img{width:100%;height:auto;display:block}
.proofblock .rev{border-top:2px solid var(--gold);background:var(--tint);padding:1.7rem}
/* faq in two columns so it never becomes a tall left rail */
.faq.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem;max-width:none}
@media (max-width:900px){ .faq.cols{grid-template-columns:1fr} }
/* related situations */
.rel3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:3rem 2.4rem 3.4rem}
.rel3 a{display:flex;flex-direction:column;gap:.6rem;border-top:1px solid var(--gold);padding-top:1.1rem}
.rel3 .w{font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.rel3 .s{font-family:var(--serif);font-size:1.24rem;line-height:1.25;color:var(--ink)}
.rel3 .g{font-size:.64rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin-top:auto}
.rel3 .g span{color:var(--gold)}
.rel3 a:hover .s{color:var(--gold)}
@media (max-width:1024px){
.lift{margin:-3rem 1.6rem 0;padding:2.2rem 1.6rem 2rem}
.split{grid-template-columns:1fr;gap:1.8rem;padding:2.6rem 1.5rem}
.split.rev .txt{order:0}
.specs,.rel3{grid-template-columns:1fr;gap:1.5rem;padding:2.4rem 1.5rem}
.proofblock{grid-template-columns:1fr;gap:1.6rem;padding:2.4rem 1.5rem}
.gapband{padding:2.4rem 1.5rem 2.6rem}
}
@media (max-width:768px){
.lift{margin:-2rem 0 0;padding:1.9rem 1.2rem 1.7rem}
.split{padding:2rem 1.2rem}
.specs,.rel3{padding:2rem 1.2rem}
.proofblock{padding:2rem 1.2rem}
.gapband{padding:2rem 1.2rem 2.2rem}
}
/* ============ interior v3 ============ */
/* the answer is a band, same device as the homepage proof strip, not a cut-out */
.answerband{background:var(--peri);border-top:1px solid var(--peri-line);border-bottom:1px solid var(--peri-line);
padding:2.4rem 2.4rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.answerband .t{font-size:.62rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--gold)}
.answerband .a{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.62rem);line-height:1.42;color:var(--ink);max-width:58rem;margin:0}
.answerband .sub{font-size:.9rem;line-height:1.72;color:#4C5369;max-width:62rem;margin:0}
/* photos get an offset gold frame behind them: depth without weight */
.split figure{padding:0}
.split figure .fw{display:block;position:relative;padding:0 12px 12px 0}
.split figure .fw:before{content:"";position:absolute;right:0;bottom:0;width:calc(100% - 12px);height:calc(100% - 12px);
border:1px solid var(--gold);opacity:.7;pointer-events:none}
.split figure img{position:relative;z-index:1}
.split figure figcaption{z-index:2;left:0;bottom:12px}
/* dark proof band with the span drawn faintly across it, same as the homepage referral band */
.darkproof{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:3.2rem 2.4rem}
.darkproof .wm{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:112%;max-width:none;
opacity:.13;color:#93A6D2;pointer-events:none}
.darkproof .inner{position:relative;z-index:1;display:grid;grid-template-columns:.95fr 1.05fr;gap:3rem;align-items:center}
.darkproof img{width:100%;height:auto;display:block;border-top:2px solid var(--gold)}
.darkproof h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 1rem;color:#fff}
.darkproof .rev{border-top:2px solid var(--gold);background:rgba(255,255,255,.05);padding:1.6rem}
.darkproof .rev .q{display:block;margin:.7rem 0;font-family:var(--serif);font-size:1.06rem;line-height:1.5;color:#fff}
.darkproof .rev .who{font-size:.72rem;color:#AEBBD6}
.darkproof .rev .stars{color:var(--gold);letter-spacing:.14em}
/* towns as a photo band */
.townband{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--peri);border-top:1px solid var(--peri-line)}
.townband .t{padding:3rem 2.4rem;display:flex;flex-direction:column;gap:.7rem;justify-content:center}
.townband .t h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);margin:0;color:var(--ink)}
.townband .towns{font-size:clamp(1rem,1.7vw,1.24rem);line-height:1.8}
.townband img{width:100%;height:100%;object-fit:cover;display:block;min-height:18rem}
/* keep reading on every page */
.keep{padding:3rem 2.4rem 3.2rem;border-top:1px solid var(--line)}
.keep .ah{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1.2rem;margin-bottom:1.6rem}
.keep .ah h2{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:0;color:var(--ink)}
.keep .ah a{font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.keep .ah a span,.keep .ah a:hover{color:var(--gold)}
/* article: content reaches the sidebar, images inside the body */
.artwrap{grid-template-columns:minmax(0,1fr) 17rem;gap:2.6rem;padding:2.4rem 2.4rem 2.6rem}
.artmain{max-width:none}
.artmain .answer{max-width:none}
.artimg{margin:1.6rem 0 1.8rem;position:relative}
.artimg img{width:100%;height:auto;display:block}
.artimg figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:#fff;font-size:.6rem;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;padding:.5rem .8rem}
.artmain .faq{margin-top:1.2rem}
@media (max-width:1024px){
.answerband{padding:2rem 1.5rem}
.darkproof{padding:2.4rem 1.5rem}
.darkproof .inner{grid-template-columns:1fr;gap:1.6rem}
.townband{grid-template-columns:1fr}
.townband img{min-height:13rem;order:-1}
.keep{padding:2.4rem 1.5rem 2.6rem}
.artwrap{padding:2rem 1.5rem 2.2rem}
}
@media (max-width:768px){
.answerband{padding:1.7rem 1.2rem}
.darkproof{padding:2rem 1.2rem}
.townband .t{padding:1.8rem 1.2rem}
.keep{padding:2rem 1.2rem 2.2rem}
}
.answer .t{display:none}
.artimg img{max-height:26rem;object-fit:cover}
/* author block at the end of every post */
.authorbox{display:grid;grid-template-columns:7.5rem 1fr;gap:1.4rem;align-items:start;margin-top:2.6rem;padding:1.6rem;
background:var(--tint);border-top:2px solid var(--gold)}
.authorbox img{width:100%;height:auto;display:block}
.authorbox .ab{display:flex;flex-direction:column;gap:.3rem}
.authorbox .abl{font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.authorbox .abn{font-family:var(--serif);font-size:1.3rem;color:var(--ink)}
.authorbox .abn:hover{color:var(--gold)}
.authorbox .abr{font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.authorbox p{margin:.5rem 0 .6rem;font-size:.9rem;line-height:1.7;color:#4C5369}
.authorbox .abl2{font-size:.66rem;letter-spacing:.06em;color:var(--mut)}
.authorbox .abl2 a{color:var(--ink);font-weight:600}
.split .txt .kicker{margin-bottom:-.3rem}
@media (max-width:768px){ .authorbox{grid-template-columns:1fr;gap:1rem} .authorbox img{max-width:9rem} }
/* ============ pass 5: logo, author panel, reviews slider, hero variants ============ */
.s-nav .lk{height:46px}
@media (max-width:768px){ .s-nav .lk{height:34px} }
/* article sidebar as the authority panel */
.authpanel{border-top:2px solid var(--gold);background:var(--tint);padding:1.5rem}
.authpanel img{width:100%;height:auto;display:block;margin-bottom:1rem}
.authpanel .al{font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.authpanel .an{font-family:var(--serif);font-size:1.34rem;color:var(--ink);display:block;margin:.25rem 0 .15rem}
.authpanel .ar{font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.authpanel p{font-size:.85rem;line-height:1.65;color:#4C5369;margin:.7rem 0 .9rem}
.authpanel .cred{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);display:flex;flex-direction:column}
.authpanel .cred li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.78rem;color:#4C5369}
.authpanel .cred li b{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:.92rem;text-align:right}
.authpanel .more{display:inline-block;margin-top:.9rem;font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.authpanel .more span{color:var(--gold)}
.authorbox.slim{grid-template-columns:4.6rem 1fr;padding:1.1rem 1.3rem;margin-top:2.2rem}
.authorbox.slim p{display:none}
/* reviews slider: scroll-snap, no library */
.rslider{position:relative;background:var(--ink);color:#fff;padding:3rem 2.4rem 2.6rem;overflow:hidden}
.rslider .wm{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:112%;max-width:none;opacity:.13;color:#93A6D2;pointer-events:none}
.rslider .rh{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1.2rem;margin-bottom:1.6rem}
.rslider .rh h2{font-family:var(--serif);font-weight:400;font-size:1.55rem;margin:0;color:#fff}
.rslider .gscore{display:inline-flex;align-items:center;gap:.6rem}
.rslider .gscore .gs{color:var(--gold);letter-spacing:.14em}
.rslider .gscore b{font-family:var(--serif);font-weight:400;font-size:1.2rem;color:#fff}
.rslider .gscore i{font-style:normal;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#AEBBD6}
.rtrack{position:relative;z-index:1;display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.4rem}
.rtrack::-webkit-scrollbar{display:none}
.rcard{flex:0 0 min(30rem,88%);scroll-snap-align:start;background:rgba(255,255,255,.05);border-top:2px solid var(--gold);padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:.7rem}
.rcard .stars{color:var(--gold);letter-spacing:.14em;font-size:.85rem}
.rcard .q{font-family:var(--serif);font-size:1.02rem;line-height:1.55;color:#fff;flex:1}
.rcard .who{font-size:.7rem;color:#AEBBD6;letter-spacing:.04em}
.rctl{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin-top:1.3rem}
.rdots{display:flex;gap:.4rem}.rdots i{width:22px;height:2px;background:rgba(255,255,255,.28);display:block}.rdots i.on{background:var(--gold)}
.rbtns{display:flex;gap:.5rem}
.rbtns button{width:40px;height:40px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:1rem;cursor:pointer}
.rbtns button:hover{border-color:var(--gold);color:var(--gold)}
.rsrc{position:relative;z-index:1;font-size:.64rem;color:#8496B8;margin-top:1rem;letter-spacing:.04em}
.rsrc a{color:#AEBBD6;text-decoration:underline}
/* hero variants for interior pages */
.phero.v-ink{background:var(--ink);min-height:0}
.phero.v-ink .shot,.phero.v-ink .scrim{display:none}
.phero.v-ink .wm{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);width:118%;max-width:none;opacity:.14;color:#93A6D2;pointer-events:none}
.phero.v-ink .core{padding:5.4rem 2.4rem 2.6rem}
.phero.v-split{display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch;background:var(--peri);min-height:0}
.phero.v-split .shot,.phero.v-split .scrim{display:none}
.phero.v-split .s-nav{grid-column:1/-1;position:relative;background:var(--paper);border-bottom:1px solid var(--peri-line)}
.phero.v-split .s-nav ul,.phero.v-split .s-nav.over ul{color:var(--ink)}
.phero.v-split .s-nav .cta{background:var(--blue);color:#fff}
.phero.v-split .s-nav .lk{content:url("")}
.phero.v-split .core{padding:3.2rem 2.4rem 3rem;max-width:none}
.phero.v-split .core .h-xl,.phero.v-split .core .lede{color:var(--ink);text-shadow:none}
.phero.v-split .core .lede{color:#404A63}
.phero.v-split .core .kicker{color:var(--gold);text-shadow:none}
.phero.v-split figure{margin:0;position:relative;padding:1.6rem 2.4rem 1.6rem 0}
.phero.v-split figure img{width:100%;height:100%;object-fit:cover;display:block;max-height:22rem}
.phero.v-split .btn.light{color:var(--ink);border-color:var(--ink)}
.phero.v-duo .shot{filter:none}
.phero.v-duo .scrim{background:linear-gradient(to right,rgba(1,22,64,.82) 0%,rgba(1,22,64,.55) 45%,rgba(1,22,64,.18) 100%)}
.phero.v-duo{min-height:18rem}
@media (max-width:1024px){
.phero.v-split{grid-template-columns:1fr}
.phero.v-split figure{padding:0 1.5rem 1.5rem}
.phero.v-split .core{padding:2.4rem 1.5rem 1.6rem}
.rslider{padding:2.3rem 1.5rem 2rem}
}
/* hero options preview page */
.optlabel{padding:1.4rem 2.4rem .8rem;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border-top:4px solid var(--line);background:#fff}
.s-nav .lk{height:52px}
@media (max-width:768px){ .s-nav .lk{height:38px} }
.phero.v-split figure:before{content:"";position:absolute;inset:1.6rem 2.4rem 1.6rem 0;transform:translate(.7rem,.7rem);border:1px solid var(--gold);pointer-events:none}
.phero.v-split figure img{position:relative;z-index:1}
@media (max-width:1024px){ .phero.v-split figure:before{inset:0 1.5rem 1.5rem} }
.rcard .q{margin:0;padding:0}
.rcard{flex-basis:calc(50% - .7rem)}
@media (max-width:768px){ .rcard{flex-basis:88%} }
.rcard{margin:0}
/* four reviews in view on desktop, two on tablet, one on phone */
.rcard{flex-basis:calc(25% - 1.05rem)}
.rcard .q{font-size:.94rem;line-height:1.55}
.rslider.static .rctl{display:none}
@media (max-width:1024px){ .rcard{flex-basis:calc(50% - .7rem)} }
@media (max-width:768px){ .rcard{flex-basis:88%} }
/* ============ pass 6: legibility, hero video, colour, homepage notes (2026-09-12) ============ */
/* base scale: 16 -> 18px so every rem-based size grows together; then the small labels get their own lift */
body{font-size:18px}
@media (max-width:768px){ body{font-size:16px} }
.lede{font-size:1.18rem;line-height:1.7}
.body-s{font-size:1.02rem;line-height:1.72;color:#3D4560}
.kicker{font-size:.76rem}
.h-lg{font-size:clamp(1.9rem,3.2vw,2.7rem)}
.h-xl{font-size:clamp(2.5rem,4.8vw,4rem)}
/* buttons: navy on light, white on dark. gold stays an accent, not a fill */
.btn{font-size:.8rem;padding:1.05rem 1.7rem}
.btn.gold{background:var(--ink);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost span{color:var(--gold)}
.hero .btn.gold,.phero .btn.gold,.cta-band .btn.gold,.partners .btn.gold,.rslider .btn.gold,.darkproof .btn.gold,.qbox .btn.gold,.stepcta .btn{background:#fff;color:var(--ink)}
.btn.light{border-color:rgba(255,255,255,.75)}
/* nav: logo +40%, text and CTA up */
.s-nav{padding:1.25rem 2.4rem}
.s-nav .lk{height:72px}
.s-nav ul{font-size:.82rem;gap:1.9rem}
.s-nav .cta{font-size:.78rem;padding:.9rem 1.4rem}
.s-nav.over .cta{background:#fff;color:var(--ink)}
@media (max-width:768px){ .s-nav .lk{height:48px} .s-nav{padding:.9rem 1.2rem} }
/* homepage hero: video with a navy overlay, like the live site */
.hero{min-height:40rem}
video.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero .scrim{background:linear-gradient(to top,rgba(1,22,64,.92) 0%,rgba(1,22,64,.62) 40%,rgba(1,22,64,.42) 100%)}
.hero .core{max-width:52rem;padding-bottom:8rem;gap:1.3rem}
.hero .lede{max-width:40rem}
/* proof bar: full width, 30% bigger, badge you can read */
.situations{margin:0;padding-bottom:.6rem}
.situations .door-head{padding-top:3.4rem}
.proofline{padding:1.55rem 2.4rem;gap:.9rem 1.6rem}
.proofline .badge{font-size:1.42rem}
.proofline .src{font-size:.8rem}
.proofline img{height:72px}
/* start here: one line each, bridge much bigger */
.door-head .h-lg{max-width:none}
.door-head p{max-width:none;font-size:1.08rem}
.span-wrap{max-width:82rem;padding:3.4rem 2.4rem 0}
.span-svg .deck{stroke-width:3.4}
.span-svg .cable,.span-svg .tower{stroke-width:2.2}
/* the three doors */
.doors{gap:2.8rem}
.door .who{font-size:.74rem}
.door .said{font-size:1.6rem}
.door .why{font-size:1.02rem;color:#3D4560}
.door .go{display:inline-block;align-self:flex-start;font-size:.8rem;padding:.85rem 1.3rem;border:1px solid var(--ink);color:var(--ink);margin-top:.3rem}
.door .go:hover{background:var(--ink);color:#fff}
.door .go span{color:var(--gold)}
/* stats: the numbers are the point */
.proof .p{padding:3.2rem 2.2rem;gap:.8rem}
.proof .n{font-size:clamp(2.8rem,4vw,4.4rem)}
.proof .l{font-size:.82rem;color:#D9E0F0;max-width:18rem}
/* referral band */
.partners .ph h2{font-size:1.9rem}
.partners .ph p{font-size:1.02rem}
.pcard .pn{font-size:1.3rem}
.pcard .pd{font-size:.98rem;color:#C3CDE4}
.pcard .pg{font-size:.78rem}
/* what happens next */
.steps .sh h2{font-size:clamp(2rem,3.2vw,2.7rem)}
.steps .sh p{font-size:1.08rem;color:#3D4560}
.track:before{top:34px}
.step .num{width:70px;height:70px;font-size:1.8rem}
.step .st{font-size:1.5rem;margin-top:.5rem}
.step .sd{font-size:1.02rem;color:#303850;max-width:22rem}
.stepcta{max-width:60rem;margin:3rem auto 0;background:var(--ink);padding:1.8rem 2.2rem;gap:1.2rem 2.4rem}
.stepcta .body-s{font-family:var(--serif);font-size:1.5rem;line-height:1.3;color:#fff;margin:0;max-width:30rem}
.stepcta .btn{background:#fff;color:var(--ink)}
/* the qualifier */
.qual .qt{max-width:36rem;gap:1.2rem}
.qual ul{font-size:1.04rem;gap:.7rem;color:#3D4560}
.qwidget{padding:2rem 2.1rem 2.1rem;gap:1.2rem}
.qwidget .qstep{font-size:.74rem}
/* who you will be talking to */
.people .txt{max-width:36rem;gap:1.2rem}
.bios{gap:2.8rem}
.bio img{width:9.5rem;height:12rem}
.bio .rl{font-size:.74rem}
.bio .nm{font-size:1.5rem}
.bio .bi{font-size:1.02rem;color:#3D4560}
.bio .lc{font-size:.78rem}
/* in their words */
.rev-head h2{font-size:2rem}
.rev-head b{font-size:1.5rem}.rev-head i{font-size:.82rem}
.rev .for{font-size:.72rem}.rev .q{font-size:1.14rem;line-height:1.55}.rev .who{font-size:.84rem}
/* partner logos: trimmed sources, one box, 25% bigger */
.wall .wt{font-family:var(--serif);font-size:1.7rem;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink);margin-bottom:2.2rem}
.wall .row{max-width:72rem;gap:2.4rem 2.2rem}
.wall img,.wall img.tall{width:160px;height:52px;max-width:100%;max-height:none;object-fit:contain;opacity:.85}
@media (max-width:768px){ .wall img,.wall img.tall{width:100px;height:36px} }
/* recent from the library */
.arts .ah h2{font-size:2rem}
.arts .ah a{font-size:.8rem;border:1px solid var(--ink);padding:.8rem 1.2rem}
.art .sit{font-size:.74rem}.art .ttl{font-size:1.34rem}.art .rd{font-size:.82rem}
/* fifteen minutes with sofia */
.book{padding:2.8rem 2.4rem;gap:2.4rem}
.book img{width:128px;height:128px}
.book .bh{font-size:1.8rem}
.book .bd{font-size:1.04rem;max-width:36rem}
.book .tel{font-size:.9rem}
/* footer */
.s-foot{padding:3.2rem 2.4rem}
.s-foot .col{font-size:.92rem;gap:.55rem}
.s-foot .col b{font-size:.74rem}
.s-foot .lic{font-size:.76rem}
.s-foot .mono{width:78px;height:78px}
.fbadges img{height:60px}.fbadges img.sq{height:72px}
/* interior pages: hero breathing room below the nav, and the same type lift */
.phero{min-height:24rem}
.phero .core{padding:9rem 2.4rem 3.2rem;gap:1.2rem}
.phero .h-xl{font-size:clamp(2.3rem,4.2vw,3.4rem)}
.phero.v-duo{min-height:24rem}
.phero.v-ink .core{padding:8.5rem 2.4rem 3.2rem}
.crumbs{font-size:.76rem}
.answerband .t{font-size:.76rem}
.answerband .a{font-size:clamp(1.35rem,2.4vw,1.85rem)}
.answerband .sub{font-size:1.04rem;color:#3D4560}
.sec p{font-size:1.06rem;color:#3D4560}
.sec h2{font-size:clamp(1.8rem,3vw,2.5rem)}
.ticks li{font-size:1.02rem}
.faq summary{font-size:1.24rem}
.faq p{font-size:1.02rem;color:#3D4560}
.cta-band .h{font-size:1.8rem}
.cta-band p{font-size:1.02rem}
.spec .l{font-size:.76rem}.spec .d{font-size:1rem}
.authpanel p{font-size:.98rem}.authpanel .cred li{font-size:.86rem}
.artmain p,.artmain li{font-size:1.08rem}
.toc ul{font-size:.98rem}
@media (max-width:1024px){ .phero .core{padding:7.5rem 1.5rem 2.6rem} .phero.v-ink .core{padding:7rem 1.5rem 2.6rem} }
@media (max-width:768px){
.phero .core{padding:6.2rem 1.2rem 2rem}
.proofline img{height:52px}.proofline .badge{font-size:1.15rem}
.step .num{width:56px;height:56px;font-size:1.4rem}.track:before{display:none}
.book img{width:96px;height:96px}
.hero{min-height:30rem}.hero .core{padding-bottom:4rem}
}
@media (max-width:768px){ .bios{grid-template-columns:1fr;gap:1.8rem} .bio img{width:6.6rem;height:8.4rem} }
/* ============ pass 7: nothing on the site renders under 1.1rem (Tay, 2026-09-12) ============ */
.kicker{font-size:1.1rem}
.btn{font-size:1.1rem}
.s-nav ul{font-size:1.1rem}
.s-nav .cta{font-size:1.1rem}
.door .who{font-size:1.1rem}
.door .why{font-size:1.1rem}
.door .go{font-size:1.1rem}
.bio .rl{font-size:1.1rem}
.bio .bi{font-size:1.1rem}
.bio .lc{font-size:1.1rem}
.s-foot .col{font-size:1.1rem}
.s-foot .col b{font-size:1.1rem}
.s-foot .lic{font-size:1.1rem}
.blog-filters{font-size:1.1rem}
.byline{font-size:1.1rem}
.card .sit{font-size:1.1rem}
.card .rd{font-size:1.1rem}
.proofline .src{font-size:1.1rem}
.rev-head .gs{font-size:1.1rem}
.rev-head i{font-size:1.1rem}
.rev .for{font-size:1.1rem}
.rev .who{font-size:1.1rem}
.rev .stars{font-size:1.1rem}
.vid .cap{font-size:1.1rem}
.vid .ph{font-size:1.1rem}
.proof .l{font-size:1.1rem}
.step .sd{font-size:1.1rem}
.arts .ah a{font-size:1.1rem}
.art .sit{font-size:1.1rem}
.art .rd{font-size:1.1rem}
.partners .ph p{font-size:1.1rem}
.pcard .pd{font-size:1.1rem}
.pcard .pg{font-size:1.1rem}
.book .tel{font-size:1.1rem}
.qual ul{font-size:1.1rem}
.qwidget .qstep{font-size:1.1rem}
.qrow .lb{font-size:1.1rem}
.qrow .fld{font-size:1.1rem}
.qres .rl{font-size:1.1rem}
.qres .rd{font-size:1.1rem}
.qnote{font-size:1.1rem}
.crumbs{font-size:1.1rem}
.answer .t{font-size:1.1rem}
.answer p{font-size:1.1rem}
.faq p{font-size:1.1rem}
.cta-band p{font-size:1.1rem}
.ticks li{font-size:1.1rem}
.artmain .sit{font-size:1.1rem}
.artmain .byline{font-size:1.1rem}
.artmain p{font-size:1.1rem}
.toc .tt{font-size:1.1rem}
.toc a{font-size:1.1rem}
.author .nm{font-size:1.1rem}
.author .cr{font-size:1.1rem}
.author .lic{font-size:1.1rem}
.qbox p{font-size:1.1rem}
.lift .t{font-size:1.1rem}
.lift .sub{font-size:1.1rem}
.split .txt p{font-size:1.1rem}
.split figure figcaption{font-size:1.1rem}
.gapband p{font-size:1.1rem}
.spec .l{font-size:1.1rem}
.spec .d{font-size:1.1rem}
.rel3 .w{font-size:1.1rem}
.rel3 .g{font-size:1.1rem}
.answerband .t{font-size:1.1rem}
.darkproof .rev .q{font-size:1.1rem}
.darkproof .rev .who{font-size:1.1rem}
.keep .ah a{font-size:1.1rem}
.artimg figcaption{font-size:1.1rem}
.authorbox .abl{font-size:1.1rem}
.authorbox .abr{font-size:1.1rem}
.authorbox p{font-size:1.1rem}
.authorbox .abl2{font-size:1.1rem}
.authpanel .al{font-size:1.1rem}
.authpanel .ar{font-size:1.1rem}
.authpanel p{font-size:1.1rem}
.authpanel .cred li{font-size:1.1rem}
.authpanel .cred li b{font-size:1.1rem}
.authpanel .more{font-size:1.1rem}
.rslider .gscore i{font-size:1.1rem}
.rcard .stars{font-size:1.1rem}
.rcard .q{font-size:1.1rem}
.rcard .who{font-size:1.1rem}
.rbtns button{font-size:1.1rem}
.rsrc{font-size:1.1rem}
.optlabel{font-size:1.1rem}
.toc ul{font-size:1.1rem}
.qbox .btn{font-size:1.1rem}
.s-nav ul li{white-space:nowrap}
.hero .core{max-width:calc(54rem + 2*var(--gx))}
.phero .core{max-width:calc(50rem + 2*var(--gx))}
/* body and sub copy up again */
.lede{font-size:1.24rem}
.body-s{font-size:1.1rem}
.sec p{font-size:1.12rem}
.door .why{font-size:1.08rem}
.step .sd{font-size:1.08rem}
.steps .sh p{font-size:1.12rem}
.pcard .pd{font-size:1.04rem}
.partners .ph p{font-size:1.08rem}
.qual ul{font-size:1.08rem}
.bio .bi{font-size:1.08rem}
.rev .q{font-size:1.2rem}
.book .bd{font-size:1.1rem}
.cta-band p{font-size:1.08rem}
.answerband .sub{font-size:1.1rem}
.faq p{font-size:1.08rem}
.ticks li{font-size:1.08rem}
.spec .d{font-size:1.06rem}
.artmain p,.artmain li{font-size:1.14rem}
.authpanel p{font-size:1.02rem}
.rcard .q{font-size:1.04rem}
.door-head p{font-size:1.12rem}
.phero .core{padding-top:8.2rem}
@media (max-width:768px){ body{font-size:17px} }
.toc ul a{font-size:max(1rem,16px)}
.authpanel .cred li,.authpanel .cred li b{font-size:max(.92rem,15px)}
.gapband p{font-size:max(1.08rem,16px)}
.qwidget .fld,.qwidget .lb{font-size:max(.9rem,15px)}
/* ============ pass 8: one gutter for every section. backgrounds bleed, text sits inside 80% ============ */
:root{--gx:10vw}
@media (max-width:1024px){:root{--gx:6vw}}
@media (max-width:768px){:root{--gx:1.2rem}}
.hero .core{padding-left:var(--gx);padding-right:var(--gx)}
/* front door, type only */
.door-head{padding-left:var(--gx);padding-right:var(--gx)}
.doors{padding-left:var(--gx);padding-right:var(--gx)}
.qband>div{padding-left:var(--gx);padding-right:var(--gx)}
/* people */
.people{padding-left:var(--gx);padding-right:var(--gx)}
.bios{padding-left:var(--gx);padding-right:var(--gx)}
.s-foot{padding-left:var(--gx);padding-right:var(--gx)}
/* blog, simplified */
.blog-head{padding-left:var(--gx);padding-right:var(--gx)}
.blog-filters{padding-left:var(--gx);padding-right:var(--gx)}
.feature{padding-left:var(--gx);padding-right:var(--gx)}
/* the span, back in the situations block */
.span-wrap{padding-left:var(--gx);padding-right:var(--gx)}
/* blog grid, bigger and better spaced */
.post-grid{padding-left:var(--gx);padding-right:var(--gx)}
/* proof, lifted above the doors */
.proofline{padding-left:var(--gx);padding-right:var(--gx)}
/* reviews, mapped to the three situations */
.reviews{padding-left:var(--gx);padding-right:var(--gx)}
/* how it works, compact */
.steps{padding-left:var(--gx);padding-right:var(--gx)}
/* logo wall */
.wall{padding-left:var(--gx);padding-right:var(--gx)}
/* recent articles */
.arts{padding-left:var(--gx);padding-right:var(--gx)}
/* referral band, slimmed to wayfinding */
.partners{padding-left:var(--gx);padding-right:var(--gx)}
/* book a call, compact */
.book{padding-left:var(--gx);padding-right:var(--gx)}
/* the qualifier, shown rather than mentioned */
.qual{padding-left:var(--gx);padding-right:var(--gx)}
.phero .core{padding-left:var(--gx);padding-right:var(--gx)}
.crumbs{padding-left:var(--gx);padding-right:var(--gx)}
.sec{padding-left:var(--gx);padding-right:var(--gx)}
.cta-band{padding-left:var(--gx);padding-right:var(--gx)}
/* article template */
.artwrap{padding-left:var(--gx);padding-right:var(--gx)}
/* alternating image + text */
.split{padding-left:var(--gx);padding-right:var(--gx)}
/* the gap, drawn big */
.gapband{padding-left:var(--gx);padding-right:var(--gx)}
/* spec cards */
.specs{padding-left:var(--gx);padding-right:var(--gx)}
/* proof block with a photo */
.proofblock{padding-left:var(--gx);padding-right:var(--gx)}
/* related situations */
.rel3{padding-left:var(--gx);padding-right:var(--gx)}
/* ============ interior v3 ============ */
/* the answer is a band, same device as the homepage proof strip, not a cut-out */
.answerband{padding-left:var(--gx);padding-right:var(--gx)}
/* dark proof band with the span drawn faintly across it, same as the homepage referral band */
.darkproof{padding-left:var(--gx);padding-right:var(--gx)}
.townband .t{padding-left:var(--gx);padding-right:var(--gx)}
/* keep reading on every page */
.keep{padding-left:var(--gx);padding-right:var(--gx)}
/* article: content reaches the sidebar, images inside the body */
.artwrap{padding-left:var(--gx);padding-right:var(--gx)}
/* reviews slider: scroll-snap, no library */
.rslider{padding-left:var(--gx);padding-right:var(--gx)}
.phero.v-ink .core{padding-left:var(--gx);padding-right:var(--gx)}
.phero.v-split .core{padding-left:var(--gx);padding-right:var(--gx)}
.phero.v-split figure{padding-left:var(--gx);padding-right:var(--gx)}
/* hero options preview page */
.optlabel{padding-left:var(--gx);padding-right:var(--gx)}
.proofline{padding-left:var(--gx);padding-right:var(--gx)}
.span-wrap{padding-left:var(--gx);padding-right:var(--gx)}
/* fifteen minutes with sofia */
.book{padding-left:var(--gx);padding-right:var(--gx)}
/* footer */
.s-foot{padding-left:var(--gx);padding-right:var(--gx)}
.s-nav{padding-left:var(--gx);padding-right:var(--gx)}
.hero .core,.phero .core{padding-left:var(--gx);padding-right:var(--gx)}
.crumbs{padding-left:var(--gx);padding-right:var(--gx)}
.proof{padding:0 var(--gx)}
.proof .p{padding-left:1.6rem;padding-right:1.6rem}
.proof .p:first-child{padding-left:0}
/* inner blocks that were narrower than their neighbours now run edge to edge inside the gutter */
.track,.stepcta,.wall .row,.span-wrap,.rev-grid,.plist{max-width:none}
.span-wrap{padding-left:var(--gx);padding-right:var(--gx)}
.stepcta{margin-left:0;margin-right:0}
.s-foot{padding-left:var(--gx);padding-right:var(--gx)}
/* nav runs the full width again; logo hard left, CTA hard right, the page text keeps its 80% column */
.s-nav{padding-left:2.4rem;padding-right:2.4rem}
.s-nav ul{gap:2.2rem}
@media (max-width:1239px){ .s-nav{padding-left:1.5rem;padding-right:1.5rem} .s-nav ul{gap:1.4rem} }
@media (max-width:768px){ .s-nav{padding-left:1.2rem;padding-right:1.2rem} }
/* ============ pass 9: Tay's notes 2026-09-12 (evening) ============ */
.faq details{border-top:0;border-bottom:1px solid var(--line)}
.faq details:first-child,.faq.cols details:nth-child(2){border-top:1px solid var(--line)}
.artmain h2{font-size:1.9rem}
.artmain h3{font-size:1.4rem}
.artmain h4{font-size:1.2rem}
.authorbox.slim{grid-template-columns:6rem 1fr;gap:1.4rem;align-items:center}
.authorbox .abl{font-size:.74rem}
.authorbox .abn{font-size:1.5rem}
.authorbox .abr{font-size:.78rem;letter-spacing:.1em;line-height:1.6}
.qbox{padding:1.8rem}
.qbox .h{font-size:1.5rem;line-height:1.25}
.qbox p{font-size:1.02rem;margin:.7rem 0 1.2rem}
.qbox .btn{font-size:.78rem;padding:.95rem 1.3rem}
.s-foot{border-top:1px solid rgba(255,255,255,.18)}
.blog-filters{gap:2.6rem;padding-top:.4rem}
.partners{padding-top:4.2rem;padding-bottom:4.4rem}
.sec .rel3{padding:2rem 0 0}
.feature{text-decoration:none;color:inherit}
.card,.art{color:inherit}
.card .ttl:hover,.feature:hover h2{color:var(--gold)}
.qbox .btn{display:block;text-align:center}
/* ============ pass 10: weight, widows, hero air ============ */
body{font-weight:400}
p,li,.lede,.body-s,.sub,.d,.why,.sd,.pd,.bi,.bd,.q,.who,figcaption,summary,dd,dt,blockquote{text-wrap:pretty}
h1,h2,h3,.h-xl,.h-lg,.h-md,.h-sm{text-wrap:balance}
.btn,.more,.go,.pg,.arts .ah a,.keep .ah a,.rel3 .g,.s-nav .cta{white-space:nowrap}
.s-nav ul{gap:1.6rem;letter-spacing:.08em}
.s-nav .cta{padding:.9rem 1.2rem;letter-spacing:.08em}
.kicker,.door .who,.rev .for,.card .sit,.art .sit,.rel3 .w,.spec .l,.answerband .t,.authpanel .al,.authpanel .ar,.authorbox .abl,.authorbox .abr,.proofline .src,.crumbs,.blog-filters,.wall .wt,.s-foot .col b,.qwidget .qstep,.qwidget .lb,.rslider .gscore i,.rev-head i{letter-spacing:.1em}
.door .why{font-size:1.2rem;line-height:1.7}
.phero .core{padding-top:11rem;padding-bottom:3.6rem}
.phero{min-height:27rem}
.qbox .btn{font-size:1rem;letter-spacing:.06em;padding:1rem .6rem}
@media (max-width:1024px){ .phero .core{padding-top:9rem} }
@media (max-width:768px){ .phero .core{padding-top:7.4rem} body{font-size:17px} }
.tblwrap{overflow-x:auto;margin:1.4rem 0}
.artmain table{border-collapse:collapse;width:100%;font-size:1.1rem;line-height:1.5}
.artmain th,.artmain td{text-align:left;vertical-align:top;padding:.8rem .9rem;border-bottom:1px solid var(--line)}
.artmain th{font-family:var(--serif);font-weight:400;color:var(--ink);border-bottom:2px solid var(--gold)}
.artmain td:first-child{font-weight:600;color:var(--ink)}
/* ============ pass 11: library cards, filters, social icons, contact lines ============ */
.card{gap:.7rem}
.card .ttl{font-size:1.5rem;line-height:1.25}
.card .snip{font-size:1.1rem;line-height:1.65;color:#3D4560}
.card .more{font-size:1.1rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-top:auto;padding-top:.4rem}
.card .more span{color:var(--gold)}
.card:hover .more{color:var(--gold)}
.card img{aspect-ratio:16/10;object-fit:cover}
.card.wide{grid-column:span 2;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.card.wide img{aspect-ratio:16/10;height:100%}
.card.wide .ttl{font-size:1.9rem}
.card[hidden]{display:none}
.post-grid{gap:3rem 2.4rem}
.feature img{aspect-ratio:16/10;object-fit:cover}
.blog-filters button{background:none;border:0;padding:0 0 .25rem;font:inherit;font-size:1.1rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);cursor:pointer;border-bottom:1px solid transparent}
.blog-filters button.on{color:var(--ink);border-bottom-color:var(--gold)}
.blog-filters button:hover{color:var(--ink)}
.soc{display:flex;gap:.8rem;margin-top:1.4rem}
.soc a{width:44px;height:44px;border-radius:50%;background:#A67D2B;display:flex;align-items:center;justify-content:center}
.soc a:hover{background:var(--gold)}
.soc svg{width:20px;height:20px;fill:#fff;display:block}
.split .contact{margin-top:.6rem;font-size:1.1rem}
.split .contact a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.split .contact a:hover{color:var(--gold)}
@media (max-width:1024px){ .card.wide{grid-column:span 2} }
@media (max-width:768px){ .card.wide{grid-column:auto;display:flex} }
.card.wide{grid-template-columns:1.1fr .9fr;grid-template-rows:auto auto 1fr;align-items:start;column-gap:2.4rem;row-gap:.7rem}
.card.wide img{grid-column:1;grid-row:1/span 3;height:100%}
.card.wide .ttl,.card.wide .snip,.card.wide .more{grid-column:2}
.card.wide .ttl{align-self:end}
.s-foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:2.4rem;align-items:start}
.soc a{width:40px;height:40px}.soc svg{width:18px;height:18px}
@media (max-width:1024px){ .s-foot{grid-template-columns:1fr 1fr 1fr} .s-foot .col:first-child{grid-column:1/-1} }
@media (max-width:768px){ .s-foot{grid-template-columns:1fr 1fr} .card.wide{display:flex;flex-direction:column} .card.wide img{height:auto} }
.s-foot{padding-left:2.4rem;padding-right:2.4rem;grid-template-columns:1.8fr 1fr 1.15fr 1fr 1.25fr;gap:2.8rem}
.s-foot .lic{white-space:nowrap}
.fbadges{flex-wrap:nowrap;gap:1.1rem}
.s-foot .col a,.s-foot .col span{white-space:nowrap}
@media (max-width:1024px){ .s-foot{padding-left:1.5rem;padding-right:1.5rem} }
@media (max-width:768px){ .s-foot{padding-left:1.2rem;padding-right:1.2rem} .s-foot .col a,.s-foot .col span{white-space:normal} }
/* author panel hierarchy: name leads, labels are eyebrows */
.authpanel .al,.authpanel .ar{font-size:1.1rem;letter-spacing:.06em;font-weight:500;line-height:1.4}
.authpanel .al{color:var(--gold)}
.authpanel .an{font-size:2rem;line-height:1.15;margin:.35rem 0 .3rem}
.authpanel .ar{color:var(--blue);text-transform:none;letter-spacing:0}
.artwrap{grid-template-columns:minmax(0,1fr) 19rem;gap:3rem}
.qbox .btn{white-space:normal;line-height:1.35;padding:.9rem 1rem;letter-spacing:.05em;font-size:1.1rem}
.qbox .btn{font-size:.9rem;letter-spacing:.07em;padding:.95rem 1rem;white-space:nowrap;display:block;text-align:center}
.soc a{width:42px;height:42px;border-radius:9px}
.soc svg{width:19px;height:19px}
.phero .shot{object-position:var(--pos,center 22%)}
.phero.tall{min-height:40rem}
.phero.tall .core{padding-top:18rem;padding-bottom:3.4rem}
.phero.tall .scrim{background:linear-gradient(to top,rgba(1,12,36,.94) 0%,rgba(1,12,36,.7) 34%,rgba(1,12,36,.12) 62%,rgba(1,12,36,.35) 100%)}
@media (max-width:768px){ .phero.tall{min-height:30rem} .phero.tall .core{padding-top:12rem} }
.phero.tall .scrim{background:linear-gradient(to top,rgba(1,12,36,.92) 0%,rgba(1,12,36,.74) 20%,rgba(1,12,36,.5) 38%,rgba(1,12,36,.26) 54%,rgba(1,12,36,.1) 70%,rgba(1,12,36,.16) 86%,rgba(1,12,36,.3) 100%),linear-gradient(to right,rgba(1,12,36,.5) 0%,rgba(1,12,36,.34) 22%,rgba(1,12,36,.18) 40%,rgba(1,12,36,.07) 58%,rgba(1,12,36,0) 76%)}
/* narrow screens crop the extended frame, so re-centre on the pair */
@media (max-width:900px){ .phero.tall .shot{object-position:66% 16%!important} }
@media (max-width:768px){ .phero.tall .scrim{background:linear-gradient(to top,rgba(1,12,36,.94) 0%,rgba(1,12,36,.72) 46%,rgba(1,12,36,.3) 100%)} }
/* ============ pass 12: nav dropdowns and a real mobile menu ============ */
.s-nav{position:relative}
.s-nav ul{align-items:center}
.s-nav li{position:relative}
.s-nav .car{width:9px;height:6px;margin-left:.42em;opacity:.75;transition:transform .18s ease}
.s-nav .has-sub:hover .car,.s-nav .has-sub:focus-within .car{transform:rotate(180deg)}
.s-nav .sub{position:absolute;top:100%;left:-1.1rem;min-width:16.5rem;display:block;flex-direction:column;align-items:stretch;
background:var(--paper);border-top:2px solid var(--gold);box-shadow:0 18px 40px rgba(1,22,64,.16);
padding:.5rem 0;gap:0;font-size:1.1rem;letter-spacing:.02em;text-transform:none;font-weight:400;color:var(--ink);
opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:20}
.s-nav .has-sub:hover>.sub,.s-nav .has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:translateY(0)}
.s-nav .sub li{white-space:nowrap}
.s-nav .sub a{display:block;padding:.62rem 1.4rem;color:var(--ink);font-family:var(--serif);font-size:1.15rem}
.s-nav .sub a:hover{background:var(--tint);color:var(--gold)}
.s-nav.over .sub,.s-nav.over .sub a{color:var(--ink)}
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:40px;padding:0;background:none;border:0;cursor:pointer}
.navtoggle span{display:block;height:2px;width:26px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.s-nav.over .navtoggle{color:#fff}
.s-nav.open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.s-nav.open .navtoggle span:nth-child(2){opacity:0}
.s-nav.open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1239px){
.s-nav{flex-wrap:wrap}
.navtoggle{display:flex;order:2;margin-left:auto}
.s-nav .cta{order:3;margin-left:1rem}
.s-nav #navmenu{display:none;order:4;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;
background:var(--paper);color:var(--ink);margin:.9rem -1.5rem -1.25rem;padding:.6rem 0 1rem;border-top:1px solid var(--line)}
.s-nav.open #navmenu{display:flex}
.s-nav #navmenu>li>a{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.5rem;
font-size:1.1rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.s-nav .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:0;
padding:0 0 .5rem;background:var(--tint);min-width:0}
.s-nav .sub a{padding:.6rem 1.5rem .6rem 2.4rem}
.s-nav .car{display:none}
}
@media (max-width:768px){ .s-nav #navmenu{margin-left:-1.2rem;margin-right:-1.2rem} .s-nav #navmenu>li>a,.s-nav .sub a{padding-left:1.2rem} .s-nav .sub a{padding-left:2.1rem} }
/* open state: the bar gets a solid ground so nothing shows through */
@media (max-width:1239px){
.s-nav.open,.s-nav.over.open{background:var(--paper);border-bottom:1px solid var(--line);color:var(--ink)}
.s-nav.over.open .cta{background:var(--blue);color:#fff}
.s-nav.open .navtoggle{color:var(--ink)}
.s-nav #navmenu{max-height:calc(100vh - 6rem);overflow-y:auto;-webkit-overflow-scrolling:touch;
margin-bottom:0;padding-bottom:.8rem;box-shadow:0 18px 30px rgba(1,22,64,.12)}
.s-nav.open{padding-bottom:0}
}
/* one variable for the nav gutter so the open menu can bleed to both edges exactly */
.s-nav{--navpad:2.4rem;padding-left:var(--navpad);padding-right:var(--navpad)}
@media (max-width:1239px){
.s-nav{--navpad:1.5rem}
.s-nav #navmenu{flex-basis:calc(100% + var(--navpad) * 2);margin:.9rem calc(var(--navpad) * -1) 0}
}
@media (max-width:768px){ .s-nav{--navpad:1.2rem} }
/* phones: logo and menu button only in the bar, the CTA leads the open menu */
.s-nav .ctarow{display:none}
@media (max-width:768px){
.s-nav{gap:1rem}
.s-nav>.cta{display:none}
.s-nav .navtoggle{margin-left:auto}
.s-nav .ctarow{display:block;padding:1rem var(--navpad) .5rem}
.s-nav .ctarow .cta{display:block;text-align:center;background:var(--ink);color:#fff;padding:1.05rem 1rem}
}
/* nav type a touch smaller than the body floor: it is UI, not reading copy */
.s-nav ul{font-size:.95rem}
.s-nav .cta{font-size:.92rem}
.s-nav .sub{font-size:1rem}
.s-nav .sub a{font-size:1.06rem}
@media (max-width:1239px){ .s-nav #navmenu>li>a{font-size:.98rem} .s-nav .sub a{font-size:1.06rem} }
/* ============ pass 13: mobile and tablet sweep (last block, so it wins the cascade) ============ */
@media (max-width:1024px){
/* the article grid and footer were being re-widened by later unconditional rules */
.artwrap{grid-template-columns:1fr;gap:2.4rem;padding-left:var(--gx);padding-right:var(--gx)}
.artside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start}
.authpanel{grid-column:1/-1}
.s-foot{grid-template-columns:1fr 1fr 1fr;gap:2rem 1.6rem}
.s-foot .col:first-child{grid-column:1/-1}
.card.wide{grid-column:span 2;grid-template-columns:1fr 1fr}
.rcard{flex-basis:calc(50% - .7rem)}
}
@media (max-width:768px){
.artside{grid-template-columns:1fr}
.s-foot{grid-template-columns:1fr 1fr;gap:1.8rem 1.2rem}
.s-foot .col a,.s-foot .col span{white-space:normal}
.s-foot .col a{padding:.3rem 0} /* touch room without changing the look */
.pcard .pg,.rel3 .g,.arts .ah a,.keep .ah a,.card .more{padding:.45rem 0;display:inline-block}
/* buttons wrap instead of pushing the page sideways */
.btn{white-space:normal;padding:1rem 1.2rem}
.hero .cta-row,.phero .cta-row{width:100%}
.hero .btn,.phero .btn{flex:1 1 100%;text-align:center}
/* bios: the photo stops forcing the row wider than the screen */
.bios{grid-template-columns:1fr}
.bio{gap:1rem}
.bio img{width:5.6rem;height:7.2rem;flex:none}
.bio .t{min-width:0}
.bio .bi,.bio .nm,.bio .rl,.bio .lc{overflow-wrap:anywhere}
.card.wide{grid-column:auto;display:flex;flex-direction:column}
.rcard{flex-basis:88%}
.proof .p{padding:1.6rem 1.2rem}
.book{grid-template-columns:1fr;gap:1.2rem;text-align:left}
.book .ba{align-items:flex-start}
.stepcta{flex-direction:column;align-items:flex-start;padding:1.5rem 1.2rem}
.rev-head,.arts .ah,.keep .ah,.rslider .rh{gap:.6rem}
.tblwrap{margin-left:calc(var(--gx)*-1);margin-right:calc(var(--gx)*-1);padding:0 var(--gx)}
}
/* grid items default to min-width:auto, so the wide table was stretching the article column */
@media (max-width:1024px){
.artwrap{grid-template-columns:minmax(0,1fr)}
.artmain,.artside,.artside>*{min-width:0}
.tblwrap{max-width:100%}
}
/* tablets: two columns where one wastes the width */
@media (min-width:600px) and (max-width:1024px){
.proof{grid-template-columns:1fr 1fr}
.proof .p{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
.proof .p:nth-child(2n){border-left:1px solid rgba(255,255,255,.16)}
.post-grid,.bios,.rev-grid,.artrow,.keep .artrow,.specs,.rel3,.plist,.doors{grid-template-columns:1fr 1fr}
.s-foot{grid-template-columns:1fr 1fr 1fr}
.wall .row{grid-template-columns:repeat(4,1fr)}
.card.wide{grid-column:span 2;display:flex;flex-direction:column}
.book{grid-template-columns:auto 1fr;row-gap:1.2rem}
.book .ba{grid-column:1/-1;align-items:flex-start}
}
/* related situations: the question carries the card, no numbering */
.rel3 a{gap:1rem;padding-top:1.3rem}
.rel3 .s{font-size:clamp(1.35rem,1.8vw,1.6rem);line-height:1.28}
/* library headline holds one line where there is room for it */
@media (min-width:1200px){ .blog-head .h-lg{white-space:nowrap} }
/* card art is designed at 1200x630, so never crop it */
.card img,.feature img,.art img,.artimg img{aspect-ratio:1200/630;object-fit:cover}
.card.wide img{aspect-ratio:1200/630;height:auto;align-self:start}
.card.wide{grid-column:auto;display:flex;flex-direction:column} /* retired: the ground rotation carries the rhythm */
/* lead and card art is drawn at 1200x630, so let the ratio govern and never clamp the height */
.artimg img,.card img,.feature img,.art img{max-height:none}
/* ============================================================
PASS 14 - MOBILE
Brings the phone build onto the house pattern used across
the other Tay Design sites: compact single column, a fixed
two-up call/CTA bar at the bottom, 44px tap targets, and no
type under 1.1rem. Last block in the file so it wins.
============================================================ */
/* --- the fixed call / action bar (house pattern) --- */
.m-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:998;height:60px;
background:var(--paper);box-shadow:0 -8px 24px -8px rgba(1,22,64,.22)}
.m-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;height:100%;
font-size:.84rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
text-align:center;line-height:1.15;padding:0 .6rem;-webkit-tap-highlight-color:transparent;
transition:opacity .15s}
.m-bar a:active{opacity:.72}
.m-bar .m-call{background:var(--paper);color:var(--ink);border-top:1px solid var(--peri-line)}
.m-bar .m-call svg{width:17px;height:17px;fill:currentColor;flex:none}
.m-bar .m-go{background:var(--ink);color:#fff}
@media (max-width:768px){
.m-bar{display:flex}
body{padding-bottom:60px}
/* --- hero must clear the nav --- */
.hero{min-height:33rem}
.hero .core{padding-top:calc(var(--navh, 4.9rem) + 1.6rem);padding-bottom:3.4rem}
.phero.tall{min-height:27rem}
.phero.tall .core{padding-top:9rem}
/* --- 44px tap targets everywhere --- */
.s-foot .col a{min-height:44px;display:flex;align-items:center}
.blog-filters button{min-height:44px;padding-top:.6rem;padding-bottom:.6rem}
.crumbs a{display:inline-flex;align-items:center;min-height:40px}
.artside .more,.artside .an{min-height:44px;display:inline-flex;align-items:center}
.artside ul li a{display:flex;align-items:center;min-height:44px;padding:.2rem 0}
/* --- nothing under 1.1rem --- */
.bio .bi,.proof .l,.rev-head i,.art .rd,.artside ul li a{font-size:1.1rem;line-height:1.55}
.s-foot .col span,.s-foot .lic{font-size:1rem;line-height:1.6}
/* --- single column, always --- */
.s-foot{grid-template-columns:1fr;gap:2.2rem}
.s-foot .col:first-child{grid-column:auto}
.wall .row{grid-template-columns:repeat(2,1fr);gap:1.6rem 1.2rem}
/* --- full-width buttons read better on a phone --- */
.hero .cta-row,.phero .cta-row{flex-direction:column;align-items:stretch;gap:.65rem}
.hero .cta-row .btn,.phero .cta-row .btn{width:100%;text-align:center;justify-content:center}
/* --- kill parallax / fixed backgrounds on touch --- */
.hero .shot,.partners .wm,.phero .shot{transform:none!important}
}
/* one column for the footer on the narrowest phones too */
@media (max-width:560px){
.s-foot{grid-template-columns:1fr}
}
/* --- pass 14b: the 1.1rem floor, applied to prose and data on phones.
Tracked uppercase eyebrows keep their own size; they are labels, not reading copy. --- */
@media (max-width:768px){
.specs .spec .d,
.rslider .rcard .q,
.faq.cols details p,
.cta-band p,
.townband .towns,
.townband .t p,
.artside .authpanel p,
.artside .authpanel .cred li,
.artside .qbox p,
.s-foot .col span,
.s-foot .lic{font-size:1.1rem;line-height:1.6}
.artside .qbox .btn,
.m-bar a{font-size:.92rem}
/* About: contact links and the review-source links need a real tap area */
.split .txt p.contact a,
.rslider .rsrc a{display:inline-block;padding:.62rem 0}
}
/* fine print: small on desktop, never below the 1.1rem floor on a phone */
.fineprint{font-size:.82rem}
@media (max-width:768px){
.fineprint{font-size:1.1rem;line-height:1.55}
.artside .authpanel .cred li b,
.artside .authpanel .cred li span{font-size:inherit}
}
/* --- pass 14c: the two-date mini graphic.
Labels are centred on their pins, which pushes the right-hand one off the
edge on a phone. Anchor them inward so any label length stays in frame. --- */
@media (max-width:768px){
.mini text{font-size:11px}
}
/* --- pass 14d: on a phone the role badge stops covering the portrait and
sits under it as a caption, which also lets it keep the 1.1rem floor. --- */
@media (max-width:768px){
.split figure .fw{padding:0}
.split figure .fw:before{display:none}
.split figure figcaption{position:static;display:block;width:100%;
padding:.85rem 1.1rem;line-height:1.35;font-size:1.1rem}
}
/* --- pass 14e: the proof line stacks on a phone, so the dot separator
that sits between the two halves has nothing left to separate. --- */
@media (max-width:768px){
.proofline{flex-direction:column;text-align:center}
.proofline .dot{display:none}
}
/* ============================================================
PASS 15 - MOBILE TYPE SCALE AND LAYOUT
Tay's phone review, 2026-09-13. The 1.1rem floor from pass 12
was set for desktop legibility and made the phone build read
oversized, so the floor now applies to reading copy only and
every label, button and eyebrow steps down. Stacked rows that
ran too long become horizontal scrollers.
============================================================ */
/* --- buttons: smaller label at every width, per Tay --- */
.btn{font-size:.8rem}
.s-nav .cta{font-size:.78rem}
.door .go,.ah a,.card .more,.pcard .pg,.rel3 .g,.keep .ah a{font-size:.82rem}
@media (max-width:768px){
/* ---------- type scale ---------- */
/* reading copy stays comfortable, everything else steps down */
body{font-size:16px}
.body-s,.door .why,.split .txt p,.people .txt p,.agents p,.qbox p,
.artside .authpanel p,.card .snip,.specs .spec .d,.faq.cols details p,
.cta-band p,.townband .towns,.fineprint,.qnote{font-size:1rem;line-height:1.62}
.artmain p,.artmain li{font-size:1.03rem;line-height:1.72}
/* eyebrows, labels and micro-copy: tracked uppercase, not reading copy */
.kicker,.door .who,.card .sit,.art .sit,.rel3 .w,.spec .l,.answerband .t,
.authpanel .al,.authpanel .ar,.authorbox .abl,.authorbox .abr,
.proofline .src,.crumbs,.blog-filters,.blog-filters button,
.wall .wt,.s-foot .col b,.qwidget .qstep,.qwidget .lb,
.rslider .gscore i,.rev-head i,.proof .l,.bio .rl,.split figure figcaption,
.toc .tt,.byline{font-size:.72rem;letter-spacing:.1em;line-height:1.5}
.btn,.door .go,.ah a,.card .more,.pcard .pg,.rel3 .g{font-size:.75rem}
.m-bar a{font-size:.78rem}
/* headings step down one notch */
.h-lg,.rev-head h2,.sec h2,.split .txt h2,.keep .ah h2,.agents h2{font-size:1.5rem;line-height:1.25}
.door .said{font-size:1.28rem;line-height:1.3}
.bio .nm{font-size:1.18rem}
.art .ttl{font-size:1.05rem;line-height:1.4}
.card .ttl{font-size:1.12rem;line-height:1.38}
/* the two-date graphics */
.mini text{font-size:9px}
/* ---------- the stats bar scrolls across instead of stacking ---------- */
.proof{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;gap:0;padding:0;scrollbar-width:none}
.proof::-webkit-scrollbar{display:none}
.proof .p{flex:0 0 63%;scroll-snap-align:start;padding:1.5rem 1.3rem;
border-left:1px solid rgba(255,255,255,.16);border-top:0}
.proof .p:first-child{border-left:0;padding-left:var(--gx)}
.proof .p:last-child{padding-right:var(--gx)}
.proof .n{font-size:1.9rem}
.proof .l{min-height:0;max-width:none}
/* ---------- partner logos scroll across ---------- */
.wall .row{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;gap:1.8rem;padding:0 var(--gx) .4rem;
margin-left:calc(var(--gx) * -1);margin-right:calc(var(--gx) * -1);scrollbar-width:none}
.wall .row::-webkit-scrollbar{display:none}
.wall .row img{flex:0 0 auto;scroll-snap-align:center}
/* ---------- homepage reviews swipe instead of stacking ---------- */
.rev-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;gap:1rem;padding:0 var(--gx) .6rem;
margin-left:calc(var(--gx) * -1);margin-right:calc(var(--gx) * -1);scrollbar-width:none}
.rev-grid::-webkit-scrollbar{display:none}
.rev-grid .rev{flex:0 0 84%;scroll-snap-align:center}
.rev .q{font-size:1rem;line-height:1.58}
.rev .nm,.rev .who,.rev figcaption{font-size:.78rem}
.rev-head h2{font-size:1.5rem}
/* ---------- the "sending us a client" hierarchy ---------- */
.agents .ag h3,.agents .ag .h{font-size:1.05rem;line-height:1.35}
.agents .ag p{font-size:1rem;line-height:1.6}
.agents .go,.agents .ag a{font-size:.72rem;letter-spacing:.1em}
/* ---------- buying power block fits one screen ---------- */
.qwidget{padding-top:1.6rem;padding-bottom:1.6rem}
.qwidget .qstep{font-size:.68rem}
.qnote{font-size:.78rem;line-height:1.5}
.qbox .h{font-size:1.1rem}
/* ---------- team ---------- */
.bio img{width:6.4rem;height:6.4rem;object-fit:cover;object-position:center 12%} /* square on a phone */
.split figure img{aspect-ratio:1/1;object-fit:cover}
/* ---------- video leads the section it belongs to ---------- */
.people{display:flex;flex-direction:column}
.people .vid{order:-1;margin-bottom:1.3rem}
/* ---------- "all articles" sits on its own line ---------- */
.ah,.keep .ah{flex-wrap:wrap;gap:.5rem .9rem;align-items:baseline}
.ah a,.keep .ah a{white-space:nowrap}
/* ---------- blog page ---------- */
.blog-filters{gap:.5rem 1rem;padding-bottom:1rem}
.card.wide{gap:.55rem}
.card.wide .ttl{font-size:1.24rem;line-height:1.3}
.card.wide .snip{font-size:1rem;line-height:1.6}
.card.wide .byline{font-size:.72rem}
/* ---------- footer compacts down ---------- */
.s-foot{grid-template-columns:1fr 1fr;gap:1.5rem 1.2rem;padding-top:2.2rem;padding-bottom:2.2rem}
.s-foot .col:first-child{grid-column:1/-1}
.s-foot .col{gap:.1rem}
.s-foot .col a{min-height:0;padding:.42rem 0;font-size:.95rem;display:block}
.s-foot .col b{margin-bottom:.15rem}
.s-foot .col span,.s-foot .lic{font-size:.86rem;line-height:1.5}
.s-foot .fbadges img{max-height:34px}
.s-foot .soc a{width:32px;height:32px}
}
/* --- pass 15b: the open menu escapes the hero.
The nav sits inside .hero, which is overflow:hidden, so the open menu was
being cut off partway down the list. Fixed positioning lifts it clear and
gives it its own scroll, which is the pattern on the other sites. --- */
@media (max-width:1239px){
.s-nav.open #navmenu{position:fixed;left:0;right:0;top:var(--navh,78px);bottom:0;
max-height:none;margin:0;padding:.4rem 0 6rem;z-index:60;
background:var(--paper);border-top:1px solid var(--line);
overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 18px 30px rgba(1,22,64,.12)}
.s-nav.open{z-index:60}
body.navopen{overflow:hidden}
}
/* --- pass 15c: on a phone the table of contents is a horizontal strip at the
top of the article, where it is useful, instead of a list at the bottom. --- */
@media (max-width:768px){
.artwrap .toc.toc-top{border-top:0;border-bottom:1px solid var(--peri-line);
padding:0 0 .9rem;margin:0 0 1.6rem}
.artwrap .toc.toc-top .tt{display:block;margin-bottom:.5rem}
.artwrap .toc.toc-top ul{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:1.2rem;
margin:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.artwrap .toc.toc-top ul::-webkit-scrollbar{display:none}
.artwrap .toc.toc-top li{flex:0 0 auto}
.artwrap .toc.toc-top a{display:block;min-height:0;white-space:nowrap;font-size:.86rem;
padding:.35rem 0;border-bottom:1px solid transparent}
}
/* --- pass 15d: About and the article author panel on a phone --- */
@media (max-width:768px){
/* the portrait leads each profile, cropped square and smaller */
.split{display:flex;flex-direction:column;gap:1.2rem}
.split figure{order:-1;margin:0}
.split.person figure{max-width:13rem}
.split figure img{aspect-ratio:1/1;object-fit:cover;object-position:center 22%}
.split figure figcaption{padding:.6rem .9rem}
/* the author portrait beside the article is square too */
.authpanel img{aspect-ratio:1/1;object-fit:cover;object-position:center 20%;
max-width:11rem;margin-bottom:.9rem}
.authpanel .an{font-size:1.16rem}
.authpanel .cred li{font-size:.88rem;padding:.45rem 0}
.authpanel .cred li b{font-size:.95rem}
.authpanel p{font-size:1rem;line-height:1.62}
/* the dateline is reference, not reading copy */
.byline{font-size:.74rem;letter-spacing:.09em}
}
/* --- pass 15e: logo, and the action bar yields to the open menu --- */
@media (max-width:768px){
.s-nav .lk{height:60px} /* Tay: bigger logo on the phone */
body.navopen .m-bar{display:none}
}
@media (min-width:769px) and (max-width:1024px){
.s-nav .lk{height:64px}
}
/* --- pass 15f: two corrections from the phone review --- */
@media (max-width:768px){
/* the dateline: a later rule at 1.1rem was outranking the label scale */
.artmain .byline{font-size:.74rem;letter-spacing:.09em;line-height:1.55}
/* the author block stacks again; the pass-14 tap-target rule had turned
the name inline, so name, role and label ran together as one sentence */
.artside .authpanel .an{display:block;min-height:0}
.artside .authpanel .al,.artside .authpanel .ar{display:block}
.artside .more{min-height:0;padding:.5rem 0}
/* long addresses wrap at sensible points instead of mid-word */
.bio .lc,.split .txt .lc,.s-foot .col a{overflow-wrap:break-word;word-break:normal}
}
/* --- pass 15g: the featured post on a phone.
It was set at the desktop display scale, which read as a different, much
larger card than the grid beneath it. Now it leads the page by a notch,
not by a whole size step. --- */
@media (max-width:768px){
.feature{gap:1rem;padding-top:1.5rem;padding-bottom:1.7rem}
.feature .t{gap:.5rem}
.feature h2,.feature .h-lg{font-size:1.32rem;line-height:1.28}
.feature .body-s{font-size:1rem;line-height:1.6}
.feature .byline{font-size:.72rem;letter-spacing:.09em}
.feature img{aspect-ratio:16/9}
}
/* --- pass 15h: emails broke mid-word because an earlier rule allowed a break
at any character. Break only where a break is sensible. --- */
@media (max-width:768px){
.bio .bi,.bio .nm,.bio .rl,.bio .lc{overflow-wrap:break-word;word-break:normal}
.bio .lc{font-size:.92rem}
}
/* --- pass 15i: the "sending us a client" block.
The real classes are .ph / .pcard, so the earlier pass missed it. Header,
sub-head, card title, body and link now step down in that order, matching
the "what happens next" block Tay called the right hierarchy. --- */
@media (max-width:768px){
.partners .ph h2{font-size:1.5rem;line-height:1.25}
.partners .ph p{font-size:1rem;line-height:1.6}
.pcard .pn{font-size:1.06rem;line-height:1.35}
.pcard .pd{font-size:1rem;line-height:1.6}
.pcard .pg{font-size:.72rem;letter-spacing:.1em}
}
/* --- pass 15j: the buying power block compresses so the qualifier is
reachable without a long scroll. Every measure here is spacing or label
size; the form fields stay at 16px so iOS does not zoom on focus. --- */
@media (max-width:768px){
.qual{padding-top:1.6rem;padding-bottom:1.8rem;gap:1.1rem}
.qual .qt{gap:.55rem}
.qual ul{font-size:.95rem;gap:.3rem;margin-top:0;line-height:1.5}
.qwidget{padding:1.1rem 1.1rem 1.2rem;gap:.7rem}
.qwidget .dots i{width:20px}
.qwidget .lb{font-size:.68rem;letter-spacing:.1em}
.qwidget .fld{font-size:16px;padding-top:.62rem;padding-bottom:.62rem}
.qwidget .out,.qwidget .res{padding:.9rem 1rem}
}
/* further tightening of the qualifier rows and result */
@media (max-width:768px){
.qual{gap:.9rem;padding-top:1.4rem;padding-bottom:1.5rem}
.qual .h-lg{line-height:1.2}
.qwidget{gap:.55rem}
.qwidget .qrow{gap:.25rem}
.qwidget .qres{padding:.85rem 1rem}
.qwidget .qres .n,.qwidget .qres b{line-height:1.1}
.qwidget .qnote{font-size:.72rem;line-height:1.45}
}
/* --- pass 15k: hero sub-copy joins the new phone scale.
It was the last thing still set at the desktop lede size. --- */
@media (max-width:768px){
.hero .lede,.phero .lede{font-size:1.02rem;line-height:1.62}
.hero .h-xl{font-size:2.1rem;line-height:1.14}
.phero h1,.phero .h-xl{font-size:1.95rem;line-height:1.16}
}
/* ============================================================
PASS 16 - Tay's second phone review, 2026-09-13
============================================================ */
/* --- "All articles" is a real button under the cards, at every width --- */
.allrow{display:flex;justify-content:center;padding:1.6rem 0 .2rem}
.allrow .btn{padding:.95rem 1.9rem}
.ah{align-items:baseline}
@media (max-width:768px){
/* ---------- 1. the stats read as a set of four, not a carousel ---------- */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:visible;padding:0}
.proof .p{flex:none;padding:1.5rem 1.1rem;border-left:1px solid rgba(255,255,255,.16);
border-top:1px solid rgba(255,255,255,.16)}
.proof .p:nth-child(odd){border-left:0;padding-left:var(--gx)}
.proof .p:nth-child(even){padding-right:var(--gx)}
.proof .p:nth-child(-n+2){border-top:0}
.proof .n{font-size:1.75rem}
.proof .l{font-size:.68rem;line-height:1.5;min-height:0;max-width:none}
/* ---------- 2. "sending us a client": a real H3 above the body ---------- */
.pcard .pn{font-size:1.22rem;line-height:1.28;font-family:var(--serif);font-weight:400;
color:var(--ink);margin:0 0 .15rem}
.pcard .pd{font-size:1rem}
/* ---------- 3 + 11. the two section headings step up ---------- */
.qual .h-lg{font-size:1.72rem;line-height:1.18}
.qbox .h,.cta-band h2,.cta-band .h{font-size:1.4rem;line-height:1.22;font-family:var(--serif);font-weight:400}
/* ---------- 4. the video and the Meet the Team CTA carry the team
section on a phone; the two full bios are desktop-only ---------- */
.bios{display:none}
/* ---------- 8. the dateline gets air before the answer band ---------- */
.artmain .byline{margin-bottom:1.2rem}
.answerband{margin-top:.4rem}
/* ---------- 9. the article headline is the biggest thing on the page ---------- */
.artmain h1,.artwrap h1{font-size:1.88rem;line-height:1.18;margin-bottom:.5rem}
/* ---------- the action bar label fits on one line ---------- */
.m-bar a{font-size:.68rem;letter-spacing:.07em}
.m-bar .m-call{font-size:.8rem;letter-spacing:.03em}
}
/* ---------- 10. the table of contents reads as a contents list ---------- */
@media (max-width:768px){
.artwrap .toc.toc-top{border:1px solid var(--peri-line);border-top:2px solid var(--gold);
background:var(--tint);padding:1rem 1.1rem 1.1rem;margin:0 0 1.8rem}
.artwrap .toc.toc-top .tt{display:block;margin-bottom:.6rem;color:var(--mut)}
.artwrap .toc.toc-top ul{display:block;flex-direction:column;overflow:visible;
margin:0;padding:0;counter-reset:toc}
.artwrap .toc.toc-top li{display:block;counter-increment:toc;
border-top:1px solid var(--peri-line)}
.artwrap .toc.toc-top li:first-child{border-top:0}
.artwrap .toc.toc-top a{display:flex;gap:.7rem;align-items:baseline;white-space:normal;
padding:.62rem 0;font-size:1rem;line-height:1.4;color:var(--ink)}
.artwrap .toc.toc-top a:before{content:counter(toc,decimal-leading-zero);
font-family:var(--serif);font-size:.86rem;color:var(--gold);flex:none;min-width:1.6em}
}
/* --- pass 16b: the nav between the hamburger breakpoint and a wide desktop.
Lengthening the header button to "See your buying power" pushed the bar
139px past the viewport at 1100px. The bar tightens through this band so
the full label still fits. --- */
@media (min-width:1240px) and (max-width:1400px){
.s-nav{--navpad:1.4rem;gap:1rem}
.s-nav .lk{height:54px}
.s-nav ul{font-size:.78rem;gap:1.05rem}
.s-nav .cta{font-size:.7rem;padding:.72rem .95rem;letter-spacing:.08em}
.s-nav .sub a{font-size:.95rem}
}
/* --- pass 16c: the header bar and the footer both need about 1240px to lay
out at full width, so they change together at that width instead of at
1024, where the footer was running 39px past the viewport. --- */
@media (max-width:1239px){
.s-nav ul{display:none}
.s-foot{grid-template-columns:1fr 1fr 1fr;gap:2rem 1.6rem}
.s-foot .col:first-child{grid-column:1/-1}
}
/* --- pass 17: sub-page heroes keep the overlay treatment. The photos inside
the page are the ones that go square and full width on a phone: the split
blocks and the band in the dark proof section. The About portraits stay
small, which is what .person marks. --- */
@media (max-width:768px){
/* edge to edge, so the square spans the full width of the page */
.split:not(.person) figure{max-width:none;width:auto;
margin-left:calc(var(--gx) * -1);margin-right:calc(var(--gx) * -1)}
.split:not(.person) figure img{aspect-ratio:1/1;object-fit:cover;width:100%}
.darkproof .inner{display:flex;flex-direction:column;gap:1.4rem}
.darkproof{padding-left:var(--gx);padding-right:var(--gx)}
.darkproof .inner>img{aspect-ratio:1/1;object-fit:cover;order:-1;max-width:none;
width:calc(100% + var(--gx) * 2);
margin-left:calc(var(--gx) * -1);margin-right:calc(var(--gx) * -1)}
}
/* --- pass 18a: the address reads as one line rather than two stacked blocks,
and the sub-page hero gets room below the nav. --- */
@media (max-width:768px){
.s-foot .addr{display:block;line-height:1.5}
/* the nav is ~90px tall and sits over the hero, so the headline needs to
clear it with room to spare */
.phero .core{padding-top:9.6rem;padding-bottom:2.8rem}
.phero{min-height:34rem}
.phero.tall .core{padding-top:12rem}
}
/* ============================================================
PASS 18 - compliance, accessibility and legal furniture
============================================================ */
/* skip link: off screen until it takes focus */
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--ink);color:#fff;
padding:.85rem 1.2rem;font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:0}
h1[tabindex="-1"]{outline:none}
/* cookie choices */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:1200;background:var(--paper);
border-top:2px solid var(--gold);box-shadow:0 -14px 34px -12px rgba(1,22,64,.3);
padding:1.3rem var(--gx);display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.cookiebar p{margin:0;flex:1 1 22rem;font-size:.92rem;line-height:1.6;color:#3D4560}
.cookiebar .cbtns{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.cookiebar .cbtn{font:inherit;font-size:.74rem;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;padding:.85rem 1.25rem;border:1px solid var(--ink);cursor:pointer}
.cookiebar .cb-yes{background:var(--ink);color:#fff}
.cookiebar .cb-no{background:transparent;color:var(--ink)}
.cookiebar .clink{font-size:.86rem;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* legal strip under the footer */
.s-legal{background:#010E28;color:#9FAECD;padding:1.8rem var(--gx) 2.2rem;
border-top:1px solid rgba(255,255,255,.12)}
.s-legal .lgl{margin:0 0 1rem;font-size:.8rem;line-height:1.7;max-width:62rem}
.s-legal .lnav{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;align-items:center}
.s-legal .lnav a,.s-legal .lnav .cookieopen{font-size:.78rem;letter-spacing:.09em;
text-transform:uppercase;font-weight:600;color:#C3CDE4;text-decoration:none}
.s-legal .lnav .cookieopen{background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
.s-legal .lnav a:hover,.s-legal .lnav .cookieopen:hover{color:var(--gold)}
/* legal and accessibility pages */
.legalpage{padding:3rem var(--gx) 4rem;background:var(--paper)}
.legalwrap{max-width:46rem}
.legalwrap h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3rem);
line-height:1.12;margin:0 0 1rem;color:var(--ink)}
.legalwrap h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);
line-height:1.2;margin:2.4rem 0 .7rem;color:var(--ink)}
.legalwrap h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.25;
margin:2rem 0 .6rem;color:var(--ink)}
.legalwrap p{margin:0 0 1rem;font-size:1.04rem;line-height:1.78;color:#3D4560}
.legalwrap ul,.legalwrap ol{margin:0 0 1.2rem;padding-left:1.2rem;display:flex;
flex-direction:column;gap:.55rem;font-size:1.04rem;line-height:1.7;color:#3D4560}
.legalwrap li::marker{color:var(--gold)}
.legalwrap a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legalwrap a:hover{color:var(--gold)}
.legalwrap b,.legalwrap strong{color:var(--ink);font-weight:600}
@media (max-width:768px){
/* column + wrap makes flex spill into a second column off screen, so the
bar stacks with nowrap and the paragraph gives up its width basis */
.cookiebar{bottom:60px;padding:1.1rem var(--gx) 1.2rem;gap:.9rem;flex-direction:column;
flex-wrap:nowrap;align-items:stretch;max-height:62vh;overflow-y:auto}
.cookiebar p{flex:0 0 auto;font-size:.92rem}
.cookiebar .cbtns{flex:0 0 auto}
.cookiebar .cbtns{flex-direction:column;align-items:stretch}
.cookiebar .cbtn{width:100%;text-align:center;min-height:46px}
.cookiebar .clink{text-align:center;padding:.4rem 0}
.s-legal{padding-top:1.5rem;padding-bottom:1.8rem}
.s-legal .lgl{font-size:.8rem;line-height:1.65}
.s-legal .lnav{gap:.2rem 1.2rem}
.s-legal .lnav a,.s-legal .lnav .cookieopen{font-size:.72rem;padding:.5rem 0}
.legalpage{padding-top:2rem;padding-bottom:2.6rem}
.legalwrap h1{font-size:1.88rem}
.legalwrap h2{font-size:1.4rem;margin-top:1.9rem}
.legalwrap h3{font-size:1.18rem;margin-top:1.6rem}
.legalwrap p,.legalwrap ul,.legalwrap ol{font-size:1rem;line-height:1.68}
}
/* --- pass 18b: the address is one continuous line of text now, so it must be
allowed to wrap on desktop where the footer column is narrow. The nowrap
rule was written for the old two-span version. --- */
.s-foot .col span.addr{white-space:normal;line-height:1.6}
/* --- pass 18c: two fixes from Tay's phone.
1. The banner set the hidden attribute but stayed on screen: a class
selector carrying display:flex outranks the browser's [hidden] rule,
so it has to be turned off explicitly.
2. The address needs a full-width column to sit on one line. --- */
.cookiebar[hidden]{display:none}
@media (max-width:768px){
.s-foot .col:last-child{grid-column:1/-1}
.s-foot .col span.addr{white-space:nowrap;font-size:.84rem}
}
/* --- pass 19: the library gets a hero band rather than a headline floating on
white. Same navy variant the sub pages use, so the page reads as part of the
set, with a divider under it before the filters. --- */
.phero.bloghero{border-bottom:1px solid var(--peri-line)}
.phero.bloghero .core{max-width:calc(54rem + 2*var(--gx));display:flex;flex-direction:column;gap:.6rem}
.phero.bloghero .kicker{color:#EBC14A}
.phero.bloghero .h-lg{color:#fff;margin:0}
.phero.bloghero .h-lg em{font-style:italic}
.blog-filters{border-top:0}
/* the band is the page masthead, so it needs room to read as one.
23px between the nav and the eyebrow was crowding it. */
.phero.bloghero .core{padding-top:10.6rem;padding-bottom:3.9rem}
@media (max-width:1239px){ .phero.bloghero .core{padding-top:9.4rem;padding-bottom:3.2rem} }
@media (max-width:768px){
.phero.bloghero .core{padding-top:8.6rem;padding-bottom:2.6rem;gap:.45rem}
}
/* --- pass 19b: the category row was sitting flush against the navy band with
6px of padding above it. It now clears the hero and reads as the start of
the section rather than the bottom edge of the header. --- */
.blog-filters{padding-top:3rem;padding-bottom:1.9rem}
@media (max-width:1239px){ .blog-filters{padding-top:2.5rem;padding-bottom:1.6rem} }
@media (max-width:768px){ .blog-filters{padding-top:2rem;padding-bottom:1.3rem} }
/* ============================================================
PASS 20 - BUYING POWER QUALIFIER
============================================================ */
/* The scar from the cookie banner: this component shows and hides steps, fields and
messages with the hidden attribute, and several of them carry their own display
rule. Hidden must always win inside it. This is the deliberate exception to the
no-!important habit, not a first move. */
.bp [hidden]{display:none!important}
.bphero .lede{color:#DCE2EF;max-width:40rem;margin:.35rem 0 0;font-size:1.12rem;line-height:1.6}
.bp{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:3.2rem;align-items:start;
padding:3.4rem var(--gx) 4rem;background:var(--tint)}
.bp-tool{min-width:0;background:var(--paper);border:1px solid var(--peri-line);border-top:3px solid var(--gold);
padding:2.2rem 2.4rem 2.4rem;box-shadow:0 18px 40px -28px rgba(1,22,64,.35)}
.bp-prog{display:flex;gap:.45rem;margin:0 0 .8rem}
.bp-prog i{display:block;width:34px;height:3px;background:var(--peri-line)}
.bp-prog i.on{background:var(--gold)}
.bp-stepname{margin:0;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.bp-promise{margin:.35rem 0 1.6rem;font-size:.92rem;color:var(--mut)}
.bp form,.bp fieldset{margin:0;padding:0;border:0;min-width:0}
.bp-step{display:flex;flex-direction:column;gap:1.5rem}
.bp-q{font-family:var(--serif);font-weight:400;font-size:clamp(1.55rem,2.4vw,2rem);line-height:1.18;
color:var(--ink);margin:0 0 .2rem;padding:0;outline:none}
.bp-field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.bp-field > label,.bp-label{margin:0;font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.35}
.bp-sub{margin:.55rem 0 0;font-size:.92rem;font-weight:500;color:#3D4560}
.bp-sub span{color:var(--mut);font-weight:400}
.bp-help{margin:0;font-size:.9rem;line-height:1.5;color:var(--mut)}
.bp-err{margin:0;font-size:.9rem;font-weight:500;color:#A1331F}
.bp-money{display:flex;align-items:center;border:1px solid #C9D0E0;background:var(--paper);
transition:border-color .15s,box-shadow .15s}
.bp-money span{padding:0 0 0 1rem;font-family:var(--serif);font-size:1.35rem;color:var(--blue)}
.bp-money input{flex:1;min-width:0;border:0;outline:none;background:transparent;
font:inherit;font-family:var(--serif);font-size:1.35rem;color:var(--ink);
padding:.8rem 1rem .8rem .35rem;font-variant-numeric:tabular-nums}
.bp-money:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(186,134,11,.28)}
.bp-money input[aria-invalid="true"]{color:#A1331F}
.bp-money:has(input[aria-invalid="true"]){border-color:#A1331F}
.bp select,.bp-lf input{width:100%;font:inherit;font-size:1.02rem;color:var(--ink);background:var(--paper);
border:1px solid #C9D0E0;padding:.85rem 1rem;border-radius:0;min-height:50px}
.bp select:focus,.bp-lf input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(186,134,11,.28)}
.bp-choice{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.bp-choice label{position:relative;cursor:pointer}
.bp-choice input{position:absolute;opacity:0;width:1px;height:1px}
.bp-choice span{display:flex;align-items:center;justify-content:center;min-height:54px;padding:.7rem 1rem;
border:1px solid #C9D0E0;font-weight:600;font-size:1rem;color:var(--ink);text-align:center;
transition:background .15s,border-color .15s,color .15s}
.bp-choice input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff}
.bp-choice input:focus-visible + span{outline:2px solid var(--gold);outline-offset:3px}
.bp-range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.6rem;align-items:center}
.bp-range .to{font-size:.9rem;color:var(--mut)}
.bp-equity{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:baseline;
background:var(--peri);border-left:3px solid var(--blue);padding:1rem 1.2rem}
.bp-equity .k{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.bp-equity .v{font-family:var(--serif);font-size:1.6rem;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.bp-equity .n{grid-column:1/-1;font-size:.9rem;color:#3D4560;line-height:1.5}
.bp-nav{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.bp-nav .btn{min-height:50px}
/* result */
.bp-result{gap:1.3rem}
.bp-fit,.bp-nofit{display:flex;flex-direction:column;gap:.55rem}
.bp-rl{margin:.4rem 0 0;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.bp-big{margin:0;font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.02;color:var(--ink);
font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bp-rangeout{margin:0;font-size:.98rem;color:#3D4560}
.bp-span{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);align-items:end;
margin:1.1rem 0 .3rem;padding-top:.4rem}
.bp-span .tw{display:flex;flex-direction:column;gap:.2rem;padding:.9rem .9rem .8rem;border:1px solid var(--peri-line);
border-bottom:3px solid var(--ink);background:var(--paper);text-align:center;min-width:0}
.bp-span .deck{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:0 .4rem .45rem;
border-bottom:4px solid var(--gold);min-width:0;text-align:center}
.bp-span .tk,.bp-span .dk{font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.bp-span .dk{color:#8C6508}
.bp-span .tv,.bp-span .dv{font-family:var(--serif);font-size:1.12rem;color:var(--ink);line-height:1.2;overflow-wrap:anywhere}
.bp-span .dv{color:#8C6508}
.bp-covers{margin:.3rem 0 0;padding:.8rem 1rem;background:var(--stone);font-size:.95rem;line-height:1.5;color:#3D4560}
.bp-benefits{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.bp-benefits li{position:relative;padding-left:1.7rem;font-size:1rem;color:var(--ink)}
.bp-benefits li:before{content:"";position:absolute;left:0;top:.28em;width:1rem;height:.55rem;
border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.bp-nofit{padding:1.3rem 1.4rem;background:var(--stone);border-left:3px solid var(--gold)}
.bp-nofit p{margin:0;font-size:1rem;line-height:1.62;color:#3D4560}
.bp-nofit .bp-why{color:var(--ink);font-weight:500}
.bp-nofit .btn{align-self:flex-start;margin-top:.4rem}
.bp-disc{margin:.2rem 0 0;padding-top:1rem;border-top:1px solid var(--line);font-size:.82rem;line-height:1.6;color:var(--mut)}
.bp-lead{margin-top:.6rem;padding:1.6rem 1.6rem 1.7rem;background:var(--ink);color:#fff;display:flex;flex-direction:column;gap:.9rem}
.bp-lead h3{margin:0;font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.2;color:#fff}
.bp-lead > p{margin:0;font-size:.98rem;line-height:1.6;color:#DCE2EF}
.bp-lead .bp-field > label{color:#fff;font-size:.9rem}
.bp-lf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.bp-lead .bp-err{color:#F3B2A4}
.bp-lead .btn.ghost{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.bp-lead .btn.gold{background:#fff;color:var(--ink)}
.bp-sent{margin:0;padding:.8rem 1rem;background:rgba(255,255,255,.1);border-left:3px solid var(--gold);font-size:.95rem;line-height:1.5}
.bp-sent.preview{border-left-color:#93A6D2}
.bp-sent.error{border-left-color:#F3B2A4}
.bp-apply{margin:.2rem 0 0;font-size:.92rem;color:#C3CDE4}
.bp-apply a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.bp-apply a:hover{color:#EBC14A}
.bp-restart{margin-top:.2rem}
/* side panel */
.bp-side{position:sticky;top:2rem;min-width:0;display:flex;flex-direction:column;gap:.8rem}
.bp-side h2{margin:0;font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1.18;color:var(--ink)}
.bp-side > p{margin:0;font-size:1rem;line-height:1.65;color:#3D4560}
.bp-how{list-style:none;counter-reset:how;margin:.4rem 0;padding:0;display:flex;flex-direction:column;gap:0;
border-top:1px solid var(--peri-line)}
.bp-how li{counter-increment:how;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.6rem;
padding:.9rem 0;border-bottom:1px solid var(--peri-line);font-size:.96rem;line-height:1.55;color:#3D4560}
.bp-how li:before{content:counter(how);font-family:var(--serif);font-size:1.3rem;color:var(--gold);line-height:1.2}
.bp-how li b{display:block;color:var(--ink);font-weight:600;margin-bottom:.1rem}
.bp-sidefoot{font-size:.92rem!important;color:var(--mut)!important}
@media (max-width:1100px){
.bp{grid-template-columns:minmax(0,1fr);gap:2.4rem}
.bp-side{position:static}
}
@media (max-width:768px){
.bphero .lede{font-size:1rem}
.bp{padding:1.8rem var(--gx) 2.6rem;gap:2rem}
.bp-tool{padding:1.5rem 1.2rem 1.6rem;margin-left:calc(var(--gx) * -1);margin-right:calc(var(--gx) * -1);
border-left:0;border-right:0}
.bp-q{font-size:1.5rem}
.bp-money span,.bp-money input{font-size:1.2rem}
.bp-range{grid-template-columns:minmax(0,1fr)}
.bp-range .to{display:none}
.bp-big{font-size:2.35rem}
.bp-span{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem .6rem}
.bp-span .deck{grid-column:1/-1;order:3;flex-direction:row;justify-content:center;gap:.6rem;padding:.2rem 0 .5rem}
.bp-span .tv,.bp-span .dv{font-size:1.02rem}
.bp-lead{padding:1.3rem 1.1rem 1.4rem;margin-left:-1.2rem;margin-right:-1.2rem}
.bp-lead h3{font-size:1.3rem}
.bp-lf{grid-template-columns:minmax(0,1fr)}
.bp-nav{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.bp-nav .btn{width:100%;text-align:center;justify-content:center}
.bp-nofit .btn{align-self:stretch;text-align:center}
.bp-side h2{font-size:1.4rem}
}
/* --- pass 20b: the fixed phone bar must never cover what someone is typing into.
1. Focused fields scroll clear of the bar instead of sitting underneath it.
2. A page whose own CTA was removed from the bar gives the call button the full width. --- */
@media (max-width:768px){
html{scroll-padding-bottom:84px}
input,select,textarea,button{scroll-margin-bottom:84px}
.m-bar.solo .m-call{flex:1 1 100%;background:var(--ink);color:#fff;border-top:0}
/* the qualifier starts closer to the top so the first fields are on screen */
.bphero .core{padding-bottom:1.9rem}
.bphero .lede{margin-top:.2rem}
}
/* --- pass 20c: on a phone the qualifier is the page. At rest the hero took 365px
and the second question sat entirely behind the call bar. Spacing is tightened
here so both of the first two questions are on screen; no copy is removed. --- */
@media (max-width:768px){
.phero.bloghero.bphero .core{padding-top:7.9rem;padding-bottom:.95rem;gap:.3rem} /* (0,4,0) beats pass 19; 36px below the 90px nav */
.phero.bloghero.bphero .h-lg{font-size:1.62rem;line-height:1.17}
.bphero .lede{font-size:.97rem;line-height:1.5;margin-top:.15rem}
.bphero ~ .crumbs{padding-top:.35rem;padding-bottom:.35rem}
.bp{padding-top:1rem}
.bp-tool{padding-top:.95rem}
.bp-prog{margin-bottom:.55rem}
.bp-promise{margin:.25rem 0 .7rem;font-size:.84rem;line-height:1.45}
.bp-step{gap:1.05rem}
.bp-q{font-size:1.38rem}
.bp-field{gap:.35rem}
.bp-help{font-size:.84rem}
}
/* --- pass 20d: two fixes found by eye, not by test.
1. The side-panel steps are a 2-column grid. The description was a bare text node,
so it auto-placed into the 2rem number column and wrapped one word per line.
Title and description now both live in column 2, beside the number.
2. Example amounts in empty fields read as real values at this size. --- */
.bp-how li{grid-template-columns:2rem minmax(0,1fr);grid-template-rows:auto auto;row-gap:.15rem}
.bp-how li:before{grid-column:1;grid-row:1 / span 2}
.bp-how li b,.bp-how li span{grid-column:2;min-width:0}
.bp-how li b{margin:0}
.bp-money input::placeholder{color:#B9C0CE;opacity:1;font-style:italic}
.bp-lf input::placeholder{color:#B9C0CE;opacity:1}
/* --- pass 20e: each end of the price range is labelled on screen. On a phone the two
boxes stack and the "to" between them was hidden, so nothing said which was which. --- */
.bp-range{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem}
.bp-rf{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.bp-rl2{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
@media (max-width:768px){ .bp-range{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem} }
@media (max-width:400px){ .bp-range{grid-template-columns:minmax(0,1fr)} }
/* ============================================================
PASS 21 - address lookup, booking calendar, demo confirmation
============================================================ */
.bp-opt{font-weight:400;color:var(--mut)}
.bp-combo{position:relative}
.bp-combo input{width:100%;font:inherit;font-size:1.05rem;color:var(--ink);background:var(--paper);
border:1px solid #C9D0E0;padding:.85rem 1rem;min-height:52px;border-radius:0}
.bp-combo input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(186,134,11,.28)}
.bp-combo input::placeholder{color:#B9C0CE;opacity:1;font-style:italic}
.bp-sugg{position:absolute;left:0;right:0;top:100%;z-index:30;margin:0;padding:.3rem 0;list-style:none;
background:var(--paper);border:1px solid var(--ink);border-top:0;box-shadow:0 18px 30px -16px rgba(1,22,64,.35)}
.bp-sugg li{padding:.75rem 1rem;min-height:44px;font-size:1rem;line-height:1.35;color:var(--ink);cursor:pointer}
.bp-sugg li:hover,.bp-sugg li[aria-selected="true"]{background:var(--peri)}
.bp-suggnote{position:absolute;left:0;right:0;z-index:30;margin:0;padding:.45rem 1rem .55rem;
background:var(--tint);border:1px solid var(--ink);border-top:1px solid var(--peri-line);
font-size:.74rem;letter-spacing:.04em;color:var(--mut)}
.bp-done{display:flex;flex-direction:column;gap:.75rem}
.bp-done h3{margin:0;font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1.2;color:#fff;outline:none}
.bp-done p{margin:0;font-size:1rem;line-height:1.6;color:#DCE2EF}
.bp-done .btn{align-self:flex-start}
.bp-demo{align-self:flex-start;padding:.3rem .6rem;background:rgba(147,166,210,.2);border:1px solid rgba(147,166,210,.55);
font-size:.68rem!important;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#C9D4EC!important}
.bp-demonote{font-size:.88rem!important;color:#AEBBD6!important}
.bp-demonote a{color:#fff}
.bp-book{margin-top:.6rem;border:1px solid var(--peri-line);border-top:3px solid var(--gold);background:var(--paper)}
.bp-bookhead{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.bp-bookhead h3{margin:0;font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.2;color:var(--ink);outline:none}
.bp-book-close{flex:none;min-height:44px;padding:0 1rem;background:none;border:1px solid var(--ink);font:inherit;
font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.bp-cal{min-height:620px;background:var(--paper)}
.bp-calalt{margin:0;padding:.8rem 1.2rem 1rem;font-size:.86rem;color:var(--mut);border-top:1px solid var(--line)}
.bp-calalt a{color:var(--ink)}
@media (max-width:768px){
.bp-done .btn{align-self:stretch;text-align:center}
.bp-book{margin-left:-1.2rem;margin-right:-1.2rem;border-left:0;border-right:0}
.bp-bookhead h3{font-size:1.15rem}
.bp-nofit .bp-nav{margin-top:.4rem}
}
/* ============================================================
PASS 22 - WHERE WE LEND HUB, AND CONTACT
============================================================ */
/* ---------- Where we lend ---------- */
.areas{padding:3.4rem var(--gx) 4rem;background:var(--tint)}
.areas-head{max-width:42rem;margin:0 0 2rem}
.areas-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.3rem);
line-height:1.16;margin:0 0 .5rem;color:var(--ink)}
.areas-head p{margin:0;color:#3D4560}
.areagrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.areacard{display:flex;flex-direction:column;min-width:0;background:var(--paper);
border:1px solid var(--peri-line);text-decoration:none;color:inherit;
transition:border-color .18s,transform .18s,box-shadow .18s}
.areacard img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.areacard .ac-t{display:flex;flex-direction:column;gap:.5rem;padding:1.2rem 1.3rem 1.35rem;min-width:0}
.areacard .ac-n{font-family:var(--serif);font-size:1.45rem;line-height:1.15;color:var(--ink)}
.areacard .ac-l{font-size:1rem;line-height:1.55;color:#3D4560}
.areacard .ac-towns{font-size:.86rem;line-height:1.7;color:var(--mut);
padding-top:.7rem;border-top:1px solid var(--peri-line)}
.areacard .ac-go{margin-top:.2rem;font-size:.72rem;font-weight:600;letter-spacing:.11em;
text-transform:uppercase;color:var(--ink)}
.areacard .ac-go span{color:var(--gold)}
.areacard:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 18px 34px -24px rgba(1,22,64,.45)}
.areacard:hover .ac-n{color:var(--gold)}
.areanote{margin:2.4rem 0 0;padding:1.5rem 1.6rem;background:var(--peri);border-left:3px solid var(--gold);
display:flex;flex-direction:column;gap:1rem}
.areanote p{margin:0;font-size:1.02rem;line-height:1.65;color:#3D4560;max-width:46rem}
.areanote b{color:var(--ink)}
/* ---------- Contact ---------- */
.contact{padding:3.4rem var(--gx) 4rem;background:var(--tint)}
.cx-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;margin:0 0 2.4rem}
.cx-card{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1.3rem;align-items:start;
background:var(--paper);border:1px solid var(--peri-line);border-top:3px solid var(--gold);padding:1.4rem}
.cx-card img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 20%;display:block}
.cx-t{min-width:0;display:flex;flex-direction:column;gap:.25rem}
.cx-role{margin:0;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.cx-card h2{margin:0 0 .3rem;font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.15;color:var(--ink)}
.cx-line{margin:0;font-size:1.02rem;line-height:1.6;overflow-wrap:break-word}
.cx-line a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cx-line a:hover{color:var(--gold)}
.cx-tel{font-family:var(--serif);font-size:1.3rem;text-decoration:none!important}
.cx-lic{margin:.45rem 0 0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.cx-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.6rem;margin:0 0 2.4rem}
.cx-office,.cx-ways{background:var(--paper);border:1px solid var(--peri-line);padding:1.5rem 1.6rem;min-width:0}
.cx-office h2,.cx-ways h2,.cx-form h2{margin:0 0 .8rem;font-family:var(--serif);font-weight:400;
font-size:1.45rem;line-height:1.18;color:var(--ink)}
.cx-addr{margin:0 0 .6rem;font-family:var(--serif);font-size:1.25rem;line-height:1.45;color:var(--ink)}
.cx-dir{font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink);
display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.cx-dir:hover{color:var(--gold)}
.cx-small{margin:1rem 0 0;padding-top:.9rem;border-top:1px solid var(--line);font-size:.82rem;line-height:1.6;color:var(--mut)}
.cx-list{counter-reset:cx;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cx-list li{counter-increment:cx;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.7rem;
padding:.9rem 0;border-bottom:1px solid var(--peri-line);font-size:1rem;line-height:1.6;color:#3D4560}
.cx-list li:last-child{border-bottom:0;padding-bottom:0}
.cx-list li:before{content:counter(cx);font-family:var(--serif);font-size:1.3rem;color:var(--gold);line-height:1.25}
.cx-list b{color:var(--ink)}
.cx-list a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cx-booklink{background:none;border:0;padding:0;font:inherit;color:var(--ink);cursor:pointer;
text-decoration:underline;text-underline-offset:3px}
.cx-booklink:hover,.cx-list a:hover{color:var(--gold)}
.cx-form{background:var(--paper);border:1px solid var(--peri-line);padding:1.6rem}
.cx-form form{display:flex;flex-direction:column;gap:1rem}
.cx-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.cx-form textarea{width:100%;font:inherit;font-size:1.02rem;color:var(--ink);background:var(--paper);
border:1px solid #C9D0E0;padding:.85rem 1rem;border-radius:0;resize:vertical;min-height:7rem}
.cx-form textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(186,134,11,.28)}
.cx-form textarea::placeholder{color:#B9C0CE;opacity:1;font-style:italic}
.cx-consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:start;
padding:.9rem 1rem;background:var(--tint);border:1px solid var(--peri-line);cursor:pointer}
.cx-consent input{width:22px;height:22px;margin:.1rem 0 0;accent-color:var(--ink);flex:none}
.cx-consent span{font-size:.84rem;line-height:1.6;color:#4C5369}
.cx-legal{margin:0;font-size:.84rem;color:var(--mut)}
.cx-legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cx-done{background:var(--ink);padding:1.4rem 1.5rem}
.cx-done p a{color:#fff}
.contact [hidden]{display:none!important}
@media (max-width:1024px){
.areagrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cx-grid{grid-template-columns:minmax(0,1fr)}
.cx-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
.areas,.contact{padding:1.8rem var(--gx) 2.6rem}
.areas-head{margin-bottom:1.3rem}
.areas-head h2{font-size:1.5rem}
.areagrid{grid-template-columns:minmax(0,1fr);gap:1.1rem}
.areacard .ac-n{font-size:1.28rem}
.areacard .ac-l{font-size:1rem}
.areanote{margin-top:1.6rem;padding:1.2rem 1.1rem}
.areanote .bp-nav{flex-direction:column;align-items:stretch}
.areanote .btn{width:100%;text-align:center}
.cx-people{grid-template-columns:minmax(0,1fr);gap:1.1rem;margin-bottom:1.6rem}
.cx-card{grid-template-columns:6.4rem minmax(0,1fr);gap:1rem;padding:1.1rem}
.cx-card h2{font-size:1.28rem}
.cx-tel{font-size:1.18rem}
.cx-grid{gap:1.1rem;margin-bottom:1.6rem}
.cx-office,.cx-ways,.cx-form{padding:1.2rem 1.1rem}
.cx-office h2,.cx-ways h2,.cx-form h2{font-size:1.28rem}
.cx-fields{grid-template-columns:minmax(0,1fr)}
.cx-form .bp-nav{flex-direction:column;align-items:stretch}
.cx-form .bp-nav .btn{width:100%;text-align:center}
}
/* --- pass 22b: the same grid scar as the qualifier's side panel. The description
after each was a loose text node, so it auto-placed into the 2rem number
column and wrapped one word per line. Title and description both go in column 2. --- */
.cx-list li{grid-template-rows:auto auto;row-gap:.2rem}
.cx-list li:before{grid-column:1;grid-row:1 / span 2}
.cx-list li b,.cx-list li span{grid-column:2;min-width:0}
.cx-list li b{display:block}
/* The email is one unbreakable string. It needed ~200px beside a 102px portrait in a
196px column, so it split mid-word. Smaller portrait, slightly smaller email, and it
sits on one line; break-word stays as a safety net rather than the usual outcome. */
@media (max-width:768px){
.cx-card{grid-template-columns:5rem minmax(0,1fr);gap:.9rem}
.cx-line{font-size:.88rem}
.cx-line .cx-tel{font-size:1.15rem}
.cx-role{font-size:.66rem}
}
/* Small phones (360px and under): the portrait moves above the text so the email
address always has the full column width and never splits mid-word. */
@media (max-width:400px){
.cx-card{grid-template-columns:minmax(0,1fr);gap:.9rem}
.cx-card img{width:5.6rem;aspect-ratio:1/1}
.cx-line{font-size:.92rem}
}
/* the contact form leads the page; its intro is the answer, with everything linked */
.cx-answer{margin:0 0 .4rem;font-size:1.02rem;line-height:1.7;color:#3D4560;max-width:52rem}
.cx-answer a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cx-answer a:hover{color:var(--gold)}
.contact .cx-form{margin:0 0 2.4rem}
@media (max-width:768px){
.cx-answer{font-size:1rem;line-height:1.65}
.contact .cx-form{margin-bottom:1.6rem}
}
/* ============================================================
PASS 23 - CONTACT: the form leads the page
The top was a plain white box behind a paragraph of underlined links.
The card now has a tinted head, a gold rule and real weight, and the
intro is a sentence with two links rather than five.
============================================================ */
.contact .cx-form{max-width:64rem;padding:0;overflow:hidden;background:var(--paper);
border:1px solid var(--peri-line);border-top:3px solid var(--gold);
box-shadow:0 26px 60px -34px rgba(1,22,64,.45)}
.cx-formhead{background:var(--peri);padding:1.9rem 2.1rem 1.6rem;border-bottom:1px solid var(--peri-line)}
.cx-formhead .kicker{margin:0 0 .35rem}
.contact .cx-form h2{margin:0 0 .5rem;font-family:var(--serif);font-weight:400;
font-size:clamp(1.6rem,2.6vw,2.15rem);line-height:1.15;color:var(--ink)}
.cx-answer{margin:0;font-size:1.04rem;line-height:1.65;color:#3D4560;max-width:44em}
.cx-answer a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.cx-answer a:hover{color:var(--gold)}
.contact .cx-form form{padding:1.9rem 2.1rem 2.1rem;gap:1.15rem}
/* fields with a bit more presence */
.contact .cx-form .bp-field > label{font-size:.78rem;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--blue)}
.contact .cx-form input,.contact .cx-form textarea{border:1px solid #C3CBDC;background:#FCFCFD;
min-height:54px;font-size:1.05rem}
.contact .cx-form textarea{min-height:8.5rem}
.contact .cx-form input:focus,.contact .cx-form textarea:focus{background:var(--paper);
border-color:var(--ink);box-shadow:0 0 0 3px rgba(186,134,11,.28)}
.cx-consent{background:transparent;border:0;border-top:1px solid var(--line);padding:1rem 0 0}
.cx-consent span{font-size:.8rem;line-height:1.6;color:var(--mut)}
.contact .cx-form .bp-nav{padding-top:.2rem}
.contact .cx-form .btn.gold{min-width:11rem;padding:1.05rem 2rem}
.cx-legal{padding-top:.2rem}
@media (max-width:768px){
.contact .cx-form{margin-left:calc(var(--gx) * -1);margin-right:calc(var(--gx) * -1);
border-left:0;border-right:0;box-shadow:none}
.cx-formhead{padding:1.3rem 1.2rem 1.1rem}
.contact .cx-form h2{font-size:1.5rem}
.cx-answer{font-size:1rem}
.contact .cx-form form{padding:1.3rem 1.2rem 1.5rem}
.contact .cx-form .btn.gold{min-width:0}
}
/* consent is legal copy people have to read, so it keeps the reading floor */
.cx-consent span{font-size:.86rem}
@media (max-width:768px){ .cx-consent span{font-size:1rem;line-height:1.6} }
/* ---------- success stories ---------- */
/* The page has to be scannable before it is readable: a chooser in the reader's own words,
then a pulled number on every story so the eye has somewhere to land. */
.chooser{padding:2.6rem 2.4rem;background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ch-h{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--ink);margin:0 0 1.2rem}
.picks{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}
.pick{display:flex;flex-direction:column;gap:.5rem;min-width:0;background:#fff;border:1px solid var(--peri-line);
padding:1.15rem 1.25rem;text-decoration:none;transition:border-color .18s,transform .18s}
.pick:hover{border-color:var(--gold);transform:translateY(-2px)}
.pick .says{font-family:var(--serif);font-size:1.2rem;line-height:1.4;color:var(--ink)}
.pick .go{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);overflow-wrap:anywhere}
.storyfeature{background:var(--ink);color:#fff;padding:3.2rem 2.4rem;border-top:3px solid var(--gold)}
.storyfeature .kicker{color:#EBC14A;margin:0 0 .5rem}
.storyfeature h2{color:#fff;margin:0 0 1.1rem}
.storyfeature p{color:#C3CDE2;margin:0 0 .8rem}
.storyfeature .takeaway{color:#fff;font-weight:600;margin-bottom:0}
.fside{margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.22)}
.fsh{font-size:.64rem!important;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#9AA7C4!important;margin:0 0 1rem!important}
.fstrip{display:grid;gap:1.3rem}
.fs .n{display:block;font-family:var(--serif);font-size:1.9rem;color:#EBC14A;line-height:1}
.fs .l{display:block;font-size:.76rem;color:#9AA7C4;margin-top:.3rem;line-height:1.45}
/* Each story is its own object. Unboxed columns of body text read as one continuous field,
which is why sixteen distinct stories felt like one long article. */
.storysec{padding:3.4rem 2.4rem;border-top:1px solid var(--line);background:var(--tint)}
.storysec:nth-of-type(even){background:var(--paper)}
.storyhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.6rem 1.4rem;margin-bottom:1.6rem}
.storyhead .says{font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.3;color:var(--blue);margin:0 0 .45rem}
.storyhead h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);margin:0;color:var(--ink)}
figure.secpic{display:block;margin:0 0 1.8rem}
.secpic img{display:block;width:100%;height:200px;object-fit:cover}
.storylist{display:grid;gap:1.4rem;align-items:start}
.story{background:var(--paper);border:1px solid var(--peri-line);border-top:3px solid var(--gold);
padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column}
.storysec:nth-of-type(even) .story{background:var(--tint)}
.story .where{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
color:var(--gold);margin:0 0 .6rem}
.story h3{font-family:var(--serif);font-weight:400;font-size:1.55rem;line-height:1.2;margin:0 0 .9rem;color:var(--ink);text-wrap:balance}
.story p{margin:0 0 .75rem}
.story .takeaway{font-weight:600;color:var(--deep);margin:auto 0 0;padding-top:.9rem}
.storyrev{margin:1rem 0 0;padding:.95rem 1.1rem;background:var(--peri);border:0;border-left:2px solid var(--gold)}
.storyrev p{font-family:var(--serif);font-size:1rem;line-height:1.5;color:var(--ink);margin:0 0 .45rem}
.storyrev cite{font-style:normal;font-size:.64rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}
@media (min-width:769px){
.picks{grid-template-columns:repeat(2,1fr);gap:.8rem}
.storyfeature{display:grid;grid-template-columns:1.55fr 1fr;gap:3rem;align-items:start}
.fside{margin-top:0;padding-top:0;border-top:0;border-left:1px solid rgba(255,255,255,.22);padding-left:2.2rem}
.storylist{grid-template-columns:repeat(2,1fr);gap:1.6rem}
.secpic img{height:260px}
}
@media (min-width:1025px){
.chooser{padding:3.2rem 2.4rem}
.picks{grid-template-columns:repeat(3,1fr);gap:1rem}
.pick .says{font-size:1.3rem}
.storyfeature{padding:4.2rem 2.4rem;gap:4rem}
.fs .n{font-size:2.2rem}
.storysec{padding:4.2rem 2.4rem}
.storylist{gap:1.8rem}
.story{padding:1.9rem 2rem 2.1rem}
.story h3{font-size:1.78rem}
.secpic img{height:320px}
}
@media (max-width:768px){
.chooser,.storyfeature,.storysec{padding-left:var(--gx);padding-right:var(--gx)}
.pick{padding:1.1rem 1.15rem;min-height:44px}
.pick .says{font-size:1.24rem}
.pick .go{font-size:.78rem}
.storyhead{margin-bottom:1.2rem}
.storyhead .more{min-height:44px;display:inline-flex;align-items:center}
.secpic img{height:170px}
figure.secpic{margin-bottom:1.4rem}
.storylist{gap:1.1rem}
.story{padding:1.25rem 1.2rem 1.4rem}
.story h3{font-size:1.5rem}
.story .where{font-size:.74rem}
.storyrev{padding:.85rem .95rem}
.fs .n{font-size:1.75rem}
.fsh{margin-bottom:.8rem!important}
}
@media (max-width:400px){
.story h3{font-size:1.38rem}
.pick .says{font-size:1.14rem}
}
/* homepage teaser out to the stories page */
.storyteaser{background:var(--deep);color:#fff;padding:3.4rem 2.4rem;border-top:3px solid var(--gold)}
.storyteaser .st-t{max-width:46rem;display:flex;flex-direction:column;gap:.9rem}
.storyteaser .kicker{color:#EBC14A;margin:0}
.storyteaser h2{color:#fff;margin:0}
.storyteaser h2 em{color:#EBC14A;font-style:normal}
.storyteaser .body-s{color:#C3CDE2;margin:0}
.storyteaser .btn.ghost{border-color:rgba(255,255,255,.5);color:#fff}
.storyteaser .btn.ghost:hover{border-color:#EBC14A;color:#EBC14A}
@media (min-width:1025px){ .storyteaser{padding:4.4rem 2.4rem} }
@media (max-width:768px){ .storyteaser{padding-left:var(--gx);padding-right:var(--gx)} }
.photocredit{font-size:.66rem;color:var(--mut);padding:0 2.4rem 1.6rem;margin:0;letter-spacing:.02em}
.photocredit a{color:var(--blue)}
@media (max-width:768px){ .photocredit{padding-left:var(--gx);padding-right:var(--gx)} }
/* photo credit under an image. Attribution with a working link, not a descriptive caption. */
.credit{display:block;font-size:.66rem;letter-spacing:.02em;color:var(--mut);margin-top:.5rem;line-height:1.4}
.credit a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.credit a:hover{color:var(--ink)}
.secpic .credit{margin-top:.4rem}
/* A photo credit is not the old overlay caption. Those captions were removed at the client's
request, so the credit must not inherit the ink bar, the caps or the absolute position. */
.split figure figcaption.credit,
.artimg figcaption.credit,
.secpic figcaption.credit,
figure figcaption.credit{position:static;background:none;color:var(--mut);
font-family:var(--body);font-size:.68rem!important;font-weight:400;letter-spacing:.02em;
text-transform:none;padding:0;margin-top:.5rem;line-height:1.4;width:auto;display:block}
.split figure figcaption.credit a,.artimg figcaption.credit a,
.secpic figcaption.credit a,figure figcaption.credit a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.split figure figcaption.credit a:hover,figure figcaption.credit a:hover{color:var(--ink)}
@media (max-width:768px){ figure figcaption.credit{font-size:.72rem!important} }
/* credit over a hero or a dark band, where the image is not a figure */
.credit.over{position:absolute;right:1.1rem;bottom:.8rem;z-index:4;margin:0;font-size:.72rem!important;
color:rgba(255,255,255,.72);letter-spacing:.02em}
.credit.over a{color:rgba(255,255,255,.9);text-decoration:underline;text-underline-offset:2px}
.credit.over a:hover{color:#fff}
.darkproof{position:relative}
.credit.hub{margin:1.4rem 0 0;padding:0 2.4rem}
@media (max-width:768px){ .credit.over{right:var(--gx);bottom:.6rem;font-size:.7rem!important}
.credit.hub{padding-left:var(--gx);padding-right:var(--gx)} }
/* "How this works" is the route from a story to the product page, so it should look like a link */
.storyhead .more{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--blue);text-decoration:underline;text-decoration-color:var(--gold);
text-decoration-thickness:2px;text-underline-offset:5px;white-space:nowrap}
.storyhead .more:hover{color:var(--ink);text-decoration-color:var(--ink)}
/* a credit belongs under the image, clear of any decorative frame */
.secpic figcaption.credit{margin-top:.55rem}
.split figure figcaption.credit{margin-top:.6rem;padding-right:12px}
/* --- pass 2026-10-05: photo credits sit under their own image, with room beneath --- */
/* The dark proof band. The credit used to be .credit.over, absolutely positioned against the
band, so it landed bottom-right of the whole panel, 891px from the photograph it credits.
It is a figcaption under the image now, in the band's own light-on-dark palette. */
.darkproof .inner > figure{margin:0;display:block;min-width:0}
.darkproof .inner > figure img{width:100%;height:auto;display:block;border-top:2px solid var(--gold)}
.darkproof figcaption.credit{position:static;background:none;margin:.6rem 0 0;padding:0;
color:#AEBBD6;text-transform:none;letter-spacing:.02em;font-size:.72rem}
.darkproof figcaption.credit a{color:#D8E0F0;text-decoration:underline;text-underline-offset:2px}
.darkproof figcaption.credit a:hover{color:#fff}
/* The town band. The image is height:100% of the grid cell, so the figure was exactly as tall as
the cell and the caption hung 21px past the bottom edge of the band. Letting the image area
flex means the credit takes its room from the picture instead of from the page. */
.townband figure{display:flex;flex-direction:column;min-width:0;min-height:0;margin:0}
.townband figure .fw{flex:1 1 auto;min-height:0;display:block}
.townband figure img{height:100%}
.townband figcaption.credit{margin:0;padding:.6rem 2.4rem 1.1rem}
/* Breathing room under every other in-flow credit, so it never sits flush on a section edge. */
.split figure figcaption.credit{padding-bottom:.5rem}
.secpic figcaption.credit{padding-bottom:.4rem}
.artimg figcaption.credit{padding-bottom:.4rem}
@media (max-width:768px){
/* the image is a figure now, so the order that used to sit on the ![]()
has to move to it,
and height:100% against a flex track with no definite height pushed the caption past the
band. Let the picture size itself and the row grows to hold the credit. */
.townband figure{order:-1}
.townband figure .fw{flex:0 0 auto}
.townband figure img{height:auto;aspect-ratio:3/2;object-fit:cover;min-height:13rem}
.townband figcaption.credit{padding-left:var(--gx);padding-right:var(--gx)}
.darkproof .inner > figure{margin-left:calc(var(--gx) * -1);margin-right:calc(var(--gx) * -1);order:-1}
.darkproof .inner > figure img{aspect-ratio:1/1;object-fit:cover;width:100%}
.darkproof figcaption.credit{padding-left:var(--gx);padding-right:var(--gx)}
}
/* --- Bio contact rows. The old was caught by the contact page's own bare
.contact rule, which painted a tint panel behind it, and its middot separators were stranded
on their own lines once the links became inline-block for mobile tap targets. --- */
.bioc{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.bioc li{display:flex;align-items:center;gap:.72rem;min-height:44px}
.bioc .ci{flex:0 0 auto;width:17px;height:17px;fill:var(--gold)}
.bioc a{color:var(--ink);font-size:1.02rem;line-height:1.4;overflow-wrap:anywhere;
text-decoration:underline;text-decoration-color:rgba(1,22,64,.28);text-underline-offset:3px}
.bioc a:hover{color:var(--gold);text-decoration-color:var(--gold)}
@media (max-width:768px){ .bioc a{font-size:1.1rem} .bioc .ci{width:19px;height:19px} }
/* --- /reviews/ : every review in full, so the card is a reading surface not a quote chip --- */
.rvws{padding:3.4rem 2.4rem 4.2rem}
.rvwhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem 1.6rem;margin:0 0 2rem}
.rvwnote{margin:0;font-size:.82rem;color:var(--mut)}
.rvwgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem}
.rvw{background:var(--paper);border:1px solid var(--peri-line);border-top:3px solid var(--gold);
padding:1.5rem 1.6rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;min-width:0}
.rvw .stars{color:var(--gold);letter-spacing:.14em;font-size:.9rem}
.rvw blockquote{margin:0}
.rvw blockquote p{margin:0;font-size:.97rem;line-height:1.72;color:#404A63}
.rvw footer{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--peri-line);
display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline}
.rvw .rn{font-weight:600;color:var(--ink);font-size:.95rem}
.rvw .rd{font-size:.78rem;color:var(--mut)}
.rvws .rsrc{margin:2.2rem 0 0;font-size:.9rem}
.rvws .rsrc a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.rvws .rsrc a:hover{color:var(--gold)}
@media (max-width:1024px){ .rvwgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:768px){
.rvws{padding:2.2rem var(--gx) 2.8rem}
.rvwgrid{grid-template-columns:minmax(0,1fr);gap:1rem}
.rvw blockquote p{font-size:1.03rem;line-height:1.7}
.rvw .rn{font-size:1rem} .rvw .rd{font-size:.88rem}
.rvwnote{font-size:.92rem}
.rvws .rsrc a{display:inline-block;padding:.62rem 0}
}
/* --- partner pages: /for-agents/, /for-brokers/, /for-advisors/ --- */
.pband{margin:0;padding:1.05rem 2.4rem;background:var(--ink);color:#EBC14A;font-size:.78rem;
font-weight:600;letter-spacing:.11em;text-transform:uppercase;text-align:center}
.fitwrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:3rem;padding:3.2rem 2.4rem}
.fitcol h2,.nofit h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.85rem);
margin:0 0 1.1rem;color:var(--ink)}
ul.fit,ul.no{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
ul.fit li,ul.no li{position:relative;padding-left:1.9rem;font-size:1rem;line-height:1.7;color:#404A63}
ul.fit li:before{content:"";position:absolute;left:0;top:.62em;width:11px;height:6px;
border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
ul.no li:before{content:"";position:absolute;left:1px;top:.58em;width:11px;height:11px;
background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
color:#9AA3B8;transform:rotate(45deg)}
.fitside{display:flex;flex-direction:column;gap:2rem;min-width:0}
.stillsend{background:var(--peri);border-top:3px solid var(--gold);padding:1.5rem 1.6rem}
.stillsend h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:0 0 .5rem;color:var(--ink)}
.stillsend p{margin:0;font-size:.97rem;line-height:1.72;color:#404A63}
.readyband{background:var(--tint);padding:2.8rem 2.4rem}
.readyband h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.85rem);margin:0 0 1.5rem;color:var(--ink)}
.rqs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.rq{background:var(--paper);border:1px solid var(--peri-line);border-top:3px solid var(--gold);padding:1.3rem 1.4rem;min-width:0}
.rqn{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--ink);margin-bottom:.25rem}
.rqd{display:block;font-size:.88rem;color:var(--mut);line-height:1.55}
.rqnote{margin:1.3rem 0 0;font-size:.88rem;color:var(--mut)}
.pqs{padding:3.2rem 2.4rem}
.pqs h2,.pstories h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.85rem);margin:0 0 1.5rem;color:var(--ink)}
.pqgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.3rem}
.pq{margin:0;background:var(--paper);border:1px solid var(--peri-line);border-top:3px solid var(--gold);
padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.8rem;min-width:0}
.pq .stars{color:var(--gold);letter-spacing:.14em;font-size:.88rem}
.pq blockquote{margin:0}
.pq blockquote p{margin:0;font-size:.95rem;line-height:1.7;color:#404A63}
.pq figcaption{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--peri-line);
font-size:.82rem;font-weight:600;color:var(--ink)}
.pstories{padding:0 2.4rem 3.2rem}
.slinks{display:flex;flex-wrap:wrap;gap:.8rem}
.slink{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.7rem 1.2rem;
border:1px solid var(--peri-line);background:var(--paper);color:var(--ink);font-size:.92rem}
.slink span{color:var(--gold)}
.slink:hover{border-color:var(--gold);color:var(--blue)}
@media (max-width:1024px){ .fitwrap{grid-template-columns:minmax(0,1fr);gap:2.2rem} }
@media (max-width:768px){
.pband{padding:.9rem var(--gx);font-size:.74rem;letter-spacing:.09em;text-align:left}
.fitwrap{padding:2.2rem var(--gx);gap:2rem}
ul.fit li,ul.no li{font-size:1.03rem;line-height:1.68}
.stillsend p{font-size:1.03rem}
.readyband{padding:2.2rem var(--gx)}
.rqs{grid-template-columns:minmax(0,1fr);gap:.8rem}
.rqd{font-size:.95rem}
.rqnote{font-size:.95rem}
.pqs{padding:2.2rem var(--gx)}
.pq blockquote p{font-size:1.02rem;line-height:1.68}
.pq figcaption{font-size:.92rem}
.pstories{padding:0 var(--gx) 2.2rem}
.slinks{flex-direction:column}
.slink{width:100%;font-size:1rem}
}
/* --- /faq/ : an index of every question, linking to the page that owns the answer --- */
.fqjump{display:flex;flex-wrap:wrap;gap:.6rem;padding:1.8rem 2.4rem 0}
.fqjump a{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1rem;
border:1px solid var(--peri-line);background:var(--paper);color:var(--ink);font-size:.85rem;
font-weight:600;letter-spacing:.04em}
.fqjump a:hover{border-color:var(--gold);color:var(--blue)}
.fqwrap{padding:2.4rem 2.4rem 3.6rem}
.fqsec{margin:0 0 3.2rem;scroll-margin-top:calc(var(--navh, 7rem) + 1rem)}
.fqsec:last-child{margin-bottom:0}
.fqhead{border-top:2px solid var(--gold);padding-top:1rem;margin:0 0 1.6rem;max-width:46rem}
.fqhead h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,2.5vw,1.95rem);margin:0 0 .35rem;color:var(--ink)}
.fqlede{margin:0;font-size:.97rem;line-height:1.7;color:#404A63}
.fqcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.6rem 2.2rem;align-items:start}
.fqp{min-width:0}
.fqpt{margin:0 0 .6rem;font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.fqpt a{color:var(--blue);text-decoration:underline;text-decoration-color:var(--gold);
text-decoration-thickness:2px;text-underline-offset:5px}
.fqpt a:hover{color:var(--ink)}
.fqlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fqlist li{border-bottom:1px solid var(--peri-line)}
.fqlist a{display:block;padding:.72rem 0;font-size:.95rem;line-height:1.55;color:var(--ink)}
.fqlist a:hover{color:var(--blue)}
/* a question linked from the hub opens on arrival instead of landing on a shut row */
.faq details:target{background:var(--peri);outline:2px solid var(--gold);outline-offset:3px}
/* a question arrived at from /faq/ must clear the fixed nav, not land behind it */
.faq details{scroll-margin-top:calc(var(--navh, 7rem) + 1.5rem)}
@media (max-width:768px){
.fqjump{padding:1.4rem var(--gx) 0;gap:.5rem}
.fqjump a{font-size:.9rem}
.fqwrap{padding:1.8rem var(--gx) 2.6rem}
.fqsec{margin-bottom:2.4rem}
.fqlede{font-size:1rem}
.fqcols{grid-template-columns:minmax(0,1fr);gap:1.8rem}
.fqlist a{padding:.85rem 0;font-size:1.02rem;min-height:44px;display:flex;align-items:center}
.fqpt{font-size:.78rem}
}
/* --- region pages: the recorded transactions that happened in this region (Pastel 203).
Links out to /success-stories/, never a second copy of the story. --- */
.rstories{padding:3.2rem 2.4rem}
.rsh{max-width:46rem;margin:0 0 1.6rem}
.rsh h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.45rem,2.5vw,1.95rem);margin:0 0 .4rem;color:var(--ink)}
.rsh p{margin:0;font-size:.97rem;line-height:1.7;color:#404A63}
.rsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.1rem}
.rstory{display:flex;flex-direction:column;gap:.45rem;min-width:0;background:var(--paper);
border:1px solid var(--peri-line);border-top:3px solid var(--gold);padding:1.3rem 1.4rem 1.2rem;color:var(--ink)}
.rstory:hover{border-color:var(--gold)}
.rsw{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.rst{font-family:var(--serif);font-size:1.18rem;line-height:1.35;color:var(--ink)}
.rsg{margin-top:auto;padding-top:.7rem;font-size:.78rem;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--blue)}
.rstory:hover .rsg{color:var(--gold)}
.rsall{margin:1.4rem 0 0;font-size:.9rem}
.rsall a{color:var(--blue);text-decoration:underline;text-decoration-color:var(--gold);
text-decoration-thickness:2px;text-underline-offset:5px;display:inline-block;min-height:44px;
display:inline-flex;align-items:center}
.rsall a:hover{color:var(--ink)}
@media (max-width:768px){
.rstories{padding:2.2rem var(--gx)}
.rsh p{font-size:1rem}
.rsgrid{grid-template-columns:minmax(0,1fr)}
.rst{font-size:1.15rem}
.rsall{font-size:1rem}
}
/* Reading copy I added on the new pages sits at the 16px phone floor. The site's older fine
print (cookie bar, DRE footer, buying-power field hints) is deliberately smaller and is
left as it is. */
@media (max-width:768px){
.rvwnote,.rqnote,.mnote,.rqd{font-size:1rem}
.rvws .rsrc,.rvws .rsrc a{font-size:1rem}
.pq figcaption{font-size:1rem}
.synd{font-size:1rem}
}
/* --- /bridge-loans-california-media/ --- one full-width row per item: image left, copy right.
A grid of short cards leaves two thirds of a 1440 screen empty whatever size the mark is;
the summary is what fills the page, which is how the client's own page works. */
.logowall{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.4rem 3rem;
padding:1.9rem 2.4rem;background:var(--tint);border-bottom:1px solid var(--peri-line)}
.wlab{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.logowall .wl{height:26px;width:auto;max-width:170px;object-fit:contain;opacity:.72;
filter:grayscale(1) contrast(.9)}
.mwrap{padding:3.4rem 2.4rem 3.8rem}
.msec{margin:0 0 3.6rem}
.msec:last-of-type{margin-bottom:0}
/* the rule spans the page; only the lede is held to a readable measure */
.mhead{border-top:2px solid var(--gold);padding-top:1rem;margin:0 0 1.5rem}
.mhead h2{max-width:46rem}
.mhead h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);margin:0;color:var(--ink)}
.mlede{margin:0;font-size:.97rem;line-height:1.7;color:#404A63}
.mrows{display:flex;flex-direction:column}
.mrow{display:grid;grid-template-columns:minmax(0,27rem) minmax(0,1fr);gap:0 3rem;
padding:2.1rem 0;border-top:1px solid var(--peri-line);align-items:start}
.mrow:first-child{border-top:0;padding-top:.4rem}
.mpic{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--peri);min-width:0}
.mpic img{width:100%;height:100%;object-fit:cover;display:block}
.mpic.wm{background:var(--tint);border:1px solid var(--peri-line)}
.mpic.wm img{object-fit:contain;padding:2.2rem}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;
background:rgba(1,22,64,.82);box-shadow:0 2px 16px rgba(0,0,0,.32)}
.play:after{content:"";position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);
border-left:17px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.mbody{min-width:0;display:flex;flex-direction:column;gap:.55rem}
.mkick{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .6rem}
.mout{font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--blue)}
.mdate{font-size:.74rem;color:var(--mut);letter-spacing:.02em}
.mdate:before{content:"ยท";margin-right:.5rem;color:var(--peri-line)}
.mrow h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.1vw,1.8rem);
line-height:1.3;max-width:46rem}
.mrow h3 a{color:var(--ink)}
.mrow h3 a:hover{color:var(--blue);text-decoration:underline;text-decoration-color:var(--gold);
text-decoration-thickness:2px;text-underline-offset:5px}
.msum{margin:.15rem 0 0;font-size:1.03rem;line-height:1.75;color:#404A63;max-width:48rem}
.mgo{margin:.45rem 0 0}
.mgo a{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;font-size:.78rem;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--blue);text-decoration:underline;
text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px}
.mgo a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.mgo span{color:var(--gold)}
.synd{margin:1.1rem 0 0;padding-top:.95rem;border-top:1px solid var(--peri-line);max-width:48rem}
.synd .sl{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:.7rem}
.chips{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:.45rem .85rem;
border:1px solid var(--peri-line);background:var(--paper);font-size:.8rem;color:var(--ink)}
.chip:hover{border-color:var(--gold)}
.chip.wm{padding:.5rem .95rem}
.chip.wm img{height:17px;width:auto;max-width:120px;object-fit:contain;display:block;
filter:grayscale(1);opacity:.78}
.chip.wm:hover img{filter:none;opacity:1}
.mnote{margin:2.8rem 0 0;font-size:.82rem;color:var(--mut);max-width:46rem;line-height:1.7}
@media (max-width:1024px){ .mrow{grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:0 2rem} }
@media (max-width:768px){
.logowall{gap:1rem 1.8rem;padding:1.4rem var(--gx)}
.logowall .wl{height:21px;max-width:128px}
.wlab{width:100%;text-align:center;font-size:.74rem}
.mwrap{padding:2.2rem var(--gx) 2.6rem}
.msec{margin-bottom:2.6rem}
.mlede{font-size:1rem}
.mrow{grid-template-columns:minmax(0,1fr);gap:1.1rem;padding:1.8rem 0}
.mpic{aspect-ratio:16/9}
.mpic.wm img{padding:1.6rem}
.mrow h3{font-size:1.32rem}
.msum{font-size:1.02rem;line-height:1.72}
.mout,.mdate{font-size:.8rem}
.mgo a{font-size:.84rem;min-height:44px}
.chip{font-size:.9rem;min-height:44px}
.chip.wm img{height:19px}
.mnote{font-size:1rem}
}
/* --- Finding the office. Emma's directions graphic rebuilt as real markup, so the type scales
and the address and phone number are selectable and linkable. --- */
.findus{padding:3.4rem 2.4rem 3.8rem;background:var(--tint);border-top:1px solid var(--peri-line)}
/* the rule spans the section; the heading sits in the left column so the map can start level
with it rather than below the address line */
.furule{border-top:2px solid var(--gold);margin:0 0 1.5rem}
.fusteps h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 .3rem;color:var(--ink)}
.fuaddr{margin:0 0 1.6rem;font-size:1.02rem;color:#404A63}
.fugrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2.6rem;align-items:start}
.fukick{margin:0 0 1.1rem;font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--blue)}
.dsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;counter-reset:none}
.dsteps li{display:grid;grid-template-columns:1.85rem minmax(0,1fr);gap:.9rem;align-items:start}
.dn{display:flex;align-items:center;justify-content:center;width:1.85rem;height:1.85rem;border-radius:50%;
background:var(--ink);color:#fff;font-size:.82rem;font-weight:600;flex:0 0 auto}
.dt{font-size:1rem;line-height:1.6;color:#404A63;padding-top:.22rem}
.funote{margin:1.5rem 0 0;background:var(--ink);color:#fff;padding:1rem 1.2rem;font-size:1rem;
line-height:1.5;font-weight:600;border-left:3px solid var(--gold)}
.mapfig{margin:0;border:1px solid var(--peri-line);background:var(--paper);overflow:hidden}
.mapfig img{display:block;width:100%;height:auto}
.maplinks{margin:.9rem 0 0;font-size:.92rem}
.maplinks a{color:var(--blue);text-decoration:underline;text-decoration-color:var(--gold);
text-decoration-thickness:2px;text-underline-offset:4px}
.maplinks a:hover{color:var(--ink)}
.fucall{margin:2.2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--peri-line);
font-size:1.05rem;color:var(--ink)}
.fucall a{color:var(--blue);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);
text-decoration-thickness:2px;text-underline-offset:4px}
.fucall a:hover{color:var(--gold)}
@media (max-width:900px){ .fugrid{grid-template-columns:minmax(0,1fr);gap:2rem} }
@media (max-width:768px){
.findus{padding:2.4rem var(--gx) 2.6rem}
.fuaddr{font-size:1.05rem}
.dt,.funote{font-size:1.05rem}
.maplinks{font-size:1rem}
.maplinks a{display:inline-block;padding:.62rem 0}
.fucall{font-size:1.05rem}
/* the standard exempts links inside a sentence, but a phone number on a contact page is the
one people actually tap, so it gets a real target rather than a 21px line of text */
.fucall a{display:inline-block;padding:.62rem 0}
}
/* ============================================================
FAQ hub, relaid out. The index was four narrow columns of
same-weight links under tracked-caps labels that wrapped, so
the eye had no entry point and the column bottoms were ragged.
Two columns, a real heading per group, and rows that read as
rows. The sections themselves are unchanged; Tay liked those.
============================================================ */
.fqcols{grid-template-columns:repeat(auto-fit,minmax(min(100%,27rem),1fr));gap:2.6rem 3rem}
.fqp{min-width:0;break-inside:avoid}
.fqpt{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
border-top:1px solid var(--ink);padding-top:.7rem;margin:0 0 .2rem;
font-size:inherit;font-weight:400;letter-spacing:normal;text-transform:none}
.fqpt h3{margin:0;font-family:var(--serif);font-weight:400;font-size:1.16rem;line-height:1.3;
letter-spacing:normal;text-transform:none}
.fqpt h3 a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.fqpt h3 a:hover{color:var(--blue);border-bottom-color:var(--gold)}
.fqn{flex:none;font-family:var(--sans,inherit);font-size:.68rem;letter-spacing:.11em;
text-transform:uppercase;color:var(--mut);white-space:nowrap}
.fqlist li{border-bottom:1px solid var(--peri-line)}
.fqlist li:last-child{border-bottom:0}
.fqlist a{display:flex;align-items:baseline;gap:.75rem;padding:.78rem 0;
font-size:1rem;line-height:1.5;color:#2C3550}
.fqlist a:after{content:"\2192";margin-left:auto;flex:none;color:var(--peri-line);
transition:color .15s,transform .15s;transform:translateX(0)}
.fqlist a:hover{color:var(--ink)}
.fqlist a:hover:after{color:var(--gold);transform:translateX(3px)}
@media (max-width:768px){
.fqcols{grid-template-columns:minmax(0,1fr);gap:2.2rem}
.fqpt h3{font-size:1.1rem}
.fqlist a{padding:.9rem 0;font-size:1.02rem;min-height:44px;align-items:center}
}
/* ============================================================
"If your bridge loan is doing any of this", the list of
warning signs, with her two fee items. Sits under the steps on
the buying power page so someone already unhappy with another
lender sees it at the moment they are comparing. No rates.
============================================================ */
.flags{background:var(--ink);color:#fff;padding:3.4rem var(--gx) 3.6rem}
.flags-head{max-width:46rem;margin:0 0 1.9rem}
.flags-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);
line-height:1.16;margin:0 0 .7rem;color:#fff;text-wrap:balance}
.flags-head p{margin:0;font-size:1.02rem;line-height:1.72;color:#C3CDE4;max-width:42rem}
.flaglist{list-style:none;margin:0 0 1.9rem;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:0 2.6rem}
.flaglist li{display:flex;gap:.85rem;align-items:flex-start;padding:.85rem 0;
border-top:1px solid rgba(255,255,255,.16);font-size:1.02rem;line-height:1.5}
.flaglist li:before{content:"";flex:none;width:7px;height:7px;margin-top:.55rem;
background:var(--gold);border-radius:50%}
.flagnote{margin:0;max-width:44rem;font-size:1.02rem;line-height:1.75;color:#DCE2EF;
border-top:2px solid var(--gold);padding-top:1.2rem}
.flagnote a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold)}
.flagnote a:hover{color:var(--gold)}
@media (max-width:768px){
.flags{padding-top:2.4rem;padding-bottom:2.6rem}
.flags-head{margin-bottom:1.4rem}
.flags-head p,.flaglist li,.flagnote{font-size:1rem}
.flaglist{gap:0}
.flaglist li{padding:.8rem 0}
}
/* Pastel [269]: the address input was never styled, so it fell back to the browser
default: 13px text in a 21px box, beside money fields set at 21.6px in 60px boxes.
It now matches the select and lead-form inputs, which is the same treatment. */
.bp-addr input[type="text"]{width:100%;font:inherit;font-size:1.02rem;color:var(--ink);
background:var(--paper);border:1px solid #C9D0E0;border-radius:0;
padding:.85rem 1rem;min-height:50px;transition:border-color .15s,box-shadow .15s}
.bp-addr input[type="text"]::placeholder{color:#B9C0CE;opacity:1;font-style:italic}
.bp-addr input[type="text"]:focus{outline:none;border-color:var(--ink);
box-shadow:0 0 0 3px rgba(186,134,11,.28)}
/* Pastel [247]: the three reasons, each on its own line with its explanation under it. */
.reasons{margin:1.1rem 0 0;display:flex;flex-direction:column;gap:0}
.reasons dt{font-weight:600;font-size:1.04rem;color:var(--ink);
border-top:1px solid var(--peri-line);padding-top:.85rem;margin-top:.85rem}
.reasons dt:first-of-type{border-top:0;padding-top:0;margin-top:0}
.reasons dd{margin:.25rem 0 0;font-size:1.02rem;line-height:1.72;color:#404A63}
/* Pastel [245]: the two columns started level but ended ragged, one at 326px and the
other at 385px, so the block read as lopsided. They now stretch to the same height
with a shared rule top and bottom, which lines both sides up. */
.two{align-items:stretch}
.two > div{display:flex;flex-direction:column;
border-top:1px solid var(--peri-line);padding-top:1.1rem}
.two > div > h2{margin-top:0}
.two > div > .ticks:last-child,
.two > div > .fineprint:last-child{margin-bottom:0}
.two > div:after{content:"";display:block;margin-top:auto;padding-top:1.1rem;
border-bottom:1px solid var(--peri-line)}
@media (max-width:768px){
.two > div:after{padding-top:.8rem}
}
/* Pastel [264]: Emma asked for the 2% line on the FAQ page, pinned to the jump nav.
It sits above the sections so it is read before anyone starts browsing questions. */
.fqflag{margin:0;padding:1.1rem var(--gx) 0;max-width:62rem;font-size:1.04rem;line-height:1.7;color:#3D4560}
.fqflag strong{color:var(--ink);font-weight:600}
.fqflag a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold)}
.fqflag a:hover{color:var(--gold)}
@media (max-width:768px){ .fqflag{font-size:1rem;padding-top:.9rem} }
/* Contact page: the two rows were on different column splits, .cx-people on two equal
columns and .cx-grid on .9fr/1.1fr, so the vertical edge moved between rows and the
page read as off centre. One shared split, and the boxes in a row match height. */
.cx-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.cx-people{align-items:stretch}
.cx-office,.cx-ways{display:flex;flex-direction:column}
@media (max-width:768px){
.cx-grid{grid-template-columns:minmax(0,1fr)}
}
/* OpenStreetMap attribution under the office map */
.maplinks .mapcred{display:block;margin-top:.5rem;font-size:.72rem;letter-spacing:.01em;color:#8A8578}
.maplinks .mapcred a{color:#8A8578;text-decoration:underline}
@media (max-width:768px){.maplinks .mapcred{font-size:.68rem}}
/* ---------- /loan-process/ : the five steps ----------
Own prefix because .plist is already a three-column grid used elsewhere.
One column on every width: it is a sequence, so it reads top to bottom. */
.lp-steps{padding:3.4rem 2.4rem 3.8rem;max-width:1100px;margin:0 auto}
.lp-steps>h2{font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1.2;
color:var(--ink);margin:0 0 2.2rem}
.lp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
.lp-step{display:grid;grid-template-columns:92px 1fr;gap:1.8rem;align-items:start;
padding:1.9rem 0;border-top:1px solid var(--line)}
.lp-step:last-child{border-bottom:1px solid var(--line)}
.lp-num{font-family:var(--serif);font-size:2.3rem;line-height:1;color:var(--gold);
font-variant-numeric:tabular-nums}
.lp-body h3{font-size:1.18rem;font-weight:600;color:var(--ink);margin:.15rem 0 .5rem;letter-spacing:-.01em}
.lp-body p{margin:0;color:var(--mut);max-width:62ch;line-height:1.68}
@media (max-width:1024px){
.lp-steps{padding:2.6rem var(--gx) 3rem}
.lp-steps>h2{font-size:1.7rem;margin-bottom:1.6rem}
.lp-step{grid-template-columns:68px 1fr;gap:1.2rem;padding:1.5rem 0}
.lp-num{font-size:1.9rem}
}
@media (max-width:768px){
.lp-steps{padding:2rem var(--gx) 2.4rem}
.lp-steps>h2{font-size:1.4rem;margin-bottom:1.2rem}
.lp-step{grid-template-columns:1fr;gap:.35rem;padding:1.25rem 0}
.lp-num{font-size:1.25rem;letter-spacing:.06em}
.lp-body h3{font-size:1.02rem;margin:0 0 .35rem}
.lp-body p{font-size:.92rem;line-height:1.62}
}