/* ==========================================================================
site.css — neutral starter
HOW TO USE THIS FILE
1. Swap the tokens in :root for the client's brand. That is the whole job
for colour and type; the components below all read from the tokens.
2. Self-host fonts as woff2 (@fontsource), never the Google Fonts CDN.
3. Do NOT hardcode a colour anywhere below :root. If you find yourself
typing a hex value in a component, add a token instead — a hardcoded
colour in a component silently overrides the palette on the next build
and it is miserable to track down.
4. After swapping tokens, check nothing is orphaned:
grep -o 'var(--[a-z-]*' css/site.css | sort -u
========================================================================== */
/* @font-face { font-family: 'Display'; font-weight: 700; font-display: swap;
src: url('../fonts/display-700.woff2') format('woff2'); } */
/* ---- Self-hosted woff2 via @fontsource. Never the Google Fonts CDN. ---- */
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;
src:url('../fonts/oswald-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;
src:url('../fonts/oswald-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;
src:url('../fonts/oswald-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;
src:url('../fonts/open-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;font-display:swap;
src:url('../fonts/open-sans-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;
src:url('../fonts/open-sans-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;
src:url('../fonts/open-sans-latin-700-normal.woff2') format('woff2');}
:root {
/* ---- Frontier Metal Stamping — PANTONE 285 / CMYK 91-43-0-0 ---- */
--ink: #1a1d21; /* headings + primary text */
--body-ink: #2a2f36; /* long-form body copy */
--accent: #0077C8; /* PANTONE 285. CTAs, active states, rules */
--accent-ink: #005a99; /* hover / pressed */
--link: #1a1d21;
--link-hover: #0077C8;
--paper: #ffffff;
--panel: #eef1f4;
--rule: #dde2e6;
--soft: #5a6470;
--band: #292929; /* dark band, matches the masthead they keep */
--band-text: #f2f4f6;
--band-body: #e4e9ee;
--panel-soft: #f6f8fa;
--star: #E8A317;
/* ---- Type: Oswald headings, Open Sans body. Self-hosted woff2. ---- */
--display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
--body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--body-size: 16px;
--body-line-height: 28px;
/* ---- Heading scale. Oswald 600, uppercase, per the measured original ---- */
--h-weight: 600;
--h1-size: 40px; --h2-size: 30px; --h3-size: 24px;
--h4-size: 20px; --h5-size: 18px; --h6-size: 16px;
--h1-letter-spacing: 0.005em;
--h-letter-spacing: 0.01em;
--h-margin-bottom: 1.5rem;
--h-margin-top: 2.25rem;
--wrap: 1140px; /* matches the current site's content width */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); background: var(--paper); color: var(--body-ink);
font-size: var(--body-size); line-height: var(--body-line-height);
-webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
/* ---------- Headings ----------
Bottom margin AND top margin. Bottom alone leaves every heading crowded
against the paragraph above it, which reads as a bug on a real page. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--display); font-weight: var(--h-weight); color: var(--ink);
letter-spacing: var(--h-letter-spacing); line-height: 1.4;
margin-bottom: var(--h-margin-bottom); margin-top: var(--h-margin-top);
}
h1 { font-size: var(--h1-size); letter-spacing: var(--h1-letter-spacing); margin-top: 0; }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }
main > section > .wrap > *:first-child { margin-top: 0; }
p { margin: 0 0 1.1rem; }
p.lede { font-size: 1.06rem; color: var(--soft); max-width: 78ch; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
ul, ol { margin: 0 0 1.1rem 1.2rem; }
li { margin-bottom: .45rem; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent);
color: #fff; padding: 10px 18px; z-index: 200; font-weight: 700; }
.skip:focus { left: 0; }
/* ---------- Header ----------
Mirrors the existing site: brushed-metal band, stacked logo left, quote
button and phone right, dark nav strip with the cyan rule under it.
Two deliberate departures, both in CHANGE-REGISTER.md:
- the band compresses on scroll instead of holding 255px forever
- it shrinks hard at mobile widths so the fold is not all chrome
------------------------------------------------------------------ */
/* White masthead. Mark's call, 26 Aug: the brushed metal competed with the
blue mark and dated the page. On white the logo carries the header on its
own. CHANGE-REGISTER.md entry 6. */
/* Scroll anchoring OFF for the document.
*
* The masthead is sticky at top:0, so its slot in flow sits above everything.
* Compressing it removes 131px from that slot — 259px tall expanded, 128px
* compact. Chrome reads that as "content above the viewport changed size" and
* silently corrects scrollTop by the same 131px to hold the view steady.
*
* That correction is larger than the gap between the compress and expand
* thresholds, so it throws the header across its own trigger: compact at 142,
* anchoring drops you to 14, 14 expands it, anchoring puts you back at 145,
* which compacts it again. The result is a header flickering at frame rate.
*
* Turning anchoring off is safe here specifically because every ![]()
on the
* site carries intrinsic width and height, so images cannot reflow the page as
* they load — which is the shift anchoring exists to absorb. Remove this and
* the jitter comes straight back.
*/
html { overflow-anchor: none; }
#site-header { position: sticky; top: 0; z-index: 70; }
.masthead {
background: var(--paper);
border-bottom: 1px solid var(--rule);
}
.masthead-in { display: flex; align-items: center; justify-content: space-between;
gap: 20px; padding-top: 18px; padding-bottom: 16px;
transition: padding .18s ease; }
.logo { display: block; line-height: 0; }
.logo svg, .logo img { display: block; height: 224px; width: auto;
transition: height .18s ease; }
/* Blue lockup on white. No halo needed now the texture is gone. */
.masthead-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.btn-quote { background: var(--accent); color: #fff; border-color: var(--accent);
/* Was .84rem lowercase in 11px/20px of padding, which made the primary call
to action the smallest, lightest text in the header while occupying the
largest block of colour. Uppercase, heavier, larger, and tighter padding:
more word, less blue. */
font-size: .98rem; font-weight: 800; text-transform: uppercase;
letter-spacing: .05em; line-height: 1.15; text-align: center;
padding: 12px 22px; }
.btn-quote:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.phone-top { font-family: var(--display); font-weight: 600; font-size: 1.45rem;
color: var(--ink); text-decoration: none; white-space: nowrap; }
.phone-top:hover { color: var(--accent); }
.phone-ico { margin-right: 8px; font-size: .95em; }
/* Compressed state, set by js/site.js once the page scrolls past the band. */
.hdr-compact .masthead-in { padding-top: 8px; padding-bottom: 7px; }
.hdr-compact .logo svg, .hdr-compact .logo img { height: 112px; }
.hdr-compact .masthead-actions { flex-direction: row; align-items: center; gap: 22px; }
.hdr-compact .phone-top { font-size: 1.2rem; }
.hdr-compact .btn-quote { padding: 10px 18px; font-size: .88rem; }
.hdr-compact .masthead { box-shadow: 0 6px 20px rgba(0,0,0,.10); }
/* A sticky header hides whatever an in-page link lands on. Every anchor target
gets pushed clear of it, so /tooling/#break-even does not open with the
calculator's heading under the nav strip. */
:target { scroll-margin-top: 200px; }
html { scroll-padding-top: 200px; }
.navbar { background: var(--band); z-index: 60;
border-bottom: 3px solid var(--accent); }
.navbar nav { display: flex; gap: 44px; padding: 18px 0; flex-wrap: wrap; justify-content: center; }
.navbar a { color: #fff; text-decoration: none; font-family: var(--display);
font-weight: 400; font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; }
.navbar a:hover { color: #08C7FC; }
.navbar a[aria-current="page"] { color: #08C7FC; }
.navbar.stuck { box-shadow: 0 4px 18px rgba(0,0,0,.28); }
.nav-toggle { display: none; }
/* ---------- Interior page hero ---------- */
.page-hero { background: var(--ink); color: #fff; }
.page-hero .wrap { padding-top: 34px; padding-bottom: 34px; }
.page-hero h1 { color: #fff; margin-bottom: .6rem; max-width: 24ch; }
.page-hero .lede { color: var(--band-body); max-width: 62ch; margin-bottom: 0; }
.crumbs { font-size: .84rem; color: var(--band-text); margin-bottom: 14px; letter-spacing: .02em; }
.crumbs a { color: var(--band-text); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs .sep { opacity: .55; margin: 0 6px; }
/* ---------- Buttons ---------- */
.btn { display: inline-block; background: var(--accent); color: #fff; padding: 15px 28px;
text-decoration: none; font-family: var(--display); font-weight: 700;
letter-spacing: .03em; border-radius: 3px; border: 0; cursor: pointer;
transition: background .15s ease, transform .15s ease; }
.btn:hover { background: var(--accent-ink); color: #fff; transform: translateY(-2px); }
.btn-sm { padding: 11px 20px; font-size: .92rem; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
/* On any dark band a ghost button must reverse, or it is invisible. This bit
the promo band on the first build: dark text on a dark ground. */
.promo .btn-ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
.promo .btn-ghost:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px #fff; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
/* ---------- Sections ---------- */
section { padding: 44px 0; }
section.tint { background: var(--panel-soft); }
section.final { background: var(--ink); color: #fff; }
section.final h2 { color: #fff; }
section.final .lede { color: var(--band-text); }
section.final .btn-ghost { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
section.final .btn-ghost:hover { background: #fff; color: var(--ink); }
.aside-note { font-size: .88rem; color: var(--band-text); margin-top: 14px; }
/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.card { border: 1px solid var(--rule); border-top: 4px solid var(--ink);
border-radius: 4px; padding: 24px; background: var(--paper); }
.card h3 { margin-top: 0; }
/* ---------- Panel ---------- */
.panel { background: var(--panel); border-radius: 4px; padding: 22px 26px; margin: 22px 0; }
.panel > :last-child { margin-bottom: 0; }
/* ---------- Coverage bars ----------
A picture made of real text. Search engines and AI assistants read every
word of this, it weighs nothing, it stays sharp on any screen, and when the
terms change it changes in one place. A JPEG of the same idea does none of
those things. Widths are inline styles because they encode the DATA, not
the design — 48 months is twice the bar of 24 months, and that proportion
is the whole argument. */
.bars { margin: 28px 0; }
.bars .row { margin-bottom: 18px; }
.bars .row:last-child { margin-bottom: 0; }
.bars .lbl { display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
flex-wrap: wrap; margin-bottom: 6px; }
.bars .who { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.bars .term { font-size: .92rem; color: var(--soft); font-weight: 600; }
.bars .track { background: var(--rule); border-radius: 3px; height: 26px; overflow: hidden; }
.bars .fill { height: 100%; background: var(--soft); border-radius: 3px; }
.bars .row.us .who { font-size: 1.18rem; }
.bars .row.us .term { color: var(--accent); font-weight: 700; }
.bars .row.us .fill { background: var(--accent); }
.bars .scale { display: flex; justify-content: space-between; font-size: .78rem; color: var(--soft);
border-top: 1px solid var(--rule); padding-top: 6px; margin-top: 16px; letter-spacing: .03em; }
/* Photo with a caption that does work. A caption is the cheapest place on a
page to put a fact, and it is read far more often than body copy. */
figure.shot { margin: 28px 0; }
figure.shot img { display: block; width: 100%; height: auto; border-radius: 4px; }
figure.shot figcaption { font-size: .9rem; color: var(--soft); line-height: 1.6; margin-top: 10px;
border-left: 3px solid var(--accent); padding-left: 12px; }
figure.shot.right { float: right; width: 42%; margin: 6px 0 24px 36px; }
figure.shot.left { float: left; width: 42%; margin: 6px 36px 24px 0; }
@media (max-width: 780px) {
figure.shot.right, figure.shot.left { float: none; width: 100%; margin: 28px 0; }
}
/* ---------- Star ratings ----------
Two stacked rows of five stars; the gold row is clipped by percentage, so
whole numbers and fractions use one code path. The stars are decorative and
aria-hidden — the visible "4.6 out of 5" beside them carries the meaning for
screen readers, crawlers and AI assistants alike. */
.rate { display: inline-flex; align-items: center; gap: 8px; }
.stars { position: relative; display: inline-block; line-height: 0; white-space: nowrap; }
.stars .s-bg, .stars .s-fg { display: block; white-space: nowrap; }
.stars .s-fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.stars svg { width: 17px; height: 17px; display: inline-block; }
.stars .s-bg svg { fill: var(--rule); }
.stars .s-fg svg { fill: var(--star); }
.rate-text { font-size: .84rem; font-weight: 700; color: var(--soft); white-space: nowrap; }
/* ---------- Review cards ---------- */
.revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px; margin-top: 26px; }
.rev { margin: 0; background: var(--paper); border: 1px solid var(--rule);
border-top: 4px solid var(--star); border-radius: 4px; padding: 22px 24px;
display: flex; flex-direction: column; }
.rev blockquote { margin: 14px 0 16px; }
.rev blockquote p { margin: 0; color: var(--body-ink); font-size: .97rem; line-height: 1.65; }
.rev blockquote p::before { content: "\201C"; }
.rev blockquote p::after { content: "\201D"; }
.rev figcaption { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 12px; }
.rev figcaption b { display: block; font-family: var(--display); font-weight: 700;
font-size: 1rem; color: var(--ink); }
.rev figcaption span { font-size: .82rem; color: var(--soft); }
.rev figcaption a, .rev blockquote a { color: var(--accent); font-weight: 600; }
.rev-all { margin: 22px 0 0; font-weight: 600; }
/* Placeholder standing in for artwork that has not arrived. Deliberately
unmissable — nothing here should ever survive to launch by accident. */
.ph { display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; text-align: center; padding: 18px; border: 2px dashed var(--accent);
border-radius: 4px; background: repeating-linear-gradient(45deg,
var(--panel-soft), var(--panel-soft) 12px, var(--paper) 12px, var(--paper) 24px); }
.ph b { font-family: var(--display); font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: var(--accent); font-size: 1rem; }
.ph span { font-size: .86rem; color: var(--soft); line-height: 1.4; max-width: 34ch; }
.ph .dim { font-weight: 700; letter-spacing: .06em; }
/* ---------- Coupons ----------
Text, not a JPEG. The offer, the terms and the expiry are all real words a
search engine and an AI assistant can read, and the code is something a
customer says out loud to a service advisor instead of printing. */
.coupons { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px; margin-top: 28px; }
.coupon { background: var(--paper); border: 1px solid var(--rule);
border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
/* The red shout, at H1 size. This is the badge off the old print artwork,
rebuilt as live text — same job, but readable by a search engine. */
.coupon .shout { background: var(--accent); color: #fff; padding: 16px 22px;
font-family: var(--display); font-weight: var(--h-weight);
font-size: var(--h1-size); line-height: 1.08; text-transform: uppercase;
letter-spacing: var(--h1-letter-spacing); }
.coupon .cbody { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.coupon h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.coupon .offer { font-family: var(--display); font-weight: 700; font-size: 1.6rem;
line-height: 1.2; color: var(--accent); margin: 0 0 .9rem; }
.coupon .code { margin: 0 0 .9rem; font-size: .9rem; color: var(--soft); }
.coupon .code b { display: inline-block; font-family: var(--display); font-size: 1.15rem;
letter-spacing: .12em; color: var(--ink); background: var(--panel);
padding: 3px 12px; border-radius: 3px; margin-left: 6px; }
.coupon .code .ref { display: block; font-size: .72rem; color: var(--soft);
letter-spacing: .04em; margin-top: 5px; font-weight: 600; }
.coupon .incl { list-style: none; margin: 0 0 .9rem; padding: 0; }
.coupon .incl li { font-size: .9rem; color: var(--body-ink); line-height: 1.5;
padding-left: 16px; position: relative; margin-bottom: .28rem; }
.coupon .incl li::before { content: "\2713"; position: absolute; left: 0;
color: var(--accent); font-weight: 700; }
.coupon .fine { font-size: .78rem; color: var(--soft); line-height: 1.5; margin: 0 0 .8rem; }
.coupon .exp { font-size: .82rem; color: var(--soft); margin: 0 0 1.1rem; font-weight: 600; }
.coupon .btn { margin-top: auto; align-self: flex-start; }
.coupon .copied { display: block; margin-top: 10px; font-size: .82rem; font-weight: 700;
color: var(--accent); }
.coupon .copied[hidden] { display: none; }
/* ---------- Star ratings ----------
Two stacked rows of five stars; the gold row is clipped by percentage, so
whole numbers and fractions use one code path. The stars are decorative and
aria-hidden — the visible "4.6 out of 5" beside them carries the meaning for
screen readers, crawlers and AI assistants alike. */
.rate { display: inline-flex; align-items: center; gap: 8px; }
.stars { position: relative; display: inline-block; line-height: 0; white-space: nowrap; }
.stars .s-bg, .stars .s-fg { display: block; white-space: nowrap; }
.stars .s-fg { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.stars svg { width: 17px; height: 17px; display: inline-block; }
.stars .s-bg svg { fill: var(--rule); }
.stars .s-fg svg { fill: var(--star); }
.rate-text { font-size: .84rem; font-weight: 700; color: var(--soft); white-space: nowrap; }
/* ---------- Review cards ---------- */
.revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px; margin-top: 26px; }
.rev { margin: 0; background: var(--paper); border: 1px solid var(--rule);
border-top: 4px solid var(--star); border-radius: 4px; padding: 22px 24px;
display: flex; flex-direction: column; }
.rev blockquote { margin: 14px 0 16px; }
.rev blockquote p { margin: 0; color: var(--body-ink); font-size: .97rem; line-height: 1.65; }
.rev blockquote p::before { content: "\201C"; }
.rev blockquote p::after { content: "\201D"; }
.rev figcaption { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 12px; }
.rev figcaption b { display: block; font-family: var(--display); font-weight: 700;
font-size: 1rem; color: var(--ink); }
.rev figcaption span { font-size: .82rem; color: var(--soft); }
.rev figcaption a, .rev blockquote a { color: var(--accent); font-weight: 600; }
.rev-all { margin: 22px 0 0; font-weight: 600; }
/* Placeholder standing in for artwork that has not arrived. Deliberately
unmissable — nothing here should ever survive to launch by accident. */
.ph { display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; text-align: center; padding: 18px; border: 2px dashed var(--accent);
border-radius: 4px; background: repeating-linear-gradient(45deg,
var(--panel-soft), var(--panel-soft) 12px, var(--paper) 12px, var(--paper) 24px); }
.ph b { font-family: var(--display); font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: var(--accent); font-size: 1rem; }
.ph span { font-size: .86rem; color: var(--soft); line-height: 1.4; max-width: 34ch; }
.ph .dim { font-weight: 700; letter-spacing: .06em; }
/* ---------- Coupons ----------
Text, not a JPEG. The offer, the terms and the expiry are all real words a
search engine and an AI assistant can read, and the code is something a
customer says out loud to a service advisor instead of printing. */
.coupons { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px; margin-top: 28px; }
.coupon { background: var(--paper); border: 1px solid var(--rule);
border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
/* The red shout, at H1 size. This is the badge off the old print artwork,
rebuilt as live text — same job, but readable by a search engine. */
.coupon .shout { background: var(--accent); color: #fff; padding: 16px 22px;
font-family: var(--display); font-weight: var(--h-weight);
font-size: var(--h1-size); line-height: 1.08; text-transform: uppercase;
letter-spacing: var(--h1-letter-spacing); }
.coupon .cbody { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.coupon h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.coupon .offer { font-family: var(--display); font-weight: 700; font-size: 1.6rem;
line-height: 1.2; color: var(--accent); margin: 0 0 .9rem; }
.coupon .code { margin: 0 0 .9rem; font-size: .9rem; color: var(--soft); }
.coupon .code b { display: inline-block; font-family: var(--display); font-size: 1.15rem;
letter-spacing: .12em; color: var(--ink); background: var(--panel);
padding: 3px 12px; border-radius: 3px; margin-left: 6px; }
.coupon .code .ref { display: block; font-size: .72rem; color: var(--soft);
letter-spacing: .04em; margin-top: 5px; font-weight: 600; }
.coupon .incl { list-style: none; margin: 0 0 .9rem; padding: 0; }
.coupon .incl li { font-size: .9rem; color: var(--body-ink); line-height: 1.5;
padding-left: 16px; position: relative; margin-bottom: .28rem; }
.coupon .incl li::before { content: "\2713"; position: absolute; left: 0;
color: var(--accent); font-weight: 700; }
.coupon .fine { font-size: .78rem; color: var(--soft); line-height: 1.5; margin: 0 0 .8rem; }
.coupon .exp { font-size: .82rem; color: var(--soft); margin: 0 0 1.1rem; font-weight: 600; }
.coupon .btn { margin-top: auto; align-self: flex-start; }
.coupon .copied { display: block; margin-top: 10px; font-size: .82rem; font-weight: 700;
color: var(--accent); }
.coupon .copied[hidden] { display: none; }
/* ---------- Tables ---------- */
table.cmp { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: .96rem; }
table.cmp th, table.cmp td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
table.cmp thead th { background: var(--ink); color: #fff; font-family: var(--display);
font-weight: 700; letter-spacing: .03em; font-size: .88rem; }
table.cmp tr.us td { background: var(--panel-soft); font-weight: 600; }
table.cmp tr.us td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
/* ---------- FAQ ---------- */
/* FAQs sit on the panel ground and inside the reading measure. Full-width
answers across 1140px are a 130-character line, which nobody reads. */
.faqs { background: var(--panel-soft); }
.faqs h2 { margin-top: 0; }
.faq { border-top: 1px solid var(--rule); padding: 20px 0; }
.faq:last-child { border-bottom: 1px solid var(--rule); }
.faq h3 { margin: 0 0 .5rem; font-size: 1.08rem; line-height: 1.35; }
.faq p { color: var(--soft); margin: 0; line-height: 1.7; }
/* ---------- Footer ---------- */
footer { background: var(--panel-soft); border-top: 1px solid var(--rule); padding: 0 0 32px; }
.foot-grid { margin-top: 38px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
/* The 2016 lockup is 239x243, near square. The old 40px rule was written for
a wide horizontal mark and clipped this one to a sliver. */
.foot-brand .logo svg, .foot-brand .logo img { height: 148px; width: auto; }
/* ---------- Footer certification bar ----------
Bottom strip of every page, on white so the marks sit on their own ground
rather than the footer's grey. Driven by CERT_LOGOS in siteconfig.
The placeholder occupies the same height as the finished strip, so the
footer will not jump when the real marks land. Held empty until Frontier
supplies current ITAR and ISO documents; the ones on file expired in
May 2026 and a badge linked to expired paperwork is worse than no badge. */
/* The certification strip breaks OUT of the content column deliberately.
Seven marks inside the 1140px body width left each one small and the row
crowded. 80% of the viewport gives the logos room to be read at a glance,
which is the only job this band has. Capped so it does not sprawl on an
ultrawide monitor, and released back to normal flow on narrow screens
where 80vw would be narrower than the content column, not wider. */
/* Reads as the top of the footer rather than the last section of the page.
The blue-grey ties it to the footer block below it, and the rule above is
what separates it from whatever content section ends the page. */
/* White, deliberately. Customer and registrar marks are supplied on white and
several carry their own white plate, which shows as a visible box on a tinted
ground. It also separates the credentials from the footer without needing a
rule between them -- the colour change does that job. */
.certbar { background: var(--paper); padding: 40px 0; }
.certbar > .wrap { width: 80vw; max-width: 1680px; }
.certbar-row { list-style: none; margin: 0; padding: 0; display: flex;
flex-wrap: wrap; align-items: center; justify-content: center;
gap: 26px clamp(24px, 3vw, 60px); }
/* Tracking eases off as the size goes up. Uppercase at .1em is right at 11.8px
and reads loose once the letters get bigger. */
.certbar-h { font-family: var(--display); font-size: .95rem; font-weight: 600;
letter-spacing: .07em; text-transform: uppercase; color: var(--soft);
margin: 0 0 24px; text-align: center; }
/* One line of detail under the marks: certificate numbers and the link to
the certificate itself. Small, quiet, and the only place a number lives. */
.certbar-note { margin: 20px 0 0; text-align: center; font-size: .82rem;
color: var(--soft); line-height: 1.7; }
.certbar-note strong { color: var(--ink); font-weight: 600; }
.certbar-note a { color: var(--accent); text-decoration: underline;
text-underline-offset: 2px; }
.certbar-note a:hover { text-decoration: none; }
.certbar-sep { display: inline-block; width: 1px; height: .85em; margin: 0 14px;
vertical-align: -1px; background: var(--rule); }
/* Height tracks the viewport so the seven marks stay on ONE line at any
desktop width. The row is roughly 15.9x the logo height once the gaps are
counted, and the band is 80vw, so 5vw is the height that just fits — which
is why this is a vw and not a fixed pixel value. Clamped at both ends:
never smaller than the old fixed size, never cartoonish on an ultrawide. */
.certbar-row img { display: block; height: clamp(56px, 5vw, 96px);
width: auto; max-width: 100%; object-fit: contain; }
.certbar-row a { display: block; border-radius: 3px;
transition: opacity .18s ease; }
.certbar-row a:hover { opacity: .72; }
.certbar-row a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.certbar-wait { padding: 0; background: var(--panel-soft); border-top: 0; }
.certbar-wait .wrap { border: 2px dashed var(--rule); border-radius: 4px;
margin-top: 26px; margin-bottom: 26px; min-height: 126px;
display: flex; align-items: center; justify-content: center; }
.certbar-wait p { margin: 0; font-family: var(--display); font-weight: 500;
font-size: .84rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--soft); }
/* Below this the band goes back to the content column and the row is allowed
to wrap. 80vw on a phone is NARROWER than the content width, not wider,
which would be the opposite of the point. */
@media (max-width: 1200px) {
.certbar > .wrap { width: auto; }
.certbar-row img { height: 64px; }
.certbar-row { gap: 22px 38px; }
}
@media (max-width: 700px) {
.certbar-row { gap: 18px 30px; }
.certbar-row img { height: 54px; }
.certbar-wait .wrap { min-height: 96px; }
}
.foot-tag { margin-top: 12px; font-family: var(--display); font-weight: 700; color: var(--ink); max-width: 15em; }
.foot-nav { flex: 0 1 auto; text-align: center; }
.foot-nav-h { font-family: var(--display); font-size: .74rem; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase; color: var(--soft);
margin: 0 0 12px; }
.foot-nav ul { list-style: none; margin: 0; padding: 0; }
.foot-nav li { margin: 0 0 7px; }
.foot-nav a { color: var(--link); text-decoration: none; font-size: .92rem;
font-weight: 600; line-height: 1.5; }
.foot-nav a:hover { color: var(--link-hover); text-decoration: underline;
text-underline-offset: 2px; }
.foot-meta { color: var(--soft); font-size: .92rem; text-align: right; line-height: 1.9; }
.foot-meta a { color: var(--link); text-decoration: none; font-weight: 600; }
/* Phone reads at masthead size. It is the primary conversion path on a B2B
site and it was previously set smaller than the copyright line. */
/* line-height must be set explicitly: .foot-meta carries 1.9, and at 1.45rem
that overflowed the footer's top edge and clipped the digits. */
.foot-phone { font-family: var(--display); font-weight: 600; font-size: 1.45rem;
line-height: 1.25; color: var(--ink); text-decoration: none; white-space: nowrap;
display: inline-block; margin-bottom: 6px; }
.foot-phone:hover { color: var(--accent); }
.foot-phone .phone-ico { margin-right: 8px; font-size: .95em; }
.foot-links { margin-top: 4px; }
/* ---------- Motion (all gated on prefers-reduced-motion in js/site.js) ---- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1 !important; transform: none !important; }
.btn:hover { transform: none; }
html { scroll-behavior: auto; }
}
/* ---------- Responsive ---------- */
@media (max-width: 860px) {
.navbar .wrap { padding-top: 6px; padding-bottom: 6px; }
:target, html { scroll-margin-top: 120px; scroll-padding-top: 120px; }
.nav-toggle { display: inline-flex; align-items: center; gap: 10px; background: none;
border: 0; color: #fff; font-family: var(--display); font-weight: 700;
font-size: 1rem; padding: 10px 0; letter-spacing: .04em; }
.bars { display: inline-block; width: 22px; height: 2px; background: #fff; position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; width: 22px;
height: 2px; background: #fff; }
.bars::before { top: -7px; } .bars::after { top: 7px; }
.navbar nav { display: none; flex-direction: column; gap: 0; padding: 0 0 10px; }
.navbar.open nav { display: flex; }
/* The open menu sits in flow inside the sticky header. With Capabilities
expanded the nav runs ~1900px tall and everything below the fold is
unreachable, because the header is pinned. Cap it and let it scroll.
330px is the measured height of the header rows above the menu. */
.navbar.open nav {
/* nowrap is NOT optional. The nav is a column flexbox that inherits
flex-wrap: wrap from the desktop rule. Unconstrained it never wraps.
Give it a max-height and it wraps into COLUMNS: 1017px of content in a
319px box, submenus side by side, a horizontal scrollbar. Found on the
preview 4 Sep 2026. */
flex-wrap: nowrap;
/* justify-content: center comes from the desktop rule, where it is right.
On a COLUMN flexbox that overflows, centering pushes the start of the
content above the box, and overflow at the start edge cannot be scrolled
to. Home, Capabilities and its whole submenu sat at -707px: rendered,
and permanently unreachable. */
justify-content: flex-start;
max-height: calc(100dvh - 330px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.navbar nav a { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.18); }
.masthead-in { flex-direction: column; align-items: center; text-align: center;
padding-top: 12px; padding-bottom: 12px; gap: 12px; }
.logo svg, .logo img { height: 140px; }
.hdr-compact .logo svg, .hdr-compact .logo img { height: 70px; }
.masthead-actions { flex-direction: row; align-items: center; justify-content: center;
width: 100%; gap: 14px; }
.phone-top { font-size: 1.15rem; }
/* On a phone the button and the phone number sit side by side. Matching
their weight stops the CTA reading as the lesser of the two. Two lines is
deliberate: it fills the box instead of padding it. */
.btn-quote { font-size: 1.05rem; padding: 12px 18px; max-width: 8.5em;
white-space: normal; }
.foot-grid { flex-direction: column; }
.foot-meta { text-align: left; }
.foot-nav { text-align: left; }
}
@media (max-width: 620px) {
table.cmp { display: block; overflow-x: auto; white-space: nowrap; font-size: .9rem; }
}
@media print {
.navbar, .nav-toggle, .skip { display: none; }
body { font-size: 12pt; }
}
/* ---------- Home hero slideshow ----------
Mirrors the seven-panel rotator on the existing site. Captions are baked
into the supplied JPEGs, so they are pixels rather than text — see
CHANGE-REGISTER.md entry 5 for the recommendation to get clean plates.
---------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--band);
aspect-ratio: 2000 / 550; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease;
pointer-events: none; }
.hero-slide.on { opacity: 1; pointer-events: auto; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-prev, .hero-next { position: absolute; top: 50%; transform: translateY(-50%);
z-index: 3; background: rgba(0,0,0,.34); border: 0; color: #fff; cursor: pointer;
width: 46px; height: 64px; font-size: 26px; line-height: 1;
display: flex; align-items: center; justify-content: center; }
.hero-prev { left: 0; } .hero-next { right: 0; }
.hero-prev:hover, .hero-next:hover { background: rgba(0,0,0,.55); }
.hero-prev:focus-visible, .hero-next:focus-visible,
.hero-dot:focus-visible { outline: 3px solid #08C7FC; outline-offset: 2px; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3;
display: flex; gap: 9px; justify-content: center; }
.hero-dot { width: 11px; height: 11px; border-radius: 50%; padding: 0; cursor: pointer;
border: 1px solid rgba(255,255,255,.85); background: transparent; }
.hero-dot.on { background: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
.hero-slide { transition: none; }
}
/* Dots OFF on tablet and phone, at the same 900px the rest of the site breaks at.
The hero holds aspect-ratio 2000/550, so on a 375px screen the band is only
103px tall -- and the slide captions are baked into the JPEGs as pixels rather
than being real text. At that height the dot row lands directly on top of the
burned-in caption and makes it unreadable. The slideshow autoplays, so nothing
is lost by removing them. The real fix is clean plates with no burned-in text;
see the note at the top of this section. */
@media (max-width: 900px) {
.hero-dots { display: none; }
}
@media (max-width: 720px) {
.hero-prev, .hero-next { width: 36px; height: 50px; font-size: 20px; }
}
/* ---------- Break-even calculator ----------
Built from Steve O'Donnell's own break-even spreadsheet. Colours read from
the tokens; nothing hardcoded below :root.
-------------------------------------------------------------------------- */
.calc-band { background: var(--panel-soft); }
.calc { margin-top: 26px; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; }
.calc fieldset { border: 1px solid var(--rule); border-radius: 8px;
padding: 18px 20px 20px; margin: 0; background: var(--paper); }
/* A