,
8: Why Choose Iron Shore
, 9: (why-choose content). */
body[data-service="reroof"] main .detail-content {
display: flex;
flex-direction: column;
}
body[data-service="reroof"] main .detail-content > :nth-child(1) { order: 1; }
body[data-service="reroof"] main .detail-content > :nth-child(2) { order: 2; }
body[data-service="reroof"] main .detail-content > :nth-child(3) { order: 3; }
body[data-service="reroof"] main .detail-content > :nth-child(4) { order: 8; }
body[data-service="reroof"] main .detail-content > :nth-child(5) { order: 9; }
body[data-service="reroof"] main .detail-content > :nth-child(6) { order: 4; }
body[data-service="reroof"] main .detail-content > :nth-child(7) { order: 5; }
body[data-service="reroof"] main .detail-content > :nth-child(8) { order: 6; }
body[data-service="reroof"] main .detail-content > :nth-child(9) { order: 7; }
/* ==========================================================================
SERVICE PAGES - MOBILE OPTIMIZATION (added 2026-08-06)
Scope: html.is-inner - class is set from the route by before-after.js.
If that script fails, none of this applies: safe no-op fallback.
Fixes
1. Hero painted pure black until the photo finally arrived
2. /services card grid stuck at 2 columns on phones (inline style
from the React bundle out-ranks every media query -> !important)
3. Hero eyebrow/subtitle unreadable + badly wrapped on phones
========================================================================== */
/* --- 1. Hero never paints black ---------------------------------------- */
html.is-inner .hero { background-color: #0b1421; }
html.is-inner .hero-bg {
background-color: #0b1421;
background-position: 50% 45%;
background-size: cover;
background-repeat: no-repeat;
}
/* --- 2. Legibility scrim (hero-bg is z-index:0, .container is z-index:1) */
html.is-inner .hero-bg::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(7,14,24,.34) 0%, rgba(7,14,24,.14) 45%, rgba(7,14,24,.52) 100%),
linear-gradient(90deg, rgba(7,14,24,.56) 0%, rgba(7,14,24,.16) 55%, rgba(7,14,24,0) 100%);
}
/* --- 3. Phones ---------------------------------------------------------- */
@media (max-width: 900px) {
html.is-inner .hero-bg::after {
background: linear-gradient(180deg, rgba(7,14,24,.50) 0%, rgba(7,14,24,.34) 40%, rgba(7,14,24,.62) 100%);
}
html.is-inner .hero {
min-height: 300px !important;
padding: 34px 0 38px !important;
display: flex;
align-items: center;
}
html.is-inner .hero > .container { width: 100%; }
html.is-inner .hero .breadcrumb {
font-size: 12px !important;
letter-spacing: .04em;
margin-bottom: 12px !important;
color: rgba(255,255,255,.70) !important;
}
html.is-inner .hero .breadcrumb span { color: inherit !important; }
html.is-inner .hero .breadcrumb a { color: #8ab4ff !important; }
html.is-inner .hero h1 {
font-size: clamp(26px, 7.4vw, 34px) !important;
line-height: 1.1 !important;
margin: 0 0 12px !important;
text-wrap: balance;
text-shadow: 0 2px 16px rgba(0,0,0,.55);
}
html.is-inner .hero .hero-subtitle {
color: #e8eef8 !important;
font-size: 15px !important;
line-height: 1.5 !important;
max-width: 33ch;
margin: 0 !important;
text-shadow: 0 1px 12px rgba(0,0,0,.65);
}
/* --- 4. The 2-column grid bug --------------------------------------- */
html.is-inner .services-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
html.is-inner .featured-service-card { grid-template-columns: 1fr !important; }
html.is-inner .grid-service-card > img,
html.is-inner .featured-service-image img {
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
}
html.is-inner .grid-service-card-body,
html.is-inner .featured-service-body { padding: 18px 16px 20px !important; }
html.is-inner .grid-service-card-body > div:first-child {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
html.is-inner .grid-service-card-body > div:first-child > span { flex: 0 0 auto; }
html.is-inner .grid-service-card-body h3,
html.is-inner .featured-service-body h3 {
font-size: 19px !important;
line-height: 1.15 !important;
margin: 0 !important;
overflow-wrap: anywhere;
}
html.is-inner .grid-service-card-body p,
html.is-inner .featured-service-body p {
font-size: 14.5px !important;
line-height: 1.55 !important;
margin: 0 0 14px !important;
}
html.is-inner .service-tags {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-bottom: 16px !important;
}
html.is-inner .service-tag {
font-size: 12.5px !important;
white-space: nowrap;
padding: 6px 10px !important;
}
html.is-inner .service-card-link,
html.is-inner .featured-service-body .btn-primary {
min-height: 44px;
display: inline-flex;
align-items: center;
gap: 8px;
}
html.is-inner .featured-service-body .btn-primary { width: 100%; justify-content: center; }
}
/* --- 5. Hero copy contrast on tablet/desktop too -----------------------
The breadcrumb (#3e4f65) and subtitle (#8998ad) were set for a dark
panel, not for sitting directly on a sunlit photo. Colour only - the
desktop type scale and spacing are left exactly as they were.
(desktop legibility) */
@media (min-width: 901px) {
html.is-inner .hero .breadcrumb { color: rgba(255,255,255,.72) !important; }
html.is-inner .hero .breadcrumb span { color: inherit !important; }
html.is-inner .hero .breadcrumb a { color: #8ab4ff !important; }
html.is-inner .hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,.5); }
html.is-inner .hero .hero-subtitle {
color: #dde6f3 !important;
text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
}
/* --- 6. Phone-weight hero photos --------------------------------------
Each hero also exists as a 760px WebP (15-71KB vs the 65-241KB full
JPEG). data-svc is set on by before-after.js during head parse,
so this swap is in place before first paint - the big JPEG is never
requested on a phone. Matching media-scoped preloads live in the same
script, so each viewport downloads exactly one file. */
@media (max-width: 900px) {
html[data-svc="services-hero-bg"] .hero-bg { background-image: url("/images/services-hero-bg-m.webp") !important; }
html[data-svc="hero-roof-aerial"] .hero-bg { background-image: url("/images/hero-roof-aerial-m.webp") !important; }
html[data-svc="gallery-5"] .hero-bg { background-image: url("/images/gallery-5-m.webp") !important; }
html[data-svc="roof-patch"] .hero-bg { background-image: url("/images/roof-patch-m.webp") !important; }
html[data-svc="storm-damage-bg"] .hero-bg { background-image: url("/images/storm-damage-bg-m.webp") !important; }
html[data-svc="aerial-roof-home"] .hero-bg { background-image: url("/images/aerial-roof-home-m.webp") !important; }
}
/* ==========================================================================
INSTANT HERO PLACEHOLDER (2026-08-06)
Symptom this fixes: text and layout paint, then the hero stays a dark box
for a few seconds until the photo finishes downloading.
Shrinking the file helped but could not remove the gap - there is always
SOME download time. So instead of waiting, each hero now carries a 28px
wide preview of its own photo, inlined as base64 (~1.1KB each). It lives
in this stylesheet, which is render-blocking, so it is already present at
the very first frame - zero network requests, nothing to wait for.
It sits on .hero (which React never assigns a background to). .hero-bg
stacks above it and is transparent until its photo decodes, at which
point the real image simply replaces the blur in place. Scaled from 28px
the preview is naturally soft, which reads as an image resolving rather
than a broken panel.
========================================================================== */
html.is-inner .hero {
background-color: #0b1421;
background-repeat: no-repeat;
background-position: 50% 45%;
background-size: cover;
}
/* must be transparent so the preview underneath shows through */
html.is-inner .hero-bg { background-color: transparent; }
html[data-svc="services-hero-bg"] .hero { background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAIABwDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAYDBP/EAB4QAAEDBQEBAAAAAAAAAAAAAAIAAQQDERIhUQVB/8QAFAEBAAAAAAAAAAAAAAAAAAAABP/EABoRAAMAAwEAAAAAAAAAAAAAAAABEQMhMTL/2gAMAwEAAhEDEQA/AKWOWlvJnhBilWPfwW66ImZdKhMe3CUmegZET3yqk9yd1xjTMmyvt+oiN6cYrip//9k=); }
html[data-svc="hero-roof-aerial"] .hero { background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAIABwDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAJBAAAQQBBAAHAAAAAAAAAAAAAQACAwQREiEiQRMxMlFhgaH/xAAWAQEBAQAAAAAAAAAAAAAAAAABAgP/xAAaEQACAgMAAAAAAAAAAAAAAAAAAgEhAxJB/9oADAMBAAIRAxEAPwAynWmsTNqQiGDUSBq3A6GPP7VbIYscmxgAbB3I4z74/PlEWOFYldp6BO6jR8V0oZiQ7EglZRs04Zpo7M0sbmPIaA0+nrpEVOi1QH//2Q==); }
html[data-svc="gallery-5"] .hero { background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAIABwDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAEDBAb/xAAiEAACAQIGAwEAAAAAAAAAAAABAgMAEQQFEiExQVFhcZH/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/EABcRAQEBAQAAAAAAAAAAAAAAAAEAAhH/2gAMAwEAAhEDEQA/ANK5qzBNUQKWOyNzxa3vnuobM0W0ioxxAFgwPC/t+t/lKUOmTI3PT5g0WPaSMnUQSfAF+T5JNWyZ5EZGabDQl233uOvm9KVeTsaeX//Z); }
html[data-svc="roof-patch"] .hero { background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAIABwDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAQF/8QAIhABAAIBAwMFAAAAAAAAAAAAAQACIQMEEQUUMRVhcYHw/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQL/xAAVEQEBAAAAAAAAAAAAAAAAAAABAP/aAAwDAQACEQMRAD8A3Nl1O220q0urpgFatcn2cy/1Wjycg+D3f3MRJGUpdr16nfGz1rF7YC9Tyo5x8TaEsFq5HIxEoYb/2Q==); }
html[data-svc="storm-damage-bg"] .hero { background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAIABwDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAIEBv/EACUQAAIBAwEIAwAAAAAAAAAAAAECAwAEEQYFEiEiMUFRoWGx8P/EABYBAQEBAAAAAAAAAAAAAAAAAAIAAf/EABYRAQEBAAAAAAAAAAAAAAAAAAARAf/aAAwDAQACEQMRAD8AiLWzxSs0lmkjN1KPu59H9it9jrCa6lKRWBkIBOFfmxnh290pQuqZKva2qJDavHbLLbS8AzSLkqfgDPj7rh9pma5vGneZp98ZDkk5HjOO3SlKTMf/2Q==); }
html[data-svc="aerial-roof-home"] .hero { background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAIABwDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAQDBf/EACUQAAIBAwMDBQEAAAAAAAAAAAECAwARIQQFEjFhgRMWIlGh8P/EABYBAQEBAAAAAAAAAAAAAAAAAAIAA//EABYRAQEBAAAAAAAAAAAAAAAAAAAxAf/aAAwDAQACEQMRAD8Ai2zd9z3LVyFpXkRGHFLWvnpjzirdQrSRxyT+q8UY4I655N2H3+480pSkWOhpNRDBGCmomVFARxIvxHWxGcX/ALNYe4JoiV53FgRxUgWsO9KUK0mP/9k=); }
/* about + contact were missing from the phone-weight swap, because the old
route map only knew about /services. Their heroes are now cropped and have
-m.webp twins like the rest. */
@media (max-width: 900px) {
html[data-svc="about-hero-bg"] .hero-bg { background-image: url("/images/about-hero-bg-m.webp") !important; }
html[data-svc="contact-hero-bg"] .hero-bg { background-image: url("/images/contact-hero-bg-m.webp") !important; }
}
/* ==========================================================================
TEXT-ONLY HERO - everywhere except the home page (2026-08-06)
Final call, and the right one: there is no image in these heroes any more,
and no graphic standing in for one either. Just the heading and the line
under it, on the page's own background.
Every previous attempt tried to make the picture arrive sooner - smaller
files, cropping, preloads, inline previews, a CSS graphic, a pre-render
shell. All of it kept the same failure mode: a band that is empty until
something finishes. Text was never the slow part; it is in the markup and
paints immediately. So the band is gone rather than filled.
.hero-bg is display:none, so its image is never requested at all.
Scoped to html.is-inner, set by index.html on every route change including
client-side navigation. The home page never gets that class and is
completely untouched.
========================================================================== */
/* the image layer is removed outright - nothing to request, nothing to wait on */
html.is-inner .hero-bg { display: none !important; }
html.is-inner .hero {
background: none !important;
background-color: transparent !important;
min-height: 0 !important;
padding: 54px 0 40px !important;
display: block !important;
border-bottom: 1px solid rgba(255,255,255,.09);
}
html.is-inner .hero > .container { width: 100%; }
html.is-inner .hero .breadcrumb {
font-size: 12.5px !important;
letter-spacing: .04em;
margin-bottom: 14px !important;
color: rgba(255,255,255,.55) !important;
text-shadow: none !important;
}
html.is-inner .hero .breadcrumb span { color: inherit !important; }
html.is-inner .hero .breadcrumb a { color: #7fb0ff !important; }
html.is-inner .hero h1 {
color: #fff !important;
font-size: clamp(30px, 4.4vw, 52px) !important;
line-height: 1.06 !important;
margin: 0 0 14px !important;
text-shadow: none !important;
text-wrap: balance;
}
html.is-inner .hero .hero-subtitle {
color: #b9c7db !important;
font-size: clamp(15px, 1.5vw, 19px) !important;
line-height: 1.5 !important;
max-width: 60ch;
margin: 0 !important;
text-shadow: none !important;
}
@media (max-width: 900px) {
html.is-inner .hero { padding: 30px 0 26px !important; }
html.is-inner .hero h1 { font-size: clamp(27px, 7.4vw, 34px) !important; }
html.is-inner .hero .hero-subtitle { font-size: 15px !important; max-width: 40ch; }
}
/* --- the hero section is retired on inner pages -------------------------
Taken out of layout and paint entirely. The title and subtitle now live
in the first content section instead (see PAGE HEAD RELOCATION in
before-after.js). display:none rather than removal keeps React's tree
intact. The home page is untouched. */
html.is-inner section.hero { display: none !important; }
/* --- page head: photo panel + service emblem ----------------------------
Two panels of equal height inside the content section. Left: the photo,
with the heading sitting on top of it over a scrim. Right: an inline-SVG
emblem for whatever that page sells.
Both panels carry a gradient of their own, so the block looks complete
before the photo decodes - it can degrade to a branded panel, never to an
empty rectangle. The emblem costs no request at all. */
.isr-pagehead {
/* the host container is sometimes itself a grid (About uses .story-grid,
two columns). Without this the head becomes a grid ITEM and gets
squeezed into one cell instead of spanning the section. */
grid-column: 1 / -1;
width: 100%;
display: grid;
grid-template-columns: 1.55fr 1fr;
gap: 18px;
align-items: stretch;
margin: 0 0 46px;
min-height: 400px;
}
/* ---------- left: photo with the heading over it ---------- */
.isr-ph-left {
position: relative;
overflow: hidden;
border-radius: 12px;
display: flex;
align-items: center;
padding: 48px 50px;
border: 1px solid rgba(255,255,255,.10);
background:
radial-gradient(120% 140% at 12% 50%, rgba(26,95,212,.45) 0%, rgba(26,95,212,0) 68%),
linear-gradient(150deg, #122947 0%, #0b1830 60%, #08111d 100%);
}
.isr-ph-photo {
position: absolute;
inset: 0;
background-position: 50% 45%;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
}
/* scrim so the heading stays readable on any photo */
.isr-ph-left::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, rgba(6,13,23,.90) 0%, rgba(6,13,23,.72) 48%, rgba(6,13,23,.42) 100%),
linear-gradient(180deg, rgba(6,13,23,.25) 0%, rgba(6,13,23,.55) 100%);
}
.isr-ph-copy { position: relative; z-index: 2; min-width: 0; }
.isr-ph-eyebrow {
display: inline-block;
font-size: 12px; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: #6ea6ff; margin-bottom: 12px;
}
.isr-ph-eyebrow::before {
content: ""; display: inline-block;
width: 26px; height: 2px; background: #1a5fd4;
vertical-align: middle; margin-right: 10px;
}
.isr-pagehead h1 {
color: #fff;
font-size: clamp(30px, 3.9vw, 48px);
line-height: 1.04;
margin: 0 0 12px;
text-wrap: balance;
text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.isr-pagehead h1 .isr-ph-b { color: #4d94ff; }
.isr-ph-sub {
color: #cfdcee;
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.55;
max-width: 46ch;
margin: 0;
text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
.isr-ph-rule {
display: block; width: 74px; height: 3px; margin-top: 18px;
background: linear-gradient(90deg, #1a5fd4, #e86a1a); border-radius: 2px;
}
/* ---------- right: service emblem, same height ---------- */
.isr-ph-emblem {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 18px 24px;
text-align: center;
}
.isr-ph-emblem-art { position: relative; z-index: 1; display: block; color: #4d94ff; }
.isr-ph-emblem-art svg { width: 128px; height: 128px; display: block; }
.isr-ph-emblem-label {
position: relative; z-index: 1;
color: #fff;
font-size: 14px; font-weight: 700;
letter-spacing: .13em; text-transform: uppercase;
}
/* the service's key selling point, under the emblem */
.isr-ph-emblem-point {
position: relative; z-index: 1;
display: block;
color: #97a9c2;
font-size: 14.5px;
line-height: 1.55;
max-width: 30ch;
margin-top: -4px;
}
/* short accent rule tying the emblem to the brand */
.isr-ph-emblem-label::after {
content: "";
display: block;
width: 40px; height: 2px;
margin: 12px auto 0;
background: linear-gradient(90deg, #1a5fd4, #e86a1a);
border-radius: 2px;
}
@media (max-width: 900px) {
.isr-pagehead {
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 30px;
min-height: 0;
}
.isr-ph-left { padding: 30px 22px; min-height: 250px; }
.isr-pagehead h1 { font-size: clamp(27px, 7.4vw, 34px); }
.isr-ph-sub { font-size: 15px; max-width: 40ch; }
.isr-ph-emblem { padding: 20px 16px 4px; gap: 10px; }
.isr-ph-emblem-art svg { width: 76px; height: 76px; }
.isr-ph-emblem-label { font-size: 13px; }
.isr-ph-emblem-point { font-size: 14px; max-width: 34ch; }
}
/* ==========================================================================
ALL SERVICES - mobile (2026-08-06)
Note on the selectors above: they were originally written against
.rt-svc. When the page bootstrap was rewritten the marker class became
.is-inner, which silently disabled all 36 of those rules - including the
one-column grid fix - and this page reverted to two 159px columns on a
phone. They are now all .is-inner. Anything added here uses the same hook.
The React bundle writes grid-template-columns inline on .services-grid,
which outranks any plain rule, so !important is required to beat it.
========================================================================== */
@media (max-width: 900px) {
/* the inline 2-column value from the bundle */
html.is-inner .services-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
html.is-inner .featured-service-card {
grid-template-columns: 1fr !important;
}
/* cards */
html.is-inner .grid-service-card,
html.is-inner .featured-service-card {
border-radius: 12px;
overflow: hidden;
}
html.is-inner .grid-service-card > img,
html.is-inner .featured-service-image img {
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
}
html.is-inner .grid-service-card-body,
html.is-inner .featured-service-body { padding: 18px 16px 20px !important; }
/* icon + title share a flex row; at 160px the h3 broke onto four lines */
html.is-inner .grid-service-card-body > div:first-child {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
html.is-inner .grid-service-card-body > div:first-child > span { flex: 0 0 auto; }
html.is-inner .grid-service-card-body h3,
html.is-inner .featured-service-body h3 {
font-size: 19px !important;
line-height: 1.15 !important;
margin: 0 !important;
overflow-wrap: anywhere;
}
html.is-inner .grid-service-card-body p,
html.is-inner .featured-service-body p {
font-size: 14.5px !important;
line-height: 1.55 !important;
margin: 0 0 14px !important;
}
html.is-inner .service-tags {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-bottom: 16px !important;
}
html.is-inner .service-tag {
font-size: 12.5px !important;
white-space: nowrap;
padding: 6px 10px !important;
}
/* tap targets */
html.is-inner .service-card-link,
html.is-inner .featured-service-body .btn-primary {
min-height: 44px;
display: inline-flex;
align-items: center;
gap: 8px;
}
html.is-inner .featured-service-body .btn-primary {
width: 100%;
justify-content: center;
}
/* section rhythm on a phone */
html.is-inner .section-padding { padding-top: 34px !important; padding-bottom: 34px !important; }
html.is-inner .products-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
}