/* Careers page additions. Loads after v2-about.css, which supplies the shell: tokens, fonts, .wrap, .topbar, .hero, .story, .care, .ph-photo, footer, sticky bar. Only the three sections About has no equivalent for are defined here. */ /* ---- Hero crop. Michael, 2026-08-09: "can we move the team up a little in the photo on /careers or is it at full size already? hero text blocks some faces." Both, as it turned out. The old about-crew.jpg was 1600x1200, and because the hero is a cover fill, how much gets cropped depends entirely on the box ratio. Measured then: 1440 wide -> 168px of vertical slack 1280 wide -> 134px 1024 wide -> 0px (box is exactly 4:3, so the whole photo height was showing) 768 wide -> 0px (crop turns horizontal: 384px of side slack, none vertical) 390 wide -> 0px (658px of side slack) So below 1024 it really was at full size and no CSS could move it. That is moot now: the photo was replaced with the laughing frame, sourced at 4000x3000 and PRE-CROPPED to 1.6 in the file itself, which is the honest fix. Framing decisions belong in the asset when the source has the resolution to spare; object-position is what you reach for when it does not. Because the file is now 1.6 and the hero box is never wider than that, the crop is horizontal at every width and the faces never move vertically. Centre is correct. */ .mhp-v2-careers .hero .bg{ object-position:50% 50%; } /* On a phone the box is about 0.5, so cover throws away roughly 62% of the width and only two of the five fit. Centred, one of those two sits behind the headline. The copy is left-aligned and fills nearly the full width there, so anyone on the left of frame is covered no matter what: bias the crop right, where the two clearest laughing faces are and where there is no text on top of them. */ @media (max-width:620px){ .mhp-v2-careers .hero .bg{ object-position:72% 50%; } } /* ---- pay ladder: same dotted-leader read as the credentials rows on the home page, because it is the same promise (a number you can check, stated plainly). ---- */ .pay{ background:var(--ground-2); padding:clamp(64px,9vw,110px) 0; } .pay-head{ max-width:62ch; margin-bottom:clamp(30px,4vw,46px); } .pay-head .dek{ margin-top:18px; font-family:var(--body); font-size:clamp(17px,1.7vw,19px); line-height:1.65; color:var(--ink-soft); max-width:56ch; } .pay-grid{ background:var(--card); border:1px solid var(--hairline); border-left:3px solid var(--teal); border-radius:4px; padding:clamp(20px,3vw,34px) clamp(20px,3vw,36px); box-shadow:0 22px 50px -34px rgba(15,29,45,.4); } .pay-row{ display:flex; align-items:baseline; gap:14px; padding:14px 0; } .pay-row + .pay-row{ border-top:1px solid var(--hairline); } .p-role{ font-family:var(--disp); font-weight:600; font-size:clamp(14px,1.6vw,16.5px); letter-spacing:.02em; color:var(--ink-soft); flex-shrink:0; } .pay-row .dots{ flex:1 1 auto; min-width:14px; align-self:center; height:1px; background-image:linear-gradient(to right, var(--hairline) 40%, transparent 40%); background-size:6px 1px; background-repeat:repeat-x; } .p-rate{ font-family:var(--disp); font-weight:800; font-size:clamp(20px,2.4vw,28px); color:var(--navy); line-height:1; flex-shrink:0; white-space:nowrap; } .pay-note{ margin-top:24px; font-family:var(--body); font-size:16.5px; line-height:1.7; color:var(--ink-soft); max-width:62ch; } /* ---- the honest parts ---- */ .honest{ background:var(--ground); padding:clamp(64px,9vw,110px) 0; } .honest-head{ margin-bottom:clamp(26px,3.5vw,40px); } .honest-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,5vw,72px); align-items:start; } .honest .prose p{ font-family:var(--body); font-size:clamp(17px,1.7vw,19px); line-height:1.75; color:var(--ink-soft); } .honest .prose p + p{ margin-top:18px; } .gets{ list-style:none; display:grid; gap:0; } .gets li{ font-family:var(--body); font-size:16.5px; line-height:1.6; color:var(--ink-soft); padding:15px 0 15px 26px; position:relative; border-bottom:1px solid var(--hairline); } .gets li:first-child{ border-top:1px solid var(--hairline); } .gets li::before{ content:""; position:absolute; left:0; top:23px; width:10px; height:2px; background:var(--gold); } .gets strong{ font-family:var(--disp); font-weight:700; font-size:14px; color:var(--navy); } @media (max-width:880px){ .honest-grid{ grid-template-columns:minmax(0,1fr); } } /* ---- apply band: the page's one navy beat, in the slot the estimate section occupies everywhere else. No booking embed here on purpose. ---- */ .applyband{ background:var(--navy-deep); color:#fff; padding:clamp(64px,9vw,110px) 0; text-align:center; } .applyband .kicker{ color:var(--gold); justify-content:center; } .applyband h2{ color:#fff; max-width:20ch; margin:0 auto; } .applyband .dek{ margin:20px auto 0; font-family:var(--body); font-style:italic; font-size:clamp(17px,1.8vw,19.5px); line-height:1.65; color:rgba(255,255,255,.86); max-width:58ch; } .apply-ctas{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; } .applyband .nap{ margin-top:34px; font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.08em; color:rgba(255,255,255,.6); } /* ================================================================ Sections added 2026-08-09 when the page was rebuilt on the service-landing-page spine. v2-about.css supplies .cred, .proof and .story; the promises grid, the pull quote and the video slot are new here because About has no equivalent of any of them. ================================================================ */ /* ---- promises: the objection cards, same job as the homeowner set ---- */ .promises{ background:var(--card); border-top:1px solid var(--hairline); padding:clamp(64px,9vw,110px) 0; } .promises-head{ max-width:72ch; margin-bottom:clamp(32px,4vw,50px); } .promises-head h2{ font-family:var(--disp); font-weight:800; color:var(--navy); margin:10px 0 0; font-size:clamp(26px,3.4vw,40px); line-height:1.15; letter-spacing:-.02em; max-width:24ch; } .promises-head .dek{ margin-top:18px; font-family:var(--body); font-size:clamp(17px,1.7vw,19px); line-height:1.7; color:var(--ink-soft); max-width:62ch; } .promise-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,30px); } .promise{ background:#fff; border:1px solid var(--hairline); border-left:3px solid var(--teal); border-radius:4px; padding:clamp(22px,2.6vw,32px); box-shadow:0 26px 54px -34px rgba(15,29,45,.42); display:flex; flex-direction:column; } .promise h3{ font-family:var(--disp); font-weight:800; font-size:clamp(17px,1.9vw,21px); color:var(--navy); margin:0 0 12px; letter-spacing:-.01em; } .promise p{ font-family:var(--body); font-size:16.5px; line-height:1.7; color:var(--ink-soft); margin:0; } .promise .pl{ margin-top:18px; align-self:flex-start; font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--teal-deep); text-decoration:none; border-bottom:2px solid var(--teal); padding-bottom:3px; } .promise .pl:hover{ color:var(--navy); border-color:var(--gold); } /* ---- proof: the Hettema pull quote and the video beside it ---- */ .proof{ padding:clamp(64px,9vw,110px) 0; } .proof-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,4.5vw,72px); align-items:start; } .proof-prose h2{ font-family:var(--disp); font-weight:800; color:var(--navy); margin:10px 0 20px; font-size:clamp(24px,3.1vw,36px); line-height:1.16; letter-spacing:-.018em; max-width:22ch; } .pq{ margin:0 0 20px; padding:18px 0 18px 20px; border-left:3px solid var(--gold); font-family:var(--body); font-style:italic; font-size:clamp(18px,2vw,22px); line-height:1.55; color:var(--navy); } .proof-close{ margin-top:22px; padding-top:20px; border-top:1px solid var(--hairline); font-family:var(--disp); font-weight:600; font-size:16px; line-height:1.65; color:var(--navy); } /* ---- video slot (poster + play; the