/* --- About Us page (page-about.php) ---
   Spacing follows the site's own scale: the .mb-0/.mb-2/.mb-3/.mb-4/.mb-5
   utilities already used throughout (0 / .5rem / 1rem / 1.5rem / 3rem), and the
   .sec_box structural rhythm (9rem desktop / 6rem mobile). No off-scale values. */

/* fix: the hero's checkerboard graphic (.bg_opj) is position:fixed and was
   bleeding through sections with no opaque background, hurting legibility.
   Scoped to the item cards only (not the whole section) so the
   checkerboard still shows through everywhere else, including INTRODUCTION. */
.wwd-card{background:#fff;}

/* ---- INTRODUCTION: single big statement, no visual ---- */
.intro--p3 .intro-lead{
	font-size:3rem;
	line-height:1.6;
	letter-spacing:.03em;
	margin-bottom:3rem;
}
.intro--p3 .intro-sub{max-width:56ch;color:#3c3a35;}
@media (max-width:767.98px){
	.intro--p3 .intro-lead{font-size:2.1rem;}
}

/* ---- WHAT WE DO: isolated full-width cards with big outline numbers ---- */
.row.wwd-grid{
	display:grid;
	grid-template-columns:minmax(0,1fr);
	gap:3rem;
	margin-left:0;
	margin-right:0;
}
.row.wwd-grid > [class*="col-"]{
	width:auto;max-width:none;min-width:0;flex:none;
}
.row.wwd-grid .wwd-card{padding:3rem !important;border-top:0;background:rgba(255,255,255,.9);}
/* 2 blocks: text block (number + title + list + CTA) and photo block.
   align-items:stretch so the photo always fills the full height of its
   row (matching the text block, whatever that height ends up being) —
   otherwise the shorter of the two leaves an uneven gap of card
   background showing below it. The photo keeps object-fit:cover, so it
   crops to whatever height stretch gives it rather than distorting. */
.wwd-p3-inner{display:flex;align-items:stretch;gap:3rem;min-width:0;}
.wwd-p3-text{flex:1 1 auto;display:flex;align-items:flex-start;gap:3rem;min-width:0;}
.wwd-num-big{
	flex:0 0 auto;
	width:13rem;
	font-size:7rem;
	font-weight:700;
	line-height:1;
	letter-spacing:0;
	color:transparent;
	-webkit-text-stroke:1.5px #000;
	text-stroke:1.5px #000;
}
.wwd-p3-body{flex:1 1 auto;min-width:0;padding-top:1.5rem;}
.wwd-p3-body h4{padding-bottom:1rem;border-bottom:.5px solid #000;}
.wwd-p3-body .wwd-list{color:#2a2823;margin-bottom:1.5rem;max-width:56ch;}
.wwd-p3-photo{flex:0 0 38%;min-width:0;aspect-ratio:16/9;overflow:hidden;}
.wwd-p3-photo img{display:block;width:100% !important;height:100% !important;max-width:none;object-fit:cover;object-position:center;}
@media (max-width:767.98px){
	.row.wwd-grid{gap:1rem;}
	.row.wwd-grid .wwd-card{padding:3rem 1.5rem !important;}
	.wwd-p3-inner{flex-direction:column;gap:1.5rem;}
	.wwd-p3-text{flex-direction:column;align-items:flex-start;gap:1rem;text-align:left;}
	.wwd-num-big{width:auto;font-size:4.6rem;text-align:left;}
	.wwd-p3-body{width:100%;padding-top:0;text-align:left;}
	.wwd-p3-body .bt_link{display:inline-block;width:auto;}
	.wwd-p3-photo{flex:none;width:calc(100% + 3rem);margin-left:-1.5rem;margin-right:-1.5rem;}
	.wwd-p3-photo img{height:auto !important;aspect-ratio:16/9;}
}
/* CTA: plain text, no underline, no arrow (hover fill only),
   left-aligned, smaller than the default bt_link size */
.wwd-grid .wwd-p3-body p.fadein{
	text-align:left;
	margin-top:1.5rem;
}
.wwd-grid .wwd-p3-body .bt_link{display:inline-block;font-size:1.3rem;}
.wwd-grid .wwd-p3-body .bt_link:before{height:0;}
.wwd-grid .wwd-p3-body .bt_link:hover:before{height:100%;}

.assoc-panel{margin-top:6rem;padding:3rem;background:rgba(15,15,15,.7);}
@media (max-width:767.98px){
	.assoc-panel{padding:3rem 1.5rem;}
	.assoc-panel .bt_link{font-size:1.2rem;white-space:nowrap;}
}
.assoc-panel h4{color:#fff;padding-bottom:1rem;border-bottom:.5px solid #fff;}
.assoc-panel p{color:#fff;}
.assoc-panel .bt_link{color:#fff;}
.assoc-panel .bt_link:before{height:0;background:#fff;}
.assoc-panel .bt_link:hover{color:#333;}
.assoc-panel .bt_link:hover:before{height:100%;}

.spec_placeholder{opacity:.55;}

/* COMPANY: the map embed has fixed width="1110" height="600" HTML attributes
   (matches the desktop column width) — without a cap it overflows on mobile,
   where the section is much narrower than 1110px. */
.sec_company iframe{max-width:100%;}
@media (max-width:767.98px){
	.sec_company iframe{width:100%;height:auto;aspect-ratio:1110/600;}
}