/* ==========================================================================
GTA Home Inspection — design system
Navy #0F2C4C · Gold #E0A526 · Instrument Sans headings · Inter body
Flex-only layout throughout so every section maps to an Elementor container.
No CSS grid, no positioning tricks beyond decorative accents.
========================================================================== */
:root{
--navy:#0F2C4C;
--navy-deep:#092038;
--navy-mid:#153A61;
--gold:#E0A526;
--gold-soft:#FDF6E6;
--gold-dark:#7E5D0A;
--steel:#EDF1F5;
--steel-deep:#E2E9F0;
--muted:#54637A;
--line:#E1E7ED;
--white:#FFFFFF;
--head:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
--s1:8px; --s2:14px; --s3:20px; --s4:30px; --s5:44px; --s6:64px; --s7:92px; --s8:120px;
--radius:6px;
--radius-lg:12px;
--wrap:1200px;
--pad:24px;
--shadow-sm:0 2px 10px rgba(15,44,76,.06);
--shadow-md:0 14px 34px rgba(15,44,76,.10);
--shadow-lg:0 26px 60px rgba(9,32,56,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
body{margin:0;background:var(--white);color:var(--navy);font:400 16.5px/1.75 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--head);margin:0;letter-spacing:-.024em;text-wrap:balance}
h1{font-weight:700;font-size:clamp(34px,5vw,54px);line-height:1.06}
h2{font-weight:700;font-size:clamp(27px,3.6vw,40px);line-height:1.12}
h3{font-weight:700;font-size:clamp(18px,2vw,21px);line-height:1.25}
h4{font-weight:700;font-size:17px;line-height:1.3}
p{margin:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding-top:var(--s7);padding-bottom:var(--s7);position:relative}
.section--tight{padding-top:var(--s6);padding-bottom:var(--s6)}
/* Section grounds. The page alternates light / dark rather than
light / slightly-less-light, so each block reads as its own moment. */
.section--white{background:var(--white)}
.section--steel{background:linear-gradient(180deg,var(--steel) 0%,var(--steel-deep) 100%)}
.section--navy{background:var(--navy);color:#fff}
.section--navy h2,.section--navy h3{color:#fff}
.section--navy .lead,.section--navy p{color:rgba(255,255,255,.76)}
/* A hairline of gold where a dark section meets a light one. */
.section--navy::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--gold) 0%,rgba(224,165,38,.25) 42%,transparent 78%)}
.lead{font-size:17.5px;color:var(--muted);line-height:1.8;max-width:60ch}
.muted{color:var(--muted)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3) 18px;margin-top:var(--s2)}
/* ---------- eyebrow ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-weight:700;
font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-dark);
background:var(--gold-soft);padding:8px 14px;border-radius:100px;border:1px solid rgba(224,165,38,.28)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.eyebrow--onnavy{color:var(--gold);background:rgba(224,165,38,.1);border-color:rgba(224,165,38,.4)}
.section--navy .eyebrow{color:var(--gold);background:rgba(224,165,38,.1);border-color:rgba(224,165,38,.4)}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--head);font-weight:700;font-size:15.5px;line-height:1;
padding:17px 30px;border-radius:var(--radius);border:1px solid transparent;
text-decoration:none;cursor:pointer;white-space:nowrap;
transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .18s ease,box-shadow .22s ease}
.btn--gold{background:var(--gold);color:var(--navy-deep);box-shadow:0 8px 22px rgba(224,165,38,.32)}
.btn--gold:hover{background:#F1B93B;transform:translateY(-2px);box-shadow:0 12px 28px rgba(224,165,38,.42)}
.btn--navy{background:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(15,44,76,.22)}
.btn--navy:hover{background:var(--navy-deep);transform:translateY(-2px)}
.btn--ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.4)}
.btn--ghost:hover{background:rgba(255,255,255,.15);border-color:#fff;transform:translateY(-2px)}
.btn--outline{background:#fff;color:var(--navy);border-color:var(--line)}
.btn--outline:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--sm{padding:13px 22px;font-size:14.5px}
/* ==========================================================================
HEADER
========================================================================== */
.utilbar{background:var(--navy-deep);color:rgba(255,255,255,.72);font-size:13.5px}
.utilbar .wrap{display:flex;flex-wrap:wrap;gap:6px var(--s3);align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px}
.utilbar a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .2s ease}
.utilbar a:hover{color:var(--gold)}
.utilbar__item{display:inline-flex;align-items:center;gap:8px}
.masthead{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;box-shadow:0 1px 0 rgba(15,44,76,.04)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:15px;padding-bottom:15px;position:relative}
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand__slot{display:inline-flex;align-items:center;justify-content:center;width:186px;height:50px;
border:1px dashed #C3CCD6;border-radius:var(--radius);font-family:var(--head);font-weight:700;
font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#94A2B1}
.mainnav{display:flex;align-items:center;gap:var(--s3);margin-left:auto}
.mainnav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.mainnav__list a{display:block;text-decoration:none;font-family:var(--head);font-weight:600;font-size:14.5px;
color:var(--navy);padding:10px 12px;border-radius:var(--radius);position:relative;transition:color .2s ease}
.mainnav__list a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;
background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .22s ease}
.mainnav__list a:hover{color:var(--gold-dark)}
.mainnav__list a:hover::after,.mainnav__list a[aria-current="page"]::after{transform:scaleX(1)}
.mainnav__list a[aria-current="page"]{color:var(--gold-dark)}
.headcta{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto}
.headcta__tel{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-weight:700;
font-size:17px;color:var(--navy);text-decoration:none;white-space:nowrap;transition:color .2s ease}
.headcta__tel:hover{color:var(--gold-dark)}
.navtoggle{display:none;align-items:center;justify-content:center;gap:9px;background:var(--navy);color:#fff;
border:0;border-radius:var(--radius);padding:13px 17px;font-family:var(--head);font-weight:700;font-size:14px;cursor:pointer}
.navtoggle__bars{display:inline-flex;flex-direction:column;gap:3px}
.navtoggle__bars i{display:block;width:16px;height:2px;background:#fff;border-radius:2px}
/* ==========================================================================
HERO — the single background image on this page
========================================================================== */
.hero{position:relative;background-color:var(--navy-deep);
background-image:linear-gradient(96deg, rgba(9,32,56,.97) 0%, rgba(9,32,56,.90) 44%, rgba(9,32,56,.34) 100%),
url("../img/home-hero.webp");
background-size:cover;background-position:center;color:#fff;overflow:hidden}
/* faint diagonal light, adds depth without another image */
.hero::after{content:"";position:absolute;right:-10%;top:-30%;width:56%;height:160%;
background:linear-gradient(180deg,rgba(224,165,38,.13),transparent 70%);
transform:rotate(14deg);pointer-events:none}
.hero .wrap{display:flex;align-items:center;min-height:660px;padding-top:var(--s8);padding-bottom:calc(var(--s8) + 40px);position:relative;z-index:2}
.hero__inner{display:flex;flex-direction:column;gap:var(--s3);max-width:680px}
.hero h1{color:#fff}
.hero__slogan{display:inline-flex;align-items:center;gap:12px;font-family:var(--head);font-weight:600;
font-size:clamp(15px,1.7vw,18px);color:var(--gold);letter-spacing:.005em}
.hero__slogan::before{content:"";width:34px;height:2px;background:var(--gold);flex:0 0 auto}
.hero__text{color:rgba(255,255,255,.8);font-size:17.5px;line-height:1.8;max-width:52ch}
.hero__telwrap{display:flex;align-items:center;gap:14px;margin-top:var(--s2);
padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.16);align-self:flex-start}
.hero__telicon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
border-radius:50%;background:rgba(224,165,38,.16);border:1px solid rgba(224,165,38,.42);flex:0 0 auto}
.hero__tel{display:flex;flex-direction:column;color:#fff;text-decoration:none;
font-family:var(--head);font-weight:700;font-size:21px;line-height:1.2}
.hero__tel span{font-family:var(--body);font-weight:400;font-size:13.5px;color:rgba(255,255,255,.62)}
/* ==========================================================================
CREDENTIALS — floating card lifted over the hero edge
========================================================================== */
.creds{background:transparent;position:relative;z-index:10;margin-top:-70px}
.creds__card{display:flex;flex-wrap:wrap;background:#fff;border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid rgba(255,255,255,.6)}
.creds__item{flex:1 1 250px;display:flex;gap:15px;align-items:flex-start;padding:30px 28px;
border-right:1px solid var(--line);transition:background-color .25s ease}
.creds__item:last-child{border-right:0}
.creds__item:hover{background:var(--gold-soft)}
.creds__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:46px;height:46px;
border-radius:var(--radius);background:var(--navy);color:var(--gold);transition:background-color .25s ease}
.creds__item:hover .creds__icon{background:var(--gold);color:var(--navy-deep)}
.creds__body b{display:block;font-family:var(--head);font-weight:700;font-size:15.5px;line-height:1.3;margin-bottom:4px}
.creds__body span{font-size:13.5px;color:var(--muted);line-height:1.55}
/* ==========================================================================
SECTION HEADINGS
========================================================================== */
.sechead{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);max-width:60ch;margin-bottom:var(--s6)}
.sechead--center{align-items:center;text-align:center;margin-left:auto;margin-right:auto}
.sechead h2{position:relative}
/* ==========================================================================
SERVICE CARDS
========================================================================== */
.cardrow{display:flex;flex-wrap:wrap;margin:calc(var(--s2) * -1)}
.cardrow__cell{display:flex;flex:1 1 320px;padding:var(--s2)}
.svccard{display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;position:relative;
box-shadow:var(--shadow-sm);
transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.svccard::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--gold);
transform:scaleX(0);transform-origin:left;transition:transform .3s ease;z-index:3}
.svccard:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:#C9D3DD}
.svccard:hover::before{transform:scaleX(1)}
.svccard__media{overflow:hidden;position:relative;background:var(--steel)}
.svccard__media::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 55%,rgba(9,32,56,.28) 100%);opacity:0;transition:opacity .3s ease}
.svccard:hover .svccard__media::after{opacity:1}
.svccard__media img{width:100%;height:215px;object-fit:cover;transition:transform .6s ease}
.svccard:hover .svccard__media img{transform:scale(1.06)}
.svccard__body{display:flex;flex-direction:column;gap:10px;padding:26px 26px 28px;flex:1 1 auto}
.svccard__body h3{transition:color .22s ease}
.svccard:hover .svccard__body h3{color:var(--gold-dark)}
.svccard__body p{font-size:15px;color:var(--muted);line-height:1.7}
.svccard__more{margin-top:auto;padding-top:var(--s3);font-family:var(--head);font-weight:700;font-size:14px;
color:var(--gold-dark);display:inline-flex;align-items:center;gap:8px}
.svccard__more svg{transition:transform .22s ease}
.svccard:hover .svccard__more svg{transform:translateX(5px)}
/* ==========================================================================
SPLIT (image + copy) with offset accent frame
========================================================================== */
.split{display:flex;flex-wrap:wrap;align-items:center;margin:calc(var(--s5) * -1)}
/* A form column is not the same height as the copy beside it, so it must not be
centred against it. Measured on book-an-inspection: the copy is 641px, the
form 1577px, and centring left 383px of dead space ABOVE the heading - so the
eye landed on the form first and "Only four fields are required", the one
sentence that makes a long form feel short, sat below the fold of the form's
own top. Top-aligned, the heading, the reassurance and the first field all
arrive together. Centring stays the default everywhere else, where the two
sides are of similar height and it is right. */
.split:has(.formcard){align-items:flex-start}
.split__media,.split__copy{padding:var(--s5)}
.split__media{flex:1 1 400px}
.split__copy{flex:1 1 440px;display:flex;flex-direction:column;gap:var(--s3)}
.split--reverse{flex-direction:row-reverse}
.framed{position:relative;display:block}
.framed img{position:relative;z-index:2;border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-md)}
.framed::after{content:"";position:absolute;left:20px;top:20px;right:-20px;bottom:-20px;
border:2px solid var(--gold);border-radius:var(--radius-lg);z-index:1}
.section--navy .framed::after{border-color:rgba(224,165,38,.7)}
/* floating stat chip over an image */
.framed__badge{position:absolute;z-index:3;left:-18px;bottom:26px;display:flex;flex-direction:column;
background:var(--gold);color:var(--navy-deep);border-radius:var(--radius-lg);padding:16px 22px;box-shadow:var(--shadow-md)}
.framed__badge b{font-family:var(--head);font-weight:700;font-size:26px;line-height:1}
.framed__badge span{font-size:12.5px;font-weight:600;margin-top:3px}
.ticklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.ticklist li{display:flex;gap:13px;align-items:flex-start;font-size:16px;line-height:1.65}
.ticklist svg{flex:0 0 auto;margin-top:5px;color:var(--gold)}
.section--navy .ticklist li{color:rgba(255,255,255,.86)}
.smallprint{font-size:14px;color:var(--muted);line-height:1.6}
.section--navy .smallprint{color:rgba(255,255,255,.5)}
/* ==========================================================================
PROCESS STEPS with a connecting rule
========================================================================== */
.steprow{display:flex;flex-wrap:wrap;margin:calc(var(--s2) * -1);position:relative}
.steprow__cell{display:flex;flex:1 1 280px;padding:var(--s2);position:relative}
.step{display:flex;flex-direction:column;gap:13px;width:100%;background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);padding:34px 30px 36px;box-shadow:var(--shadow-sm);
transition:transform .28s ease,box-shadow .28s ease}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.step__num{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
border-radius:var(--radius-lg);background:var(--navy);color:var(--gold);
font-family:var(--head);font-weight:700;font-size:19px;box-shadow:0 8px 18px rgba(15,44,76,.18)}
.step p{font-size:15px;color:var(--muted);line-height:1.7}
/* dashed connector between steps, desktop only */
.steprow__cell:not(:last-child)::after{content:"";position:absolute;top:60px;right:-6px;width:26px;
border-top:2px dashed rgba(224,165,38,.55);z-index:1}
/* ==========================================================================
AREAS
========================================================================== */
.arearow{display:flex;flex-wrap:wrap;gap:9px}
.areapill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
border-radius:100px;padding:10px 17px;font-size:14.5px;font-weight:500;color:var(--navy);text-decoration:none;
transition:border-color .22s ease,color .22s ease,background-color .22s ease,transform .18s ease}
.areapill:hover{border-color:var(--gold);color:var(--gold-dark);background:var(--gold-soft);transform:translateY(-2px)}
.areapill svg{color:var(--gold);flex:0 0 auto}
.areagroup{display:flex;flex-direction:column;gap:13px}
.areagroup__label{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;
font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.areagroup__label::after{content:"";flex:1;height:1px;background:var(--line)}
/* ==========================================================================
TESTIMONIALS (on navy)
========================================================================== */
.quote{display:flex;flex-direction:column;gap:var(--s3);width:100%;height:100%;background:#fff;
border-radius:var(--radius-lg);padding:32px 30px;box-shadow:var(--shadow-md);position:relative;
transition:transform .28s ease}
.quote:hover{transform:translateY(-6px)}
.quote::before{content:"\201C";position:absolute;right:24px;top:6px;font-family:var(--head);font-weight:700;
font-size:76px;line-height:1;color:rgba(224,165,38,.22)}
.quote__stars{display:inline-flex;gap:3px;color:var(--gold)}
.quote p{font-size:15.5px;line-height:1.75;color:var(--navy);position:relative;z-index:2}
.quote__by{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:var(--s3);border-top:1px solid var(--line)}
.quote__by b{font-family:var(--head);font-weight:700;font-size:14.5px;color:var(--navy)}
.quote__by span{font-size:13px;color:var(--muted)}
.placeholder-note{display:flex;gap:11px;align-items:flex-start;background:rgba(224,165,38,.12);
border:1px solid rgba(224,165,38,.35);border-radius:var(--radius);padding:16px 18px;
font-size:14px;color:rgba(255,255,255,.82);margin-top:var(--s5)}
/* ==========================================================================
FAQ
========================================================================== */
.faq{display:flex;flex-direction:column;gap:13px;max-width:900px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
box-shadow:var(--shadow-sm);transition:box-shadow .25s ease,border-color .25s ease}
.faq details[open]{border-color:rgba(224,165,38,.5);box-shadow:var(--shadow-md)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;
padding:24px 28px;font-family:var(--head);font-weight:700;font-size:17px;color:var(--navy);
list-style:none;transition:color .2s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-dark)}
.faq summary::after{content:"";flex:0 0 auto;width:26px;height:26px;border-radius:50%;
background:var(--gold-soft);border:1px solid rgba(224,165,38,.4);
background-image:linear-gradient(var(--gold-dark),var(--gold-dark)),linear-gradient(var(--gold-dark),var(--gold-dark));
background-size:11px 2px,2px 11px;background-position:center,center;background-repeat:no-repeat;
transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq__body{padding:0 28px 26px;font-size:16px;line-height:1.8;color:var(--muted)}
/* ==========================================================================
CTA BAND — gold, the loudest moment on the page
========================================================================== */
.ctaband{background:linear-gradient(100deg,var(--gold) 0%,#EFBB47 100%);color:var(--navy-deep);position:relative;overflow:hidden}
.ctaband::after{content:"";position:absolute;right:-6%;top:-60%;width:44%;height:220%;
background:rgba(255,255,255,.14);transform:rotate(18deg);pointer-events:none}
.ctaband .wrap{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center;justify-content:space-between;
padding-top:var(--s6);padding-bottom:var(--s6);position:relative;z-index:2}
.ctaband__copy{display:flex;flex-direction:column;gap:12px;flex:1 1 440px}
.ctaband h2{color:var(--navy-deep)}
.ctaband p{color:rgba(9,32,56,.78);font-size:17px;max-width:50ch}
.ctaband__actions{display:flex;flex-wrap:wrap;gap:16px}
.btn--onGold{background:var(--navy-deep);color:#fff;box-shadow:0 10px 26px rgba(9,32,56,.28)}
.btn--onGold:hover{background:var(--navy);transform:translateY(-2px)}
.btn--onGoldGhost{background:transparent;color:var(--navy-deep);border-color:rgba(9,32,56,.4)}
.btn--onGoldGhost:hover{background:rgba(9,32,56,.08);border-color:var(--navy-deep);transform:translateY(-2px)}
/* ==========================================================================
FOOTER
========================================================================== */
.footer{background:var(--navy-deep);color:rgba(255,255,255,.7);font-size:15px}
.footer .wrap{padding-top:var(--s7);padding-bottom:var(--s5)}
.footer__cols{display:flex;flex-wrap:wrap;margin:calc(var(--s3) * -1)}
.footer__col{padding:var(--s3);display:flex;flex-direction:column;gap:15px}
.footer__col--brand{flex:1 1 320px}
.footer__col--links{flex:1 1 180px}
.footer h4{color:#fff;font-size:16px;position:relative;padding-bottom:12px}
.footer h4::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--gold)}
.footer p{line-height:1.75}
.footer a{color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s ease}
.footer a:hover{color:var(--gold)}
.footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.footer__list a{display:inline-flex;align-items:center;gap:9px}
.footer__list a::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(224,165,38,.6);flex:0 0 auto;transition:transform .2s ease}
.footer__list a:hover::before{transform:scale(1.6)}
.footer__slot{display:inline-flex;align-items:center;justify-content:center;width:200px;height:54px;
border:1px dashed rgba(255,255,255,.28);border-radius:var(--radius);color:rgba(255,255,255,.42);
font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.footer__contact{display:flex;flex-direction:column;gap:9px}
.footer__contact a{display:inline-flex;align-items:center;gap:10px}
.footer__contact .big{font-family:var(--head);font-weight:700;font-size:22px;color:#fff}
.footer__bottom{border-top:1px solid rgba(255,255,255,.13);margin-top:var(--s5);padding-top:var(--s4);
display:flex;flex-wrap:wrap;gap:12px var(--s4);align-items:center;justify-content:space-between;
font-size:13.5px;color:rgba(255,255,255,.52)}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width:1080px){
.mainnav__list a{padding:10px 9px;font-size:14px}
.headcta__tel{font-size:16px}
.steprow__cell:not(:last-child)::after{display:none}
}
@media (max-width:900px){
:root{--s7:64px;--s8:80px}
.navtoggle{display:inline-flex}
.mainnav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
border-bottom:1px solid var(--line);box-shadow:0 20px 38px rgba(15,44,76,.14);
flex-direction:column;align-items:stretch;gap:0;padding:var(--s2) var(--pad) var(--s4)}
.mainnav.is-open{display:flex}
.mainnav__list{flex-direction:column;align-items:stretch;gap:0;width:100%}
.mainnav__list a{padding:15px 4px;border-bottom:1px solid var(--line);border-radius:0;font-size:16.5px}
.mainnav__list a::after{display:none}
.mainnav__list li:last-child a{border-bottom:0}
.headcta{display:none}
.mainnav .headcta{display:flex;flex-direction:column;align-items:stretch;gap:var(--s2);margin-top:var(--s3)}
.mainnav .headcta__tel{justify-content:center;font-size:19px;padding:14px;background:var(--steel);border-radius:var(--radius)}
.hero .wrap{min-height:0;padding-top:var(--s7);padding-bottom:calc(var(--s7) + 30px)}
.hero__inner{max-width:100%}
.creds{margin-top:-46px}
.creds__item{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--line);padding:22px 24px}
.creds__item:last-child{border-bottom:0}
.split{margin:calc(var(--s4) * -1)}
.split__media,.split__copy{padding:var(--s4);flex:1 1 100%}
.split--reverse{flex-direction:row}
.framed::after{left:14px;top:14px;right:-14px;bottom:-14px}
.framed__badge{left:0;bottom:-14px}
.ctaband .wrap{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
:root{--pad:18px}
.utilbar{font-size:12.5px}
.utilbar .wrap{justify-content:center;text-align:center}
.hero{background-image:linear-gradient(180deg,rgba(9,32,56,.93) 0%,rgba(9,32,56,.96) 100%),url("../img/home-hero.webp")}
.hero::after{display:none}
.hero__actions .btn{flex:1 1 100%}
.svccard__media img{height:200px}
.brand__slot{width:150px;height:44px}
.framed__badge{padding:13px 18px}
.framed__badge b{font-size:22px}
.quote::before{font-size:60px}
}
/* ==========================================================================
REVISION PASS — client changes 1 to 8
========================================================================== */
/* --- 1. more air between the two hero calls to action --- */
.hero__actions{gap:var(--s3) 30px}
/* --- 3. Why Choose Us: lighter navy, larger image, new shape, CTAs --- */
.section--navy-light{background:#173A5E;color:#fff}
.section--navy-light h2,.section--navy-light h3{color:#fff}
.section--navy-light .lead,.section--navy-light p{color:rgba(255,255,255,.78)}
.section--navy-light .eyebrow{color:var(--gold);background:rgba(224,165,38,.12);border-color:rgba(224,165,38,.42)}
.section--navy-light .ticklist li{color:rgba(255,255,255,.88)}
.section--navy-light .smallprint{color:rgba(255,255,255,.52)}
.section--navy-light::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--gold) 0%,rgba(224,165,38,.25) 42%,transparent 78%)}
/* wider media column wherever a section asks for a bigger picture */
.split--bigmedia .split__media{flex:1 1 54%}
.split--bigmedia .split__copy{flex:1 1 42%}
/* shape A — asymmetric sweep, used on Why Choose Us */
.shape-sweep{position:relative;display:block}
.shape-sweep img{width:100%;display:block;position:relative;z-index:2;
border-radius:96px 18px 96px 18px;box-shadow:0 28px 60px rgba(4,16,30,.42)}
.shape-sweep::after{content:"";position:absolute;left:22px;top:22px;right:-22px;bottom:-22px;z-index:1;
border:2px solid rgba(224,165,38,.8);border-radius:96px 18px 96px 18px}
/* the two actions under the Why copy */
.actionpair{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:var(--s3)}
.telbtn{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#fff;
font-family:var(--head);font-weight:700;font-size:19px;line-height:1.1;
padding:13px 22px 13px 13px;border:1px solid rgba(255,255,255,.34);border-radius:100px;
transition:border-color .22s ease,background-color .22s ease,transform .18s ease}
.telbtn:hover{border-color:var(--gold);background:rgba(224,165,38,.12);transform:translateY(-2px)}
.telbtn__icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
border-radius:50%;background:var(--gold);color:var(--navy-deep);flex:0 0 auto}
.telbtn small{display:block;font-family:var(--body);font-weight:400;font-size:12.5px;color:rgba(255,255,255,.6);margin-top:2px}
/* --- 4. How It Works: depth, ghost numerals, gradient cards --- */
.section--steel .step{background:linear-gradient(165deg,#FFFFFF 0%,#F7FAFC 100%);
border:1px solid #DCE4EC;overflow:hidden;position:relative;padding:38px 32px 40px}
.step::after{content:attr(data-ghost);position:absolute;right:-6px;bottom:-30px;
font-family:var(--head);font-weight:700;font-size:132px;line-height:1;
color:rgba(15,44,76,.05);pointer-events:none;z-index:0}
.step > *{position:relative;z-index:1}
.step:hover{transform:translateY(-9px);box-shadow:0 24px 48px rgba(15,44,76,.16);border-color:#C6D2DE}
.step__num{width:60px;height:60px;font-size:21px;border-radius:16px;
background:linear-gradient(150deg,var(--navy) 0%,var(--navy-mid) 100%);
box-shadow:0 12px 24px rgba(15,44,76,.26);position:relative}
.step__num::after{content:"";position:absolute;inset:-4px;border:1px solid rgba(224,165,38,.4);border-radius:20px}
.step h3{font-size:22px}
.step__meta{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-weight:700;
font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);
background:var(--gold-soft);border:1px solid rgba(224,165,38,.3);border-radius:100px;
padding:6px 12px;align-self:flex-start;margin-top:2px}
/* --- 5. Sample Report: bigger image, richer supporting panel --- */
.reportpanel{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow-sm)}
.reportpanel h3{font-size:17px}
.reportgrid{display:flex;flex-wrap:wrap;margin:-7px}
.reportgrid span{flex:1 1 46%;display:flex;align-items:flex-start;gap:10px;padding:7px;
font-size:14.5px;color:var(--muted);line-height:1.55}
.reportgrid svg{flex:0 0 auto;margin-top:4px;color:var(--gold)}
.shape-report{position:relative;display:block}
.shape-report img{width:100%;display:block;position:relative;z-index:2;border-radius:var(--radius-lg);
box-shadow:0 30px 64px rgba(15,44,76,.20)}
.shape-report::before{content:"";position:absolute;left:-26px;top:-26px;width:120px;height:120px;z-index:1;
border-top:3px solid var(--gold);border-left:3px solid var(--gold);border-radius:var(--radius-lg) 0 0 0}
.shape-report::after{content:"";position:absolute;right:-26px;bottom:-26px;width:120px;height:120px;z-index:1;
border-bottom:3px solid var(--gold);border-right:3px solid var(--gold);border-radius:0 0 var(--radius-lg) 0}
/* --- 6. Areas: single-line heading, arched image --- */
.h2-oneline{white-space:nowrap}
.shape-arch{position:relative;display:block}
.shape-arch img{width:100%;display:block;position:relative;z-index:2;
border-radius:240px 240px 20px 20px;box-shadow:0 26px 56px rgba(15,44,76,.18)}
.shape-arch::after{content:"";position:absolute;left:-14px;right:-14px;top:-14px;bottom:-14px;z-index:1;
border:2px dashed rgba(224,165,38,.55);border-radius:250px 250px 26px 26px}
/* --- 7. FAQ centred --- */
.faq--center{margin-left:auto;margin-right:auto}
.faq--center summary{justify-content:center;gap:14px;text-align:center}
.faq--center .faq__body{text-align:center;max-width:62ch;margin-left:auto;margin-right:auto}
/* --- 8. Closing CTA on light navy instead of gold --- */
.ctaband{background:linear-gradient(100deg,#173A5E 0%,#1E4C77 100%);color:#fff}
.ctaband::after{background:rgba(224,165,38,.10)}
.ctaband h2{color:#fff}
.ctaband p{color:rgba(255,255,255,.78)}
.btn--onGold{background:var(--gold);color:var(--navy-deep);box-shadow:0 10px 26px rgba(224,165,38,.34)}
.btn--onGold:hover{background:#F1B93B;transform:translateY(-2px)}
.btn--onGoldGhost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.42)}
.btn--onGoldGhost:hover{background:rgba(255,255,255,.15);border-color:#fff;transform:translateY(-2px)}
@media (max-width:1080px){
.h2-oneline{white-space:normal}
}
@media (max-width:900px){
.split--bigmedia .split__media,.split--bigmedia .split__copy{flex:1 1 100%}
.shape-sweep img,.shape-sweep::after{border-radius:60px 14px 60px 14px}
.shape-sweep::after{left:14px;top:14px;right:-14px;bottom:-14px}
.shape-arch img{border-radius:160px 160px 16px 16px}
.shape-arch::after{border-radius:170px 170px 20px 20px}
.shape-report::before,.shape-report::after{width:80px;height:80px}
.step::after{font-size:104px}
.actionpair{gap:16px}
}
@media (max-width:640px){
.hero__actions{gap:14px}
.reportgrid span{flex:1 1 100%}
.telbtn{width:100%;justify-content:center}
.shape-report::before,.shape-report::after{display:none}
}
/* --- revision follow-up: keep the two Why actions on one row --- */
.split--bigmedia .split__media{flex:1 1 50%}
.split--bigmedia .split__copy{flex:1 1 46%}
.actionpair .btn{padding:15px 24px}
.telbtn{font-size:18px;padding:11px 20px 11px 11px}
.telbtn__icon{width:38px;height:38px}
/* the Areas heading now sits above the split, so its column can be narrower */
.section--steel .sechead{max-width:none}
/* --- mobile: negative gutters must never exceed the page padding --- */
@media (max-width:640px){
.split{margin:-14px}
.split__media,.split__copy{padding:14px}
.footer__cols{margin:-14px}
.footer__col{padding:14px}
.cardrow{margin:-10px}
.cardrow__cell{padding:10px}
.steprow{margin:-10px}
.steprow__cell{padding:10px}
.reportgrid{margin:-6px}
.reportgrid span{padding:6px}
}
/* ==========================================================================
REVISION PASS 2
========================================================================== */
/* --- 1. nav items never wrap --- */
.mainnav__list a{white-space:nowrap}
@media (max-width:1180px){
.mainnav__list a{padding:10px 8px;font-size:13.8px}
.headcta{gap:var(--s2)}
.headcta__tel{font-size:15.5px}
}
/* --- 3. Areas image: cut-corner panel, distinct from the sweep and the
corner brackets used elsewhere. Architectural rather than decorative. --- */
.shape-cut{position:relative;display:block;isolation:isolate}
.shape-cut img{
width:100%;display:block;position:relative;z-index:2;
clip-path:polygon(52px 0, 100% 0, 100% calc(100% - 52px), calc(100% - 52px) 100%, 0 100%, 0 52px);
box-shadow:0 26px 56px rgba(15,44,76,.20);
}
/* solid gold plate sitting behind, following the same cut */
.shape-cut::before{
content:"";position:absolute;z-index:1;left:22px;top:22px;right:-22px;bottom:-22px;
background:var(--gold);opacity:.9;
clip-path:polygon(52px 0, 100% 0, 100% calc(100% - 52px), calc(100% - 52px) 100%, 0 100%, 0 52px);
}
/* thin navy rule tracing the lower cut, reads as a drawn edge */
.shape-cut::after{
content:"";position:absolute;z-index:3;left:0;bottom:0;width:52px;height:52px;
border-bottom:3px solid var(--navy);transform:rotate(-45deg);transform-origin:left bottom;
}
/* --- 4. FAQ: two-tone light ground with a soft gold wash --- */
.section--faq{
background:
radial-gradient(1100px 520px at 88% 8%, rgba(224,165,38,.14) 0%, rgba(224,165,38,0) 62%),
linear-gradient(180deg, #FFFFFF 0%, #F6F9FC 46%, #E9EFF6 100%);
position:relative;overflow:hidden;
}
/* faint navy rule across the top so the section reads as its own block */
.section--faq::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,rgba(15,44,76,.18) 0%,rgba(15,44,76,.05) 55%,transparent 100%);
}
/* soft steel disc behind the accordion, adds depth without another image */
.section--faq::after{
content:"";position:absolute;z-index:0;left:-160px;bottom:-190px;width:520px;height:520px;
border-radius:50%;background:rgba(15,44,76,.045);pointer-events:none;
}
.section--faq .wrap{position:relative;z-index:1}
.section--faq .faq details{background:#fff;border-color:#DDE5EE;box-shadow:0 6px 20px rgba(15,44,76,.07)}
.section--faq .faq details[open]{border-color:rgba(224,165,38,.55);box-shadow:0 16px 38px rgba(15,44,76,.12)}
@media (max-width:900px){
.shape-cut img,.shape-cut::before{
clip-path:polygon(34px 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%, 0 34px);
}
.shape-cut::before{left:14px;top:14px;right:-14px;bottom:-14px}
.shape-cut::after{width:34px;height:34px}
.section--faq::after{width:320px;height:320px;left:-120px;bottom:-140px}
}
/* ==========================================================================
REVISION PASS 3
========================================================================== */
/* --- Areas image: the artwork carries text in its top-left corner, so the
cut moves to the bottom-right only. Nothing is clipped off the words. --- */
.shape-cut img{
clip-path:polygon(0 0, 100% 0, 100% calc(100% - 58px), calc(100% - 58px) 100%, 0 100%);
}
.shape-cut::before{
clip-path:polygon(0 0, 100% 0, 100% calc(100% - 58px), calc(100% - 58px) 100%, 0 100%);
left:24px;top:24px;right:-24px;bottom:-24px;
}
/* navy rule now traces the bottom-right cut instead of the lower-left */
.shape-cut::after{
left:auto;bottom:0;right:0;width:58px;height:58px;
border-bottom:3px solid var(--navy);border-left:0;
transform:rotate(45deg);transform-origin:right bottom;
}
/* --- FAQ: richer light ground — dot grid, two glows, angled band --- */
.section--faq{
background:
radial-gradient(circle at center, rgba(15,44,76,.055) 1.3px, transparent 1.4px) 0 0 / 26px 26px,
radial-gradient(980px 470px at 92% 4%, rgba(224,165,38,.22) 0%, rgba(224,165,38,0) 58%),
radial-gradient(820px 460px at 4% 98%, rgba(15,44,76,.13) 0%, rgba(15,44,76,0) 62%),
linear-gradient(178deg, #FFFFFF 0%, #F3F8FC 38%, #E6EDF6 100%);
}
/* soft angled band sweeping behind the accordion */
.section--faq::after{
content:"";position:absolute;z-index:0;pointer-events:none;
left:-14%;top:12%;width:130%;height:210px;border-radius:0;
background:linear-gradient(90deg, rgba(224,165,38,.11) 0%, rgba(255,255,255,0) 46%, rgba(15,44,76,.07) 100%);
transform:rotate(-4.5deg);
}
/* gold hairline top edge instead of the plain navy rule */
.section--faq::before{
background:linear-gradient(90deg, var(--gold) 0%, rgba(224,165,38,.35) 34%, rgba(15,44,76,.10) 72%, transparent 100%);
height:2px;
}
.section--faq .faq details{box-shadow:0 8px 26px rgba(15,44,76,.09)}
@media (max-width:900px){
.shape-cut img,.shape-cut::before{
clip-path:polygon(0 0, 100% 0, 100% calc(100% - 38px), calc(100% - 38px) 100%, 0 100%);
}
.shape-cut::before{left:15px;top:15px;right:-15px;bottom:-15px}
.shape-cut::after{width:38px;height:38px}
.section--faq::after{height:150px;top:8%}
}
/* ==========================================================================
INTERIOR PAGES
========================================================================== */
/* --- page hero: shorter than the homepage, navy by default --- */
.pagehero{position:relative;background:linear-gradient(104deg,var(--navy-deep) 0%,#153A61 58%,#1B4A78 100%);color:#fff;overflow:hidden}
.pagehero::after{content:"";position:absolute;right:-8%;top:-40%;width:50%;height:190%;
background:linear-gradient(180deg,rgba(224,165,38,.13),transparent 72%);transform:rotate(15deg);pointer-events:none}
.pagehero .wrap{position:relative;z-index:2;padding-top:var(--s7);padding-bottom:var(--s7)}
.pagehero__inner{display:flex;flex-direction:column;gap:var(--s3);max-width:720px}
.pagehero h1{color:#fff}
.pagehero__text{color:rgba(255,255,255,.8);font-size:17.5px;line-height:1.8;max-width:56ch}
.pagehero--img{background-color:var(--navy-deep);background-size:cover;background-position:center}
.pagehero--img::after{display:none}
/* breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13.5px;color:rgba(255,255,255,.62)}
.crumbs a{color:rgba(255,255,255,.62);text-decoration:none;transition:color .2s ease}
.crumbs a:hover{color:var(--gold)}
.crumbs span{color:rgba(255,255,255,.35)}
.crumbs b{color:var(--gold);font-weight:600}
/* --- prose --- */
.prose{display:flex;flex-direction:column;gap:var(--s3);max-width:68ch}
.prose p{font-size:16.5px;line-height:1.85;color:var(--muted)}
.section--navy-light .prose p{color:rgba(255,255,255,.8)}
/* --- value / feature tiles --- */
.tilerow{display:flex;flex-wrap:wrap;margin:calc(var(--s2) * -1)}
.tilerow__cell{display:flex;flex:1 1 250px;padding:var(--s2)}
.tile{display:flex;flex-direction:column;gap:11px;width:100%;background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);padding:28px 26px 30px;box-shadow:var(--shadow-sm);
transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease}
.tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#C9D3DD}
.tile__icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
border-radius:var(--radius-lg);background:var(--gold-soft);color:var(--gold-dark);
border:1px solid rgba(224,165,38,.3);transition:background-color .26s ease,color .26s ease}
.tile:hover .tile__icon{background:var(--gold);color:var(--navy-deep)}
.tile b{font-family:var(--head);font-weight:700;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-dark)}
.tile h3{font-size:19px}
.tile p{font-size:14.5px;color:var(--muted);line-height:1.7}
.section--navy .tile,.section--navy-light .tile{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.section--navy .tile p,.section--navy-light .tile p{color:rgba(255,255,255,.74)}
.section--navy .tile h3,.section--navy-light .tile h3{color:#fff}
.section--navy .tile__icon,.section--navy-light .tile__icon{background:rgba(224,165,38,.16);color:var(--gold);border-color:rgba(224,165,38,.36)}
/* --- inspector profile --- */
.profile{display:flex;flex-wrap:wrap;align-items:center;margin:calc(var(--s5) * -1)}
.profile__media,.profile__body{padding:var(--s5)}
.profile__media{flex:1 1 360px}
.profile__body{flex:1 1 480px;display:flex;flex-direction:column;gap:var(--s3)}
.profile__name{display:flex;flex-direction:column;gap:4px;padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.profile__name b{font-family:var(--head);font-weight:700;font-size:26px;letter-spacing:-.02em}
.profile__name span{font-size:14.5px;color:var(--gold-dark);font-weight:600}
/* --- big statement --- */
.statement{background:var(--navy-deep);color:#fff;text-align:center;position:relative;overflow:hidden}
.statement::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--gold),rgba(224,165,38,.2) 55%,transparent)}
.statement .wrap{padding-top:var(--s6);padding-bottom:var(--s6);display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
.statement p{font-family:var(--head);font-weight:700;font-size:clamp(21px,3vw,32px);line-height:1.3;letter-spacing:-.02em;color:#fff;max-width:24ch}
.statement span{font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
/* --- article cards --- */
.artcard{display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);
transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease}
.artcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#C9D3DD}
.artcard__media img{width:100%;height:200px;object-fit:cover}
.artcard__body{display:flex;flex-direction:column;gap:10px;padding:24px 24px 26px;flex:1 1 auto}
.artcard__cat{font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-dark)}
.artcard__body p{font-size:14.5px;color:var(--muted);line-height:1.65}
.artcard__more{margin-top:auto;padding-top:var(--s2);font-family:var(--head);font-weight:700;font-size:14px;color:var(--gold-dark)}
.artcard--soon{opacity:.78;cursor:default}
.artcard--soon:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--line)}
.artcard__soon{margin-top:auto;padding-top:var(--s2);font-family:var(--head);font-weight:700;font-size:11.5px;
letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.artplaceholder{width:100%;height:200px;background:linear-gradient(140deg,var(--navy) 0%,#1B4A78 100%);
display:flex;align-items:center;justify-content:center}
.artplaceholder svg{color:rgba(224,165,38,.55)}
/* --- forms --- */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:34px 34px 38px;box-shadow:var(--shadow-md)}
.formrow{display:flex;flex-wrap:wrap;margin:calc(var(--s1) * -1)}
.field{display:flex;flex-direction:column;gap:7px;padding:var(--s1);flex:1 1 240px}
.field--full{flex:1 1 100%}
.field label{font-family:var(--head);font-weight:700;font-size:13.5px;color:var(--navy)}
.field label i{color:var(--gold-dark);font-style:normal}
.field input,.field select,.field textarea{
font-family:var(--body);font-size:15.5px;color:var(--navy);background:#fff;
border:1px solid #D6DEE7;border-radius:var(--radius);padding:13px 15px;width:100%;
transition:border-color .2s ease,box-shadow .2s ease}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(224,165,38,.18)}
.field small{font-size:12.5px;color:var(--muted)}
.fieldset{display:flex;flex-direction:column;gap:12px;padding:var(--s1);flex:1 1 100%}
.fieldset > b{font-family:var(--head);font-weight:700;font-size:13.5px;color:var(--navy)}
.checkrow{display:flex;flex-wrap:wrap;margin:-6px}
.checkrow label{display:flex;align-items:center;gap:9px;padding:6px;flex:1 1 220px;
font-size:14.5px;color:var(--muted);cursor:pointer}
.checkrow input{width:17px;height:17px;accent-color:var(--gold);flex:0 0 auto}
.formnote{display:flex;gap:11px;align-items:flex-start;background:var(--gold-soft);
border:1px solid rgba(224,165,38,.4);border-radius:var(--radius);padding:14px 16px;
font-size:13.5px;color:var(--navy);margin-top:var(--s3)}
.formdivider{display:flex;align-items:center;gap:14px;margin:var(--s4) 0 var(--s1);
font-family:var(--head);font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.formdivider::after{content:"";flex:1;height:1px;background:var(--line)}
.formstatus{display:none;gap:11px;align-items:flex-start;border-radius:var(--radius);padding:15px 17px;
font-size:14.5px;margin-top:var(--s3)}
.formstatus.is-ok{display:flex;background:#E8F5EE;border:1px solid #9CCFB4;color:#12603C}
.formstatus.is-err{display:flex;background:#FDECEA;border:1px solid #E9B4AC;color:#9B2C1C}
/* --- contact detail blocks --- */
.contactlist{display:flex;flex-direction:column;gap:var(--s2)}
.contactitem{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);padding:20px 22px;text-decoration:none;color:inherit;
transition:border-color .22s ease,transform .2s ease,box-shadow .22s ease}
a.contactitem:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.contactitem__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
border-radius:var(--radius);background:var(--navy);color:var(--gold);flex:0 0 auto}
.contactitem b{display:block;font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.contactitem span{font-family:var(--head);font-weight:700;font-size:17px;color:var(--navy);line-height:1.35;display:block}
.contactitem small{display:block;font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--muted);margin-top:3px}
/* --- area region blocks --- */
.regionrow{display:flex;flex-wrap:wrap;margin:calc(var(--s2) * -1)}
.regionrow__cell{display:flex;flex:1 1 300px;padding:var(--s2)}
.region{display:flex;flex-direction:column;gap:14px;width:100%;background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);padding:26px 24px 28px;box-shadow:var(--shadow-sm)}
.region__head{display:flex;align-items:center;gap:11px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.region__head span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
border-radius:var(--radius);background:var(--gold-soft);color:var(--gold-dark);flex:0 0 auto}
.region__head b{font-family:var(--head);font-weight:700;font-size:17px;color:var(--navy)}
/* --- 404 --- */
.notfound{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s3);max-width:640px;margin:0 auto}
.notfound img{max-width:400px;width:100%;border-radius:var(--radius-lg)}
@media (max-width:900px){
.profile{margin:calc(var(--s4) * -1)}
.profile__media,.profile__body{padding:var(--s4);flex:1 1 100%}
.formcard{padding:26px 22px 30px}
}
@media (max-width:640px){
.profile{margin:-14px}
.profile__media,.profile__body{padding:14px}
.tilerow{margin:-10px}
.tilerow__cell{padding:10px}
.regionrow{margin:-10px}
.regionrow__cell{padding:10px}
.formrow{margin:-6px}
.field{padding:6px}
}
/* == NAV-FIT PASS START == */
/* ==========================================================================
REVISION PASS 4 - header made to fit the longer nav labels
("About" -> "About Us", "Areas" -> "Service Areas")
==========================================================================
The masthead row is capped by --wrap (1200px) less 2x --pad, so it never
gets more than 1152px at ANY screen size - a wider monitor only widens the
gutters, it does not give the nav more room.
Inside that 1152px: brand slot 186 + nav list + headcta (345).
That leaves the nav list a 581px budget. The longer labels took the list
from 590px to 664px. It was already 9px over before the relabel, and the
dropdown breakpoint sat at 900px, so the horizontal nav was overflowing
everywhere from 900px upward.
Fix, two parts:
1. the desktop nav uses the tighter type and padding at ALL widths now,
not only under 1180px, and the two header gaps come in a notch
2. the dropdown takes over below 1220px. 1220 not 1200: the wrap only
reaches its full 1152px once the viewport clears 1200 PLUS the
scrollbar, and at a literal 1200px window the row had 2px to spare.
-------------------------------------------------------------------------- */
@media (min-width:1220px){
.mainnav{gap:16px}
.mainnav__list a{padding:10px 7px;font-size:13.5px}
.mainnav__list a::after{left:7px;right:7px}
.headcta{gap:var(--s2)}
.headcta__tel{font-size:15.5px}
}
/* Dropdown nav: was max-width:900px, now max-width:1219px. Identical visual
treatment to before, just triggered earlier. */
@media (max-width:1219px){
.navtoggle{display:inline-flex}
.mainnav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
border-bottom:1px solid var(--line);box-shadow:0 20px 38px rgba(15,44,76,.14);
flex-direction:column;align-items:stretch;gap:0;padding:var(--s2) var(--pad) var(--s4)}
.mainnav.is-open{display:flex}
.mainnav__list{flex-direction:column;align-items:stretch;gap:0;width:100%}
.mainnav__list a{padding:15px 4px;border-bottom:1px solid var(--line);border-radius:0;font-size:16.5px}
.mainnav__list a::after{display:none}
.mainnav__list li:last-child a{border-bottom:0}
.headcta{display:none}
.mainnav .headcta{display:flex;flex-direction:column;align-items:stretch;gap:var(--s2);margin-top:var(--s3)}
.mainnav .headcta__tel{justify-content:center;font-size:19px;padding:14px;
background:var(--steel);border-radius:var(--radius)}
}
/* == NAV-FIT PASS END == */
/* == SERVICES PASS START == */
/* ==========================================================================
REVISION PASS 5 - Services page gets its own identity
==========================================================================
Client: "all pages are look like the home page ... its so repetetative".
Fair. Every interior page ran navy text hero -> white split -> steel cards,
and NINE pages all used .shape-report on their images.
Second round of client feedback on this page:
- keep photos on the service cards, they pull visitors in
- the chamfered "blade" shape was ugly; blend the image into the
background instead
Both are addressed below. The blade shape is gone.
-------------------------------------------------------------------------- */
/* --- 1. split page hero ------------------------------------------------- */
.pagehero--split .pagehero__inner{flex-direction:row;flex-wrap:wrap;align-items:center;
gap:var(--s5);max-width:none}
.pagehero__copy{flex:1 1 430px;min-width:0;display:flex;flex-direction:column;gap:var(--s3)}
/* The h1 carries a hard
. At the global clamp max of 54px the first line
("Home Inspection Services") measures ~624px against a 579px column, so it
wrapped to three lines regardless of the break. Sized down until the two
intended lines actually fit. */
.pagehero--split h1{font-size:clamp(31px,3.5vw,46px)}
.pagehero__media{flex:1 1 380px;min-width:0}
@media (max-width:900px){
.pagehero--split .pagehero__inner{flex-direction:column;align-items:stretch;gap:var(--s4)}
}
/* --- 2. shape-float: no frame at all ------------------------------------
The cutaway illustration shipped on a flat #F6F8FC plate, which on a navy
hero read as a white card bolted to the page. services-hero-cutout.webp has
that plate knocked out (tools/make_cutout.py), so the artwork sits directly
on the navy. No border, no panel - just a soft warm glow behind it and a
drop-shadow, which follows the artwork silhouette rather than a box because
the source has real transparency. */
.shape-float{position:relative;display:block}
.shape-float::before{content:"";position:absolute;left:50%;top:52%;width:88%;height:88%;
transform:translate(-50%,-50%);z-index:1;border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(224,165,38,.22),rgba(224,165,38,.06) 58%,transparent 76%)}
.shape-float img{position:relative;z-index:2;width:100%;display:block;
filter:drop-shadow(0 22px 34px rgba(4,16,30,.45))}
/* --- 3. shape-soft: quiet rounded plate for photographic images ---------- */
.shape-soft{position:relative;display:block}
.shape-soft img{width:100%;display:block;border-radius:26px;
box-shadow:0 26px 56px rgba(4,16,30,.34)}
.shape-soft::after{content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
@media (max-width:640px){
.shape-soft img,.shape-soft::after{border-radius:18px}
}
/* --- 4. the six services: horizontal photo cards ------------------------
Photos stay - the client is right that they pull people in. What changes is
the arrangement: two columns of horizontal cards here, against the
homepage's three-up vertical grid, so the two pages no longer look alike. */
.svcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.svcrow{display:flex;align-items:stretch;background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.svcrow:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#C9D3DD}
.svcrow__media{flex:0 0 38%;position:relative;overflow:hidden;background:var(--steel)}
.svcrow__media img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s ease}
.svcrow:hover .svcrow__media img{transform:scale(1.06)}
.svcrow__num{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;
align-items:center;justify-content:center;height:24px;padding:0 9px;border-radius:999px;
background:rgba(9,32,56,.84);color:var(--gold);font-family:var(--head);font-weight:700;
font-size:12px;letter-spacing:.08em}
.svcrow__body{flex:1 1 auto;display:flex;flex-direction:column;gap:9px;padding:22px 24px}
.svcrow__body h3{font-size:18.5px;color:var(--navy);transition:color .22s ease}
.svcrow:hover .svcrow__body h3{color:var(--gold-dark)}
.svcrow__body p{font-size:14.5px;line-height:1.65;color:var(--muted)}
.svcrow__more{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:8px;
font-family:var(--head);font-weight:700;font-size:13.5px;color:var(--navy)}
.svcrow__more svg{transition:transform .22s ease}
.svcrow:hover .svcrow__more{color:var(--gold-dark)}
.svcrow:hover .svcrow__more svg{transform:translateX(5px)}
@media (max-width:980px){
.svcgrid{grid-template-columns:1fr}
}
@media (max-width:560px){
.svcrow{flex-direction:column}
.svcrow__media{flex:0 0 auto;height:172px}
}
/* --- 5. a section head that does not clamp to 60ch, so a one-line
heading has the full column to sit in --- */
.sechead--wide{max-width:none}
/* --- 7. section grounds: real multi-colour blends -----------------------
First attempt shifted about 4% end to end, which is technically a gradient
and visibly nothing. Client: "i dont want to be simple color".
Each ground is now a three-layer mesh - two coloured lights over a
three-stop ramp - built from the brand palette only: navy #0F2C4C,
navy-deep #092038, gold #E0A526, steel. Four distinct grounds so the page
steps through them rather than repeating one.
Contrast is load-bearing here, both ends:
--deep the blue light is held at .18 alpha; its lightest point lands near
#1D537D, keeping 80%-white body text at 5.88:1.
--mist its darkest stop was #CFDEEF, which put muted body text at 4.46:1
- under AA. Lightened to #D5E2F1 for 4.64:1.
Re-run the contrast sums before darkening any light stop or raising any
light alpha. */
/* six services - white, cool blue, warm gold light top right */
.section--paper{
background:
radial-gradient(62% 82% at 88% 4%, rgba(224,165,38,.17), transparent 62%),
radial-gradient(56% 72% at 2% 94%, rgba(23,58,94,.11), transparent 66%),
linear-gradient(158deg,#FFFFFF 0%,#F0F6FC 46%,#E1EBF7 100%);
position:relative;overflow:hidden}
/* what we inspect - navy ramp lit gold low-left and blue high-right */
.section--deep{
background:
radial-gradient(60% 74% at 8% 90%, rgba(224,165,38,.20), transparent 66%),
radial-gradient(66% 78% at 90% 4%, rgba(56,140,190,.18), transparent 68%),
linear-gradient(146deg,#08203A 0%,#123A61 46%,#17466F 100%);
position:relative;overflow:hidden}
/* included as standard - cooler steel, white light top left, gold low right */
.section--mist{
background:
radial-gradient(58% 74% at 5% 6%, rgba(255,255,255,.96), transparent 64%),
radial-gradient(64% 80% at 95% 97%, rgba(224,165,38,.15), transparent 66%),
linear-gradient(196deg,#ECF3FA 0%,#DEE9F5 52%,#D5E2F1 100%);
position:relative;overflow:hidden}
/* FAQ - the mist mix run the other way, warm into cool */
.section--dawn{
background:
radial-gradient(58% 76% at 6% 8%, rgba(224,165,38,.16), transparent 64%),
radial-gradient(62% 74% at 94% 92%, rgba(23,58,94,.13), transparent 68%),
linear-gradient(202deg,#FDF7EC 0%,#F1F6FC 42%,#DFEAF6 100%);
position:relative;overflow:hidden}
.section--paper > .wrap,.section--deep > .wrap,
.section--mist > .wrap,.section--dawn > .wrap{position:relative;z-index:2}
/* --- 8. a centred action pair closing a section -------------------------- */
.sectioncta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
gap:var(--s3) 18px;margin-top:var(--s5)}
/* --- 9. FAQ in two columns, so it does not restage the homepage's
centred single column --- */
.faq--two{max-width:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-content:start}
@media (max-width:900px){
.faq--two{grid-template-columns:1fr}
}
/* --- 6. .split without the bleeding negative margin ---------------------
Base .split pulls -44px sideways and pays it back as 44px of child padding.
Content lines up, but the BOX ends up 44px wider than .wrap on each side
while .wrap only has 24px of gutter - so it pushes a horizontal scrollbar
onto the page between roughly 900px and 1250px. It does that on the
homepage today too (see KNOWN BUG in PROJECT-STATE).
.split--flush drops the sideways bleed and uses a real column gap instead.
Scoped to a class so the approved homepage layout is not touched. The
bigmedia bases have to lose half the gap each or the two columns total more
than 100% and wrap onto separate rows. */
.split--flush{margin-left:0;margin-right:0;column-gap:calc(var(--s5) * 2)}
.split--flush > .split__media,
.split--flush > .split__copy{padding-left:0;padding-right:0}
.split--flush.split--bigmedia > .split__media{flex:1 1 calc(52% - 44px)}
.split--flush.split--bigmedia > .split__copy{flex:1 1 calc(48% - 44px)}
@media (max-width:900px){
.split--flush{column-gap:0}
.split--flush.split--bigmedia > .split__media,
.split--flush.split--bigmedia > .split__copy{flex:1 1 100%}
}
/* == SERVICES PASS END == */
/* == ABOUT PASS START == */
/* ==========================================================================
REVISION PASS 6 - About page gets its own language
==========================================================================
Client: "i dont want to be similar to other pages".
Services page language is soft and floating (shape-float / shape-soft, and
the paper / deep / mist / dawn meshes). About deliberately goes the other
way: editorial - hard offset panels, a gold hairline on the image edge, and
cooler, greyer grounds.
Contrast was checked on every ground before it shipped. Muted body text is
#54637A; keep light stops at or above ~#D5E2F1 or it drops under AA.
-------------------------------------------------------------------------- */
/* --- 1. BANDS, not framed pictures --------------------------------------
Two rounds of frames (offset panels, arched portraits, gold hairlines) were
rejected as ugly, and the client is right that the answer was never a
different corner radius. Frames are gone.
The photograph is now absolutely positioned against the outer edge of its
section - full section height, out to the page edge - and dissolves into
the section ground along its inner edge. No border, no radius, no shape.
It reads as part of the page rather than a picture placed on it. */
.bandsec{position:relative;overflow:hidden}
.bandsec__media{position:absolute;top:0;bottom:0;width:46%;z-index:1}
.bandsec--left .bandsec__media{left:0}
.bandsec--right .bandsec__media{right:0}
.bandsec__media img{width:100%;height:100%;object-fit:cover;display:block}
/* navy wash, so the photography reads as one designed system rather than
three unrelated stock shots */
.bandsec__media::before{content:"";position:absolute;inset:0;z-index:2;
background:linear-gradient(180deg,rgba(9,32,56,.30) 0%,rgba(9,32,56,.12) 100%)}
/* the dissolve into the ground */
.bandsec__media::after{content:"";position:absolute;inset:0;z-index:3}
.section--quarry .bandsec__media::after{
background:linear-gradient(90deg,rgba(234,240,246,0) 52%,rgba(234,240,246,.86) 88%,#EAF0F6 100%)}
.section--slate .bandsec__media::after{
background:linear-gradient(270deg,rgba(18,60,99,0) 52%,rgba(18,60,99,.90) 88%,#123C63 100%)}
.bandsec > .wrap{position:relative;z-index:4}
.bandsec__copy{display:flex;flex-direction:column}
.bandsec--left .bandsec__copy{margin-left:48%}
.bandsec--right .bandsec__copy{margin-right:48%}
.bandsec__inner{display:flex;flex-direction:column;gap:var(--s3)}
@media (max-width:900px){
.bandsec__media{position:relative;width:100%;height:250px;margin-bottom:var(--s4)}
.bandsec__media::after{display:none}
.bandsec--left .bandsec__copy,.bandsec--right .bandsec__copy{margin:0}
}
/* --- 2. the inspector as a profile CARD ---------------------------------
A format change, not a frame: the photograph is a flush panel of a single
raised card, biography beside it.
NOTHING IS CROPPED. object-fit:cover here cut the top of the frame off,
the inspector's head with it. The photo renders at its natural aspect and
the leftover height in that column is taken up by a navy credentials panel,
so the card still squares off without touching the picture.
Do not reintroduce object-fit:cover on this image. */
.profilecard{display:flex;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 64px rgba(9,32,56,.16);
position:relative}
.profilecard::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
background:var(--gold);z-index:3}
.profilecard__media{flex:1 1 330px;display:flex;flex-direction:column;background:var(--navy)}
.profilecard__media img{width:100%;height:auto;display:block}
.profilecard__creds{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
gap:20px;padding:28px 30px}
.profilecard__creds > div{display:flex;flex-direction:column;gap:3px}
.profilecard__creds b{font-family:var(--head);font-weight:700;font-size:27px;line-height:1;
color:var(--gold);letter-spacing:-.02em}
.profilecard__creds span{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72)}
.profilecard__body{flex:1 1 520px;display:flex;flex-direction:column;gap:var(--s3);
padding:var(--s5)}
.profilecard__name{padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.profilecard__name b{display:block;font-family:var(--head);font-weight:700;font-size:26px;
letter-spacing:-.02em;color:var(--navy)}
.profilecard__name span{display:block;margin-top:5px;font-size:14.5px;font-weight:600;
color:var(--gold-dark)}
.profilecard__lead{font-size:18.5px;line-height:1.7;color:var(--navy)}
/* --- 2b. labelled facts, instead of four undifferentiated paragraphs --- */
.factlist{margin:0;display:flex;flex-direction:column;gap:var(--s3)}
.factlist > div{display:grid;grid-template-columns:100px 1fr;gap:18px;align-items:start}
/* navy, not --gold-dark: #B8860F on white is only 3.25:1, under AA for text
this small. (That is a site-wide problem with .eyebrow too - flagged, not
fixed here, because it means changing an approved brand colour.) */
.factlist dt{font-family:var(--head);font-weight:700;font-size:12.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--navy);padding-top:5px;position:relative}
.factlist dd{margin:0;font-size:15.5px;line-height:1.75;color:var(--muted)}
/* the strongest sentence, lifted out of the prose */
.pullquote{margin:0;padding:4px 0 4px 22px;border-left:3px solid var(--gold);
font-family:var(--head);font-weight:600;font-size:17px;line-height:1.62;color:var(--navy)}
@media (max-width:760px){
.profilecard__body{padding:var(--s4)}
.profilecard__creds{flex-direction:row;flex-wrap:wrap;gap:18px 26px;justify-content:flex-start}
.profilecard__creds > div{flex:1 1 140px}
.factlist > div{grid-template-columns:1fr;gap:5px}
.factlist dt{padding-top:0}
}
/* --- 3. two-point list, gold rule marker --------------------------------
Not the tick list the other pages use. The lead clause carries the point,
the rest explains it. */
.pointlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.pointlist li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.8;color:var(--muted)}
.pointlist li::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;
border-radius:2px;background:var(--gold)}
.pointlist b{display:block;font-family:var(--head);font-weight:700;font-size:17.5px;
color:var(--navy);margin-bottom:5px;letter-spacing:-.015em}
.section--slate .pointlist li{color:rgba(255,255,255,.8)}
.section--slate .pointlist b{color:#fff}
/* --- 4. About's grounds - cooler and greyer than the Services page ------- */
.section--quarry{
background:
radial-gradient(58% 74% at 4% 6%, rgba(23,58,94,.13), transparent 64%),
radial-gradient(62% 78% at 96% 94%, rgba(224,165,38,.14), transparent 66%),
linear-gradient(168deg,#F8FAFC 0%,#EAF0F6 52%,#DCE5EF 100%);
position:relative;overflow:hidden}
.section--ivory{
background:
radial-gradient(60% 76% at 92% 8%, rgba(224,165,38,.20), transparent 64%),
radial-gradient(56% 70% at 6% 96%, rgba(23,58,94,.12), transparent 66%),
linear-gradient(190deg,#FCF8F2 0%,#F3F2EF 46%,#E4E9F0 100%);
position:relative;overflow:hidden}
.section--chalk{
background:
radial-gradient(64% 78% at 8% 4%, rgba(224,165,38,.13), transparent 66%),
radial-gradient(58% 72% at 94% 88%, rgba(23,58,94,.14), transparent 64%),
linear-gradient(202deg,#FFFFFF 0%,#F4F8FC 50%,#E3EBF4 100%);
position:relative;overflow:hidden}
/* deep section, distinct from the Services page's --deep: colder, and lit
from the opposite corner */
.section--slate{color:#fff;
background:
radial-gradient(62% 76% at 92% 88%, rgba(224,165,38,.19), transparent 66%),
radial-gradient(66% 78% at 6% 8%, rgba(64,150,196,.17), transparent 68%),
linear-gradient(140deg,#0B2540 0%,#123C63 48%,#164873 100%);
position:relative;overflow:hidden}
.section--slate h2,.section--slate h3,.section--slate b{color:#fff}
.section--slate p,.section--slate .lead{color:rgba(255,255,255,.8)}
.section--slate .eyebrow{color:var(--gold);background:rgba(224,165,38,.12);
border-color:rgba(224,165,38,.42)}
.section--slate .prose p{color:rgba(255,255,255,.8)}
.section--quarry > .wrap,.section--ivory > .wrap,
.section--chalk > .wrap,.section--slate > .wrap{position:relative;z-index:2}
/* --- 5. the mission band -------------------------------------------------
Client: "the image for the our mission section should be background image".
That supersedes the earlier "without cutting it" - a background image that
fills a wide band has to be cover, so it is cropped top and bottom. Said
plainly in the reply rather than split the difference.
The artwork is mostly light cream (lightest pixels ~#F9F4EA), so the navy
scrim is what carries the white text: at .88 it holds white at about
9.7:1 everywhere on the band, not just at one end. */
.statement--mission{background-color:var(--navy-deep);
background-image:url("../img/testimonials-bg.webp");
background-size:cover;background-position:center;background-repeat:no-repeat}
.statement--mission::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(104deg,rgba(9,32,56,.93) 0%,rgba(9,32,56,.86) 48%,
rgba(9,32,56,.90) 100%)}
.statement--mission .wrap{position:relative;z-index:2;min-height:280px;justify-content:center}
@media (max-width:900px){
.statement--mission .wrap{min-height:0}
}
/* == ABOUT PASS END == */
/* == COVERAGE PASS START == */
/* --------------------------------------------------------------------------
Service Areas - "Our coverage area" section only.
Size history, so nobody swings past the target again:
.split--bigmedia 54% -> rejected, "big map service area image"
.split--figure 36% -> rejected, too small
now 44% -> the middle
The map is a supporting figure. Do not take it back up to 54%.
-------------------------------------------------------------------------- */
.split--figure .split__media{flex:0 1 44%}
.split--figure .split__copy{flex:1 1 50%}
/* gradient ground, not flat white */
.section--coverfield{
background:
radial-gradient(58% 74% at 92% 6%, rgba(224,165,38,.16), transparent 64%),
radial-gradient(62% 76% at 4% 94%, rgba(23,58,94,.13), transparent 66%),
linear-gradient(168deg,#FFFFFF 0%,#F1F6FC 50%,#E3ECF7 100%);
position:relative;overflow:hidden}
.section--coverfield > .wrap{position:relative;z-index:2}
/* the map figure: gold rule on top, inset map, navy legend bar bleeding to the
card edges. More built than a plain bordered picture, without going back to
the mounted-plate treatment that was rejected. */
.coverfig{margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;
overflow:hidden;box-shadow:0 18px 42px rgba(9,32,56,.16);position:relative}
.coverfig::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:var(--gold);z-index:2}
.coverfig__frame{display:block;padding:15px 15px 13px}
.coverfig img{width:100%;height:auto;display:block;border-radius:7px}
.coverfig figcaption{display:block;background:var(--navy);color:var(--gold);
padding:12px 16px;text-align:center;font-family:var(--head);font-weight:700;
font-size:11.5px;letter-spacing:.11em;text-transform:uppercase}
/* One-line heading. The copy column's usable width is ~606px at 1440, and
"Five Regions. One Trusted Standard." renders 656px at the global h2 max of
40px - so it would wrap. 36px renders 587px and clears it. Below 1080 the
site's own rule sets .h2-oneline back to white-space:normal, so it wraps on
small screens as it should. */
#cov-h{font-size:clamp(26px,3vw,36px)}
.coverlead{font-size:18.5px;line-height:1.72;color:var(--navy)}
/* three figures on hairline rules instead of another tick list.
The li is a flex column, so the number and its label stay on separate lines
even if these rules ever fail to load - that failure is exactly what made it
read as "25municipalities" once. */
.figstrip{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;
gap:18px 0}
.figstrip li{display:flex;flex-direction:column;gap:4px;padding:2px 26px;
border-left:1px solid rgba(23,58,94,.18)}
.figstrip li:first-child{padding-left:0;border-left:0}
.figstrip b{font-family:var(--head);font-weight:700;font-size:26px;line-height:1.05;
letter-spacing:-.02em;color:var(--navy)}
.figstrip span{font-size:12px;letter-spacing:.07em;text-transform:uppercase;
font-weight:600;color:var(--muted)}
@media (max-width:900px){
.split--figure .split__media,.split--figure .split__copy{flex:1 1 100%}
.figstrip li{padding:2px 20px}
}
/* == COVERAGE PASS END == */
/* == WHEREWEWORK PASS START == */
/* --------------------------------------------------------------------------
Service Areas - "Where we work". Client-specified palette.
-------------------------------------------------------------------------- */
/* pale ice blue into soft silver into white */
.section--icesilver{
background:linear-gradient(168deg,#E8F1F8 0%,#F2F2F2 55%,#FFFFFF 100%);
position:relative;overflow:hidden}
.section--icesilver > .wrap{position:relative;z-index:2}
/* cards: warm white #FEFDFB into ivory #F5F3EE */
.section--icesilver .region{
background:linear-gradient(158deg,#FEFDFB 0%,#F5F3EE 100%);
border-color:#E8E3D9}
/* details inside the card matched to the warm neutral. The pill takes the
lighter end of the card gradient so it still separates from the card it
sits on. */
.section--icesilver .region__head{border-bottom-color:#E8E3D9}
.section--icesilver .areapill{background:#FEFDFB;border-color:#E8E3D9}
.section--icesilver .areapill:hover{background:var(--gold-soft);border-color:var(--gold)}
/* --------------------------------------------------------------------------
"Outside the list" - client colours soft blue #D6E6F2 -> white #FFFFFF.
This ground is light end to end, so unlike the previous slate version there
is no split to engineer: the section reverts to the normal light-section
text treatment (navy headings, muted body). The white heading override and
the white eyebrow that the slate version needed are both gone.
-------------------------------------------------------------------------- */
.section--skywhite{
background:linear-gradient(168deg,#D6E6F2 0%,#EDF4FA 52%,#FFFFFF 100%);
position:relative;overflow:hidden}
.section--skywhite > .wrap{position:relative;z-index:2}
/* == WHEREWEWORK PASS END == */
/* == REPORT MESH PASS START == */
/* --------------------------------------------------------------------------
Sample Report - "the report section" (#rep-h). Blurred mesh gradient from
the client's palette: #BFD7E6 cool blue, #F6F3F0 warm cream, #EAE7FF pale
lavender, over white.
No filter:blur() here - blurring a background would blur the section's
content with it. Very large, very soft radials give the same diffuse mesh
with no cost.
The blue radial is capped at .70 alpha. At .92 its deepest point put the
muted body text at 4.22:1, under AA; .70 holds 4.62:1. The blue is the
binding constraint - the cream and lavender are light enough not to be.
Do not raise that alpha without re-checking.
-------------------------------------------------------------------------- */
.section--mesh{
background:
radial-gradient(78% 96% at 4% 8%, rgba(191,215,230,.70) 0%, rgba(191,215,230,0) 58%),
radial-gradient(72% 88% at 98% 22%, rgba(246,243,240,.98) 0%, rgba(246,243,240,0) 60%),
radial-gradient(86% 92% at 88% 98%, rgba(234,231,255,.86) 0%, rgba(234,231,255,0) 62%),
radial-gradient(64% 70% at 40% 74%, rgba(191,215,230,.34) 0%, rgba(191,215,230,0) 66%),
#FFFFFF;
position:relative;overflow:hidden}
.section--mesh > .wrap{position:relative;z-index:2}
/* == REPORT MESH PASS END == */
/* == REPORT PAGE PASS START == */
/* --------------------------------------------------------------------------
Sample Report - split hero and report-section body.
-------------------------------------------------------------------------- */
/* hero: copy left, photograph right. Distinct from the Services split hero,
which floats a cut-out illustration on a glow - this is a clean photographic
panel. */
.pagehero--report .pagehero__inner{flex-direction:row;flex-wrap:wrap;align-items:center;
gap:var(--s5);max-width:none}
.pagehero--report .pagehero__copy{flex:1 1 400px;min-width:0;display:flex;
flex-direction:column;gap:var(--s3)}
.pagehero--report .pagehero__media{flex:1 1 420px;min-width:0}
/* uncropped: width 100%, height auto. The image is the product shot - never
crop it to fill a box. */
.reportshot{display:block;position:relative;border-radius:16px;overflow:hidden;
box-shadow:0 30px 64px rgba(4,16,30,.46)}
.reportshot img{width:100%;height:auto;display:block}
.reportshot::after{content:"";position:absolute;inset:0;border-radius:16px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);pointer-events:none}
@media (max-width:900px){
.pagehero--report .pagehero__inner{flex-direction:column;align-items:stretch;gap:var(--s4)}
}
/* --- report section body ------------------------------------------------ */
.reportlead{font-size:18.5px;line-height:1.72;color:var(--navy)}
/* the 24-hour promise, lifted out of the prose */
.reportnote{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;
background:rgba(255,255,255,.72);border:1px solid rgba(23,58,94,.14);
border-left:3px solid var(--gold);border-radius:10px}
.reportnote svg{flex:0 0 auto;margin-top:2px;color:var(--gold-dark)}
.reportnote p{margin:0;font-size:15.5px;line-height:1.7;color:var(--muted)}
.reportnote b{color:var(--navy);font-weight:700}
/* == REPORT PAGE PASS END == */
/* == REPORT HERO PASS START == */
/* --------------------------------------------------------------------------
Sample Report hero - navy panel left, photograph right, cut at 45 degrees.
Client notes that shaped this:
- "dont change the theme color (navy) for the left side" -> the panel
stays the site's navy hero, white text. An earlier light version was
wrong.
- "cut it with 45 angel" -> a true 45 degree slice, which means the cut's
horizontal run must equal the hero's height. The hero is therefore given
a fixed height and the clip offset is set to the same number; change one
and you must change the other or the angle stops being 45.
Desktop hero height 520px, so the cut runs 520px horizontally.
-------------------------------------------------------------------------- */
.pagehero--panel{padding:0;overflow:hidden;
background:linear-gradient(104deg,var(--navy-deep) 0%,#153A61 58%,#1B4A78 100%)}
.pagehero--panel::after{display:none}
.pagehero--panel .wrap{padding:0;max-width:none;width:100%}
.panelhero{display:flex;align-items:stretch;position:relative;height:520px}
/* the navy piece. 45deg: the polygon's bottom edge pulls back by exactly the
hero height (520px). */
.panelhero__copy{flex:0 0 62%;position:relative;z-index:2;display:flex;align-items:center;
margin-right:-260px;
background:linear-gradient(104deg,var(--navy-deep) 0%,#153A61 62%,#1B4A78 100%);
clip-path:polygon(0 0, 100% 0, calc(100% - 520px) 100%, 0 100%)}
/* faint chevron high in the panel, as in the reference */
.panelhero__copy::after{content:"";position:absolute;right:24%;top:-38%;width:46%;height:76%;
background:rgba(255,255,255,.045);transform:rotate(14deg);pointer-events:none;z-index:0}
/* dot grid, bottom-left */
.panelhero__copy::before{content:"";position:absolute;left:26px;bottom:24px;
width:150px;height:70px;pointer-events:none;z-index:1;
background-image:radial-gradient(rgba(255,255,255,.26) 1.6px, transparent 1.7px);
background-size:17px 17px}
/* max-width is the BORDER box, so the 300px right padding was eating it: an
earlier 520px max-width left the text only ~196px, the h1 wrapped to five
lines and the hero grew to 1000px tall - which made the cut 63deg, not 45.
Sized so the copy always fits inside the fixed 520px height. */
.panelhero__inner{width:100%;max-width:900px;margin-left:auto;
padding:0 300px 0 var(--pad);
display:flex;flex-direction:column;gap:var(--s2);position:relative;z-index:2}
/* two lines, so the copy clears the fixed hero height */
.pagehero--panel h1{font-size:clamp(29px,3.1vw,41px)}
/* gold line running down the cut, parallel to it (45deg) */
.panelhero__edge{position:absolute;top:-30%;bottom:-30%;left:62%;width:7px;z-index:3;
background:var(--gold);transform:translateX(-262px) rotate(45deg);
transform-origin:center;pointer-events:none}
/* the photograph fills its piece so the cut has no empty wedge behind it */
.panelhero__media{flex:1 1 38%;position:relative;overflow:hidden}
.panelhero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:60% 50%}
.pagehero--panel h1{color:#fff}
.pagehero--panel .pagehero__text{color:rgba(255,255,255,.8);max-width:40ch}
.panelhero__rule{display:block;width:96px;height:5px;border-radius:3px;
background:var(--gold);margin:2px 0 6px}
@media (max-width:1100px){
/* 480 tall, 480 run - still exactly 45deg. 420 was too short here: the
narrower text column pushes the h1 to three lines and the copy overflowed
the fixed height. */
.panelhero{height:480px}
.panelhero__copy{flex:0 0 70%;margin-right:-240px;
clip-path:polygon(0 0, 100% 0, calc(100% - 480px) 100%, 0 100%)}
.panelhero__inner{max-width:none;padding:0 210px 0 var(--pad)}
.panelhero__edge{left:70%;transform:translateX(-242px) rotate(45deg)}
}
@media (max-width:900px){
.panelhero{flex-direction:column;height:auto}
.panelhero__copy{flex:1 1 auto;clip-path:none;margin-right:0}
.panelhero__inner{margin:0;max-width:none;padding:var(--s6) var(--pad)}
.panelhero__edge,.panelhero__copy::before,.panelhero__copy::after{display:none}
.panelhero__media{flex:1 1 auto;height:280px}
.panelhero__media img{position:relative;height:280px}
}
/* == REPORT HERO PASS END == */
/* == RESOURCES HERO PASS START == */
/* --------------------------------------------------------------------------
Resources hero - raised photograph left, navy copy right.
-------------------------------------------------------------------------- */
.pagehero--deskhero{padding:0;overflow:hidden;position:relative;
background:linear-gradient(104deg,var(--navy-deep) 0%,#153A61 56%,#1B4A78 100%)}
.pagehero--deskhero::after{display:none}
.pagehero--deskhero .wrap{padding:0;max-width:none;width:100%}
/* warm glow on the navy so it is not a flat slab */
.pagehero--deskhero::before{content:"";position:absolute;right:-6%;top:-40%;
width:52%;height:180%;pointer-events:none;z-index:0;
background:radial-gradient(closest-side,rgba(224,165,38,.16),transparent 72%)}
.deskhero{display:flex;align-items:stretch;position:relative;z-index:1}
/* raised photograph, overlapping the navy */
.deskhero__media{flex:0 0 52%;display:flex;align-items:center;position:relative;z-index:3;
margin-right:-44px}
.deskhero__media img{width:100%;height:auto;display:block;
border-radius:0 18px 18px 0;box-shadow:0 34px 72px rgba(4,16,30,.55)}
/* gold bar catching the seam behind the overlap */
.deskhero__media::after{content:"";position:absolute;top:26px;bottom:26px;right:-14px;
width:8px;border-radius:4px;background:var(--gold);z-index:-1}
/* caption chip on the photograph */
.deskhero__tag{position:absolute;left:0;bottom:26px;z-index:4;
display:inline-flex;align-items:center;gap:9px;
padding:10px 16px 10px 22px;border-radius:0 100px 100px 0;
background:rgba(9,32,56,.92);color:#fff;
font-family:var(--head);font-weight:700;font-size:12.5px;letter-spacing:.06em}
.deskhero__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
/* The copy block is CENTRED in its column, not flushed left against the
overlap. Before this it used padding-left:86px with padding-right:var(--pad),
so the text sat 42px off the photograph but only 24px off the viewport edge -
visibly stuck to the border. Padding is now symmetrical and fluid, and the
column carries the 44px overlap clearance itself. */
.deskhero__copy{flex:1 1 48%;display:flex;align-items:center;justify-content:center;
position:relative;z-index:2;padding-left:44px}
.deskhero__inner{width:100%;max-width:600px;
padding:var(--s6) clamp(30px,3.4vw,72px);
display:flex;flex-direction:column;gap:var(--s2)}
/* a little air before the buttons, so the chips and the actions do not read as
one undifferentiated stack */
.deskhero__inner .hero__actions{margin-top:6px}
.pagehero--deskhero .eyebrow{color:var(--gold);background:rgba(224,165,38,.13);
border-color:rgba(224,165,38,.44);align-self:flex-start}
.pagehero--deskhero h1{color:#fff;font-size:clamp(28px,3.05vw,40px)}
.pagehero--deskhero .pagehero__text{color:rgba(255,255,255,.82);max-width:44ch}
.deskhero__rule{display:block;width:92px;height:5px;border-radius:3px;
background:var(--gold);margin:2px 0 4px}
/* what the page actually holds */
.topicchips{list-style:none;margin:4px 0 2px;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.topicchips li{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;
border-radius:100px;border:1px solid rgba(255,255,255,.28);
background:rgba(255,255,255,.07);color:rgba(255,255,255,.92);
font-family:var(--head);font-weight:600;font-size:13px}
.topicchips svg{color:var(--gold);flex:0 0 auto}
@media (max-width:1100px){
.deskhero__copy{padding-left:44px}
.deskhero__inner{padding:var(--s6) clamp(24px,3vw,44px)}
}
@media (max-width:900px){
.deskhero{flex-direction:column}
.deskhero__media{flex:1 1 auto;margin:0}
.deskhero__media img{border-radius:0}
.deskhero__media::after{display:none}
.deskhero__copy{flex:1 1 auto;padding-left:0}
.deskhero__inner{max-width:none;padding:var(--s5) var(--pad) var(--s6)}
}
/* == RESOURCES HERO PASS END == */
/* == TOPICS PASS START == */
/* --------------------------------------------------------------------------
Resources - "Browse by topic".
-------------------------------------------------------------------------- */
/* NO COLOUR TREATMENT ON THIS IMAGE.
A duotone version (grayscale + navy multiply + gold screen) was tried and
rejected - it muddied the artwork. Only the PLACEMENT changes here: the
picture is shown exactly as supplied, inside an asymmetric panel that is
square on the side nearest the copy and generously rounded away from it,
sitting on a gold baseline.
Do not add filter, mix-blend-mode or a tint overlay to .topicshot. */
.topicshot{position:relative;display:block;
border-radius:4px 26px 26px 4px;overflow:hidden;
box-shadow:0 26px 56px rgba(9,32,56,.22)}
.topicshot img{width:100%;height:auto;display:block}
/* gold baseline, so the panel sits on something */
.topicshot__base{position:absolute;left:0;right:0;bottom:0;height:5px;z-index:2;
background:var(--gold)}
/* one-line heading. The copy column is ~530px, and this string needs 33px to
fit; the global h2 max of 40px would wrap it. */
#top-h{font-size:clamp(25px,2.9vw,33px)}
.topiclead{font-size:18.5px;line-height:1.72;color:var(--navy)}
/* numbered topics on hairline rules - not another tick list */
.topiclist{list-style:none;margin:var(--s2) 0 0;padding:0;
border-top:1px solid rgba(23,58,94,.16)}
.topiclist li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:baseline;
padding:13px 0;border-bottom:1px solid rgba(23,58,94,.16)}
/* Full navy, no opacity. Two attempts failed AA here: --gold-dark #B8860F is
2.66:1 on this steel ground, and navy at opacity .55 is only 3.27:1. Muting
text with opacity costs contrast exactly like a paler colour does. The
numerals are set apart by size and letter-spacing instead. */
.topiclist b{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.1em;
color:var(--navy)}
.topiclist span{font-size:15.5px;line-height:1.6;color:var(--navy)}
.topiclist em{display:block;font-style:normal;font-size:14px;color:var(--muted);margin-top:2px}
/* the invitation, set apart from the topics */
.topicask{display:flex;align-items:flex-start;gap:12px;margin-top:var(--s3);
padding:14px 16px;border-radius:10px;background:rgba(255,255,255,.66);
border:1px solid rgba(23,58,94,.14)}
.topicask svg{flex:0 0 auto;margin-top:2px;color:var(--gold-dark)}
.topicask p{margin:0;font-size:15px;line-height:1.68;color:var(--muted)}
.topicask b{color:var(--navy);font-weight:700}
/* == TOPICS PASS END == */
/* == ARTICLE PASS START == */
/* --------------------------------------------------------------------------
Resource articles. A reading layout: one measured column, generous leading,
and enough hierarchy that a 900-word page can be skimmed.
-------------------------------------------------------------------------- */
/* No 820px cap: the headings are the only thing in this hero (crumbs, eyebrow,
h1, read-time - no prose), and 820 was forcing every title onto two lines.
The longest of the eight, "New Construction? What Your Tarion Inspection
Covers", measures 1093px on one line at the clamp's 43.5px, against 1176px of
usable width at 1280 - so releasing the cap is all that is needed. The inner
is left-aligned, not centred, so nothing moves; it is only allowed to grow.
Below about 790px viewport the titles wrap again, which is correct: holding
one line there would mean shrinking the type past readable. */
/* Centred as a block: `align-items:center` makes each child shrink to its own
content width and sit on the centre line, and `text-align:center` centres the
lines inside them once they wrap on small screens. Both are needed - the
first alone leaves wrapped text ragged inside a centred box. */
/* gap:0 on purpose - the spacing is set per element below. A single uniform gap
put all four items on the same 14px rhythm, which reads as undesigned: the
breadcrumb needs distance because it is a different KIND of object, and the
read-time needs to sit tight to the title it describes. */
.pagehero--article .pagehero__inner{max-width:none;gap:0;
align-items:center;text-align:center}
/* The breadcrumb stays LEFT while everything below it is centred. Centred, its
last crumb is the full article title, so on a narrow screen it wrapped across
two centred lines directly above the same words set as the h1 - it read as
disorder rather than as a trail. A breadcrumb is a position indicator, not
part of the title block; it belongs on the page's left edge. */
/* STRETCHED, not shrink-wrapped. Left-aligned while everything below it is
centred is only legible if it reads as its own row; as a shrink-to-fit item
sitting 14px above a centred pill it just looked misaligned. Spanning the full
width and carrying 34px of air under it makes the change of axis deliberate -
navigation ABOVE the title block, rather than part of it. */
/* ANCHORED TO THE TOP, not floating with the title.
The hero's height is content + the wrap's symmetric padding, so with the
breadcrumb simply first in the column it sat 92px down from the top and only
34px above the eyebrow - nearer the title block than the top edge. It read as
the first LINE of the title block, which is precisely why a left-aligned
breadcrumb over centred text looked like a mistake rather than a decision.
Reversing those two distances - close to the top, far from the title - is
what makes it a utility row with a composition beneath it. */
.pagehero--article .wrap{padding-top:38px;padding-bottom:132px}
.pagehero--article .crumbs{align-self:stretch;text-align:left;
justify-content:flex-start;margin-bottom:72px}
.pagehero--article .eyebrow{margin-bottom:18px}
.pagehero--article h1{margin:0 0 10px}
.pagehero--article .articlemeta{margin:0}
/* The last crumb is the article title, word for word, and directly above the
h1 that says the same thing. On a phone that cost two lines to repeat what
comes next, so the trail stops at Resources there. Kept on desktop, where it
is one thin line and is what a breadcrumb is for. */
@media (max-width:700px){
.pagehero--article .crumbs b,
.pagehero--article .crumbs span:last-of-type{display:none}
/* Same proportion, smaller: the phone hero cannot afford 72px of air, but the
breadcrumb must still sit nearer the top than the title. */
/* 78, not 64. The crumb and its gap sit ABOVE the title block, so they push
it down; the bottom padding is what pulls the block's centre back onto the
hero's. Offset measured +19px (sagging) at 64, +7px at 78. */
.pagehero--article .wrap{padding-top:26px;padding-bottom:78px}
.pagehero--article .crumbs{margin-bottom:44px}
}
.pagehero--article .eyebrow{align-self:center;color:var(--gold);
background:rgba(224,165,38,.13);border-color:rgba(224,165,38,.44)}
.pagehero--article h1{color:#fff;font-size:clamp(28px,3.4vw,44px)}
.articlemeta{font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;
font-weight:600;color:rgba(255,255,255,.6)}
/* the eight cards on resources.html are anchors now, so they need the link
defaults stripped - .artcard was written for a div */
a.artcard{text-decoration:none;color:inherit}
a.artcard:hover .artcard__more{color:var(--navy)}
.articlewrap{max-width:760px;margin:0 auto}
.articlefig{margin:0 0 var(--s5)}
.articlefig img{width:100%;height:auto;display:block;border-radius:14px;
box-shadow:0 24px 52px rgba(9,32,56,.18)}
/* 66ch or so is the readable measure; the wrap above already sets the width */
.articlebody{display:flex;flex-direction:column;gap:var(--s3)}
.articlebody p{font-size:17px;line-height:1.85;color:var(--muted)}
.articlebody h2{font-size:clamp(22px,2.4vw,27px);color:var(--navy);
margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line)}
.articlebody h2:first-of-type{margin-top:0}
.artlead{font-size:19.5px !important;line-height:1.72 !important;color:var(--navy) !important}
.articlebody b{color:var(--navy);font-weight:700}
.artlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.artlist li{position:relative;padding-left:26px;font-size:16.5px;line-height:1.75;
color:var(--muted)}
.artlist li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;
border-radius:50%;background:var(--gold)}
/* the one thing on the page worth remembering */
.keynote{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;
border-radius:12px;background:var(--steel);border-left:4px solid var(--gold)}
.keynote svg{flex:0 0 auto;margin-top:3px;color:var(--gold-dark)}
.keynote p{margin:0;font-size:16px !important;line-height:1.7 !important;color:var(--navy) !important;
font-weight:500}
.articlecta{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);
display:flex;flex-direction:column;gap:var(--s3)}
.articlecta > p{font-family:var(--head);font-weight:600;font-size:18px;color:var(--navy)}
.articlerelated{font-size:15px !important;color:var(--muted) !important}
.articlerelated a{color:var(--navy);font-weight:600}
@media (max-width:640px){
.articlebody p{font-size:16.5px}
.articlefig img{border-radius:10px}
}
/* == ARTICLE PASS END == */
/* == AREAS FAQ PASS START == */
/* --------------------------------------------------------------------------
Service Areas FAQ. Warm stone into cool grey - the fourth ground on this
page and unlike the other three, which all run blue.
-------------------------------------------------------------------------- */
.section--quartz{
background:
radial-gradient(58% 74% at 94% 6%, rgba(224,165,38,.17), transparent 64%),
radial-gradient(62% 78% at 4% 94%, rgba(23,58,94,.13), transparent 66%),
linear-gradient(165deg,#F6F3EE 0%,#EEF1F3 46%,#E4EAF1 100%);
position:relative;overflow:hidden}
.section--quartz > .wrap{position:relative;z-index:2}
/* left rail holds the heading and stays put while the answers scroll */
.qalayout{display:flex;flex-wrap:wrap;gap:var(--s5) calc(var(--s5) * 1.3);
align-items:flex-start}
.qalayout__rail{flex:1 1 300px;min-width:280px;position:sticky;top:110px;
display:flex;flex-direction:column;gap:var(--s2)}
.qalayout__body{flex:1 1 520px;min-width:300px}
.qarail__note{margin-top:var(--s2);padding:16px 18px;border-radius:12px;
background:rgba(255,255,255,.72);border:1px solid rgba(23,58,94,.14)}
.qarail__note p{margin:0;font-size:15px;line-height:1.7;color:var(--muted)}
.qarail__note b{display:block;font-family:var(--head);font-weight:700;font-size:15.5px;
color:var(--navy);margin-bottom:4px}
/* Click to reveal. What makes this format distinct from the site's other two
FAQs is the LAYOUT - sticky rail plus numbered hairline rows - not whether
the answers happen to be open. */
.qa{border-top:1px solid rgba(23,58,94,.18)}
.qa__item{border-bottom:1px solid rgba(23,58,94,.18)}
.qa__item > summary{display:grid;grid-template-columns:38px 1fr 30px;gap:16px;
align-items:start;padding:22px 0;cursor:pointer;list-style:none}
.qa__item > summary::-webkit-details-marker{display:none}
.qa__item > summary:hover .qa__q{color:var(--gold-dark)}
.qa__num{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.1em;
color:var(--navy);padding-top:4px}
.qa__q{font-family:var(--head);font-weight:700;font-size:18px;line-height:1.4;
color:var(--navy);transition:color .2s ease}
/* chevron that flips when the row opens */
.qa__icon{position:relative;width:30px;height:24px}
.qa__icon::before,.qa__icon::after{content:"";position:absolute;top:11px;width:11px;height:2px;
border-radius:2px;background:var(--navy);transition:transform .25s ease}
.qa__icon::before{right:13px;transform:rotate(45deg)}
.qa__icon::after{right:6px;transform:rotate(-45deg)}
.qa__item[open] .qa__icon::before{transform:rotate(-45deg)}
.qa__item[open] .qa__icon::after{transform:rotate(45deg)}
.qa__item[open] .qa__q{color:var(--gold-dark)}
.qa__body{padding:0 30px 22px 54px}
.qa__a{margin:0;font-size:16px;line-height:1.78;color:var(--muted)}
@media (max-width:900px){
.qalayout__rail{position:static;flex:1 1 100%}
.qalayout__body{flex:1 1 100%}
.qa__item > summary{grid-template-columns:32px 1fr 26px;gap:12px;padding:18px 0}
.qa__q{font-size:16.5px}
.qa__body{padding:0 0 18px 44px}
}
/* == AREAS FAQ PASS END == */
/* == ABOUT FAQ PASS START == */
/* --------------------------------------------------------------------------
About FAQ. The only FAQ on the site on a dark ground.
-------------------------------------------------------------------------- */
.section--indigo{color:#fff;
background:
radial-gradient(58% 72% at 8% 6%, rgba(224,165,38,.20), transparent 64%),
radial-gradient(64% 78% at 94% 92%, rgba(70,132,196,.22), transparent 68%),
linear-gradient(158deg,#0C2742 0%,#14375C 48%,#1A4570 100%);
position:relative;overflow:hidden}
.section--indigo > .wrap{position:relative;z-index:2}
.section--indigo h2{color:#fff}
.section--indigo .lead{color:rgba(255,255,255,.8)}
.section--indigo .eyebrow{color:var(--gold);background:rgba(224,165,38,.13);
border-color:rgba(224,165,38,.44)}
/* rows: no cards, no numbers, indicator on the LEFT */
.faqrow{border-top:1px solid rgba(255,255,255,.16)}
.faqrow__item{border-bottom:1px solid rgba(255,255,255,.16)}
.faqrow__item > summary{display:grid;grid-template-columns:44px 1fr;gap:20px;
align-items:center;padding:24px 0;cursor:pointer;list-style:none}
.faqrow__item > summary::-webkit-details-marker{display:none}
/* the plus, which becomes a minus */
.faqrow__sign{position:relative;width:34px;height:34px;border-radius:50%;
border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.06);
transition:background .22s ease,border-color .22s ease}
.faqrow__sign::before,.faqrow__sign::after{content:"";position:absolute;left:50%;top:50%;
background:var(--gold);border-radius:2px;transform:translate(-50%,-50%);
transition:opacity .22s ease,transform .22s ease}
.faqrow__sign::before{width:13px;height:2px}
.faqrow__sign::after{width:2px;height:13px}
.faqrow__item[open] .faqrow__sign::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.faqrow__item[open] .faqrow__sign{background:rgba(224,165,38,.16);border-color:rgba(224,165,38,.5)}
.faqrow__item > summary:hover .faqrow__sign{background:rgba(255,255,255,.12)}
.faqrow__q{font-family:var(--head);font-weight:700;font-size:19.5px;line-height:1.4;
color:#fff;transition:color .2s ease}
.faqrow__item > summary:hover .faqrow__q{color:var(--gold)}
/* the answer, inset and ruled */
.faqrow__body{margin:0 0 26px 64px;padding:2px 0 2px 20px;
border-left:3px solid rgba(224,165,38,.75)}
.faqrow__a{margin:0;font-size:16.5px;line-height:1.8;color:rgba(255,255,255,.82)}
@media (max-width:640px){
.faqrow__item > summary{grid-template-columns:38px 1fr;gap:14px;padding:20px 0}
.faqrow__sign{width:30px;height:30px}
.faqrow__q{font-size:17px}
.faqrow__body{margin-left:52px;padding-left:16px}
}
/* == ABOUT FAQ PASS END == */
/* == CONTACT PASS START == */
/* --------------------------------------------------------------------------
Contact page.
-------------------------------------------------------------------------- */
/* THE NAVY SQUARE BUG.
.contactitem span is (0,1,1) and sits later in the file than
.contactitem__icon (0,1,0), so the icon chip inherited color:var(--navy)
and display:block. The SVG strokes currentColor, so it drew navy on a navy
chip - a solid navy square with an invisible icon inside it.
This rule is more specific than both. Do not remove it. */
.contactitem .contactitem__icon{display:inline-flex;align-items:center;
justify-content:center;color:var(--gold)}
.contactitem .contactitem__icon svg{display:block}
/* the line illustration, plate knocked out, floating with no frame */
.contactfig{display:block;max-width:230px;margin:0 0 var(--s3) auto}
.contactfig img{width:100%;height:auto;display:block;
filter:drop-shadow(0 14px 22px rgba(9,32,56,.18))}
/* the map: inset in a navy panel, gold hairline, pin badge on the corner */
.mappanel{position:relative;display:block;background:var(--navy);
border-radius:18px;padding:16px;box-shadow:0 30px 62px rgba(9,32,56,.26);
border:1px solid rgba(224,165,38,.42)}
.mappanel img{width:100%;height:auto;display:block;border-radius:10px}
.mappanel__pin{position:absolute;left:-14px;top:-14px;z-index:2;
display:inline-flex;align-items:center;justify-content:center;
width:52px;height:52px;border-radius:50%;background:var(--gold);
color:var(--navy-deep);box-shadow:0 10px 24px rgba(9,32,56,.32)}
.mappanel__label{display:block;padding:13px 4px 3px;text-align:center;
font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.11em;
text-transform:uppercase;color:var(--gold)}
@media (max-width:640px){
.contactfig{margin-left:0;margin-right:auto;max-width:190px}
.mappanel{padding:12px}
.mappanel__pin{width:44px;height:44px;left:-10px;top:-10px}
}
/* == CONTACT PASS END == */
/* == CONTACT PASS 2 START == */
/* --------------------------------------------------------------------------
Contact page, second pass.
-------------------------------------------------------------------------- */
/* one-line heading: the copy column is ~500px and the string needs 30px */
#where-h{font-size:clamp(23px,2.6vw,30px)}
.wherelead{font-size:18px;line-height:1.7;color:var(--navy)}
.wherelead b{font-weight:700}
/* municipality names as a scannable grid rather than a run-on sentence */
.citygrid{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;
grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(23,58,94,.14);
border:1px solid rgba(23,58,94,.14);border-radius:10px;overflow:hidden}
.citygrid li{background:#fff;padding:11px 13px;font-family:var(--head);
font-weight:600;font-size:14.5px;color:var(--navy)}
.citygrid .citygrid__more{background:var(--steel);color:var(--muted);font-weight:700;
font-size:13px;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center}
/* the "just outside" line, set apart from the list */
.wherenote{display:flex;align-items:flex-start;gap:12px;margin-top:var(--s3);
padding:14px 16px;border-radius:10px;background:var(--steel);
border-left:3px solid var(--gold)}
.wherenote svg{flex:0 0 auto;margin-top:2px;color:var(--gold-dark)}
.wherenote p{margin:0;font-size:15px;line-height:1.7;color:var(--muted)}
.wherenote b{color:var(--navy);font-weight:700}
/* --- the illustration rises ABOVE the form card -----------------------------
Most of the artwork sits above the card; only its bottom dips inside. The
heading then sits under it, inside the card - it is no longer overlaid on
the drawing.
The lift is a negative top margin equal to about 72% of the rendered image
height, so roughly a quarter of the picture overlaps the card. The column
above gets matching clearance, or the raised image collides with the
section boundary. */
.formcard{position:relative}
.formcard--illustrated{margin-top:170px}
/* Larger. The lift is calc(-30% - 34px): the percentage resolves against the
card's width, so as the card narrows the image and its lift scale together
and roughly a third of the picture stays inside the card at every size.
The 34px cancels the card's own top padding. */
.formhead{display:block;position:relative;z-index:2;width:88%;max-width:400px;
margin:calc(-30% - 34px) auto 16px}
.formhead img{width:100%;height:auto;display:block;
filter:drop-shadow(0 12px 20px rgba(9,32,56,.16))}
.formhead__text{text-align:center;margin:0 0 var(--s3)}
.formhead__text h2{font-size:22px;line-height:1.25;margin:0 0 5px;color:var(--navy)}
.formhead__text p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.formhead__text i{color:var(--gold-dark);font-style:normal}
@media (max-width:900px){
.formcard--illustrated{margin-top:150px}
}
@media (max-width:640px){
.citygrid{grid-template-columns:repeat(2,1fr)}
.formhead{width:92%}
}
/* == CONTACT PASS 2 END == */
/* == BOOK HERO PASS START == */
/* --------------------------------------------------------------------------
Book an Inspection hero. The artwork carries its own navy, so the section
fill is sampled from the image (#012244) and the join is invisible - it
reads as one full-bleed graphic rather than a picture on a panel.
No scrim: the left field the copy sits on is already flat navy, so a veil
would only dull the artwork. This is why it looks different from the photo
heroes elsewhere, which all need one.
-------------------------------------------------------------------------- */
.pagehero--book{background-color:#012244;
background-image:url("../img/book-hero.webp");
background-size:contain;background-position:right center;background-repeat:no-repeat}
.pagehero--book::after{display:none}
.pagehero--book .pagehero__inner{max-width:560px}
.pagehero--book h1{color:#fff}
.pagehero--book .pagehero__text{color:rgba(255,255,255,.84)}
/* Between the stacking breakpoint and about 1000px the hero is short, so
contain renders the artwork small and its motif creeps left. At 940px the
copy overlapped it by 5px. Narrowing the copy column in this band restores
the clearance without moving the artwork. */
@media (max-width:1100px){
.pagehero--book .pagehero__inner{max-width:430px}
}
@media (max-width:900px){
/* below this the artwork would sit behind the copy, so it drops to a band
under the hero rather than a background */
.pagehero--book{background-size:150% auto;background-position:right bottom;
padding-bottom:34%}
.pagehero--book .pagehero__inner{max-width:none}
}
@media (max-width:640px){
.pagehero--book{background-size:190% auto;padding-bottom:44%}
}
/* == BOOK HERO PASS END == */
/* == MOBILE PASS START == */
/* ==========================================================================
REVISION PASS 7 - mobile
==========================================================================
Measured across 23 pages at 320/360/375/390/414/480/560/640/700/768/860/900.
Four real defects, all of them invisible until you scroll sideways or try to
tap something:
1. .split pushed 6-9px of horizontal scroll onto every page that uses it
2. .shape-cut's rotated corner rule added another 9px on the homepage
3. form inputs were 15.5px, so iOS zooms the page whenever one is focused
4. the utilbar email link was 148x22 - under the 24px WCAG 2.2 minimum
-------------------------------------------------------------------------- */
/* --- 1. .split and .profile must not bleed sideways once stacked ---------
Base .split pulls its side margins negative and pays them back as child
padding, so the text lines up with .wrap but the BOX is wider than .wrap on
both sides. Above 900px that is the KNOWN BUG in PROJECT-STATE. Below 900px
the columns are already stacked, so the side margins buy nothing at all and
only push the box past the viewport: -30px against a 24px gutter is the +6px
seen from 700 to 900, and the same trick at -14px against an 18px gutter is
what let .shape-cut reach the edge below 480.
Only the LEFT and RIGHT are zeroed. The vertical margin and padding are
untouched at both breakpoints, so the stacked spacing is exactly as before,
and content still starts at var(--pad) because -30+30 and -14+14 both
already cancelled to zero. Nothing moves. */
@media (max-width:900px){
.split{margin-left:0;margin-right:0}
.split__media,.split__copy{padding-left:0;padding-right:0}
.profile{margin-left:0;margin-right:0}
.profile__media,.profile__body{padding-left:0;padding-right:0}
}
/* --- 2. .shape-cut's rotated rule ----------------------------------------
.shape-cut::after is a WxW square pinned to the bottom-right corner and
rotated 45deg about that corner. Only its border-bottom is painted, but the
empty top-right corner of the square swings about 0.7W to the right of the
image - 27px at the mobile size, 41px at the desktop one. That is invisible
and still counts toward scrollWidth.
Collapsing the height leaves the painted edge in exactly the same place
(the border sits on the bottom of the box either way) and drops the swing to
about 2px. Width is left to the existing rules. */
.shape-cut::after{height:0}
/* --- 3. iOS Safari zooms on focus for any control under 16px ------------- */
@media (max-width:900px){
.field input,.field select,.field textarea{font-size:16px}
}
/* --- 4. touch targets ----------------------------------------------------
WCAG 2.2 SC 2.5.8 asks for 24x24 minimum; 44px is the comfortable size.
The footer list gap comes down as the links grow so the column does not
run away vertically - pitch goes from 37px to 46px, not from 37px to 55px. */
@media (max-width:900px){
.utilbar a{display:inline-flex;align-items:center;min-height:32px}
.utilbar .wrap{padding-top:4px;padding-bottom:4px}
.footer__list{gap:2px}
.footer__list a{min-height:44px}
.footer__contact a{min-height:44px}
.checkrow label{min-height:44px}
.checkrow input{width:24px;height:24px}
.crumbs a{display:inline-flex;align-items:center;min-height:32px}
}
/* --- 6. the dropdown nav has to be reachable in landscape ---------------
The panel is 599px tall and absolutely positioned under a sticky header, so
on a phone held sideways (360px of height) its lower half sits off-screen
and scrolling the page takes the sticky header - and the panel with it -
along for the ride. Capping it makes the panel itself scroll instead.
148px is the worst-case distance from the top of the viewport to the top of
the panel: 68px utilbar + 75px masthead, both measured, plus a little. At
812px tall the cap works out to 664px against a 599px panel, so portrait is
untouched; landscape and short phones get a panel that scrolls in place.
The dvh line is a progressive upgrade for mobile browser chrome - browsers
that do not understand dvh keep the vh value above it. */
@media (max-width:1219px){
.mainnav.is-open{max-height:calc(100vh - 148px);overflow-y:auto;overscroll-behavior:contain}
.mainnav.is-open{max-height:calc(100dvh - 148px)}
}
/* --- 5. long unbreakable strings set a min-content floor -----------------
A flex item defaults to min-width:auto, so it refuses to shrink below its
longest unbreakable word. On the Contact page "solayman.de@gmail.com" at
17px bold, plus the 44px icon and the card padding, gave .split__copy a
307px floor inside a 284px column - the last 5px of horizontal scroll at
320px. Letting the address wrap drops that floor to about 105px.
NB: the obvious companion fix, .split__copy{min-width:0}, must NOT be added.
.split--bigmedia .split__media{flex:1 1 50%} sits outside a media query and
outranks the flex:1 1 100% in the 900px block, so on phones those two
columns are held apart ONLY by their min-content width. Setting min-width:0
lets them sit side by side at 375px and blows 58px of scroll off the
homepage. Verified, not theoretical. */
.contactitem span,.contactitem small,.footer__contact a{overflow-wrap:anywhere}
/* --- 7. the submit button sets its own floor at 320px --------------------
.btn is white-space:nowrap with 30px of side padding, so "Request My
Inspection" plus its arrow measures 257px that will not shrink. Inside the
form card's 22px padding that gives .split__copy a 303px floor against a
269px column - 16px of scroll on Book an Inspection at 320px.
Scoped to 359px and below so 360 - the width of the narrowest phone anyone
still buys - keeps the approved button exactly as it is. Below that the
label is allowed to wrap and the side padding comes in. */
@media (max-width:359px){
.btn{white-space:normal;text-align:center;padding-left:18px;padding-right:18px}
}
/* --- 8. stack .split--bigmedia explicitly on phones ----------------------
.split--bigmedia .split__media{flex:1 1 50%} sits outside any media query
and outranks the flex:1 1 100% in the 900px block, so below 900 those two
columns are held apart ONLY by their min-content width. That is a trap, and
it has now been sprung twice: once by min-width:0 during this pass, and
again when PASS 12 put a .factgrid in the pre-purchase copy column - cells
that can shrink dropped the column's min-content, the two columns stopped
wrapping, and the copy column rendered 156px wide at 375px.
Making it explicit below 640 removes the trap for good. It changes nothing
on any existing page: every one of them already stacks at that width, they
were just relying on min-content to do it. 640 rather than 900 on purpose -
the 640-900 band is the approved tablet layout and stays side by side. */
@media (max-width:640px){
.split--bigmedia > .split__media,
.split--bigmedia > .split__copy{flex:1 1 100%}
}
/* == MOBILE PASS END == */
/* == SERVICES DROPDOWN START == */
/* ==========================================================================
REVISION PASS 8 - the six services hang off the All Services nav item
==========================================================================
One block of markup serves two completely different controls:
desktop (>=1220px) a card that opens on hover and on focus. The chevron
is an indicator inside the link; the toggle button is
display:none, so nothing announces an aria-expanded
that disagrees with the screen.
panel (<=1219px) a row in the existing dropdown panel with its own
chevron BUTTON, which is the only way to open it -
there is no hover on a phone and tapping the label
has to keep going to services.html.
Everything below is written as .mainnav__list .navsub a so it outranks the
generic .mainnav__list a rules (block, nowrap, the gold underline ::after)
that would otherwise leak into the panel.
-------------------------------------------------------------------------- */
.navhas{position:relative}
.navsub{display:none}
.navsub__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.navsub__text b{font-family:var(--head);font-weight:700;font-size:14px;color:var(--navy);line-height:1.32}
.navsub__text small{font-size:12.2px;color:var(--muted);line-height:1.45;white-space:normal}
.navsub__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
border-radius:9px;background:var(--gold-soft);color:var(--gold-dark);
border:1px solid rgba(224,165,38,.3);transition:background .18s ease,color .18s ease,border-color .18s ease}
.mainnav__list .navsub a::after{display:none}
.mainnav__list .navsub a:hover .navsub__icon{background:var(--navy);color:var(--gold);border-color:var(--navy)}
.mainnav__list .navsub a:hover .navsub__text b{color:var(--gold-dark)}
.mainnav__list .navsub a[aria-current="page"] .navsub__text b{color:var(--gold-dark)}
/* --------------------------------------------------------------- desktop */
@media (min-width:1220px){
/* The masthead row is 1152px wide and had about 2px of real slack once the
20px and 16px flex gaps are taken out. The chevron costs 15px on one item,
so 2px a side comes off all seven - 28px back, 13px to spare. Measured. */
.mainnav__list a{padding:10px 5px}
.mainnav__list a::after{left:5px;right:5px}
.navsubtoggle{display:none}
.mainnav__list .navhas > a{display:inline-flex;align-items:center;gap:5px}
.navchev{flex:0 0 auto;color:#94A3B4;transition:transform .24s ease,color .2s ease}
.navhas.is-open > a .navchev{transform:rotate(180deg);color:var(--gold-dark)}
.navhas.is-open > a{color:var(--gold-dark)}
.navsub{
display:block;position:absolute;left:-8px;top:calc(100% + 13px);z-index:70;width:356px;
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
box-shadow:0 28px 62px rgba(15,44,76,.18),0 3px 8px rgba(15,44,76,.06);
opacity:0;visibility:hidden;transform:translateY(-9px);
transition:opacity .2s ease,transform .22s ease,visibility .22s ease;
}
.navhas.is-open > .navsub{opacity:1;visibility:visible;transform:translateY(0)}
/* the same gold hairline the navy sections use, so the card reads as ours */
.navsub::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
background:linear-gradient(90deg,var(--gold) 0%,rgba(224,165,38,.4) 48%,rgba(224,165,38,.08) 100%)}
/* an invisible bridge across the 13px gap, or the panel closes on the way down */
.navsub::after{content:"";position:absolute;left:0;right:0;top:-15px;height:15px}
.navsub__list{list-style:none;margin:0;padding:9px}
.mainnav__list .navsub__list a{display:flex;align-items:flex-start;gap:12px;padding:10px 11px;
border-radius:8px;border:0;white-space:normal;font-size:14px;
transition:background .18s ease}
.mainnav__list .navsub__list a:hover,
.mainnav__list .navsub__list a:focus-visible{background:var(--steel)}
.mainnav__list .navsub__list a[aria-current="page"]{background:var(--gold-soft)}
.navsub__icon{width:38px;height:38px}
.mainnav__list .navsub__all{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:13px 20px;background:var(--steel);border-top:1px solid var(--line);border-radius:0;
font-family:var(--head);font-weight:700;font-size:13px;color:var(--navy);white-space:nowrap;
transition:background .2s ease,color .2s ease}
.mainnav__list .navsub__all:hover{background:var(--navy);color:#fff}
.navsub__all svg{transition:transform .22s ease}
.mainnav__list .navsub__all:hover svg{transform:translateX(4px)}
}
/* ------------------------------------------------- the mobile/tablet panel */
@media (max-width:1219px){
.navchev{display:none}
.navhas{display:flex;flex-wrap:wrap;align-items:stretch}
.mainnav__list .navhas > a{flex:1 1 auto}
.navsubtoggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:54px;padding:0;background:none;border:0;border-bottom:1px solid var(--line);
color:var(--navy);cursor:pointer;transition:color .2s ease}
.navsubtoggle svg{transition:transform .24s ease}
.navhas.is-open > .navsubtoggle{color:var(--gold-dark)}
.navhas.is-open > .navsubtoggle svg{transform:rotate(180deg)}
.navhas.is-open > .navsub{display:block;flex:1 1 100%;
background:var(--steel);border-bottom:1px solid var(--line)}
.navsub__list{list-style:none;margin:0;padding:0}
.mainnav__list .navsub a{display:flex;align-items:center;gap:13px;padding:13px 6px;
border-bottom:1px solid rgba(15,44,76,.08);border-radius:0;font-size:15.5px;white-space:normal}
.mainnav__list .navsub__list li:last-child a{border-bottom:0}
.navsub__icon{width:34px;height:34px}
/* the blurbs are for the desktop card - on a phone they only add scrolling */
.navsub__text small{display:none}
.navsub__text b{font-size:15.5px;font-weight:600}
.mainnav__list .navsub__all{display:flex;align-items:center;gap:9px;padding:14px 6px;
border-top:1px solid rgba(15,44,76,.13);border-bottom:0;border-radius:0;
font-family:var(--head);font-weight:700;font-size:14px;color:var(--gold-dark)}
}
/* == SERVICES DROPDOWN END == */
/* == SERVICE OVERVIEW START == */
/* ==========================================================================
REVISION PASS 9 - service overview body + a lighter "What we inspect"
========================================================================== */
/* --- an accessible gold for text on light grounds ------------------------
--gold-dark (#B8860F) is 3.25:1 on white and fails AA. It is used by every
.eyebrow site-wide and changing those means changing an approved brand
colour, so they are left alone - but nothing NEW should be added at 3.25:1.
#8A660B is 5.27:1 on white and reads as the same gold. Use this for any new
gold text on a light ground; see the accessibility section of
PROJECT-STATE for the full table. */
:root{--gold-ink:#8A660B}
/* --- the lead statement --------------------------------------------------
The opening paragraph is the argument of the page - it was set as ordinary
grey body copy, identical to the paragraph under it. Heading face, larger,
navy, with a gold rule down the edge.
NB the name. `.statement` was the obvious class and it is already taken:
it is the About page's full-width navy statement band, and these rules on
it (max-width:54ch, a 3px VERTICAL ::before where that band wants a
horizontal hairline) take that approved section apart. Hence .leadstate. */
.leadstate{position:relative;margin:0;padding-left:19px;
font-family:var(--head);font-weight:500;font-size:18.5px;line-height:1.62;
letter-spacing:-.005em;color:var(--navy);max-width:54ch}
.leadstate::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
border-radius:3px;background:linear-gradient(180deg,var(--gold) 0%,rgba(224,165,38,.2) 100%)}
.section--navy .leadstate,.section--navy-light .leadstate{color:#fff}
/* --- the spec list -------------------------------------------------------
Hairline-ruled rows with 01-05 numerals, generated with a CSS counter so
the numbers are decoration and the list stays a plain to a screen
reader. Replaces .ticklist here only: the gold tick appears on nine other
pages, and the client's standing note is that the pages read alike. */
.speclist{list-style:none;margin:0;padding:0;counter-reset:spec;
border-top:1px solid var(--line)}
.speclist li{counter-increment:spec;display:flex;align-items:flex-start;gap:15px;
padding:13px 2px;border-bottom:1px solid var(--line);
font-size:16px;line-height:1.6;color:var(--navy)}
.speclist li::before{content:counter(spec,decimal-leading-zero);flex:0 0 22px;
font-family:var(--head);font-weight:700;font-size:11.5px;letter-spacing:.09em;
line-height:1.95;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.section--navy .speclist,.section--navy-light .speclist{border-top-color:rgba(255,255,255,.16)}
.section--navy .speclist li,.section--navy-light .speclist li{
border-bottom-color:rgba(255,255,255,.16);color:rgba(255,255,255,.9)}
.section--navy .speclist li::before,.section--navy-light .speclist li::before{color:var(--gold)}
@media (max-width:640px){
.leadstate{font-size:17px;padding-left:15px}
.speclist li{gap:12px;font-size:15.5px}
}
/* == SERVICE OVERVIEW END == */
/* == PRELISTING HERO START == */
/* ==========================================================================
REVISION PASS 10 - pre-listing hero plate + the ice ground
========================================================================== */
/* --- the ice ground ------------------------------------------------------
Client's swatch: Ice Blue to Silver, #EAF2F8 -> #F7F9FB. Replaces the navy
this section carried; .section--navy-soft from PASS 9 is retired with it.
Because the ground is now light, .tile drops back to its BASE styling -
a white card with a hairline border - which is what it was designed for and
what makes it read against this gradient. No tile overrides needed here;
the .section--navy-light ones simply no longer apply.
The gold hairline along the top is doing real work: the section above is
plain white and the one below is --steel (#EDF1F5 -> #E2E9F0), both close
enough to this gradient that without an explicit edge the three run into
one another. See PROJECT-STATE for the rhythm note. */
/* Client asked for this a step darker than the swatch. #EAF2F8 -> #DCE8F4 on
the deep end. Two things this buys besides what was asked for: it separates
the section from the --steel band underneath (1.003 -> 1.095 against
#EDF1F5, i.e. from invisible to visible), and the white tiles read better
against it (1.13 -> 1.24).
Contrast is unaffected. The only TEXT on this ground is the h2, navy at
11.38:1. The eyebrow looks like it sits on the gradient but does not - it
has an opaque --gold-soft (#FDF6E6) chip behind it, so its 4.89:1 is
against the chip and does not move when the ground does. */
:root{--ice-a:#DCE8F4; --ice-b:#EDF3F9}
.section--ice{background:linear-gradient(160deg,var(--ice-a) 0%,var(--ice-b) 100%)}
/* The h2 wrapped to two lines from 1080px up, and the viewport was never the
reason - .sechead is capped at max-width:60ch, which is 625px, against a
heading that needs 682px at its 40px size. Lifting the cap in this section
only lets it sit on one line from 1080px up, where there is 1065px+ of wrap
to play with. Below 1080 the clamp on h2 shrinks the type and it was
already one line; below 480 it has to wrap and text-wrap:balance handles
that. Nothing else lives in this sechead, so there is no paragraph left
running to an unreadable measure. */
.section--ice .sechead{max-width:none}
.section--ice::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg,var(--gold) 0%,rgba(224,165,38,.3) 44%,transparent 78%)}
.section--ice::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:rgba(15,44,76,.09)}
/* --gold-dark is 3.25:1 and fails AA; this section is new, so it gets the
compliant gold rather than another failing instance. See PASS 9. */
.section--ice .eyebrow{color:var(--gold-ink)}
.section--ice .tile b{color:var(--gold-ink)}
/* --- the hero plate ------------------------------------------------------
The four-background-image rule stands (Home, About, Areas, Contact only),
so the photograph is mounted and shown uncropped instead of bled behind the
text. The mount uses the same ice gradient as the section below, so the two
pieces of new material on this page read as one decision.
.pagehero__copy and .pagehero__media already exist as generic two-column
parts (REVISION PASS 5, services.html) - only the modifier and the plate
itself are new, so this does not fork the hero component. */
.pagehero--plate .pagehero__inner{flex-direction:row;flex-wrap:wrap;align-items:center;
gap:var(--s5);max-width:none}
.pagehero--plate .pagehero__copy{flex:1 1 400px;min-width:0;
display:flex;flex-direction:column;gap:var(--s3)}
.pagehero--plate .pagehero__media{flex:1 1 430px;min-width:0}
.pagehero--plate h1{font-size:clamp(30px,3.4vw,45px)}
.pagehero--plate .pagehero__text{max-width:46ch}
/* Same two tokens as the section, deliberately: the mount and the ground
below it are one decision, and locking them to --ice-a/--ice-b means they
cannot drift apart the next time one of them is nudged. */
.plate{position:relative;margin:0;padding:13px;border-radius:16px;
background:linear-gradient(140deg,var(--ice-a) 0%,var(--ice-b) 100%);
box-shadow:0 34px 68px rgba(2,12,26,.46)}
.plate::before{content:"";position:absolute;left:13px;right:13px;top:0;height:2px;
border-radius:0 0 2px 2px;
background:linear-gradient(90deg,var(--gold) 0%,rgba(224,165,38,.35) 52%,transparent 100%)}
.plate img{width:100%;display:block;border-radius:9px;
box-shadow:0 10px 24px rgba(2,12,26,.22)}
@media (max-width:900px){
.pagehero--plate .pagehero__inner{flex-direction:column;align-items:stretch;gap:var(--s4)}
}
@media (max-width:640px){
.plate{padding:9px;border-radius:12px}
.plate::before{left:9px;right:9px}
.plate img{border-radius:7px}
}
/* == PRELISTING HERO END == */
/* == WHEN + NEXTSTEPS START == */
/* ==========================================================================
REVISION PASS 11 - timing timeline + navy Next steps card
========================================================================== */
/* --- .whenlist: two points on a timeline ---------------------------------
The timing copy is a recommended window and the cost of missing it. That is
a sequence, so the bullets are markers on a rule rather than two identical
dots: filled gold for the window, hollow for what happens after, joined by
a rule that fades as it goes down.
Deliberately neither of the two list styles already on this page - the gold
.ticklist (nine other pages) or the numbered .speclist in the overview. */
.whenlist{list-style:none;margin:0;padding:0}
.whenlist li{position:relative;padding-left:34px;padding-bottom:var(--s3);
font-size:16.5px;line-height:1.75;color:var(--navy)}
.whenlist li:last-child{padding-bottom:0;color:var(--muted)}
/* the marker */
.whenlist li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;
border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(224,165,38,.15)}
.whenlist li:last-child::before{background:#fff;border:2px solid #BFCAD6;box-shadow:none}
/* the rule between them */
.whenlist li:not(:last-child)::after{content:"";position:absolute;left:6px;top:25px;bottom:4px;
width:2px;border-radius:2px;
background:linear-gradient(180deg,rgba(224,165,38,.85) 0%,rgba(224,165,38,.14) 100%)}
.section--navy .whenlist li,.section--navy-light .whenlist li{color:rgba(255,255,255,.9)}
.section--navy .whenlist li:last-child,
.section--navy-light .whenlist li:last-child{color:rgba(255,255,255,.66)}
/* --- .reportpanel--navy --------------------------------------------------
A modifier, NOT an edit to .reportpanel: the homepage uses the white card
too and the homepage is not to be touched.
Contrast on #173A5E - the site's existing light navy, same value as
.section--navy-light: heading and links white at 11.65:1, the supporting
text at .82 alpha lands near 8:1, gold icons 5.31:1. */
.reportpanel--navy{position:relative;overflow:hidden;
background:#173A5E;border-color:rgba(255,255,255,.15);
box-shadow:0 24px 52px rgba(15,44,76,.26)}
.reportpanel--navy::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg,var(--gold) 0%,rgba(224,165,38,.3) 52%,transparent 100%)}
.reportpanel--navy h3{color:#fff}
.reportpanel--navy .reportgrid span{color:rgba(255,255,255,.82)}
.reportpanel--navy .reportgrid a{color:#fff;text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.28);transition:color .2s ease,border-color .2s ease}
.reportpanel--navy .reportgrid a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.reportpanel--navy .reportgrid svg{color:var(--gold)}
@media (max-width:640px){
.whenlist li{padding-left:30px;font-size:16px}
}
/* == WHEN + NEXTSTEPS END == */
/* == PREPURCHASE BODY START == */
/* ==========================================================================
REVISION PASS 12 - pre-purchase: spec band + stage hero
========================================================================== */
/* --- .specbar v3: five separated cards on a light navy -------------------
Third pass on this body.
v1 .factgrid a bordered 2-across panel inside the copy column
v2 .specbar a full-width band, cells divided by 1px hairline gaps
v3 (this) the same five columns, but the hairline grid is gone
Client: "change the bottom cards color to very light navy and change the
design of the lines or the whole". So the dividing lines are removed
entirely rather than restyled - the cells separate with real 14px gaps and
become discrete rounded cards, which is also how the client refers to them.
#E8EEF6 is the ground. It is the lightest navy tint that keeps everything
compliant: navy text 12.12:1, gold icons 4.51:1, and 1.167 against the
white section behind, which is enough to read as a distinct block without
turning into a second section. Going lighter loses the separation; going
darker drops the gold under AA.
Cards stretch to equal height per row for free - flex default
align-items:stretch - so the min-height that v2 needed is gone. */
.specbar{list-style:none;margin:var(--s6) 0 0;padding:0;
display:flex;flex-wrap:wrap;gap:14px}
.specbar li{flex:1 1 190px;min-width:0;
background:#E8EEF6;border:1px solid rgba(15,44,76,.11);border-radius:12px;
display:flex;flex-direction:column;align-items:flex-start;gap:13px;
padding:20px 20px 22px;
font-size:15px;line-height:1.55;color:var(--navy)}
/* the facts still wrap to two lines at five across (230px cell, ~290px
needed) - balance the break so it reads as a set */
.specbar span{text-wrap:balance;min-width:0}
/* the icon gets a white chip. On a tinted card that is what keeps it from
sitting flat, and it echoes the gold segment on the hero's outline. */
.specbar__i{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:10px;background:#fff;
border:1px solid rgba(15,44,76,.09);color:var(--gold-ink)}
.specbar__i svg{display:block}
.section--navy .specbar li,.section--navy-light .specbar li{
background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.9)}
.section--navy .specbar__i,.section--navy-light .specbar__i{
background:rgba(224,165,38,.14);border-color:rgba(224,165,38,.34);color:var(--gold)}
/* Two across from 1100 down, not from 900 down. Between roughly 900 and 1080
the five cards at a 190px basis only fit FOUR to a row, which leaves the
fifth alone at 961px against four 230px neighbours - a lone wide card that
reads as a mistake. Two across gives 2+2+1 instead, where the wide last card
is clearly the pattern rather than an accident. Measured: 5x190 + 4x14 gaps
needs 1006px, and the wrap only clears that above about 1054px. */
@media (max-width:1100px){
.specbar{margin-top:var(--s5);gap:12px}
.specbar li{flex:1 1 45%;padding:17px 17px 19px}
}
@media (max-width:560px){
.specbar li{flex:1 1 100%;flex-direction:row;align-items:center;gap:13px;padding:14px 15px}
.specbar__i{width:36px;height:36px;border-radius:9px}
}
/* --- .shape-stack: the overview image ------------------------------------
.shape-report - the gold corner brackets - is on nine other pages, and this
page already carries .stagemedia in its hero, so the overview image needed
something that is neither.
Every existing treatment on this site is a frame of some kind: brackets,
plates, offset outlines, cut corners. This one is not a frame at all. The
image sits plain with a small radius and the device is underneath it - a
short gold bar and a hairline that fades out, the way a plate is ruled off
in a printed report. It also picks up the same rule language the client
just asked for in the cards below it.
Both rules are normal-flow block pseudo-elements, not absolutely positioned
ones, so there is no sideways bleed to go wrong at any width. That matters
here: the mobile pass zeroes .split__media's side padding below 900px, so
anything offset outward would hang off the page. */
.shape-stack{position:relative;display:block}
.shape-stack img{width:100%;display:block;border-radius:12px;
box-shadow:0 24px 50px rgba(15,44,76,.18)}
.shape-stack::before{content:"";display:block;width:88px;height:4px;margin-top:20px;
border-radius:2px;background:var(--gold)}
.shape-stack::after{content:"";display:block;height:1px;margin-top:9px;
background:linear-gradient(90deg,rgba(15,44,76,.18) 0%,rgba(15,44,76,.05) 58%,transparent 100%)}
.section--navy .shape-stack::after,.section--navy-light .shape-stack::after{
background:linear-gradient(90deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.08) 58%,transparent 100%)}
@media (max-width:640px){
.shape-stack img{border-radius:10px}
.shape-stack::before{width:70px;margin-top:16px}
}
/* --- .pagehero--wide + .stagemedia ---------------------------------------
The hero photograph is 1672x941. Shown full width it would be a 950px-tall
band, so the hero is two columns with a wide media side - about 660x371 at
1440, uncropped, which is what the four-background-image rule requires.
.stagemedia is deliberately NOT the pre-listing .plate. That mounts its
image on a light ice ground with padding, like a print. This image is dark
and dusk-lit and wants no ground at all: a 1px gold outline offset 12px
outside it, with a solid gold segment across the top-left corner so the
outline reads as drawn rather than as a box. The -12px offset is safe -
.pagehero is overflow:hidden and the media column sits inside the wrap's
24px gutter. */
.pagehero--wide .pagehero__inner{flex-direction:row;flex-wrap:wrap;align-items:center;
gap:var(--s5);max-width:none}
.pagehero--wide .pagehero__copy{flex:1 1 360px;min-width:0;
display:flex;flex-direction:column;gap:var(--s3)}
.pagehero--wide .pagehero__media{flex:1 1 520px;min-width:0}
.pagehero--wide h1{font-size:clamp(29px,3.2vw,43px)}
.pagehero--wide .pagehero__text{max-width:44ch}
.stagemedia{position:relative;display:block;margin:0}
.stagemedia img{width:100%;display:block;border-radius:10px;
box-shadow:0 30px 66px rgba(2,12,26,.58)}
.stagemedia::before{content:"";position:absolute;inset:-12px;pointer-events:none;
border:1px solid rgba(224,165,38,.5);border-radius:14px}
.stagemedia::after{content:"";position:absolute;left:-12px;top:-12px;width:84px;height:3px;
border-radius:2px;background:var(--gold)}
@media (max-width:900px){
.pagehero--wide .pagehero__inner{flex-direction:column;align-items:stretch;gap:var(--s4)}
}
@media (max-width:640px){
.stagemedia::before{inset:-8px;border-radius:12px}
.stagemedia::after{left:-8px;top:-8px;width:60px}
.stagemedia img{border-radius:8px}
}
/* == PREPURCHASE BODY END == */
/* == SERVICES HERO START == */
/* ==========================================================================
REVISION PASS 13 - Services hero: diagonal two-tone split
==========================================================================
Client reference: navy left, near-white right, one diagonal across the
whole hero. Measured off it - cut from 62.5% at the top to 33.2% at the
bottom, 23.7 degrees off vertical.
The light half is #F6F8FC on purpose: that is the exact plate colour
services-hero.webp ships on (all four corners sample 246,248,252). The
artwork's own ground and the hero's light half are the same value, so the
image dissolves into the panel - no card, no border, no seam. It is the
reason the PLATED image is correct here and does not need knocking out.
--sh is the hero height and --run is how far the cut travels sideways over
it; the lean is atan(run/sh). SET THEM TOGETHER or the angle drifts. */
/* Structural rules are shared with .pagehero--tarsplit (PASS 14) so the two
heroes cannot drift to different angles. Only what is specific to this
page's plated illustration stays on .pagehero--svcsplit alone. */
.pagehero--svcsplit,.pagehero--tarsplit{--sh:580px; --run:258px; --edge:56%; /* 24 degrees */
padding:0;overflow:hidden}
.pagehero--svcsplit{background:#F6F8FC}
.pagehero--svcsplit::after,.pagehero--tarsplit::after{display:none} /* base radial */
.pagehero--svcsplit .wrap,.pagehero--tarsplit .wrap{padding:0;max-width:none;width:100%}
.svcsplit{display:flex;align-items:stretch;position:relative;height:var(--sh)}
/* the navy piece. The negative margin pulls the media under it so the cut has
no empty wedge behind it - same trick .panelhero uses. */
.svcsplit__copy{flex:0 0 56%;position:relative;z-index:2;
display:flex;align-items:center;
margin-right:calc(var(--run) / -2);
background:linear-gradient(104deg,var(--navy-deep) 0%,#143A62 58%,#1B4A78 100%);
clip-path:polygon(0 0, 100% 0, calc(100% - var(--run)) 100%, 0 100%)}
/* faint angled wash high in the panel so the navy is not a flat slab */
.svcsplit__copy::after{content:"";position:absolute;right:22%;top:-40%;
width:46%;height:78%;background:rgba(255,255,255,.04);
transform:rotate(14deg);pointer-events:none;z-index:0}
/* Text has to stop before the cut, and the cut is furthest LEFT at the bottom
of the panel - so the right padding is sized off --run, not guessed. The
max-width + margin-left:auto is what keeps the text on the site's normal
gutter even though this hero is full-bleed. */
.svcsplit__inner{width:100%;max-width:940px;margin-left:auto;
padding:0 calc(var(--run) + 40px) 0 var(--pad);
display:flex;flex-direction:column;gap:var(--s2);position:relative;z-index:2}
.pagehero--svcsplit h1,.pagehero--tarsplit h1{color:#fff;font-size:clamp(28px,3vw,40px)}
.pagehero--svcsplit .pagehero__text,.pagehero--tarsplit .pagehero__text{
color:rgba(255,255,255,.82);max-width:44ch}
.svcsplit__rule{display:block;width:96px;height:5px;border-radius:3px;
background:var(--gold);margin:2px 0 6px}
/* The artwork sits on the light half. Its left padding clears the widest
point of the cut - the TOP - or the image's light plate would print a pale
rectangle over the navy. */
/* The padding clears the cut, but it does NOT need to clear the cut at the
hero's top - the image is vertically centred and its top edge sits well
below that, by which point the diagonal has already travelled left. Padding
for the hero top wasted about 60px and left the illustration undersized.
Measured clearance is checked at the IMAGE's top edge, not the hero's. */
.svcsplit__media{flex:1 1 auto;position:relative;z-index:1;
display:flex;align-items:center;
padding:0 var(--pad) 0 calc(var(--run) / 2 - 14px)}
/* Capped by HEIGHT, not just width. With width:100% alone the illustration
keeps growing with the viewport: measured 101% of the hero height at 2400
and 108% at 2560, by which point it had crossed the diagonal and was
printing its light plate over the navy (clearance -15px, then -24px).
width:auto + the two max-* constraints keep the aspect ratio while
guaranteeing it can never outgrow the panel, and margin-left:auto parks it
against the right gutter, which is the furthest point from the cut. */
.svcsplit__media img{width:auto;height:auto;display:block;position:relative;z-index:1;
max-width:100%;max-height:calc(var(--sh) - 90px);margin-left:auto}
/* The light half was a flat near-white slab with the illustration floating on
it, which read as unfinished rather than deliberate. It is now a plate: a
thick navy edge, a white ground and a soft shadow, so the artwork is held by
something instead of hanging in space, and the ground behind it carries a
faint diagonal so it is not one dead tint.
Geometry, all of it forced by the diagonal cut:
- LEFT clears the widest point of the wedge, which is at the TOP of the hero,
so the frame's top-left corner cannot land on the navy.
- The vertical inset does the same job, keeping the corner below the point
where the cut has travelled furthest right.
- The image's max-height drops to match, so it sits INSIDE the frame rather
than growing through it - the same failure the comment above describes. */
/* The artwork FILLS the light half and is cut by the diagonal.
.svcsplit__media is clipped to the trapezoid, so object-fit:cover can spread
the illustration across the whole half without any of it landing on the
navy - the clip does what the old clearance padding used to do, and does it
exactly rather than by measured margin.
The clip is expressed in the media's own coordinates. Its left edge already
sits at (edge - run/2) because the copy pulls it under with a negative
margin, so the cut is at +run/2 at the top and -run/2 at the bottom.
The lines are borders ON the clipped element, so they are cut to the
trapezoid too: the top line starts where the cut does, and the bottom line
runs the full width. No right-hand line by request. The diagonal needs none -
the navy wedge sits against it and is the line.
drop-shadow, not box-shadow: it follows the clipped silhouette. */
/* THE PADDING IS SET AGAINST THE HOUSE'S OUTLINE, NOT THE FILE'S CORNER.
This is the measurement that unlocked the size, after four rounds of tuning
that each gained a few percent. The artwork's own left edge SLOPES, and it
slopes the same way the cut does - the file is empty at the top-left and
fills out as it descends. Sampled every third row of the source:
5% down: content starts at 41% across 35%: 5%
10%: 32% 55%: 2%
20%: 27% 75%: 6%
25%: 18% 90%: 23%
So constraining the FILE's top-left corner against the cut - which is what
every earlier version did - was reserving room for a corner that is blank.
The real limit is the closest approach between the house's outline and the
cut, solved over all 303 rows that carry content. That is worth 71px of width
at 1280 (530 -> 601 available) and 95px at 1440, for nothing visible: the
blank part of the plate that now overhangs the cut is removed by the clip,
and what stays inside the half is #F6F8FC, exactly the panel colour.
Left padding is therefore run/2 + 14, not run/2 + 80. The 14 is the measured
margin: minimum clearance 14.1px at 1200-1366, 12.7px at 1440, then rising. */
.pagehero--svcsplit .svcsplit__media{
margin-left:calc(var(--run) / -2);
padding:0 20px 0 calc(var(--run) / 2 + 14px);
align-items:center;box-sizing:border-box;
border-top:2px solid var(--navy);border-bottom:2px solid var(--navy);
clip-path:polygon(var(--run) 0, 100% 0, 100% 100%, 0 100%);
/* No drop-shadow here. It applies to the element's whole rendered content,
so once the artwork stopped filling the clip it drew a shadow around the
IMAGE rectangle - a visible box floating in the panel. The lines carry the
edge on their own. */
}
/* contain, not cover.
cover always threw part of the artwork away, and which part depended on the
viewport: the visible window was 63% of the source before the file was
trimmed and 77% after, so one marker or another was always clipped and the
framing had to be argued about. contain fits the whole illustration every
time. It costs nothing visually because the file's own background is exactly
#F6F8FC, the same as the panel - so the space around it is invisible and the
house simply sits in the half. Nothing is cropped at any width. */
.pagehero--svcsplit .svcsplit__media img{
width:100%;height:auto;max-width:100%;max-height:100%;margin:0;
object-fit:contain;object-position:center}
@media (max-width:1300px){
.pagehero--svcsplit,.pagehero--tarsplit{--sh:560px;--run:249px;--edge:60%}
.svcsplit__copy{flex:0 0 60%}
.svcsplit__inner{max-width:none}
}
/* THE ILLUSTRATION IS SIZED BY THE HALF, NOT BY PADDING.
Measured at 1280 before this block: the copy took 60% (759px), leaving the
media 631px, of which padding ate 102 - so the artwork could never exceed
529px however the padding was tuned. Filling the half at that width means
cropping, which is why every "make it bigger" attempt either shrank it or
cut a marker off. The half itself had to grow.
Three changes, and all three are needed together:
1. The copy STAYS at 60%, which is the equal-area split: the navy is a
trapezoid of area H*(copyW - run/2), so the two halves match when
copyW = (W + run)/2 - 59.8% at 1280, 59.1% at 1440. That is why 60% was
the original value, and it is a requirement, not a free variable.
46% was tried and gave a much larger house (693x472) by taking area from
the navy; it was reverted on request for equal halves.
The size is therefore bought entirely from the media's own padding
instead - see the 32px note below.
2. The copy's right padding drops from run+40 to run+8. It clears the cut at
the TEXT's lowest point, not the hero's, and that was measured at 44px of
slack - so 32px of it is dead space the text column gets back, which is
what pays for narrowing the column.
3. --sh 560 -> 600. The text already stood 552px tall in a 560px hero, so a
narrower column with no extra height would have overflowed. The paragraph
is capped at 44ch (~350px) and so barely re-wraps; the 40px covers it.
Result at 1280: 580x395 - 165% of the 496x279 this started at, with equal
halves preserved. Nothing is cropped at any width.
Note the angle: --sh moves 560 -> 600 while --run stays 249, so this hero's
cut is 22.5 degrees where .pagehero--tarsplit's is still 24. Holding 24 would
need --run 261, and the copy's right padding is sized off --run, which would
take the text column back below the paragraph's cap and undo change 3. The
two heroes are no longer identical in angle; that is deliberate.
min-width:1200, not a bare rule, for two reasons. Below 1200 a 50% copy
leaves a ~224px text column and the h1 breaks badly. And a bare rule would
outrank `.svcsplit__copy{flex:1 1 auto}` in the stacked query below (two
classes beats one, media queries add no specificity), which would wedge the
stacked hero at half width on phones. */
@media (min-width:1200px){
.pagehero--svcsplit{--sh:560px}
/* A FLOOR, not a fixed height, and set to what the TEXT needs (~552px) rather
than to a round number. Section height is the only lever left on how full
the half looks, and it works backwards: a SHORTER section is fuller.
Measured at 1280, equal halves - 520:71%, 560:67%, 640:60%, 720:55% of the
section's height covered. Shorter also means a slightly smaller house (the
artwork's top edge rides higher, where the cut is further right), so 560 is
the floor of the useful range, not an arbitrary pick: below it the text
would set the height anyway. `min-height` means the hero still grows if the
text ever needs more, and the diagonal is a percentage clip, so it re-cuts
itself correctly at whatever height results. */
.pagehero--svcsplit .svcsplit{height:auto;min-height:var(--sh)}
.pagehero--svcsplit .svcsplit__copy{flex:0 0 60%}
/* The copy is inset from the left gutter rather than flush to it, so the
navy half reads as a panel with the text placed in it instead of text
pushed against the page edge. 20px of the right padding is handed back at
the same time, so the column keeps its width (466 vs 478) and the h1 stays
on two lines - shifting right alone would have squeezed "Home Inspection
Services" onto a third. The right padding can only give back so much: it
is what keeps the text clear of the diagonal, measured at 37px of slack
before this and 17px after. */
.pagehero--svcsplit .svcsplit__inner{
padding-left:calc(var(--pad) + 32px);
padding-right:calc(var(--run) - 12px)}
/* 32px, not run/2. That padding existed to keep the illustration's light
plate off the navy - but the clip-path already guarantees that, exactly,
and it was costing 62px of artwork for nothing. What actually has to clear
the cut is the HOUSE, and the file carries 22px of its own margin, so the
house sits 22/1408 of the width further in again. Measured at the house's
own top-left corner, not the file's. */
/* THE BOTTOM LINE HAS TO REACH THE CUT.
The shared rule pulls the media left by only run/2, so its left edge sat
run/2 to the RIGHT of where the diagonal actually lands at the bottom -
leaving a wedge belonging to neither half, and a bottom border that visibly
stopped short of the navy. Pulling a further run/2 puts the element's left
edge exactly on the cut's bottom point, so the border runs the full width
of the light half. (.pagehero--tarsplit already does this, for the same
reason.) The clip is restated in the element's NEW coordinates: everything
shifted right by run/2, so the top-left corner is at run and the
bottom-left at 0. The padding gains the same run/2 so the artwork does not
move. */
/* geometry now lives on the base rule above, so the 1025-1199 band gets the
completed bottom line too */
/* THE CAP IS WHAT MAKES THE 32px PADDING SAFE.
A fixed left padding does not scale with the viewport, so the artwork grows
faster than the clearance does: at 1440 it measured -3px, i.e. the house's
own top-left corner across the cut and clipped. Capping the HEIGHT stops
the growth at the point where the geometry still works, and it holds at
every width above it (checked to 1920) because the artwork then centres in
a wider box and moves further from the diagonal, not closer.
455: the artwork stops growing at 1440 and holds 668x455 from there up.
Above that width the element keeps widening, the artwork centres inside it
and so moves AWAY from the cut - clearance rises to 43px at 1600 and 107px
at 1920 - so the cap costs nothing there and protects the 1400-1500 band,
which is where the constraint actually bites. */
.pagehero--svcsplit .svcsplit__media img{max-height:455px}
}
/* Stacks at 1024, not 900. Below about 1050 the copy needs so much of the
width that the illustration was measuring 229-317px - a postage stamp in a
500px hero. A stacked hero at laptop widths is better than a diagonal one
with an unreadable image. */
/* Stacked. Everything the diagonal needs is turned off by name - the height,
the overhang and the clip - because leaving any one of them on locks the
stacked hero to a fixed height wearing a cut it no longer has room for.
That exact bug shipped once on this page already. */
@media (max-width:1024px){
.svcsplit{flex-direction:column;height:auto}
.svcsplit__copy{flex:1 1 auto;clip-path:none;margin-right:0}
.svcsplit__copy::after{display:none}
.svcsplit__inner{margin:0;max-width:none;padding:var(--s6) var(--pad)}
.svcsplit__media{flex:1 1 auto;padding:0 var(--pad) var(--s6)}
/* Stacked there is no diagonal, so the outline becomes a plain rectangle
around the light half. Clipping with --run here would put the line 132px
in from the left of a 375px screen. */
/* Stacked there is no diagonal and no half to fill, so the crop is dropped
and the illustration goes back to sitting at its own size. */
.pagehero--svcsplit .svcsplit__media{
clip-path:none;filter:none;align-items:center;margin-left:0;
padding:var(--s5) var(--pad) var(--s6);
border-top:2px solid var(--navy);border-bottom:0}
.pagehero--svcsplit .svcsplit__media img{
width:auto;height:auto;max-width:100%;object-fit:fill}
}
/* == SERVICES HERO END == */
/* == TARION HERO START == */
/* ==========================================================================
REVISION PASS 14 - Tarion hero: the diagonal split, with a photograph
==========================================================================
Geometry (--sh, --run, the clip, the copy panel, the gold rule) is INHERITED
from the SERVICES HERO block above - same .svcsplit classes on purpose, so
the two heroes cannot drift to different angles. Only the things a
photograph needs differently are set here.
Services mounts a plated illustration on a light half that matches its own
plate. A photograph has no plate to match and runs to all four edges, so
here the photograph IS the right-hand piece, filling it the way
sample-report.html fills its cut. */
/* Navy ground, not #F6F8FC - a white sliver along the cut against a
photograph would look like a rendering fault. The SAME gradient as the copy
panel, not a flat navy. The shared
.svcsplit__copy pulls the media left by only HALF the run, so between the
cut's bottom point and the media's left edge there is a wedge belonging to
neither - it shows the hero's own background. Matching the panel gradient
makes that wedge invisible even if a sub-pixel seam survives. */
.pagehero--tarsplit{
background:linear-gradient(104deg,var(--navy-deep) 0%,#143A62 58%,#1B4A78 100%)}
/* ...and then close the wedge properly. The shared margin-right is -run/2, so
the photo began run/2 to the RIGHT of where the cut lands at the bottom -
measured photoReachesCut:false at every width. Pulling the media a further
-run/2 puts its left edge exactly on the cut's bottom point, so the
photograph meets the diagonal along its whole length.
Done here, not on the shared rule: Services needs the -run/2 it has, and its
media padding is calculated from it. */
.pagehero--tarsplit .svcsplit__media{margin-left:calc(var(--run) / -2)}
/* No left padding. On Services that padding exists to keep the illustration's
light plate off the navy; here the photograph is MEANT to continue under the
cut, so any padding would open a gap along the diagonal. */
.pagehero--tarsplit .svcsplit__media{padding:0;overflow:hidden}
/* Cover, not contain - a photograph filling a piece. Framed at 58% across
because the inspector and the house sit centre-right; centring it would push
the inspector into the cut. */
.pagehero--tarsplit .svcsplit__media img{position:absolute;inset:0;
width:100%;height:100%;max-width:none;max-height:none;margin:0;
object-fit:cover;object-position:58% 45%}
/* A soft navy wash along the diagonal edge so the photograph meets the panel
instead of butting against it. */
.pagehero--tarsplit .svcsplit__media::after{content:"";position:absolute;
inset:0;z-index:1;pointer-events:none;
background:linear-gradient(100deg,rgba(9,32,56,.55) 0%,rgba(9,32,56,.12) 26%,rgba(9,32,56,0) 52%)}
@media (max-width:1024px){
/* stacked: a full-bleed photo band under the copy, still cover-filled.
margin-left MUST be reset - the -run/2 pull that closes the wedge on the
diagonal would otherwise drag the whole band 125px off the left edge. */
.pagehero--tarsplit .svcsplit__media{padding:0;height:300px;margin-left:0}
.pagehero--tarsplit .svcsplit__media::after{
background:linear-gradient(180deg,rgba(9,32,56,.45) 0%,rgba(9,32,56,0) 38%)}
}
@media (max-width:640px){
.pagehero--tarsplit .svcsplit__media{height:240px}
}
/* == TARION HERO END == */
/* == TARION BODY START == */
/* ==========================================================================
REVISION PASS 15 - Tarion overview slab, slanted photo, timing pair
==========================================================================
v1 of this section used a numbered track on a gold rail and was rejected as
"not professional". Reading the whole run of feedback on these pages: every
accepted design has been ONE BOLD SHAPE (the hero's diagonal split) and
every rejected one has been finely detailed - hairlines, small numbered
markers, thin rails, 1px dividers. The problem was never which list style.
So nothing here is a list device. The five items sit on a navy slab, in two
columns, at 17px, with a plain gold square. Big block, strong contrast. */
.tarslab{list-style:none;margin:var(--s6) 0 0;padding:var(--s5) var(--s5) calc(var(--s5) + 4px);
background:linear-gradient(104deg,var(--navy-deep) 0%,#143A62 62%,#1B4A78 100%);
border-radius:var(--radius-lg);
display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);
box-shadow:0 26px 58px rgba(9,32,56,.26)}
/* flex-GROW 0. With grow:1 the odd fifth item stretched to the full 1064px
against four 500px neighbours - a lone double-width row that reads as a
mistake, the same fault already fixed on the pre-purchase specbar. Pinned to
a half-column it simply sits alone in the left column, which is what a
two-column list of five is supposed to look like. */
.tarslab li{flex:0 1 calc(50% - var(--s6) / 2);min-width:0;position:relative;padding-left:26px;
font-family:var(--head);font-weight:500;font-size:17px;line-height:1.5;color:#fff}
.tarslab li::before{content:"";position:absolute;left:0;top:8px;
width:9px;height:9px;border-radius:2px;background:var(--gold)}
/* --- .shape-slant: the overview photo -----------------------------------
Replaces .shape-report, whose gold corner brackets are on nine other pages.
A navy plate sits behind the image, offset down and left, cut on the
diagonal so it repeats the lean of this page's hero - the one motif here
the client has approved.
The IMAGE is not clipped. The plate carries the diagonal, so nothing is
cropped, and the offset is made with container PADDING rather than negative
positions - below 900px .split__media has no side padding of its own, so
anything bleeding outward would hang off the page. */
.shape-slant{position:relative;display:block;padding:0 0 26px 26px}
.shape-slant::before{content:"";position:absolute;z-index:0;left:0;bottom:0;
width:calc(100% - 44px);height:calc(100% - 44px);border-radius:6px;
background:linear-gradient(158deg,var(--navy) 0%,#1B4A78 100%);
clip-path:polygon(0 0, 100% 0, calc(100% - 58px) 100%, 0 100%)}
.shape-slant img{position:relative;z-index:1;width:100%;display:block;border-radius:4px;
box-shadow:0 26px 54px rgba(15,44,76,.26)}
/* --- the timing copy: a warning, then an instruction --------------------
Two different jobs, so they stop being two identical grey paragraphs. */
.tarwarn{margin:0;position:relative;padding-left:22px;
font-family:var(--head);font-weight:500;font-size:19px;line-height:1.6;
letter-spacing:-.005em;color:var(--navy);max-width:52ch}
.tarwarn::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:6px;
border-radius:3px;background:var(--gold)}
.taract{margin:0;display:flex;align-items:center;gap:14px;
background:var(--gold-soft);border:1px solid rgba(224,165,38,.42);
border-radius:var(--radius);padding:16px 20px;
font-family:var(--head);font-weight:600;font-size:16.5px;line-height:1.5;color:var(--navy)}
@media (max-width:900px){
.tarslab{margin-top:var(--s5);padding:var(--s4);gap:var(--s3)}
.tarslab li{flex:0 1 100%;font-size:16.5px}
.shape-slant{padding:0 0 18px 18px}
.shape-slant::before{width:calc(100% - 30px);height:calc(100% - 30px)}
}
@media (max-width:640px){
.tarwarn{font-size:17.5px;padding-left:17px}
.tarwarn::before{width:5px}
.taract{font-size:15.5px;padding:14px 16px}
}
/* == TARION BODY END == */
/* == CONDO PAGE START == */
/* ==========================================================================
REVISION PASS 16 - Condo & Townhouse page
==========================================================================
The hero is .pagehero--tarsplit, the same class the Tarion page uses, which
in turn inherits --sh / --run / the clip from the SERVICES HERO block. Three
pages, one geometry. Only the framing differs. */
/* Tarion frames at 58% because its subject sits centre-right. This photograph
has the TOWNHOUSES on the left and the CONDO TOWER on the right - both are
the point of the page - so it is centred, or the cover crop throws one of
them away. Nudged down slightly to hold the street rather than the sky. */
.pagehero--condohero .svcsplit__media img{object-position:50% 56%}
/* --- .bigpoints ---------------------------------------------------------
The least decorated list on the site: big type, a gold square, nothing
else. No panel, no rules, no numbers, no cards.
It is used TWICE on this page - the overview items and the timing pair -
and that is deliberate. The client's complaint was that every page read the
same, not that one page may not use its own device twice. Using it twice is
what makes it this page's language instead of another one-off.
Single column by default, because in the timing section it sits in a ~500px
split column where two columns would leave 218px of measure. .bigpoints--two
opts into two columns for the full-width use below the overview split. */
.bigpoints{list-style:none;margin:var(--s4) 0 0;padding:0;
display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.bigpoints li{flex:0 1 100%;min-width:0;position:relative;padding-left:28px;
font-family:var(--head);font-weight:500;font-size:18px;line-height:1.55;
letter-spacing:-.004em;color:var(--navy)}
.bigpoints li::before{content:"";position:absolute;left:0;top:10px;
width:10px;height:10px;border-radius:2px;background:var(--gold)}
/* --- .unitpanel: the five scope items -----------------------------------
The two paragraphs above are now .bigpoints too, so these five CANNOT also
be gold-square bullets - the section would read as one undifferentiated run
of ten. They get a block instead of a bullet style:
a --steel panel, a 6px gold edge down the left, two columns, and a short
gold DASH in place of a square.
Panel vs no panel, dash vs square. Two clear differences, no extra detail -
the lesson from PASS 15 is that this client accepts big and simple and
rejects fine detail, so the panel does the work and the items carry one
small mark each.
flex-GROW 0: with grow:1 the odd fifth item stretches to the full width
against four half-width neighbours and reads as a mistake. Same fault
already fixed on .specbar and .tarslab. */
.unitpanel{list-style:none;margin:var(--s6) 0 0;
padding:var(--s5) var(--s5) calc(var(--s5) - var(--s3));
background:linear-gradient(180deg,var(--steel) 0%,var(--steel-deep) 100%);
border-left:6px solid var(--gold);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.unitpanel li{flex:0 1 calc(50% - var(--s6) / 2);min-width:0;position:relative;
padding-left:34px;
font-family:var(--head);font-weight:500;font-size:17.5px;line-height:1.5;
letter-spacing:-.004em;color:var(--navy)}
/* --gold-ink, not --gold-dark. On the steel panel #B8860F measures 2.87:1,
under the 3:1 floor for a non-text graphic; #8A660B clears it. This is the
token added in PASS 9 for exactly this situation. */
.unitpanel li::before{content:"";position:absolute;left:0;top:13px;
width:18px;height:2px;border-radius:2px;background:var(--gold-ink)}
.section--navy .bigpoints li,.section--navy-light .bigpoints li{color:#fff}
/* --- "Condo or freehold townhouse" on one line --------------------------
The heading sits in a .split__copy column, not a .sechead, so there is no
max-width cap to lift - the column itself is the limit, about 500px at
1440. At the global h2 clamp (up to 40px) the line measures past that and
wrapped.
The clamp is sized so the line fits at EVERY width, including 320 where the
column is only 269px: the string measures about 337px at 24px, so it needs
~19px there. The 2.9vw middle also has to clear the 1024-1200 band, where
the two .split columns are ~460px and a flat 33px would need 463px and
overflow by 3. Measured at 320/375/414/640/768/900/1024/1100/1280/1440. */
.section--white .split__copy h2#when-h{font-size:clamp(19px,2.9vw,33px);white-space:nowrap}
/* --- .shape-band: the overview photo ------------------------------------
Replaces .shape-report and its gold corner brackets. One solid gold band
under the image, full width, and nothing else - the simplest treatment on
the site, matching how plain .bigpoints is. */
.shape-band{position:relative;display:block}
.shape-band img{width:100%;display:block;border-radius:4px 4px 0 0;
box-shadow:0 24px 50px rgba(15,44,76,.20)}
.shape-band::after{content:"";display:block;height:8px;border-radius:0 0 4px 4px;
background:linear-gradient(90deg,var(--gold) 0%,rgba(224,165,38,.55) 68%,rgba(224,165,38,.25) 100%)}
@media (max-width:900px){
.unitpanel{margin-top:var(--s5);padding:var(--s4) var(--s4) calc(var(--s4) - var(--s3));
gap:var(--s3)}
.unitpanel li{flex:0 1 100%;font-size:16.5px}
.bigpoints li{font-size:17px}
}
/* == CONDO PAGE END == */
/* == REINSPECTION BODY START == */
/* ==========================================================================
REVISION PASS 17 - Reinspection: verdict statement + outlined panel
==========================================================================
Every panel on the service pages so far is FILLED - .tarslab navy,
.unitpanel steel, .specbar cards. This one is OUTLINED, 2px navy around
white, which is the clearest remaining difference at a glance and needs no
extra detail to read as its own thing. Its markers are navy, not gold, so it
reads as a drawn box rather than another gold-accented list. */
/* --- .verdict: the sentence that is actually the argument ---------------
Used on BOTH sections of this page, the same way .bigpoints is used twice
on the condo page - that repetition is what makes it this page's language
instead of two unrelated one-offs. */
.verdict{margin:0;font-family:var(--head);font-weight:500;font-size:21px;line-height:1.55;
letter-spacing:-.006em;color:var(--navy);max-width:56ch}
.verdict::before{content:"";display:block;width:56px;height:4px;border-radius:2px;
background:var(--gold);margin-bottom:16px}
.section--navy .verdict,.section--navy-light .verdict{color:#fff}
/* --- .checkpanel: the five items ---------------------------------------
flex-GROW 0 so the odd fifth item does not stretch to double width against
four half-width neighbours - the same fault already fixed on .specbar,
.tarslab and .unitpanel. */
.checkpanel{list-style:none;margin:var(--s6) 0 0;padding:var(--s5);
border:2px solid var(--navy);border-radius:var(--radius-lg);background:#fff;
display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.checkpanel li{flex:0 1 calc(50% - var(--s6) / 2);min-width:0;position:relative;
padding-left:26px;
font-family:var(--head);font-weight:500;font-size:17.5px;line-height:1.5;
letter-spacing:-.004em;color:var(--navy)}
.checkpanel li::before{content:"";position:absolute;left:0;top:9px;
width:9px;height:9px;border-radius:2px;background:var(--navy)}
/* --- .sidenote: the scope note, deliberately quieter -------------------- */
.sidenote{margin:0;position:relative;padding-left:20px;
font-size:16px;line-height:1.7;color:var(--muted);max-width:60ch}
.sidenote::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
border-radius:2px;background:rgba(224,165,38,.6)}
@media (max-width:900px){
.checkpanel{margin-top:var(--s5);padding:var(--s4);gap:var(--s3)}
.checkpanel li{flex:0 1 100%;font-size:16.5px}
.verdict{font-size:19px}
}
@media (max-width:640px){
.verdict{font-size:18px}
.verdict::before{width:46px;margin-bottom:13px}
.sidenote{font-size:15.5px;padding-left:16px}
}
/* == REINSPECTION BODY END == */
/* == REINSPECTION HERO START == */
/* ==========================================================================
REVISION PASS 18 - Reinspection hero
==========================================================================
.pagehero--tarsplit again - the same class Tarion and Condo use, inheriting
--sh / --run / the clip from the SERVICES HERO block. Four pages, one
geometry, 24 degrees, one place to change it. Only framing differs here.
The page's whole argument is in two objects in this photograph: a clipboard
headed REPAIRED / VERIFIED at the bottom left, and a tablet showing a
BEFORE/AFTER of the same electrical panel at centre right. Both have to
survive the cover crop, so it is centred horizontally and nudged down to
hold them rather than the sky. */
.pagehero--reinshero .svcsplit__media img{object-position:50% 55%}
/* == REINSPECTION HERO END == */
/* == COMMERCIAL PAGE START == */
/* ==========================================================================
REVISION PASS 19 - Commercial Property page
==========================================================================
Fifth page on .pagehero--tarsplit. The inspector stands at the RIGHT edge of
this photograph, so a centred cover crop clips his back - biased right to
keep him whole, which also holds the building entrance. */
.pagehero--commhero .svcsplit__media img{object-position:55% 50%}
/* --- .commspec: the five items -----------------------------------------
The sixth list device on the service pages, and chosen because it is the
one plainly simple form left. Every other one is a CONTAINER - cards, a
filled navy panel, a filled steel panel, an outlined panel - or ruled rows.
This group is bounded only top and bottom by a heavy navy rule, with no
box, no fill and no internal lines. It reads as a specification block,
which suits the most technical page of the six.
flex-GROW 0 so the odd fifth item does not stretch to double width against
four half-width neighbours - the same fault already fixed on .specbar,
.tarslab, .unitpanel and .checkpanel. */
.commspec{list-style:none;margin:var(--s6) 0 0;padding:var(--s4) 0;
border-top:3px solid var(--navy);border-bottom:3px solid var(--navy);
display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.commspec li{flex:0 1 calc(50% - var(--s6) / 2);min-width:0;position:relative;
padding-left:26px;
font-family:var(--head);font-weight:500;font-size:17.5px;line-height:1.5;
letter-spacing:-.004em;color:var(--navy)}
.commspec li::before{content:"";position:absolute;left:0;top:9px;
width:10px;height:10px;border-radius:2px;background:var(--gold)}
.section--navy .commspec,.section--navy-light .commspec{
border-top-color:rgba(255,255,255,.5);border-bottom-color:rgba(255,255,255,.5)}
.section--navy .commspec li,.section--navy-light .commspec li{color:#fff}
@media (max-width:900px){
.commspec{margin-top:var(--s5);padding:var(--s3) 0;gap:var(--s3)}
.commspec li{flex:0 1 100%;font-size:16.5px}
}
/* == COMMERCIAL PAGE END == */
/* == HOME POLISH START == */
/* ==========================================================================
REVISION PASS 20 - Homepage polish
========================================================================== */
/* --- .telbtn--onlight ---------------------------------------------------
The original .telbtn is white-on-navy. Both new placements sit on pale
grounds, so this is a colour variant rather than a second component. */
.telbtn--onlight{color:var(--navy);border-color:rgba(15,44,76,.22)}
.telbtn--onlight:hover{border-color:var(--gold);background:rgba(224,165,38,.14)}
.telbtn--onlight small{color:var(--muted)}
/* --- .actionpair--center: the pair centred under the three steps --------- */
.actionpair--center{justify-content:center;margin-top:var(--s6)}
/* --- .svcbar: the invitation under the six service cards ----------------
Very light navy, as asked. It sits on the white section, so it reads as a
separate invitation rather than a seventh card. */
.svcbar{margin-top:var(--s6);background:#EAF0F8;border:1px solid #D3DFEE;
border-radius:var(--radius-lg);padding:30px 34px;
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:var(--s4) var(--s5)}
.svcbar__text{margin:0;flex:1 1 430px;min-width:0;max-width:58ch;
font-family:var(--head);font-weight:500;font-size:19px;line-height:1.55;
letter-spacing:-.005em;color:var(--navy)}
.svcbar__actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
/* --- .sidenote on navy --------------------------------------------------
.sidenote is muted grey, made for white sections. The Why section is navy,
so it needs a colour variant - the same treatment .verdict already has. */
.section--navy .sidenote,.section--navy-light .sidenote{color:rgba(255,255,255,.72)}
.section--navy .sidenote::before,.section--navy-light .sidenote::before{
background:rgba(224,165,38,.85)}
.split__copy .sidenote{margin-top:var(--s2)}
/* --- .geopanel: the map, framed and labelled ----------------------------
The reference screenshot's good idea is a framed map wearing a floating
label. Built on the .mappanel language already in the stylesheet - navy
ground, gold hairline - so it reads as part of this site. */
.geopanel{position:relative;background:var(--navy);border:1px solid rgba(224,165,38,.42);
border-radius:18px;padding:16px;box-shadow:0 30px 62px rgba(9,32,56,.26)}
.geopanel img{width:100%;height:auto;display:block;border-radius:10px}
/* --- .geostats: three figures, spanning the section ---------------------
Every figure here is already claimed elsewhere on the site: 25 is the count
of municipalities on areas-we-serve.html, 24h is the stated turnaround, 10+
years is the credentials bar. Nothing new is asserted. */
.geostats{list-style:none;margin:var(--s6) 0 0;padding:0;
display:flex;flex-wrap:wrap;gap:var(--s3)}
.geostats li{flex:1 1 220px;min-width:0;
background:var(--navy);border-radius:var(--radius-lg);
padding:26px 28px;text-align:center;
border:1px solid rgba(224,165,38,.24)}
.geostats b{display:block;font-family:var(--head);font-weight:700;font-size:38px;
line-height:1.05;letter-spacing:-.02em;color:#fff}
.geostats span{display:block;margin-top:6px;
font-family:var(--head);font-weight:600;font-size:12px;letter-spacing:.12em;
text-transform:uppercase;color:var(--gold)}
/* --- the appointment photograph merged into the band --------------------
Reuses .bandsec, the full-bleed device about.html already uses: the picture
holds the full height of the band at one edge and dissolves into the ground,
instead of floating in it as a rounded card.
Three things have to stand down for it. The band's own .wrap is a flex row
with space-between, which fought the .bandsec offset; its ::after wedge would
have sat on top of the photograph; and .bandsec needs its own dissolve colour,
keyed to this band the way .section--slate and .section--quarry are keyed to
theirs. The band runs #173A5E -> #1E4C77, and the media sits at the right-hand
end, so the dissolve resolves to #1E4C77. */
.ctaband.bandsec > .wrap{display:block}
.ctaband.bandsec::after{display:none}
/* the band was sized by its copy alone, which left the photograph a 323px
letterbox. A floor on the height gives the picture room to read, and
centring holds the copy against it. */
.ctaband.bandsec{min-height:420px;display:flex;align-items:center}
.ctaband .bandsec__media::after{
background:linear-gradient(270deg,rgba(30,76,119,0) 52%,rgba(30,76,119,.90) 88%,#1E4C77 100%)}
.ctaband .bandsec__inner{gap:16px;max-width:56ch}
.ctaband .bandsec__inner .ctaband__actions{margin-top:6px}
@media (max-width:900px){
.svcbar{padding:26px 24px;gap:var(--s3)}
.svcbar__text{flex:1 1 100%;font-size:17.5px}
.geostats{margin-top:var(--s5)}
.geostats li{flex:1 1 100%;padding:22px 24px}
.geostats b{font-size:32px}
.ctaband__media{flex:1 1 100%;max-width:420px}
}
@media (max-width:640px){
.svcbar{padding:22px 20px}
.svcbar__actions{flex-direction:column;align-items:stretch;gap:14px}
.svcbar__actions .btn,.svcbar__actions .telbtn{justify-content:center}
.actionpair--center{flex-direction:column;align-items:stretch;margin-top:var(--s5)}
.actionpair--center .btn,.actionpair--center .telbtn{justify-content:center}
.geopanel{padding:12px}
}
/* == HOME POLISH END == */
/* == SPLIT OVERFLOW PASS START == */
/* --------------------------------------------------------------------------
Kills the last of the .split sideways bleed (the KNOWN BUG: ~20px of
horizontal scroll between roughly 900px and 1250px).
.split's negative side margin makes its BOX 20px wider than the viewport on
each side while its CONTENT still lines up with .wrap. The escaping strip is
the columns' own padding and is blank, so it is clipped rather than
re-laid-out: every measured position and width is identical afterwards.
clip, not hidden - hidden would turn every section into a scroll container,
breaking position:sticky and forcing overflow-y to auto.
-------------------------------------------------------------------------- */
.section{overflow-x:clip}
/* == SPLIT OVERFLOW PASS END == */
/* == CALLBACK CTA PASS START == */
/* --------------------------------------------------------------------------
The free fifteen-minute call - second CTA, and the block it lands on.
-------------------------------------------------------------------------- */
/* The landing block. Navy, because it sits between a steel section and a white
one and had to read as its own thing rather than a third variation of them. */
.section--callback{
background:linear-gradient(135deg,#0B2340 0%,#143A62 52%,#0F2C4C 100%);
color:#fff}
.callback{display:flex;flex-wrap:wrap;gap:var(--s5)}
.callback__copy{flex:1 1 52%;min-width:300px}
.callback__card{flex:1 1 38%;min-width:290px}
.callback .eyebrow{color:var(--gold)}
.callback h2{color:#fff;font-size:clamp(26px,3vw,34px);line-height:1.18;margin:0 0 var(--s2)}
.callback__lead{font-size:17px;line-height:1.72;color:rgba(255,255,255,.86);margin:0 0 var(--s3)}
.callback__list{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:11px}
.callback__list li{display:flex;align-items:flex-start;gap:11px;
font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.9)}
.callback__list svg{flex:0 0 auto;margin-top:3px;color:var(--gold)}
.callback__note{margin:var(--s2) 0 0;font-size:13.5px;line-height:1.6;
color:rgba(255,255,255,.62)}
/* The card is white on the navy so the form reads as the quieter option next
to the phone button, not as a competing primary. */
.callback__card .formcard{background:#fff;border-radius:var(--radius-lg);
padding:var(--s4);box-shadow:0 30px 62px rgba(4,16,30,.34);margin-top:0}
.callback__card h3{font-family:var(--head);font-size:19px;line-height:1.25;
margin:0 0 4px;color:var(--navy)}
.callback__card .formhead__text{text-align:left;margin:0 0 var(--s3)}
.callback__card .formhead__text p{margin:0;font-size:13.5px;color:var(--muted)}
.callback__card .formstatus{margin-top:12px}
@media (max-width:900px){
.callback{gap:var(--s4)}
.callback__copy,.callback__card{flex:1 1 100%}
}
/* == CALLBACK CTA PASS END == */
/* == CALLBACK CTA 2 PASS START == */
/* --------------------------------------------------------------------------
.callrail - the free-call offer where it sits INSIDE a section rather than
in a hero. A bare button under a tile row reads as an afterthought; this
gives the offer a reason to be there.
White panel, because all three grounds it lands on are light and tinted
(mist, skywhite, ivory) - a white card lifts off each of them without
needing a per-page variant.
-------------------------------------------------------------------------- */
.callrail{display:flex;align-items:center;justify-content:center;
flex-wrap:wrap;gap:var(--s3) var(--s4);
max-width:780px;margin:var(--s5) auto 0;
padding:var(--s3) var(--s4);
background:#fff;border:1px solid rgba(23,58,94,.12);
border-radius:var(--radius-lg);box-shadow:0 18px 40px rgba(9,32,56,.09)}
.callrail__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:52px;height:52px;border-radius:50%;
background:var(--gold-soft);color:var(--gold-dark);
border:1px solid rgba(224,165,38,.42)}
.callrail__text{flex:1 1 300px;min-width:0}
.callrail__text b{display:block;font-family:var(--head);font-weight:700;
font-size:17px;line-height:1.3;color:var(--navy)}
.callrail__text span{display:block;margin-top:4px;
font-size:14.5px;line-height:1.6;color:var(--muted)}
.callrail .btn{flex:0 0 auto}
@media (max-width:640px){
.callrail{text-align:center;padding:var(--s3)}
.callrail__text{flex:1 1 100%}
.callrail .btn{width:100%}
}
/* == CALLBACK CTA 2 PASS END == */
/* == CALLBACK CTA 3 PASS START == */
/* --------------------------------------------------------------------------
Callback block, copy column - rhythm and finish.
The eyebrow is a pill with its own padding and border, so it needs real
clearance beneath it. It had none: eyebrow and heading were touching at 0px.
-------------------------------------------------------------------------- */
.callback .eyebrow{margin-bottom:var(--s3)}
.callback h2{margin:0 0 var(--s3)}
/* ~52 characters. The column is near 600px at desktop, which ran the 17px
lead to about 75 characters - long enough to lose the line return. */
.callback__lead{max-width:52ch;margin:0 0 var(--s4)}
/* Separated rows rather than loose ticks: this reads as a specification,
which is the register the rest of the site uses. */
.callback__list{gap:0;margin:0 0 var(--s4)}
.callback__list li{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.callback__list li:first-child{padding-top:0}
.callback__list li:last-child{padding-bottom:0;border-bottom:0}
/* The note is the line that stops a free call reading as free engineering
advice. It was orphaned small print; the gold rule makes it deliberate. */
.callback__note{margin:var(--s3) 0 0;padding-left:15px;
border-left:2px solid rgba(224,165,38,.55);
max-width:52ch}
@media (max-width:640px){
.callback .eyebrow{margin-bottom:var(--s2)}
.callback__lead,.callback__note{max-width:none}
}
/* == CALLBACK CTA 3 PASS END == */
/* == BRAND PASS START == */
/* --------------------------------------------------------------------------
The DwellInspect lockup in the header and footer.
Built as an ![]()
of the MARK plus real HTML text, not an ![]()
of the whole
lockup - an SVG loaded through ![]()
cannot reach the page's webfonts, so a
full-lockup image would render the wordmark in a fallback face. This way the
type is the site's own Instrument Sans and scales with everything else.
-------------------------------------------------------------------------- */
.brand{gap:11px}
.brand__mark{width:46px;height:34.5px;flex:0 0 auto}
.brand__name{display:flex;flex-direction:column;line-height:1}
.brand__name b{font-family:var(--head);font-weight:700;font-size:21px;
letter-spacing:-.5px;color:var(--navy)}
.brand__name b i{font-style:normal;color:#2563EB}
/* 8px at .15em tracking sets ~118px against the wordmark's ~114px, so the two
lines read as one block rather than two unrelated widths. */
.brand__name > span{font-family:var(--head);font-weight:600;font-size:8px;
letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.footer__brand{display:inline-flex;align-items:center;gap:13px}
.footer__mark{width:54px;height:40.5px;flex:0 0 auto}
.footer__name{display:flex;flex-direction:column;line-height:1}
.footer__name b{font-family:var(--head);font-weight:700;font-size:24px;
letter-spacing:-.5px;color:#fff}
/* #60A5FA, not #2563EB - the royal blue measures 2.44:1 on this navy and
fails. The lighter blue is 5.27:1. */
.footer__name b i{font-style:normal;color:#60A5FA}
.footer__name > span{font-family:var(--head);font-weight:600;font-size:9px;
letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);
margin-top:5px}
@media (max-width:1100px){
.brand__mark{width:40px;height:30px}
.brand__name b{font-size:19px}
.brand__name > span{font-size:7.4px}
}
@media (max-width:640px){
.brand__name > span{display:none}
.brand__mark{width:38px;height:28.5px}
}
/* == BRAND PASS END == */
/* == HOME LOGO TRIAL START == */
/* --------------------------------------------------------------------------
HOMEPAGE TRIAL ONLY - remove with tools/patch_home_logo_trial.py REVERT=True.
Scoped by :has() so the other 22 pages are untouched and the two treatments
can be compared by clicking between them.
-------------------------------------------------------------------------- */
.brand--stacked svg{height:76px;width:auto;display:block}
.masthead .wrap:has(.brand--stacked){padding-top:9px;padding-bottom:9px}
.footer__brand--full{display:block}
.footer__brand--full svg{width:286px;height:auto;display:block;border-radius:10px}
@media (max-width:1100px){
.brand--stacked svg{height:66px}
}
@media (max-width:640px){
.brand--stacked svg{height:56px}
.footer__brand--full svg{width:100%;max-width:300px}
}
/* == HOME LOGO TRIAL END == */
/* == SEO POLISH PASS START == */
/* --------------------------------------------------------------------------
The header descriptor stays visible on phones.
The brand pass hid it below 640px because the bar is tight there. Measured,
it fits: 7.2px at .13em tracking sets ~96px, and with the 38px mark and an
11px gap that is ~145px of a 375px bar whose only other content is the Menu
button. Tracking is reduced with the size so the letters do not crowd.
-------------------------------------------------------------------------- */
@media (max-width:640px){
.brand__name > span{display:block;font-size:7.2px;letter-spacing:.13em}
}
/* == SEO POLISH PASS END == */