/* Buckingham Capital Consulting brand system, November 2026 (marketing/design/bcc-brand-system.md).
   Loaded last on every page by cf/patch_brand.py, after redesign.css; it replaces boutique.css.
   Navy for authority, clay for warmth, stone for calm, the corner frame as the one repeated device.
   Baskerville for display, IBM Plex Sans for text. Square corners and ruled lines throughout. */

@font-face{font-family:'Plex';font-weight:400;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Plex';font-weight:500;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Plex';font-weight:600;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');font-display:swap}

:root{
 --navy:#0B3A68;--navy-ink:#071F38;--navy-deep:#072B4F;
 --clay:#B3573B;--clay-deep:#8F4430;--clay-pale:#F2E3DC;
 --stone:#F4EEE6;--stone-rule:#E4DACC;
 --sky:#6E93BC;--accent:#6E93BC;
 --ink:#16202B;--mute:#4D5866;--rule:#D8DDE4;
 --red:var(--navy);--red-hi:var(--navy);--pale:var(--stone);
 --serif:'Bask','Libre Baskerville',Georgia,serif;
 --sans:'Plex','IBM Plex Sans',system-ui,Arial,sans-serif;--body:var(--sans);
 --bq-max:1180px;--bq-text:700px;
}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);background:#fff}
.in{max-width:var(--bq-max)}
h1,h2,h3,.disp,.phero h1,.head h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
button,input,select,textarea{font-family:var(--sans)}
.disp,h1,h2{text-wrap:balance}
.nw{white-space:nowrap}

