/* ==========================================================================
v4 UNIFY — one brand accent, one type scale, cleaning-page furniture on
every page. Loaded last on every v3/b page (after variant.css).
v4.2: division colours restored (Brice, 5 Sep 2026). Structure, fonts, footer and imagery unchanged.
Skyline Black #111, Dark Gold #B8953E, Warm Gray #8C8C8C, Light Gray #F5F5F5.
Display: Arial Black. Body: Calibri.
========================================================================== */
/* ---------- 1. Accent: each division keeps its own colour (variant.css body[data-accent]) ---------- */
/* FAQ: question text sits left, next to the icon (was pushed to the far right) */
.cmp-faq-item summary { justify-content: flex-start; text-align: left; font-size: 15px; line-height: 1.35; }
.cmp-faq-item summary .cmp-faq-icon { order: 2; margin-left: auto; }
/* ---------- 2. Logo: wordmark at the brand minimum digital width (120 px) ---------- */
.nav { padding-top: 14px; padding-bottom: 14px; }
.nav-brand img.nav-logo-img { height: 68px; width: auto; }
@media (max-width: 1180px) { .nav-brand img.nav-logo-img { height: 58px; } }
@media (max-width: 640px) { .nav-brand img.nav-logo-img { height: 48px; } }
.cmp-footer-mark img.footer-logo-img { height: 70px; }
/* ---------- 3. One type scale ---------- */
.cine-hero-headline,
.cine-hero.has-carousel .cine-hero-headline {
font-size: clamp(2.3rem, 4.6vw, 4.9rem);
line-height: 0.98;
letter-spacing: -0.02em;
max-width: 24ch;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
@media (max-width: 900px) { .cine-hero-headline, .cine-hero.has-carousel .cine-hero-headline { font-size: clamp(2rem, 7.2vw, 3.2rem); max-width: none; } }
@media (max-width: 480px) { .cine-hero-headline, .cine-hero.has-carousel .cine-hero-headline { font-size: clamp(1.75rem, 7.6vw, 2.3rem); } }
.cine-hero-lede { font-size: clamp(16px, 1.15vw, 19px); color: var(--ink-100); max-width: 52ch; }
@media (max-width: 480px) { .cine-hero-lede { font-size: 15px; } }
.cine-head h2, .cine-head h2.headline-gradient,
.cine-panel h2, .cine-ed h2, .cine-fullscreen h2,
.cine-contact-hero h1, .app-hero h1,
.cine-cta .headline-editorial, .headline-editorial {
font-size: clamp(1.9rem, 3.4vw, 3.3rem);
line-height: 1.02;
letter-spacing: -0.02em;
max-width: 22ch;
}
.cine-cta .headline-editorial { margin-left: auto; margin-right: auto; }
.cmp-division-title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); text-transform: uppercase; }
.material-tile h3, .sector-tile figcaption h3, .feature-card h3, .cmp-surface h3, .cmp-photo-card h3, .u-step h3 { font-family: var(--font-display); font-size: 15px; letter-spacing: 0; }
.editorial-body, .cine-ed-body p, .cine-panel p, .cmp-division-lede, .cine-fullscreen p { color: var(--ink-100); font-size: clamp(16px, 1.1vw, 18px); line-height: 1.6; opacity: 1; }
.material-tile p, .feature-card p, .cmp-surface p, .cmp-photo-card p, .cmp-photo-tile p, .cine-static-card p, .cmp-vert p, .cmp-vert-body p { color: var(--ink-200); font-size: 15px; line-height: 1.55; }
.eyebrow-glyph, .cine-hero-eyebrow { font-size: 11px; letter-spacing: 0.2em; }
/* ---------- 4. Hero: one treatment, optional status line for capability previews ---------- */
.cine-hero-scrim, .hero-slide-scrim {
background:
linear-gradient(180deg, rgba(var(--accent-rgb),0.18) 0%, rgba(var(--accent-rgb),0.08) 30%, rgba(5,5,7,0.66) 70%, rgba(5,5,7,0.94) 100%),
linear-gradient(90deg, rgba(5,5,7,0.6) 0%, rgba(5,5,7,0.08) 62%);
}
.hero-status {
display: inline-flex; align-items: center; gap: 10px;
margin: 0 0 var(--space-6);
padding: 8px 14px 8px 12px;
border: 1px solid rgba(var(--accent-rgb),0.45);
border-radius: 999px;
background: rgba(5,5,7,0.5);
font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-100);
}
.hero-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-400); flex: 0 0 auto; }
.hero-one-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.cine-hero-foot { align-items: flex-end; }
/* ---------- 5. Stat strip: numbers only, never break mid-word ---------- */
.cmp-stat-num, .cmp-stats.is-centered .cmp-stat-num {
font-size: clamp(34px, 3.8vw, 64px);
line-height: 1;
letter-spacing: -0.02em;
white-space: nowrap;
overflow-wrap: normal;
color: var(--ink-100);
}
.cmp-stat-num small { font-size: 0.5em; letter-spacing: 0; color: var(--accent-400); margin-left: 2px; }
.cmp-stat-label { color: var(--ink-400); }
@media (max-width: 560px) {
.cmp-stats, .cmp-stats.is-centered { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); }
.cmp-stats.is-centered .cmp-stat { padding: var(--space-4) var(--space-2); border-left: 0; }
.cmp-stat-num, .cmp-stats.is-centered .cmp-stat-num { font-size: 30px; }
}
/* ---------- 6. Process steps (How it works) ---------- */
.u-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-5); margin-top: var(--space-10); }
.u-step { padding: var(--space-6); border: 1px solid var(--border-faint); border-radius: var(--r-md, 12px); background: rgba(255,255,255,0.02); }
.u-step-num { display: block; font-family: var(--font-display); color: var(--accent-400); font-size: 12px; letter-spacing: 0.22em; margin-bottom: 10px; }
.u-step h3 { text-transform: uppercase; color: var(--ink-100); margin: 0 0 8px; line-height: 1.3; }
.u-step p { color: var(--ink-200); font-size: 14.5px; line-height: 1.55; margin: 0; }
/* ---------- 7. Shared furniture polish ---------- */
.cmp-surface-icon { color: var(--accent-400); }
.section-atmos::after {
background:
radial-gradient(120% 80% at 50% 0%, rgba(var(--accent-rgb),0.10) 0%, rgba(5,5,7,0) 60%),
linear-gradient(180deg, rgba(5,5,7,0.74) 0%, rgba(5,5,7,0.8) 55%, rgba(5,5,7,0.88) 100%);
}
.cine-section + .cine-section { border-top: 1px solid rgba(var(--accent-rgb),0.10); }
.material-tile img { height: 200px; }
.footer-brand .footer-tagline { color: var(--accent-400) !important; }
.wa-float { background: #25D366; }
/* Sector rows close cleanly: 4 or 8 tiles run four-up on wide screens */
@media (min-width: 1100px) { .sector-grid.is-4, .sector-grid.is-8 { grid-template-columns: repeat(4, 1fr); } .sector-grid.is-4 .sector-tile img, .sector-grid.is-8 .sector-tile img { height: 220px; } }
/* ---------- 8. Mobile: persistent Contact in the header, horizontal scrollers ---------- */
.nav-mobile-cta { display: none; }
@media (max-width: 1024px) {
.nav-inner { gap: 10px; }
.nav-mobile-cta {
display: inline-flex; align-items: center;
margin-left: auto;
padding: 10px 14px;
background: var(--accent-400); color: #08080A;
border-radius: 999px;
font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
text-decoration: none;
}
.nav.is-open .nav-mobile-cta { display: none; }
}
@media (max-width: 640px) {
.sector-grid, .material-grid, .feature-grid {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
gap: 14px; padding: 4px 4px 12px; margin-left: -4px; margin-right: -4px;
-webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.sector-grid > *, .material-grid > *, .feature-grid > * { flex: 0 0 80%; scroll-snap-align: start; }
.sector-tile img { height: 190px; }
.cine-section { padding: 64px 0; }
.cine-hero-content { padding-bottom: 48px; }
}
/* ==========================================================================
v4.1 — page-flow consistency pass (5 Sep 2026)
========================================================================== */
/* 9. Fonts: every numeral, kicker and note uses the brand display or body face — no monospace, no system fallbacks */
.material-num, .sector-num, .cmp-photo-card-num, .cmp-photo-tile-kicker, .spec-chip-label, .u-step-num,
.cine-panel-num, .cine-step-num, .cine-hcard-num, .cine-static-card-num, .cmp-spec-label, .cmp-tier-kicker {
font-family: var(--font-display); letter-spacing: 0.18em; font-size: 11px;
}
.credential-note, .credential-note a { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--ink-200); }
.credential-note a { color: var(--gold-400); text-decoration: underline; text-underline-offset: 3px; }
.credential-pill { font-family: var(--font-display); }
.footer-creds { font-family: var(--font-body); }
body, input, select, textarea, button { font-family: var(--font-body); }
.btn, .nav-cta, .nav-mobile-cta, .btn-link, .btn-video { font-family: var(--font-display); }
/* 10. Stat strip: numbers never wrap or clip; labels wrap by word only, three words or fewer */
.cmp-stats.is-centered { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-6); }
.cmp-stats.is-centered .cmp-stat { padding: var(--space-6) var(--space-3); min-width: 0; }
.cmp-stat-num, .cmp-stats.is-centered .cmp-stat-num {
font-size: clamp(30px, 3.3vw, 56px);
white-space: nowrap; overflow: visible; max-width: 100%;
}
.cmp-stat-num small { font-size: 0.48em; }
.cmp-stat-label {
font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-400); max-width: 20ch; margin: 8px auto 0;
overflow-wrap: normal; word-break: keep-all; hyphens: none; line-height: 1.45;
}
@media (max-width: 1100px) { .cmp-stats.is-centered { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cmp-stat-num, .cmp-stats.is-centered .cmp-stat-num { font-size: 28px; } .cmp-stat-label { font-size: 10px; } }
/* 11. Background imagery reads on every section — same opacity everywhere */
.section-atmos img { opacity: 0.44; filter: grayscale(0.35) brightness(0.9) contrast(1.06); }
.section-atmos::after {
background:
radial-gradient(120% 80% at 50% 0%, rgba(var(--accent-rgb),0.10) 0%, rgba(5,5,7,0) 60%),
linear-gradient(180deg, rgba(5,5,7,0.70) 0%, rgba(5,5,7,0.76) 55%, rgba(5,5,7,0.86) 100%);
}
.section-atmos.is-strong img { opacity: 0.56; filter: grayscale(0.2) brightness(0.92) contrast(1.08); }
.section-atmos.is-strong::after {
background:
radial-gradient(130% 90% at 50% 10%, rgba(var(--accent-rgb),0.14) 0%, rgba(5,5,7,0) 62%),
linear-gradient(180deg, rgba(5,5,7,0.56) 0%, rgba(5,5,7,0.68) 50%, rgba(5,5,7,0.84) 100%);
}
.cine-section.has-atmos + .cine-section.has-atmos { border-top: 1px solid rgba(var(--accent-rgb),0.12); }
/* 12. Fleet cards: "Best for" bullets */
.fleet-best-label { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-400); margin: 14px 0 6px !important; }
.fleet-best { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.fleet-best li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.45; color: var(--ink-200); }
.fleet-best li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-400); }
.cmp-vert-grid .cmp-vert-body { padding-bottom: var(--space-6); }
/* 13. Footer: tighter — one row of columns, smaller type, less padding */
.footer { padding: 44px 0 20px; }
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 20px 24px; margin-bottom: 22px; }
.cmp-footer-mark img.footer-logo-img { height: 46px; margin-bottom: 8px; }
.footer-brand .footer-tagline { font-size: 13px; margin: 0 0 6px; }
.footer-brand p:not(.footer-tagline) { font-size: 12.5px; line-height: 1.5; max-width: 38ch; margin: 0; }
.footer-creds { font-size: 11.5px; line-height: 1.5; margin-top: 8px; }
.footer-col h3 { font-size: 10px; letter-spacing: 0.22em; margin-bottom: 8px; }
.footer-col ul { gap: 4px; }
.footer-col a, .footer-col .footer-soon { font-size: 12.5px; line-height: 1.4; }
.footer-colstack { gap: 16px; }
.footer-base { padding-top: 12px; font-size: 11px; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-grid .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer { padding: 32px 0 16px; } }
/* ==========================================================================
v4.3 — 5 Sep 2026 (afternoon): nav legibility, homepage division colours,
key-features montage, carousel
========================================================================== */
/* 14. Nav: readable over any hero — darker top band, larger white labels with a shadow */
.nav { background: linear-gradient(180deg, rgba(5,5,7,0.86) 0%, rgba(5,5,7,0.58) 55%, rgba(5,5,7,0) 100%); padding-top: 4px; }
.nav.is-scrolled { background: rgba(5,5,7,0.94); }
.nav-link, .nav-group-toggle { font-size: clamp(11.5px, 0.9vw, 13.5px); letter-spacing: 0.12em; color: #FFFFFF; text-shadow: 0 1px 8px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.6); }
.nav-label > span { color: #FFFFFF; }
.nav-link:hover, .nav-group-toggle:hover, .nav-link.is-active { color: var(--accent-400); }
.nav-cta { font-size: 12px; padding: 13px 20px; box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6); }
@media (min-width: 1600px) { .nav-link, .nav-group-toggle { font-size: 14px; } }
/* 15. Homepage division headings carry their division colour */
.cmp-division.is-div-cleaning .cmp-division-title { color: var(--gold-400); }
.cmp-division.is-div-aerial .cmp-division-title { color: var(--blue-400); }
.cmp-division.is-div-response .cmp-division-title { color: var(--red-400); }
.cmp-division.is-div-aerial .cmp-vert .cmp-vert-kicker, .cmp-division.is-div-aerial .cmp-vert .cmp-vert-link { color: var(--blue-400); }
.cmp-division.is-div-response .cmp-vert .cmp-vert-kicker, .cmp-division.is-div-response .cmp-vert .cmp-vert-link { color: var(--red-400); }
/* 16. Key features & the numbers: one picture-tile montage (numbers + features) */
.mont-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: var(--space-10); }
.mont-tile { position: relative; min-height: 250px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-1); isolation: isolate; display: flex; align-items: flex-end; background: var(--surface-2); }
.mont-tile.is-span2 { grid-column: span 2; min-height: 300px; }
.mont-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.6s var(--ease-out); }
.mont-tile:hover img { transform: scale(1.04); }
.mont-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,7,0.12) 0%, rgba(5,5,7,0.52) 45%, rgba(5,5,7,0.93) 100%); }
.mont-body { padding: 22px 24px; width: 100%; }
.mont-eyebrow { display: block; font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-400); margin-bottom: 8px; }
.mont-num { font-family: var(--font-display); font-size: clamp(40px, 4.4vw, 68px); line-height: 1; letter-spacing: -0.02em; color: #FFFFFF; }
.mont-num small { font-size: 0.42em; color: var(--accent-400); margin-left: 4px; letter-spacing: 0; }
.mont-label { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-300); margin-top: 6px; }
.mont-title { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.005em; text-transform: uppercase; color: #FFFFFF; margin: 0 0 6px; line-height: 1.15; }
.mont-text { font-size: 14px; line-height: 1.5; color: var(--ink-200); max-width: 46ch; margin: 0; }
.mont-spec { display: inline-block; margin-top: 10px; font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-400); }
.mont-tile.is-num .mont-title { font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--ink-100); margin-top: 10px; }
.mont-tile.is-num .mont-title em { font-style: normal; color: var(--accent-400); }
@media (max-width: 960px) { .mont-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mont-grid { grid-template-columns: 1fr; } .mont-tile.is-span2 { grid-column: span 1; } .mont-tile { min-height: 220px; } }
/* 17. FAQ — option D: sidebar index + search + documentation list */
.fq-hero { min-height: 60vh; }
.fq-wrap { padding-top: 56px; }
.fq-lay { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
.fq-side { position: sticky; top: 96px; }
.fq-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-1); border-radius: 12px; padding: 11px 14px; background: rgba(255,255,255,0.03); color: var(--ink-400); margin-bottom: 20px; }
.fq-search svg { width: 18px; height: 18px; flex: 0 0 auto; }
.fq-search input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font-family: var(--font-body); font-size: 15px; }
.fq-search input::placeholder { color: var(--ink-400); }
.fq-search:focus-within { border-color: var(--gold-400); }
.fq-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 10px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-200); transition: background var(--t-fast), color var(--t-fast); }
.fq-nav a b { width: 10px; height: 10px; border-radius: 2px; background: var(--c); flex: 0 0 auto; }
.fq-nav a span { margin-left: auto; font-size: 11px; color: var(--ink-400); }
.fq-nav a:hover, .fq-nav a.is-on { background: rgba(255,255,255,0.05); color: #fff; }
.fq-nav a.is-empty { opacity: 0.4; }
.fq-none { margin-top: 18px; font-size: 14px; color: var(--ink-300); line-height: 1.5; }
.fq-none a { color: var(--gold-400); text-decoration: underline; text-underline-offset: 3px; }
.fq-group { margin-bottom: 56px; scroll-margin-top: 110px; }
.fq-h { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; letter-spacing: -0.01em; color: #fff; margin: 0 0 6px; }
.fq-lede { margin: 0; color: var(--ink-300); font-size: 15px; max-width: 70ch; }
.fq-ln { height: 3px; width: 64px; background: var(--c); margin: 14px 0 22px; }
.fq-q { padding: 18px 0; border-top: 1px solid var(--line-1); }
.fq-q:last-child { border-bottom: 1px solid var(--line-1); }
.fq-tag { display: inline-block; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); margin-bottom: 8px; }
.fq-q h3 { font-family: var(--font-display); font-size: 17px; text-transform: none; letter-spacing: 0; color: #fff; margin: 0 0 8px; line-height: 1.3; }
.fq-q p { margin: 0; color: var(--ink-200); font-size: 15px; line-height: 1.6; max-width: 72ch; }
@media (max-width: 900px) {
.fq-lay { grid-template-columns: 1fr; gap: 28px; }
.fq-side { position: static; }
.fq-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.fq-nav a { padding: 9px 12px; border: 1px solid var(--line-1); }
.fq-nav a span { margin-left: 6px; }
}
/* 18. Mobile pass — less stacking, fewer side-scrollers, tighter rhythm (5 Sep 2026) */
@media (max-width: 640px) {
:root { --v-section-pad: 44px; }
.container { padding-left: 18px; padding-right: 18px; }
.cine-hero { min-height: 92vh; }
.cine-hero-content { padding-top: 96px; padding-bottom: 36px; }
.cine-hero-headline { font-size: clamp(1.75rem, 8vw, 2.3rem); max-width: 100%; }
.cine-hero-lede { font-size: 15px; }
.hero-one-cta { display: grid; gap: 8px; width: 100%; }
.hero-one-cta .btn { width: 100%; justify-content: center; }
.cine-head { margin-bottom: 22px; }
.cine-head h2, .cine-head h2.headline-gradient { font-size: clamp(1.5rem, 6.8vw, 1.9rem); }
.cine-head .editorial-body, .editorial-body { font-size: 15px; }
/* stats: 2 x 2 */
.cmp-stats.is-centered { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.cmp-stats.is-centered .cmp-stat { border-left: 0; padding: 14px 4px; }
.cmp-stat-num, .cmp-stats.is-centered .cmp-stat-num { font-size: 30px; }
.cmp-stat-label { font-size: 9.5px; max-width: 16ch; }
/* what we do / who we serve: two-column grids, not side-scrollers */
.material-grid, .sector-grid, .sector-grid.is-4, .sector-grid.is-8, .sector-grid.is-3, .sector-grid.is-6 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; overflow: visible !important; scroll-snap-type: none !important; padding: 0 !important; }
.material-tile, .sector-tile { flex: none !important; width: auto !important; min-width: 0 !important; scroll-snap-align: none !important; }
.material-tile img { height: 120px; }
.sector-tile img { height: 110px !important; }
.material-tile figcaption { padding: 10px 12px 12px; }
.material-tile h3 { font-size: 13px; }
.material-tile p { font-size: 12px; line-height: 1.4; }
.sector-tile figcaption { padding: 10px 12px 12px !important; }
.sector-tile figcaption h3 { font-size: 12px !important; }
.material-num, .sector-num { font-size: 9.5px; margin-bottom: 4px; }
/* problem cards: compact */
.cmp-surface-grid, .cmp-surface-grid.is-4up { grid-template-columns: 1fr; gap: 10px; }
.cmp-surface { padding: 16px 16px 18px; }
.cmp-surface h3 { font-size: 14px; margin: 8px 0 6px; }
.cmp-surface p { font-size: 13.5px; line-height: 1.5; }
.cmp-surface-icon.is-svg { width: 32px; height: 32px; margin-bottom: 4px; }
/* montage: two columns, numbers span both */
.mont-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mont-tile { min-height: 190px; }
.mont-tile.is-span2 { grid-column: span 2; min-height: 210px; }
.mont-body { padding: 14px 14px; }
.mont-num { font-size: 40px; }
.mont-title { font-size: 13px; }
.mont-text { font-size: 12.5px; line-height: 1.45; }
.mont-spec { font-size: 9.5px; margin-top: 8px; }
.mont-tile.is-num .mont-title { font-size: 13px; }
/* steps and safety */
.u-steps { grid-template-columns: 1fr; gap: 8px; }
.u-step { padding: 14px 16px; }
.u-step h3 { font-size: 14px; }
.u-step p { font-size: 13.5px; }
/* compare table */
.cmp-vs-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
.cmp-vs-attr { font-size: 11px; color: var(--ink-400); }
/* fleet */
.fleet-best li { font-size: 13px; }
/* CTA + footer */
.cine-cta .headline-editorial { font-size: clamp(1.5rem, 7vw, 2rem); }
.footer { padding: 28px 0 14px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.footer-grid .footer-brand { grid-column: 1 / -1; }
.footer-brand p:not(.footer-tagline) { max-width: none; }
/* homepage */
.cmp-vert-grid.cmp-vert-grid-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cmp-vert-body { padding: 12px; }
.cmp-vert-body h3 { font-size: 14px; }
.cmp-vert-body p { font-size: 12px; }
.cmp-division-title { font-size: 22px; }
.credential-row { gap: 6px; }
/* faq */
.fq-h { font-size: 22px; }
.fq-q h3 { font-size: 15px; }
.fq-q p { font-size: 14px; }
}
/* 19. Systems dropdown link */
.nav-panel-link[data-svc="systems"] { --svc-rgb: 148,163,184; color: var(--silver-400); }
/* 20. Footer on phones: three tight columns, small type */
@media (max-width: 640px) {
.footer { padding: 24px 0 12px; }
.footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 12px 10px; }
.footer-grid .footer-brand { grid-column: 1 / -1; }
.cmp-footer-mark img.footer-logo-img { height: 36px; }
.footer-brand .footer-tagline { font-size: 12px; }
.footer-brand p:not(.footer-tagline) { font-size: 11.5px; line-height: 1.45; }
.footer-creds { font-size: 10.5px; }
.footer-col h3 { font-size: 9px; letter-spacing: 0.16em; margin-bottom: 6px; }
.footer-col ul { gap: 3px; }
.footer-col a, .footer-col .footer-soon { font-size: 11.5px; line-height: 1.35; }
.footer-colstack { gap: 10px; }
.footer-base { font-size: 10px; padding-top: 10px; }
}
/* ==========================================================================
21. Accessibility pass (11 Sep 2026) — keyboard, contrast, motion, forms
========================================================================== */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 8px; background: var(--gold-400); color: #08080A; font-family: var(--font-display); font-size: 13px; text-decoration: none; }
.skip-link:focus { top: 12px; outline: 3px solid #fff; }
:focus-visible { outline: 3px solid var(--gold-400) !important; outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .nav-cta:focus-visible, .wa-float:focus-visible { outline: 3px solid #FFFFFF !important; outline-offset: 3px; }
/* Small grey text raised to at least 4.5:1 on the page background */
.cmp-stat-label, .mont-label, .footer-creds, .footer-base, .cmp-spec-label, .fq-nav a span, .material-num, .sector-num, .nav-soon, .form-note, .cmp-vert-kicker, .fleet-best-label, .spec-chip-label { color: #A7A7B0; }
.footer-col a { color: #D6D6DD; }
.editorial-body, .cine-hero-lede, .material-tile p, .mont-text, .fq-q p, .fq-lede, .u-step p, .cmp-surface p, .feature-card p { color: #D9D9E0; }
.mont-tile::after { background: linear-gradient(180deg, rgba(5,5,7,0.18) 0%, rgba(5,5,7,0.62) 45%, rgba(5,5,7,0.95) 100%); }
/* Respect reduced motion: no carousel cross-fade, no marquee, no reveals */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
.serve-marquee-track { animation: none !important; transform: none !important; flex-wrap: wrap; }
}
/* Form consent */
/* padding (not just margin) so the whole row — not just the 20px
checkbox — is at least a ~44px-tall tap target on touch devices,
per WCAG 2.5.5 / mobile platform guidance. */
.form-consent { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0; padding: 11px 0; font-size: 14px; line-height: 1.5; color: #D9D9E0; cursor: pointer; }
.form-consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold-400); flex: 0 0 auto; }
.form-consent a { color: var(--gold-400); text-decoration: underline; text-underline-offset: 3px; }
.form-req { color: var(--gold-400); }
.form-note { font-size: 12.5px; color: #A7A7B0; margin: 0 0 16px; }
/* Larger touch targets on phones */
@media (max-width: 640px) { .nav-panel-link, .footer-col a, .fq-nav a { min-height: 40px; display: flex; align-items: center; } }
/* ==========================================================================
22. v5 register — site-wide (18 Sep 2026). Moved from index-v5.html.
========================================================================== */
/* ---- v5 homepage: defense-tech register. Black, white, one gold. Big type, few words, product grid. ---- */
.v5 .cine-hero { min-height: 100vh; align-items: center; }
.v5 .cine-hero-scrim { background: linear-gradient(180deg, rgba(5,5,7,0.55) 0%, rgba(5,5,7,0.25) 40%, rgba(5,5,7,0.9) 100%); }
@keyframes v5tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.v5-hero-inner { width: 100%; padding-top: 140px; padding-bottom: 80px; }
.v5-h1 { font-family: var(--font-display); font-size: clamp(2.6rem, 7.4vw, 7.6rem); line-height: 0.94; letter-spacing: -0.035em; text-transform: uppercase; color: #fff; max-width: 14ch; margin: 0; }
.v5-h1 em { font-style: normal; color: var(--gold-400); }
.v5-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 36px; flex-wrap: wrap; }
.v5-lede { font-size: clamp(1rem, 1.35vw, 1.25rem); color: #E9E9EE; max-width: 46ch; line-height: 1.5; margin: 0; }
.v5-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.v5-band { border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); background: #050507; }
.v5-band .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.v5-stat { padding: 34px 24px; border-left: 1px solid rgba(255,255,255,0.1); }
.v5-stat:first-child { border-left: 0; }
.v5-stat b { display: block; font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1; color: #fff; letter-spacing: -0.02em; }
.v5-stat b small { font-size: 0.45em; color: var(--gold-400); margin-left: 4px; }
.v5-stat span { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #A7A7B0; }
.v5-sec { padding: clamp(72px, 8vw, 128px) 0; }
.v5-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.v5-kicker { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 14px; display: block; }
.v5-h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 4.2vw, 4rem); line-height: 0.98; letter-spacing: -0.03em; text-transform: uppercase; color: #fff; margin: 0; }
.v5-h2 em { font-style: normal; color: var(--gold-400); }
.v5-head p { margin: 0; color: #D9D9E0; font-size: 1.05rem; line-height: 1.55; max-width: 52ch; }
/* product grid */
.v5-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); }
.v5-tile { position: relative; background: #050507; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; }
.v5-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.55; transition: transform 0.6s var(--ease-out), opacity 0.4s; filter: saturate(0.85); }
.v5-tile:hover img { transform: scale(1.04); opacity: 0.8; }
.v5-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,7,0.05) 20%, rgba(5,5,7,0.9) 100%); }
.v5-tile-body { padding: 22px 22px 24px; }
.v5-tile small { display: block; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 8px; }
.v5-tile h3 { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 6px; line-height: 1.1; }
.v5-tile p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #D9D9E0; }
.v5-tile .v5-arrow { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: #fff; }
.v5-tile.is-soon { pointer-events: none; }
.v5-tile.is-soon .v5-arrow { display: none; }
.v5-tile.is-soon small::after { content: " · coming soon"; color: #A7A7B0; }
/* architecture */
.v5-arch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); }
.v5-arch div { background: #050507; padding: 30px 26px 34px; min-height: 260px; }
.v5-arch b { display: block; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.2em; color: var(--gold-400); margin-bottom: 18px; }
.v5-arch h3 { font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; color: #fff; margin: 0 0 12px; line-height: 1.1; }
.v5-arch p { margin: 0; color: #D9D9E0; font-size: 14.5px; line-height: 1.55; }
/* missions */
.v5-missions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v5-mission { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 4px; isolation: isolate; display: flex; align-items: flex-end; }
.v5-mission img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.6s var(--ease-out); }
.v5-mission:hover img { transform: scale(1.05); }
.v5-mission::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,7,0) 40%, rgba(5,5,7,0.85) 100%); }
.v5-mission h3 { font-family: var(--font-display); font-size: 1.05rem; text-transform: uppercase; color: #fff; margin: 0; padding: 20px; letter-spacing: 0.02em; }
/* systems panel */
.v5-panel { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); isolation: isolate; min-height: 440px; display: grid; align-items: center; }
.v5-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.6; }
.v5-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,5,7,0.94) 0%, rgba(5,5,7,0.7) 55%, rgba(5,5,7,0.2) 100%); }
.v5-panel-body { padding: clamp(32px, 5vw, 72px); max-width: 640px; }
.v5-panel p { color: #E9E9EE; font-size: 1.05rem; line-height: 1.55; margin: 16px 0 24px; }
/* credentials */
.v5-creds { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: center; padding: 26px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #D6D6DD; }
.v5-creds i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-400); display: inline-block; margin-right: 10px; }
/* cta */
.v5-cta { padding: clamp(80px, 10vw, 140px) 0; text-align: center; border-top: 1px solid rgba(255,255,255,0.1); }
.v5-cta .v5-h2 { max-width: 18ch; margin: 0 auto 22px; }
@media (max-width: 1100px) { .v5-grid, .v5-arch { grid-template-columns: repeat(2, 1fr); } .v5-band .container { grid-template-columns: repeat(2, 1fr); } .v5-stat:nth-child(3) { border-left: 0; } .v5-head { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .v5-grid, .v5-arch, .v5-missions { grid-template-columns: 1fr; } .v5-band .container { grid-template-columns: repeat(2, 1fr); } .v5-stat { padding: 22px 14px; } .v5-hero-inner { padding-top: 120px; } .v5-tile { min-height: 240px; } .v5-arch div { min-height: 0; } }
/* ---- v5 register applied to every service page ---- */
.v5, .is-service, .is-faq, .is-contact { --gold: var(--gold-400); }
/* Hero: plain white display headline with one accent em; no gradient text anywhere */
.headline-gradient, .cine-head h2.headline-gradient, h1.headline-gradient, h2.headline-gradient, .headline-gradient em, .cine-head h2.headline-gradient em {
background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: #FFFFFF !important; }
.headline-gradient em, .cine-head h2 em, .cine-hero-headline em, .headline-editorial em { color: var(--accent-400) !important; font-style: normal; }
.cine-hero-headline { font-size: clamp(2.4rem, 6.2vw, 6.4rem); line-height: 0.94; letter-spacing: -0.035em; max-width: 15ch; }
.cine-hero { align-items: center; }
.cine-hero-content { padding-top: 120px; padding-bottom: 72px; }
.cine-hero-eyebrow, .eyebrow-glyph { font-size: 11px; letter-spacing: 0.24em; }
.hero-status { border-color: rgba(255,255,255,0.22); background: rgba(5,5,7,0.5); }
.cine-hero-scrim, .hero-slide-scrim { background: linear-gradient(180deg, rgba(5,5,7,0.55) 0%, rgba(5,5,7,0.25) 40%, rgba(5,5,7,0.9) 100%) !important; }
/* Ticker band under the nav on every page */
/* Section heads: two-column head (title left, lede right) like the homepage */
.cine-head { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 36px; }
.cine-head > .eyebrow-glyph { grid-column: 1; }
.cine-head h2 { grid-column: 1; font-size: clamp(1.9rem, 4.2vw, 4rem); line-height: 0.98; letter-spacing: -0.03em; max-width: 18ch; }
.cine-head .editorial-body { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; max-width: 52ch; color: #D9D9E0; }
@media (max-width: 1100px) { .cine-head { grid-template-columns: 1fr; } .cine-head .editorial-body { grid-column: 1; grid-row: auto; margin-top: 14px; } }
/* Stat strip: the homepage band */
.cmp-stats.is-centered { border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); gap: 0 !important; max-width: none !important; }
.cmp-stats.is-centered .cmp-stat { border-left: 1px solid rgba(255,255,255,0.1); padding: 34px 24px !important; }
.cmp-stats.is-centered .cmp-stat:first-child { border-left: 0; }
.cmp-stat-num, .cmp-stats.is-centered .cmp-stat-num { font-size: clamp(2rem, 3.4vw, 3.4rem) !important; }
/* Tiles: square corners, hairline grid, image dimmed until hover (homepage v5-tile look) */
.material-grid, .sector-grid { gap: 2px !important; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); }
.material-tile, .sector-tile, .mont-tile, .cmp-surface, .u-step, .cmp-vert, .feature-card { border-radius: 0 !important; border: 0 !important; background: #131318; }
.mont-grid { gap: 2px !important; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); }
.cmp-surface-grid, .u-steps, .cmp-vert-grid { gap: 2px !important; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); }
.material-tile img { filter: saturate(0.85); opacity: 0.85; transition: opacity 0.4s, transform 0.6s var(--ease-out); }
.material-tile:hover img { opacity: 1; }
/* Loading skeleton: a soft shimmer on the tile behind the image so an
unpainted lazy image reads as "still loading", not as a broken tile. The
image (once decoded) paints opaque and covers this, so it is only ever
visible during the brief gap before the picture loads in. */
.material-tile::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(100deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.03) 100%);
background-size: 200% 100%;
animation: material-tile-shimmer 1.8s ease-in-out infinite;
}
.material-tile picture { position: relative; z-index: 1; display: block; }
@keyframes material-tile-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.material-tile h3, .sector-tile figcaption h3, .mont-title, .cmp-surface h3, .u-step h3, .cmp-vert-body h3, .feature-card h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.material-num, .sector-num, .u-step-num, .cmp-surface-icon:not(.is-svg) { color: var(--accent-400); }
.cmp-vs { border: 1px solid rgba(255,255,255,0.08); }
.cine-cta { border-top: 1px solid rgba(255,255,255,0.1); }
.cine-cta .headline-editorial { font-size: clamp(1.9rem, 4.2vw, 4rem); text-transform: uppercase; letter-spacing: -0.03em; }
/* Section rhythm: no accent hairlines between sections, hairline dividers instead */
.cine-section + .cine-section, .cine-section.has-atmos + .cine-section.has-atmos { border-top: 1px solid rgba(255,255,255,0.08) !important; }
.u-band { background: #050507; }
.u-band .cmp-stats.is-centered { border-top: 0; }
.cmp-stats.is-centered .cmp-stat:nth-child(3) { border-left: 1px solid rgba(255,255,255,0.1); }
@media (max-width: 1100px) { .cmp-stats.is-centered .cmp-stat:nth-child(3) { border-left: 0; } }
@media (max-width: 640px) { .cine-hero-content { padding-top: 110px; } .cmp-stats.is-centered .cmp-stat { padding: 22px 14px !important; border-bottom: 1px solid rgba(255,255,255,0.1); } .cmp-stats.is-centered .cmp-stat:nth-child(2n) { border-left: 1px solid rgba(255,255,255,0.1) !important; } .cmp-stats.is-centered .cmp-stat:nth-child(n+3) { border-bottom: 0; } .cine-head { gap: 12px; } }
/* ---- 18 Sep 2026 revisions ---- */
.rotor-mark, .nav-rotor, .rotor-divider { display: none !important; }
.cmp-stat, .cmp-stats.is-centered .cmp-stat { text-align: center !important; align-items: center !important; justify-content: center; }
.cmp-stat-label, .cmp-stats.is-centered .cmp-stat-label, .cmp-stat-num, .cmp-stats.is-centered .cmp-stat-num { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
.v5-stat { text-align: center; } .v5-stat b, .v5-stat span { display: block; text-align: center; }
.v5-tile[data-div="aerial"] .v5-tile-body small { color: var(--blue-400); }
.v5-tile[data-div="response"] .v5-tile-body small { color: var(--red-400); }
.v5-tile[data-div="systems"] .v5-tile-body small { color: var(--silver-400); }
@media (min-width: 1101px) { .v5-grid .v5-tile:nth-last-child(-n+2) { grid-column: span 2; } }
/* ==========================================================================
23. Buttons — option B (18 Sep 2026): square, 2px outline, fills on hover
========================================================================== */
.btn, .nav-cta, .nav-mobile-cta, button.btn { border-radius: 0 !important; border-width: 2px !important; border-style: solid !important; }
.btn-gold, .btn-accent, .btn-aqua, button.btn-gold { background: transparent !important; color: var(--accent-400) !important; border-color: var(--accent-400) !important; box-shadow: none !important; }
.btn-gold:hover, .btn-accent:hover, .btn-aqua:hover, .btn-gold:focus-visible, button.btn-gold:hover { background: var(--accent-400) !important; color: #08080A !important; transform: none !important; box-shadow: none !important; }
.btn-ghost { background: transparent !important; color: #FFFFFF !important; border-color: rgba(255,255,255,0.7) !important; }
.btn-ghost:hover, .btn-ghost:focus-visible { background: #FFFFFF !important; color: #08080A !important; border-color: #FFFFFF !important; }
.nav-cta, .nav-mobile-cta { background: transparent !important; color: var(--accent-400) !important; border: 2px solid var(--accent-400) !important; box-shadow: none !important; }
.nav-cta:hover, .nav-mobile-cta:hover { background: var(--accent-400) !important; color: #08080A !important; }
.btn .btn-arrow, .btn .btn-arrow::after { transition: width var(--t-fast) var(--ease-out); }
/* ---- 18 Sep: consent block must never fill; dropdowns on brand ---- */
.form-consent, .form-consent:hover, .form-consent:has(input:checked), .form-field:has(.form-consent), .form-row:has(.form-consent), .form-consent input:checked + span { background: transparent !important; color: #D9D9E0 !important; border: 0 !important; box-shadow: none !important; }
.form-consent a, .form-consent:has(input:checked) a { color: var(--accent-400) !important; text-decoration: underline; }
.form-consent input { accent-color: var(--accent-400); }
.form-note { color: #A7A7B0 !important; background: transparent !important; }
select, .form-field select { color-scheme: dark; background-color: #0B0B0E !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 0 !important; -webkit-appearance: none; appearance: none; padding-right: 44px !important;
background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; }
select:focus, .form-field select:focus { border-color: var(--accent-400) !important; outline: 2px solid var(--accent-400); outline-offset: 0; box-shadow: none !important; }
select option, select optgroup { background: #0B0B0E; color: #FFFFFF; }
select optgroup { color: var(--accent-400); font-weight: 700; }
input, textarea, .form-field input, .form-field textarea { border-radius: 0 !important; }
/* ---- 18 Sep: contact form footer. The row is a layout wrapper, never a button. ---- */
.form-submit, .form-submit:hover { background: transparent !important; border: 0 !important; box-shadow: none !important; color: inherit !important;
display: grid !important; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1) !important; }
.form-submit .form-consent { margin: 0; }
.form-submit .form-note { margin: 0 0 4px 32px; font-size: 12px; line-height: 1.55; }
.form-submit button[type="submit"] { width: 100%; justify-content: center; padding: 20px 28px; font-size: 13px; letter-spacing: 0.24em; gap: 16px;
background: transparent !important; color: var(--accent-400) !important; border: 2px solid var(--accent-400) !important; transition: background 0.2s, color 0.2s; }
.form-submit button[type="submit"]:hover, .form-submit button[type="submit"]:focus-visible { background: var(--accent-400) !important; color: #08080A !important; }
.form-submit button[type="submit"]:disabled { opacity: 0.5; cursor: wait; }
/* ---- 18 Sep: homepage reel on phones shows the whole 16:9 frame ---- */
@media (max-width: 760px) {
.is-home .cine-hero { display: block; min-height: 0; padding-top: 72px; }
.is-home .cine-hero-media { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; z-index: 0; }
.is-home .cine-hero-media video, .is-home .cine-hero-media img { transform: none !important; object-fit: cover; }
.is-home .cine-hero-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 35%; background: linear-gradient(180deg, rgba(5,5,7,0) 0%, #050507 100%); }
.is-home .cine-hero-scrim { display: none; }
.is-home .v5-hero-inner { padding-top: 22px !important; padding-bottom: 44px; }
}
/* ==========================================================================
25. Contact service picker — custom combobox (3 Oct 2026). Replaces the
browser-drawn native