/* ---------- the device: a corner frame in clay ---------- */
.frame{position:relative}
.frame::before,.frame::after{content:'';position:absolute;width:34px;height:34px;border:2px solid var(--clay);pointer-events:none;z-index:1}
.frame::before{left:-10px;top:-10px;border-right:0;border-bottom:0}
.frame::after{right:-10px;bottom:-10px;border-left:0;border-top:0}
.frame.on-dark::before,.frame.on-dark::after{border-color:#fff}
.frame.inset::before{left:18px;top:18px}
.frame.inset::after{right:18px;bottom:18px}
.mark{display:inline-block;width:16px;height:16px;border-left:2px solid var(--clay);border-top:2px solid var(--clay);vertical-align:-2px;margin-right:12px}
/* a single bracket as the marker on cards and list titles */
.rgrid h3::before,.mgrid h3::before,.pgrid h3::before,.cgrid5 h3::before,.igrid h3::before,.cols3 .item h3::before,.cols2 .item h3::before,
.sgrid h3::before,.hgrid h3::before,.bc h3::before{content:'';display:inline-block;width:13px;height:13px;border-left:2px solid var(--clay);border-top:2px solid var(--clay);margin-right:10px;vertical-align:0}

/* ---------- header ---------- */
.util{background:#fff;border-bottom:1px solid var(--rule);font-size:13px}
.util a{color:var(--mute)}
.util a.ul{color:var(--navy);font-weight:600}
.nav .wmark{font-family:var(--serif);font-weight:700;color:var(--navy);letter-spacing:-.01em}
.nav ul>li>a{font-family:var(--sans);font-weight:500;color:var(--ink)}
.nav ul>li:hover>a,.nav ul a:hover{border-bottom-color:var(--clay)}
.nav .dd{border-top:3px solid var(--clay)}
.nav .dd a:hover{color:var(--clay-deep)}
.nav .btn.nbtn{background:var(--navy);border-color:var(--navy);color:#fff;height:44px;padding:0 20px;font:600 15px var(--sans)}
.nav .btn.nbtn:hover{background:var(--navy-deep)}

/* ---------- buttons and links ---------- */
.btn{background:var(--clay);border:1px solid var(--clay);color:#fff;font:600 16px var(--sans);height:48px;padding:0 24px;border-radius:0}
.btn:hover{background:var(--clay-deep);border-color:var(--clay-deep)}
.btn.navy,.mfoot .btn{background:var(--navy);border-color:var(--navy)}
.btn.line{background:transparent;border-color:var(--navy);color:var(--navy)}
.tlink{font:600 16px var(--sans);color:var(--navy);border-bottom:2px solid var(--clay);padding-bottom:3px;gap:8px}
.tlink:hover{color:var(--clay-deep);border-bottom-color:var(--clay-deep)}
.body a:not(.btn):not(.tlink),.art a:not(.btn):not(.tlink){color:var(--navy);text-decoration-color:var(--clay)}
.more{display:none}

/* ---------- bands: no two neighbouring sections share a background ---------- */
.sec.pale,.hw{background:var(--stone)!important;border-top:0}
.sec.pale+.sec.pale{border-top:1px solid var(--stone-rule)}
.sec.navy{background:var(--navy)!important;color:#fff;border-top:0}
.sec.navy .head h2,.sec.navy h3,.sec.navy .item h3,.sec.navy b{color:#fff}
.sec.navy .head p,.sec.navy .item p,.sec.navy p{color:rgba(255,255,255,.84)}
.sec.navy .item{border-top-color:rgba(255,255,255,.35)}
.sec.navy .tlink{color:#fff;border-bottom-color:rgba(255,255,255,.7)}
.sec .in,.related .in,.hw .in{padding-block:76px}
.related{background:var(--navy-ink)!important;color:#fff;border-top:0}
.related .head h2{color:#fff}
.related .head p{color:rgba(255,255,255,.8)}
.related .rgrid a{background:transparent;border-top:1px solid rgba(255,255,255,.35);color:#fff}
.related .rgrid h3{color:#fff}
.related .rgrid p,.related .rgrid .label{color:rgba(255,255,255,.78)}
.related .rgrid a:hover h3{color:#F3D6C9}
.related.further{background:#fff!important;color:var(--ink);border-top:0}
.related.further .head h2,.related.further .rgrid h3{color:var(--navy-ink)}
.related.further .rgrid a{border-top-color:var(--navy);color:var(--ink)}
.related.further .rgrid p,.related.further .rgrid .label{color:var(--mute)}
.related.further .rgrid a:hover h3{color:var(--clay-deep)}
.stone{background:var(--stone)!important}
.bg .bc{background:#fff;border:0}
.bg .bc:hover{box-shadow:none}
.bg .bc .k{color:var(--clay-deep)}

/* ---------- page hero: a short solid navy band with white type (Harry, 4 Nov 2026), no imagery ---------- */
.phero,.post{background:var(--navy)!important;color:#fff;border-bottom:0;min-height:0!important}
.phero>img,.phero::before,.phero::after,.post::before,.post::after,.hero::before,.hero::after{display:none!important;background:none!important}
.phero .in{padding-block:56px 54px}
.phero h1{color:#fff;font-size:clamp(36px,4.4vw,56px);max-width:900px;line-height:1.06}
.phero .lead{font-size:20px;color:rgba(255,255,255,.92);max-width:var(--bq-text);margin:22px 0 10px}
.phero .advice{font-size:17px;color:rgba(255,255,255,.8);max-width:var(--bq-text);margin:0 0 26px;line-height:1.6}
.phero .ctas{gap:28px;margin-top:20px}
.phero .meta,.post .by{color:rgba(255,255,255,.76);font-size:14px;margin-top:26px}
.phero .meta a,.post .by a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:3px}
.phero .crumb,.post .crumb{color:rgba(255,255,255,.7)}
.phero .crumb a,.post .crumb a{color:rgba(255,255,255,.78);text-decoration:none}
.phero .crumb a:hover,.post .crumb a:hover{color:#fff}
.phero .crumb span,.post .crumb span{color:rgba(255,255,255,.9)}
.phero .tlink,.post .tlink{color:#fff;border-bottom-color:#E3A189}
.phero .tlink:hover,.post .tlink:hover{color:#F6DDD3;border-bottom-color:#F6DDD3}
.phero .in::before,.phero .in::after,.post .in::before,.post .in::after{display:none!important}
/* home, About and Contact keep their photograph heroes on white */
.about-page .phero,.phero.has-photo{background:#fff!important;color:var(--ink);border-bottom:1px solid var(--rule)}
.about-page .phero h1,.phero.has-photo h1{color:var(--navy)}
.about-page .phero .lead,.phero.has-photo .lead{color:var(--ink)}
.about-page .phero .meta,.phero.has-photo .meta{color:var(--mute)}
.about-page .phero .crumb,.about-page .phero .crumb a,.phero.has-photo .crumb,.phero.has-photo .crumb a{color:var(--mute)}
.about-page .phero .crumb span,.phero.has-photo .crumb span{color:var(--ink)}
.about-page .phero .tlink,.phero.has-photo .tlink{color:var(--navy);border-bottom-color:var(--clay)}
.phero .grid2{display:block}
.phero .kfp{display:none}
.about-page .phero .grid2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:72px;align-items:end}
.about-page .phero .kfp{display:block;position:relative;padding:22px 24px;border:1px solid var(--stone-rule);background:var(--stone)}
.about-page .phero .kfp::before{content:'';position:absolute;left:-9px;top:-9px;width:30px;height:30px;border-left:2px solid var(--clay);border-top:2px solid var(--clay)}
.about-page .phero .kfp::after{content:'';position:absolute;right:-9px;bottom:-9px;width:30px;height:30px;border-right:2px solid var(--clay);border-bottom:2px solid var(--clay)}
.about-page .phero .in::before,.about-page .phero .in::after{display:none}
.kf{border-top:1px solid var(--navy)}
.kf li{border-bottom:1px solid var(--stone-rule)}
.post .in{padding-block:52px 50px}
.post h1{color:#fff;font-size:clamp(32px,3.6vw,46px);line-height:1.12;max-width:980px}
.post .by{font-size:15px;margin-top:18px}
.label,.phero .label{display:none!important}
.trust,.trust.pale,.standing,.engage{display:none!important}
.about-page .standing{display:block!important}
.glance.bq-glance,.glance{background:#fff;color:var(--ink);border-top:0;border-bottom:1px solid var(--rule)}
.glance.bq-glance .in,.glance .in{display:flex;flex-wrap:wrap;gap:14px 56px;padding-block:22px}
.glance.bq-glance .in>div,.glance .in>div{display:flex;flex-direction:column-reverse;gap:2px}
.glance b,.glance.bq-glance b{font-family:var(--sans);font-size:18px;font-weight:600;color:var(--navy);text-transform:none}
.glance span,.glance.bq-glance span{font-size:14px;color:var(--mute);text-transform:none;letter-spacing:0;margin:0}

/* ---------- the early contact strip (clay) on every page ---------- */
.talk{background:var(--clay);color:#fff}
.talk .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:center;padding-top:clamp(26px,3.2vw,40px);padding-bottom:clamp(26px,3.2vw,40px)}
.talk h2{font-size:clamp(24px,2.4vw,32px);color:#fff;margin:0}
.talk p{color:#fff;margin:10px 0 0;max-width:30em;font-size:16px}
.talk form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:stretch;position:relative}
.talk input{font:400 16px var(--sans);padding:14px 16px;border:0;background:#fff;color:var(--ink);min-width:0;width:100%;height:auto}
.talk input::placeholder{color:#7A8594}
.talk .field-wide{grid-column:1/3}
.talk button{grid-column:3;grid-row:1/3;background:var(--navy-ink);color:#fff;border:0;font:600 16px var(--sans);padding:0 22px;cursor:pointer;height:auto}
.talk button:hover{background:#000f20}
.talk .direct{grid-column:1/-1;margin:4px 0 0;font-size:14px;color:#fff}
.talk .direct a{color:#fff;text-decoration:none;font-weight:600;border-bottom:1px solid rgba(255,255,255,.5)}
@media (max-width:900px){.talk .in{grid-template-columns:1fr}.talk form{grid-template-columns:1fr}.talk .field-wide,.talk button,.talk .direct{grid-column:1}.talk button{grid-row:auto;padding:14px}}

/* ---------- body text and call-outs ---------- */
.body,.art{font-size:17px}
.body p,.art p{line-height:1.7}
.sec h3,.hgrid h3,.cgrid5 h3,.item h3,.rgrid h3,.mgrid h3,.pgrid h3,.sgrid h3,.igrid h3,.egrid h3,.tlist b,.rlist b,.conv b,.steps li b,.outcome b,.pkg b,.ed b,.faq summary,.bc h3{font-family:var(--sans)!important;font-weight:600!important;letter-spacing:-.005em!important}
.head h2{font-size:clamp(28px,3vw,40px);color:var(--navy)}
.head p{font-size:17px;color:var(--mute)}
.keys{background:var(--stone)!important;border:0!important;border-top:2px solid var(--clay)!important;padding:24px 28px 18px!important;margin-bottom:30px}
.keys .label{display:block!important;color:var(--navy);font-size:15px;font-weight:600}
.shortans,.lt-answer{border-top:2px solid var(--clay)!important}
.shortans p:first-child,.lt-k{color:var(--navy)!important}
th{color:var(--navy)!important;border-bottom:1px solid var(--navy)!important}
.toc ol{border-top-color:var(--clay)}
.toc a:hover{color:var(--clay-deep)}
.pgrid a,.sgrid a,.rgrid a,.mgrid a,.igrid a{border-top-color:var(--navy)}
.pgrid a:hover h3,.sgrid a:hover h3,.rgrid a:hover h3,.mgrid a:hover h3,.igrid a:hover h3,.cols3 a.item:hover h3{color:var(--clay-deep)}
.hw .conv li::before,.ed li::before,.steps li::before{color:var(--clay)}
.hw .conv li,.ed li{border-top-color:var(--navy)}
.steps li b{color:var(--navy)}
.bf button.on{background:var(--navy);border-color:var(--navy)}
.bf button{border-color:var(--stone-rule)}
.outcome>div{border-top-color:var(--navy)}
.pkg>div{border-top-color:var(--navy)!important}

/* ---------- home ---------- */
.bh-hero{padding:clamp(40px,6vw,88px) 0 clamp(44px,6vw,80px)}
.bh-hero .in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.bh-hero h1{color:var(--navy);font-size:clamp(36px,4.4vw,58px);line-height:1.04;max-width:11em}
.bh-hero .lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--mute);max-width:36em;margin:26px 0 34px}
.bh-hero .acts{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.bh-hero figure{margin:0;aspect-ratio:4/3}
.bh-hero figure img{width:100%;height:100%;object-fit:cover;display:block}
.bh-clients{padding:40px 0 44px;border-bottom:1px solid var(--rule)}
.bh-clients .in{display:grid;grid-template-columns:auto 1fr;gap:28px 48px;align-items:center}
.bh-clients .lab{font-size:14px;color:var(--mute);white-space:nowrap;margin:0}
.bh-clients .wall{display:flex;flex-wrap:wrap;gap:22px 44px;align-items:center;border:0;background:none}
.bh-clients .wall .lg{display:inline-flex;align-items:center;height:30px;filter:grayscale(1);opacity:.7;mix-blend-mode:multiply}
.bh-clients .wall .lg img{height:100%;width:auto;filter:none;opacity:1}
.bh-clients .wall .lg svg{height:22px;width:auto}
.bh-clients .wall .lg .vw{display:inline-flex;align-items:center;gap:8px;font:600 18px var(--sans);color:#333}
.bh-clients .wall .lg .vw svg{height:26px}
.bh-who{background:var(--navy);color:#fff;padding:clamp(56px,8vw,104px) 0}
.bh-who .in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(28px,5vw,72px)}
.bh-who h2{color:#fff;max-width:14em;font-size:clamp(30px,3.4vw,44px);line-height:1.1}
.bh-who .rulebar{width:56px;height:2px;background:var(--clay);margin:0 0 26px}
.bh-who .body{font-size:19px;line-height:1.6;color:rgba(255,255,255,.88);max-width:34em}
.bh-who .body p+p{margin-top:1em}
.bh-who .tlink{color:#fff;border-bottom-color:rgba(255,255,255,.7)}
.bh-do{padding:clamp(56px,8vw,104px) 0}
.bh-do .top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(28px,5vw,72px);margin-bottom:40px}
.bh-do h2{color:var(--navy);font-size:clamp(30px,3.4vw,44px)}
.bh-do .lead{font-size:19px;color:var(--mute);max-width:36em;margin:0}
.bh-do ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,4vw,64px)}
.bh-do li{border-top:1px solid var(--rule);padding:26px 0 28px}
.bh-do li:nth-child(1),.bh-do li:nth-child(2){border-top:2px solid var(--navy)}
.bh-do li:last-child:nth-child(odd){grid-column:1/-1}
.bh-do li:last-child:nth-child(odd) p{max-width:40em}
.bh-do li a{text-decoration:none;display:block;color:inherit}
.bh-do h3{color:var(--navy);margin:0 0 8px;font-size:24px;font-family:var(--serif)!important;font-weight:400!important}
.bh-do p{color:var(--mute);margin:0;max-width:30em}
.bh-do li a:hover h3{color:var(--clay-deep)}
.bh-how{background:var(--stone);padding:clamp(56px,8vw,104px) 0}
.bh-how .in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:center}
.bh-how h2{color:var(--navy);font-size:clamp(30px,3.4vw,44px)}
.bh-how figure{margin:0;aspect-ratio:1}
.bh-how figure img{width:100%;height:100%;object-fit:cover;display:block}
.bh-how .body{font-size:18px;line-height:1.6;color:var(--ink);max-width:32em;margin-top:22px}
.bh-how ol{margin:26px 0 30px;padding:0;list-style:none;counter-reset:n}
.bh-how ol li{counter-increment:n;padding:16px 0 16px 48px;border-top:1px solid var(--stone-rule);position:relative;color:var(--ink)}
.bh-how ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:17px;font:600 13px var(--sans);color:var(--clay);letter-spacing:.04em}
.bh-how ol li:last-child{border-bottom:1px solid var(--stone-rule)}
.bh-ins{background:var(--navy-ink);color:#fff;padding:clamp(56px,8vw,104px) 0}
.bh-ins h2{color:#fff;font-size:clamp(30px,3.4vw,44px)}
.bh-ins .head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px}
.bh-ins .head .tlink{color:#fff;border-bottom-color:rgba(255,255,255,.7)}
.bh-ins .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bh-ins article{background:#fff;color:var(--ink)}
.bh-ins article a{text-decoration:none;color:inherit;display:block;height:100%}
.bh-ins figure{margin:0;aspect-ratio:1200/630;overflow:hidden;border-bottom:3px solid var(--clay)}
.bh-ins figure img{width:100%;height:100%;object-fit:cover;display:block}
.bh-ins .txt{padding:22px 24px 26px}
.bh-ins h3{font-size:20px;line-height:1.3;color:var(--navy);margin:0 0 10px;font-family:var(--serif)!important;font-weight:400!important}
.bh-ins time{font-size:14px;color:var(--mute)}
.bh-ins article a:hover h3{color:var(--clay-deep)}

/* ---------- the close: contact as a stone panel before the footer ---------- */
.close{padding:clamp(56px,8vw,96px) 0;background:#fff}
.close .panel{background:var(--stone);padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px)}
.close .contact{display:contents}
.close h2.disp{color:var(--navy);font-size:clamp(30px,3.4vw,42px)}
.close .contact>div>p{font-size:18px;color:var(--ink);margin:18px 0 0;max-width:30em;line-height:1.55}
.close .direct{list-style:none;margin:26px 0 0;padding:0;font-size:16px}
.close .direct li{padding:12px 0;border-top:1px solid var(--stone-rule)}
.close .direct span{display:inline-block;width:92px;color:var(--mute);text-transform:none;letter-spacing:0}
.close .direct a{color:var(--navy);text-decoration:none;font-weight:600}
.close .cform{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.close .cform label{display:flex;flex-direction:column;gap:6px;font:500 14px var(--sans);color:var(--mute)}
.close .cform label.wide{grid-column:1/-1}
.close .cform input,.close .cform select,.close .cform textarea{font:400 16px var(--sans);padding:12px 14px;border:1px solid #CFC5B6;background:#fff;color:var(--ink);height:auto}
.close .cform textarea{min-height:96px;resize:vertical}
.close .cform .btn{grid-column:1/-1;justify-self:start}
.close .brief{margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:center;padding:26px 0 0;border-top:1px solid var(--rule)}
.close .brief h3{font-size:22px;color:var(--navy);font-family:var(--serif)!important;font-weight:400!important}
.close .brief p{color:var(--mute);margin:6px 0 0}
.close .brief form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.close .brief label{grid-column:1/-1;font:500 14px var(--sans);color:var(--mute)}
.close .brief input[type=email]{font:400 16px var(--sans);padding:12px 14px;border:1px solid var(--rule);height:auto}
.close .brief .btn{background:var(--navy);border-color:var(--navy)}

/* ---------- footer: the one dark band ---------- */
footer{background:var(--navy-ink);color:#fff;font-size:15px}
footer .in{padding-top:56px}
footer h4{font:600 13px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
footer a{color:rgba(255,255,255,.85)}
footer a:hover{color:#fff}
footer .wmark{color:#fff;font-family:var(--serif);font-weight:700}
footer .legal{border-top:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.55)}

/* ---------- phone ---------- */
@media (max-width:900px){
 .phero .in{padding-block:34px 38px}
 .post .in{padding-block:32px 36px}
 .phero h1{font-size:34px}
 .phero .lead{font-size:17px}
 .about-page .phero .grid2{grid-template-columns:1fr;gap:28px}
 .post h1{font-size:30px}
 .sec .in,.related .in,.hw .in{padding-block:52px}
 .bh-hero .in,.bh-who .in,.bh-do .top,.bh-how .in{grid-template-columns:1fr}
 .bh-hero h1{font-size:36px}
 .bh-hero .acts .btn{width:100%;text-align:center}
 .bh-do ul{grid-template-columns:1fr}
 .bh-do li:nth-child(2){border-top:1px solid var(--rule)}
 .bh-ins .grid{grid-template-columns:1fr}
 .bh-ins .head{flex-direction:column;align-items:start}
 .bh-clients .in{grid-template-columns:1fr}
 .bh-clients .wall{gap:18px 28px}
 .bh-clients .wall .lg{height:24px}
 .frame::before{left:0;top:0}.frame::after{right:0;bottom:0}
 .close .panel,.close .brief{grid-template-columns:1fr}
 .close .cform{grid-template-columns:1fr}
 .glance.bq-glance .in,.glance .in{gap:12px 32px}
}
html,body{overflow-x:clip}
/* about: one framed photograph after the statement */
.bh-about-photo{padding:clamp(36px,5vw,72px) 0}
.bh-about-photo .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.bh-about-photo figure{margin:0;aspect-ratio:4/3}
.bh-about-photo figure img{width:100%;height:100%;object-fit:cover;object-position:20% 30%;display:block}
.bh-about-photo .big{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);line-height:1.25;color:var(--navy);margin:0 0 18px}
.bh-about-photo p{color:var(--mute);max-width:30em}
@media (max-width:900px){.bh-about-photo .in{grid-template-columns:1fr}}
/* contact page: a photograph beside the heading (Harry's choice, B24) */
.phero.has-photo .in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(32px,6vw,88px);align-items:center}
.phero.has-photo .in>*{grid-column:1}
.phero.has-photo .in>figure.ph-photo{grid-column:2;grid-row:1/span 6;margin:0;aspect-ratio:4/3}
.phero.has-photo .in::before,.phero.has-photo .in::after{display:none}
.ph-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.phero.has-photo .in{grid-template-columns:1fr}.phero.has-photo .in>figure.ph-photo{grid-column:1;grid-row:auto;margin-top:28px}}
.phero.has-photo{min-height:0!important}