/* JBECS styles.css. 1 tokens 2 fonts 3 reset 4 a11y 5 type 6 layout 7 buttons 8 cards
9 media 10 chrome 11 hero 12 forms 13 contactbar 14 texture 15 motion 16 print */
/* 1 TOKENS */
:root{
--ink:#0a0a0a;--surface:#121212;--surface-2:#181818;--line:#2a2a2a;
/* WCAG 1.4.11 wants 3:1 for the BOUNDARY of an interactive control. --line is 1.24:1
 against --surface-2 and is right for dividers, which are not controls. This is for
 control outlines only: 3.45 / 3.26 / 3.09 against ink / surface / surface-2. */
--line-strong:#666666;
--gold-1:#d4a017;--gold-2:#f4d47c;--gold:#d4a017;--gold-soft:#7d6212;
--gold-gradient:linear-gradient(135deg,var(--gold-1),var(--gold-2));
--text:#f5f5f0;--muted:#b5b0a6;--err:#FF9E9E;--ok:#9BE0B4;
--font-serif:"Playfair Display",ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
--font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--gutter:clamp(1.15rem,4vw,2.5rem);--pad-y:clamp(4rem,9vw,7.5rem);
--radius:3px;--tap:44px;color-scheme:dark;
/* the fixed header floats over the hero, so every hero reserves its height as padding */
--hdr-h:66px;
/* the crest: the real JB emblem, cropped out of assets/logo.webp with the black
 backdrop keyed to transparent, so 14c and .media-pending show the actual brand mark
 rather than the hand-drawn approximation that used to live here as a data URI. */
--crest:url("/assets/crest-emblem.png");
}
/* 2 FONTS. The four woff2 files do not exist yet: swap plus a real fallback stack makes
 a 404 a silent no-op. No external URLs. */
@font-face{font-family:"Playfair Display";src:url("/assets/fonts/playfair-display-600.woff2") format("woff2");
font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-400.woff2") format("woff2");
font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-500.woff2") format("woff2");
font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-600.woff2") format("woff2");
font-weight:600;font-style:normal;font-display:swap}
/* 3 RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{max-width:100%;height:auto;display:block}
picture{display:block;min-width:0}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0}
[hidden]{display:none!important}
body{background:var(--ink);color:var(--text);font-family:var(--font-sans);
font-size:clamp(1rem,.97rem + .18vw,1.075rem);line-height:1.68;
padding-bottom:calc(5.25rem + env(safe-area-inset-bottom,0px))} /* contactbar clearance */
/* the only wrap guard in the sheet. Today's copy has no token longer than ~15 characters, so
 nothing renders differently; this is insurance against one pasted URL or long vehicle code
 pushing a line box past the 283px of content a 320px viewport actually has. break-word, not
 anywhere, so min-content sizing of grid and flex tracks is left exactly as measured. */
body{overflow-wrap:break-word}
/* fixed header: anchor targets, including the skip link's #main, must clear it */
[id],:target{scroll-margin-top:calc(var(--hdr-h) + .75rem)}
/* A form control is not an anchor target. When validation focuses one, the browser scrolls
   the CONTROL into view, but the thing the visitor has to read is its label, which sits
   above it (.field is a grid with the label first and a .4rem gap). The blanket rule above
   clears the header and nothing more, so the label landed behind it. Clear the label too. */
.form :is(input,select,textarea){scroll-margin-top:calc(var(--hdr-h) + 4rem)}
::selection{background:var(--gold);color:var(--ink)}
::placeholder{color:#8B8780}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--text)}
/* 4 A11Y */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--radius)}
:focus:not(:focus-visible){outline:none}
[tabindex="-1"]:focus-visible{outline-offset:-4px} /* skip-link targets */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skiplink{position:absolute;left:-9999px;top:0;z-index:200;background-color:var(--gold-1);
background-image:var(--gold-gradient);
color:var(--ink);font-weight:600;padding:.85rem 1.25rem;text-decoration:none}
.skiplink:focus{left:0}
/* the plate IS the gold gradient, so the global ring (--gold, offset 3px) is gold-on-gold at
 1.0:1 where it touches the plate and lands on an unknown hero photograph everywhere else.
 An INSET --ink ring is 8.45:1 against the plate it sits on, whatever is behind the header. */
.skiplink:focus-visible{outline:2px solid var(--ink);outline-offset:-5px}
/* 5 TYPE */
h1,h2,h3,h4,.h-display,.h-section,.h-card{font-family:var(--font-serif);font-weight:500;
color:var(--text);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.h-display{font-size:clamp(2.6rem,6vw,4.75rem);line-height:1.03;letter-spacing:-.025em}
.h-section{font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:-.018em;position:relative}
.h-section::after{content:"";display:block;width:3.25rem;height:2px;background:var(--gold-gradient);
border-radius:1px;margin:1.15rem 0 0}
.text-center .h-section::after{margin-inline:auto}
/* .card__title rides here too: without it 110 card headings fell back to the UA h3 size
 and sat a step below the four that carry .h-card (§8 consistency) */
.h-card,.card__title{font-size:clamp(1.15rem,1.5vw,1.35rem)}
.eyebrow{display:flex;align-items:center;gap:.7rem;font-size:.875rem;font-weight:600;
text-transform:uppercase;letter-spacing:.18em;color:var(--gold);margin:0 0 1rem;line-height:1.4}
.eyebrow::before{content:"";flex:0 0 2rem;height:2px;border-radius:1px;background:var(--gold-gradient)}
.text-center .eyebrow{justify-content:center}
.lede{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.6;color:var(--muted);max-width:68ch}
p{max-width:72ch}
.muted{color:var(--muted)}
.text-center{text-align:center}
.text-center .lede,.text-center p{margin-inline:auto}
.list-plain{list-style:none;padding:0;display:grid;gap:.55rem}
/* scoped: .list-plain stays grid */
nav[aria-label="Breadcrumb"] .list-plain{display:flex;flex-wrap:wrap;align-items:center;
gap:.5rem;font-size:.9375rem}
nav[aria-label="Breadcrumb"] li+li::before{content:"/";color:var(--muted);margin-right:.5rem}
nav[aria-label="Breadcrumb"] [aria-current]{color:var(--muted)}
/* without this the breadcrumb collides with the .eyebrow margin */
nav[aria-label="Breadcrumb"]{margin-bottom:1.1rem}
/* the crumb link renders 15px x 1.68 = 25.2px tall, under the 44px target. min-height would
 add ~19px to the hero copy stack on nine routes, so the HIT area is expanded with a
 transparent pseudo instead and the layout does not move: 9.4px of reach above and below,
 inside the .hero__content gap (11.2px at its tightest), so it never covers the eyebrow. */
nav[aria-label="Breadcrumb"] .list-plain a{position:relative}
nav[aria-label="Breadcrumb"] .list-plain a::after{content:"";position:absolute;
left:0;right:0;top:50%;height:var(--tap);translate:0 -50%}
.list-check{list-style:none;padding:0;display:grid;gap:.8rem}
.list-check>li{position:relative;padding-left:1.85rem}
.list-check>li::before{content:"";position:absolute;left:.15rem;top:.62em;width:.62rem;
height:.32rem;border-left:1.5px solid var(--gold-2);border-bottom:1.5px solid var(--gold-2);
transform:rotate(-45deg)}
/* 6 LAYOUT */
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:760px}
/* background-color, not background, so .section--alt can still override it. This is the
 load-bearing line for the fixed hero: --ink is what body already paints, so nothing looks
 different, but the section is now OPAQUE and can cover the photograph behind it. */
.section{padding-block:var(--pad-y);background-color:var(--ink)}
/* --sp so .section--rise can add its overlap back onto whichever base a section uses */
.section--tight{--sp:clamp(2.25rem,5vw,3.5rem);padding-block:var(--sp)}
.section--alt{background:var(--surface);border-block:1px solid var(--line)}
.stack{display:grid;gap:1.15rem;align-content:start}
.grid{display:grid;gap:clamp(1.15rem,2.5vw,2rem)}
.split{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
@media (min-width:560px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:640px){.grid--2,.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}
.split--reverse>:first-child{order:2}}
/* 7 BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
min-height:var(--tap);padding:.8rem 1.6rem;font-size:1rem;font-weight:600;
text-decoration:none;border-radius:var(--radius);border:1px solid transparent;
cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn--gold{background-color:var(--gold-1);background-image:var(--gold-gradient);
color:var(--ink);border-color:var(--gold-1)}
.btn--gold:hover{background-image:linear-gradient(135deg,var(--gold-2),var(--gold-1));
border-color:var(--gold-2)}
.btn--gold:focus-visible{outline:2px solid var(--text);outline-offset:2px;box-shadow:0 0 0 5px var(--ink)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.text-center .btn-row{justify-content:center}
/* 8 CARDS */
/* min-width:0 so a `1fr` track cannot be forced wider than its share by the card's
 min-content. Inert at every tested width (worst measured card min-content 173px against a
 248px track at 560px); it is the guard for content that has not been written yet. */
.card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(1.35rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.8rem;min-width:0}
.card__title{margin:0;display:flex;align-items:center;gap:.65rem}
.card__title svg{flex:0 0 auto;width:24px;height:24px}
/* only tint icons that actually paint with currentColor. stroke="url(#gold-grad)" is left alone. */
.card__title svg[stroke="currentColor"]{color:var(--gold)}
.card__body{color:var(--muted);margin:0;max-width:none}
/* cards in a row are equal height (grid stretch); the action sits on the floor */
.card__cta,.card>.btn-row:last-child{margin-top:auto}
/* 8f CLICKABLE CARDS (§2). A: the card IS the <a>. B: .card__stretch's ::after covers the
 card, so a second control needs only z-index:1 to stay clickable. Hover is deliberately
 small (§7) and covers exactly the clickable area: border lift, 2px elevation, 1.02 image
 scale inside its own clipped box so the border never moves, 3px arrow nudge. */
.card--link,.card--link:hover{color:inherit;text-decoration:none}
.card--link{position:relative;display:flex;flex-direction:column;cursor:pointer;
transition:border-color .2s,background-color .2s,transform .2s,box-shadow .2s}
.card--link picture{overflow:hidden;border-radius:var(--radius)}
.card--link picture img{transition:transform .35s ease}
.card__stretch{color:inherit;text-decoration:none}
.card__stretch::after{content:"";position:absolute;inset:0;z-index:0}
.card__action{position:relative;z-index:1}
/* a <span>, never an anchor: the old text link's look, not a second focus stop */
.card__cta{display:inline-flex;align-items:center;gap:.5rem;padding-top:.15rem;
font-size:.9375rem;font-weight:600;color:var(--gold);transition:color .2s}
.card__cta::after{content:"";flex:0 0 auto;width:.42rem;height:.42rem;
border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
transform:rotate(45deg);transition:translate .2s}
@media (hover:hover){ /* hover-only, so nothing sticks after a tap */
.card--link:hover{border-color:var(--gold-soft);background-color:var(--surface);
transform:translateY(-2px);box-shadow:0 8px 22px #00000059}
.card--link:hover :is(.card__title,.card__cta){color:var(--gold-2)}
.card--link:hover .card__cta::after{translate:.16rem 0}
.card--link:hover picture img{transform:scale(1.02)}}
.card--link:active{transform:none;box-shadow:none;background-color:var(--surface-2);
border-color:var(--gold-soft)}
/* §19: the ring is on the WHOLE card and heavier than the global one. Last in the block on
 purpose, since it ties with :hover and :active. B focuses the inner link, so the ring moves
 out to the card; if :has() is unsupported the global ring still lands on card or link. */
.card--link:focus-visible,.card--link:has(.card__stretch:focus-visible){
outline:3px solid var(--gold-2);outline-offset:3px;border-color:var(--gold)}
.card--link:has(.card__stretch:focus-visible) .card__stretch{outline:none}
/* the lead card of a set: a warmer edge, and two columns where there is room */
.card--feature{border-color:var(--gold-soft)}
@media (min-width:640px){.grid--3>.card--feature{grid-column:span 2}}
.fleet__img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
border-radius:var(--radius)}
.chip{display:inline-flex;align-items:center;font-size:.875rem;line-height:1.2;
letter-spacing:.06em;padding:.45rem .85rem;border:1px solid var(--line);
border-radius:999px;background:var(--surface-2);color:var(--muted)}
.chip-row{display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:0;list-style:none}
/* 8a CARD CHIPS (§23). Tighter than a standalone chip so two fit on a line at 320px.
 .card__cta keeps margin-top:auto, so a row of cards keeps its actions aligned. */
.card .chip-row{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.card .chip-row .chip{font-size:.8125rem;letter-spacing:.03em;
padding:.28rem .65rem;background:var(--surface);border-color:var(--gold-soft)}
/* 8e TRUSTBAND (§19). Compact strip under the homepage hero */
.trustband{background:var(--surface);border-bottom:1px solid var(--line);
--sp:clamp(.9rem,2.5vw,1.35rem);padding-block:var(--sp)}
.trustband__list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
gap:.5rem clamp(.9rem,2.5vw,2rem);padding:0;margin:0;list-style:none;text-align:center;
font-size:.875rem;letter-spacing:.06em;color:var(--muted)}
/* 8b SPEC-TABLE. Field name, config one, config two. Divs, a <dl> or a <tr> all work.
 Under 640px the name takes its own line, configs side by side below. */
.spec-table{display:grid;background:var(--surface-2);border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden}
.spec-table__row{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .9rem;margin:0;
padding:.85rem clamp(.9rem,2.5vw,1.3rem);border-top:1px solid var(--line);text-align:left}
.spec-table__row:first-child{border-top:0}
.spec-table__row--head{background:var(--surface)}
.spec-table__row>*{margin:0;min-width:0;max-width:none;font-weight:400;
font-size:.9375rem;line-height:1.55;color:var(--muted)}
.spec-table__row>:first-child{grid-column:1/-1;font-size:.8125rem;font-weight:600;
text-transform:uppercase;letter-spacing:.13em;color:var(--gold)}
.spec-table__row--head>*+*{color:var(--text);font-family:var(--font-serif);font-size:1.1rem}
@media (min-width:640px){.spec-table__row{gap:1.25rem;padding-block:1rem;
grid-template-columns:minmax(8.5rem,.85fr) 1fr 1fr;align-items:baseline}
.spec-table__row>:first-child{grid-column:auto}}
/* 8c TESTIMONIAL. The alt-text slash empties the decorative quote mark for assistive
 tech; the plain declaration above is the fallback where that syntax is new. */
.testimonial,.quote-group{background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius)} /* .quote-group lives in 12, the surface is the same */
.testimonial{position:relative;display:grid;gap:1.4rem;justify-items:start;
padding:clamp(2.25rem,5vw,3.5rem) clamp(1.35rem,4vw,3rem)}
.testimonial::before{content:"\201C";content:"\201C" / "";position:absolute;z-index:0;
left:clamp(.4rem,2vw,1.1rem);top:0;pointer-events:none;font-family:var(--font-serif);
font-size:clamp(6.5rem,13vw,11rem);line-height:.86;color:var(--gold);opacity:.15}
.testimonial>*{position:relative;z-index:1}
.testimonial__quote{font-family:var(--font-serif);font-weight:500;letter-spacing:-.012em;
font-size:clamp(1.3rem,2.5vw,1.95rem);line-height:1.38;color:var(--text);margin:0;
max-width:34ch;text-wrap:pretty}
/* 8d TRUSTPOINT. Label and body are shared with the testimonial. */
.trustpoint{display:grid;gap:.4rem;padding-top:1.05rem;border-top:1px solid var(--gold-soft)}
.testimonial__attr,.trustpoint__title{margin:0;font-family:var(--font-sans);
font-size:.9375rem;font-weight:600;line-height:1.5;text-transform:uppercase;
letter-spacing:.12em;color:var(--gold)}
.testimonial__context,.trustpoint>p{margin:0;max-width:56ch;font-size:.9375rem;
line-height:1.6;color:var(--muted)}
/* 9 MEDIA-PENDING. A finished surface in the 16/9 box a real image takes, so swapping a
 <picture> in later moves no layout. */
.media-pending{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius)}
.media-pending::before{content:"";position:absolute;inset:0;opacity:.055;
background:var(--crest) center/auto 52% no-repeat}
.media-pending>:not(picture):not(img){display:none}
/* 10 CHROME */
/* 10a HEADER OVER HERO (§14). Fixed, not sticky, so it floats on the hero instead of
 sitting on a slab above it, with a top-down scrim in place of a fill.
 HOOK: `is-scrolled` on .siteheader past ~8px; without it the scrim is a readable default. */
.siteheader{position:fixed;top:0;left:0;right:0;z-index:160;background-color:transparent;
border-bottom:1px solid transparent;
transition:background-color .25s,border-color .25s}
.siteheader::before{content:"";position:absolute;inset:0 0 -2.75rem;z-index:-1;
pointer-events:none;transition:opacity .25s;
background-image:linear-gradient(#000000c7,#0000008f 56%,#00000000)}
.siteheader.is-scrolled{background-color:#0a0a0af0;border-bottom-color:var(--line);
backdrop-filter:blur(10px)}
.siteheader.is-scrolled::before{opacity:0}
/* on containers so it inherits to the labels; the dropdown has its own opaque surface */
.siteheader:not(.is-scrolled) :is(.brand,.nav,.nav__cta,.navtoggle){
text-shadow:0 1px 7px #000000d9}
.nav__menu{text-shadow:none}
.siteheader__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;
width:100%;max-width:1200px;margin-inline:auto;padding:.6rem var(--gutter);min-height:66px}
.brand{display:inline-flex;align-items:center;gap:.65rem;min-height:var(--tap);
text-decoration:none;color:var(--text)}
/* the emblem is 200x182, so 1.099:1. The old hand-drawn SVG was portrait at 28x36 and
   these numbers must follow the artwork or the crown and laurels are squashed. */
.brand__mark{display:block;flex:0 0 auto;width:40px;height:36px}
/* Footer lockup: logo.webp has an opaque black background and `screen` drops it out,
 since black contributes nothing under that blend. */
.sitefooter__logo{width:100%;max-width:min(17.5rem,72vw);height:auto;margin:0 0 .35rem;
mix-blend-mode:screen}
.brand__text{font-family:var(--font-serif);font-size:1.05rem;line-height:1.2}
.nav{display:none}
.nav__list{display:flex;align-items:center;gap:clamp(1rem,2vw,1.9rem);list-style:none;padding:0}
.nav__link{display:inline-flex;align-items:center;min-height:var(--tap);font-size:.95rem;
color:var(--text);text-decoration:none}
.nav__link:hover{color:var(--gold)}
.nav .nav__link{color:var(--muted)}
.nav__link--active{color:var(--gold)}
.nav .nav__link--active{box-shadow:inset 0 -1px 0 var(--gold)}
/* dropdown, click and keyboard driven, never :hover. Visibility is the `hidden` attribute
 alone, so no display is declared for it to beat. */
.nav__item--has-menu{position:relative}
.nav__disclosure{display:inline-flex;align-items:center;gap:.4rem;padding:0;cursor:pointer}
.nav__disclosure svg{flex:0 0 auto;transition:transform .2s}
.nav__disclosure[aria-expanded="true"]{color:var(--gold)}
.nav__disclosure[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__menu{position:absolute;top:calc(100% - .35rem);left:0;z-index:10;min-width:14.5rem;
padding:.3rem;list-style:none;background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);box-shadow:0 16px 38px #0009}
.nav .nav__menu .nav__link{display:flex;width:100%;min-height:var(--tap);padding:.4rem .85rem;
white-space:nowrap;border-radius:var(--radius)}
.nav .nav__menu .nav__link:hover{color:var(--gold);background:var(--surface-2)}
/* the plate lives on the base rule: a state-scoped one would out-specify :hover below */
.nav__cta{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
padding:.55rem 1.15rem;border:1px solid var(--gold);border-radius:var(--radius);color:var(--gold);
background-color:#0a0a0a6b;
font-size:.95rem;font-weight:600;text-decoration:none;transition:background-color .2s}
.nav__cta:hover{background-color:var(--gold-1);background-image:var(--gold-gradient);color:var(--ink)}
/* under 540px the crest, wordmark, phone CTA and menu button cannot share one row inside
 --hdr-h, and a header that outgrows it pushes into the hero copy, so the header phone
 stands down; Call is permanent in the contact group. Must sit after the .nav__cta block
 above: same specificity, so source order decides. */
@media (max-width:539px){.nav__cta{display:none}.brand__text{font-size:.95rem}}
/* the toggle keeps a dark plate at all times so it reads over every hero image */
.navtoggle{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
min-width:var(--tap);min-height:var(--tap);padding:.5rem .75rem;border:1px solid var(--line);
background-color:#0a0a0a8c;
border-radius:var(--radius);color:var(--text);font-size:.95rem;cursor:pointer}
/* opaque over any photograph, and it scrolls inside itself on a short phone. No display
 here: [hidden] wins. */
.mobilenav{border-top:1px solid var(--line);background-color:var(--surface);
max-height:calc(100svh - var(--hdr-h));overflow-y:auto;
box-shadow:0 22px 44px #0009}
.mobilenav .nav__link--active{color:var(--gold);box-shadow:inset 2px 0 0 var(--gold)}
/* the bar goes solid with the menu: panel and header read as one opaque block */
body.is-menu-open .siteheader{background-color:var(--surface);border-bottom-color:var(--line)}
body.is-menu-open .siteheader::before{opacity:0}
.mobilenav__list{list-style:none;padding:0;display:grid}
.mobilenav__list a{display:flex;min-height:var(--tap);padding:.7rem var(--gutter);
border-bottom:1px solid var(--line)}
/* position + z-index are LOAD-BEARING, not decoration. The hero photograph is
 position:fixed, and a positioned element paints above the background of any
 NON-positioned block. Without this the footer keeps its text but loses its
 background, and the hero photo shows through the whole footer. .section already
 carries position:relative, which is why sections were unaffected. */
.sitefooter{position:relative;z-index:1;
background:var(--surface);border-top:1px solid var(--line);color:var(--muted);
padding-block:clamp(2.75rem,6vw,4.5rem) 1.75rem}
/* 10b FOOTER (§3). Mobile is one column ordered logo, name, Get in Touch, nav, tagline, legal,
 set with `order` so the markup stays identical on all 17 pages. From 900px it is the
 three-part lockup: brand left, three nav groups centre, Get in Touch right. */
.sitefooter__top{display:grid;gap:clamp(1.75rem,4vw,2.75rem)}
.sitefooter__brand{order:1;display:grid;justify-items:start;gap:.4rem}
.sitefooter__contact{order:2;display:grid;align-content:start;gap:.85rem}
.sitefooter__nav{order:3;display:grid;gap:clamp(1.4rem,4vw,2.5rem);
grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.sitefooter__name{margin:0;max-width:20ch;font-family:var(--font-serif);
font-size:clamp(1.1rem,1.9vw,1.35rem);line-height:1.25;letter-spacing:-.01em;color:var(--text)}
/* four real .btn targets: one column at 320px, two as soon as they fit, one again in the
 narrow desktop column. Never an icon-only target. */
.sitefooter__actions{display:grid;gap:.6rem;
grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr))}
/* the closing brand statement, full width above the restrained legal row */
.sitefooter__tagline{margin:clamp(2.25rem,5vw,3.25rem) auto 0;max-width:40ch;
font-family:var(--font-serif);font-size:clamp(1.2rem,2.4vw,1.65rem);line-height:1.35;
letter-spacing:-.012em;color:var(--text);text-align:center;text-wrap:balance}
.sitefooter__col{display:grid;gap:.6rem;align-content:start}
.sitefooter__heading{margin:0;font-family:var(--font-sans);
font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--gold)}
/* :not(.btn) matters: without it this out-specifies .btn--gold and paints the footer call
 button muted-on-gold, which measures 1.04:1. */
.sitefooter__col a:not(.btn){color:var(--muted);text-decoration:none}
.sitefooter__col a:not(.btn):hover{color:var(--gold)}
.sitefooter__col li a{display:inline-flex;align-items:center;min-height:var(--tap)}
.sitefooter__bottom{margin-top:clamp(1.75rem,4vw,2.5rem);padding-top:1.4rem;font-size:.875rem;
border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;
justify-content:space-between}
/* fine print. .list-plain is display:grid, which would stack these three vertically,
 so the row layout has to be restated. Same size and colour as the copyright beside it. */
.sitefooter__fine{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:0;font-size:.875rem}
.sitefooter__fine a{color:var(--muted);text-decoration:none;
display:inline-flex;align-items:center;min-height:var(--tap)}
.sitefooter__fine a:hover,.sitefooter__fine a:focus-visible{color:var(--text)}
/* Builder credit. Deliberately the quietest thing in the footer: --muted, one step below
   the legal line, no gold anywhere, so it reads as a signature and not a second brand
   competing with JB's. margin-left:auto pins it to the right end of the flex row and it
   wraps under the legal lines once the row runs out of width. Not fixed or floating: an
   overlay would collide with the contactbar and the sticky hero.
   min-height is the tap target, not the visual size. The mark stays 22px. */
.sitefooter__builder{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;
min-height:var(--tap);color:var(--muted);font-size:.8125rem;text-decoration:none;
opacity:.72;transition:opacity .2s,color .2s}
.sitefooter__builder:hover,.sitefooter__builder:focus-visible{opacity:1;color:var(--text)}
/* The supplied mark is white type plus a blue glyph, so it is already built for a dark
   footer. No recolouring: 72% opacity on the link is what keeps it from competing with
   JB's gold, and altering someone's logo colour to tone it down would be worse. */
.sitefooter__builder img{display:block;width:auto;height:16px}
@media (max-width:539px){
.sitefooter__builder{margin-left:0;font-size:.75rem}
.sitefooter__builder__mark{width:18px;height:18px}
.sitefooter__builder img{height:13px}}
@media (min-width:900px){
.sitefooter__top{grid-template-columns:minmax(12rem,.9fr) minmax(0,2fr) minmax(13rem,1fr);
gap:clamp(1.5rem,3vw,3.25rem);align-items:start}
.sitefooter__brand,.sitefooter__nav,.sitefooter__contact{order:0}
.sitefooter__nav{grid-template-columns:repeat(3,minmax(0,1fr))}
.sitefooter__actions{grid-template-columns:1fr}}
@media (min-width:768px){.nav{display:block}.navtoggle,.mobilenav{display:none}}
/* 11 HERO */
/* clears the fixed header on any hero that is not .hero--bg */
.hero{padding:calc(var(--hdr-h) + clamp(2rem,5vw,3.5rem)) 0 clamp(3rem,8vw,6.5rem);
border-bottom:1px solid var(--line)}
.hero__inner{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
/* keep the header phone number on one line; it wrapped to three on small screens */
.nav__cta{white-space:nowrap}
.hero__content{display:grid;gap:1.35rem;align-content:start}

/* 11b HERO--BG. Full-bleed photograph: image 0, scrim 1, grain 2, content 3. All 17 pages
 share it; a route modifier varies it only through custom properties, never an inline
 style: --hero-h/--hero-min/--hero-max is the tier (§15), --fp/--fp-m the crop (§16). */
.hero--bg{--hero-h:52svh;--hero-min:20rem;--hero-max:30rem;--fp:50% 50%;
display:grid;align-content:center;overflow:hidden;
min-height:clamp(var(--hero-min),var(--hero-h),var(--hero-max));
/* --hpt/--hpb so 11e's sticky panel can take the tier's own frame by inheritance */
--hpt:calc(var(--hdr-h) + clamp(1.1rem,5vw,3rem));--hpb:clamp(1.75rem,6vw,4rem);
padding:var(--hpt) 0 var(--hpb)}
/* pin the <picture> and the <img>: the reset's height:auto would otherwise leave an
 absolutely positioned replaced image at intrinsic height. */
.hero--bg .hero__media>picture{position:absolute;inset:0;z-index:0;
pointer-events:none}
.hero--bg :is(.hero__bg,picture img){position:absolute;inset:0;width:100%;height:100%;
max-width:none;object-fit:cover;object-position:var(--fp);border-radius:0}
/* both classes: .hero--bg alone ties with 14's .hero::before and loses on source order,
 painting the gold wash instead of the scrim. Layer 1 is the fade into --ink so the next
 section starts deliberately (§15). Layer 2 holds the breadcrumb and gold eyebrow above
 4.5:1 over a bright upper frame, needed by airport, services and testimonials, and is
 clear by half height. The left bias earns its keep only at 900px up. */
.hero--bg .hero__media::before{z-index:1;background-image:
linear-gradient(to top,#0a0a0a,#0a0a0a00 13%),
linear-gradient(#0008,#0006 22%,#00000000 50%),
linear-gradient(#000a,#000b 42%,#000c)}
/* Layer 3 above is a FLAT dim across the whole hero. On mobile that is right, because the
   copy spans the full width. On desktop it was measured crushing the photographs to 11-32%
   of their source brightness: /fleet rendered as a black panel with text on it, which is the
   "plain heading with no visual background" §8 forbids while §11 asks for the focal subject
   to stay visible. From 900px up the copy is capped at 44rem on the left, so the dim becomes
   HORIZONTAL: heavy under the text, clearing across the subject. Simulated over every hero
   source: worst text contrast 12.79, photo brightness 26-66 against a floor of 20. */
@media (min-width:900px){
.hero--bg .hero__media::before{background-image:
linear-gradient(to top,#0a0a0a,#0a0a0a00 13%),
linear-gradient(#00000066,#00000042 22%,#00000000 50%),
linear-gradient(to right,#000000e6,#000000db 62%,#00000080 74%,#00000024 84%,#0000000a)}
}
.hero--bg .hero__media::after{z-index:2}
.hero--bg .hero__inner{position:relative;z-index:3;grid-template-columns:none;gap:0;
min-width:0}
/* 44rem is 704px, inside the 600-720px band §17 asks for */
.hero--bg .hero__content{min-width:0;max-width:44rem;text-shadow:0 2px 18px #0000008c}
.hero--bg .btn{text-shadow:none}
.hero--bg .lede{color:#e8e4db}
/* breadcrumb above the eyebrow, kept visually secondary (§17 line 339) */
.hero__crumb{font-size:.875rem;color:var(--muted)}
.hero__content .hero__crumb{margin-bottom:0} /* the grid gap already spaces it */
.hero__crumb a{color:var(--muted);text-decoration:none}
.hero__crumb a:hover{color:var(--gold)}
/* trimmed gutters hold the CTAs on one line from ~760px of content width */
.hero--bg .btn-row{gap:.7rem}
.hero--bg .btn--ghost{padding-inline:1.15rem}
/* 11c HEIGHT TIERS (§15). The base above is the eight main internal routes, 45-60vh.
 min-height is only the floor; the face and gap also step down outside home. */
.hero--bg:not(.hero--home) .h-display{font-size:clamp(1.95rem,4vw,3.1rem)}
.hero--bg:not(.hero--home) .lede{font-size:clamp(1rem,1.15vw,1.1rem)}
.hero--bg:not(.hero--home) .hero__content{gap:clamp(.7rem,2vw,1rem)}
/* quote and policy are shallower still, so they trim their own frame */
.hero--quote,.hero--policy{--hpt:calc(var(--hdr-h) + clamp(1rem,3.5vw,2.25rem));
--hpb:clamp(1.75rem,4vw,2.75rem)}
.hero--home{--hero-h:72svh;--hero-min:26rem;--hero-max:40rem}
.hero--quote{--hero-h:45svh;--hero-min:17rem;--hero-max:26rem}
.hero--policy{--hero-h:34svh;--hero-min:13rem;--hero-max:22rem}
/* restrained, never louder than a service page (§8) */
.hero--policy .h-display{font-size:clamp(2rem,4vw,3.05rem)}
.hero--policy .lede{font-size:1.05rem}
/* quote and policy take an extra flat dim: quote hands off to .form-panel (§27) and the
 legal pages read quiet. */
.hero--quote.hero--bg::before,.hero--policy.hero--bg::before{background-color:#0000006b}
/* 11d FOCAL POSITIONS (§16). Desktop crops vertically, mobile horizontally, so every
 route declares both. Copy runs left, so subjects sit right of centre. */
.hero--home{--fp:53% 54%;--fp-m:66% 52%}
/* portrait source (1086x1448) in a wide band: cover makes the width fit exactly, so the X
   value has no effect at all on desktop and only Y selects the visible slice. 58% landed on
   a dark strip and measured 17.9 brightness; 70% lands on the desk plane with the folio,
   itinerary and key, and measures 43.9 while contrast stays at 13.45. */
.hero--concierge{--fp:50% 70%;--fp-m:50% 55%}
.hero--travel{--fp:57% 52%;--fp-m:50% 58%}
.hero--services{--fp:50% 62%;--fp-m:62% 66%}
.hero--fleet{--fp:62% 50%;--fp-m:70% 52%}
.hero--airport{--fp:58% 55%;--fp-m:62% 58%}
/* corporate: bias off the lit portico, bright in the upper right */
.hero--corporate{--fp:60% 58%;--fp-m:45% 60%}
/* group: keeps the PREVOST badge off-centre under the headline in the mobile crop */
.hero--group{--fp:60% 50%;--fp-m:60% 52%}
.hero--testimonials{--fp:55% 55%;--fp-m:58% 58%}
.hero--quote{--fp:55% 50%;--fp-m:52% 55%}
/* the two V7 pages share hero-quote.jpg, so they share its measured focal point rather
 than falling back to a centre crop that was never checked against this photograph */
.hero--chauffeur,.hero--about{--fp:55% 50%;--fp-m:52% 55%}
.hero--policy{--fp:50% 45%;--fp-m:55% 50%}
@media (max-width:767px){
.hero--bg :is(.hero__bg,picture img){object-position:var(--fp-m,var(--fp))}}
/* .hero--bg is re-declared first and the tiers after it: equal specificity, so source
 order is what stops home and policy collapsing to the base tier. */
@media (min-width:900px){
.hero--bg{--hero-h:54svh;--hero-min:22rem;--hero-max:36rem;
--hpt:calc(var(--hdr-h) + clamp(1.5rem,3vw,2.75rem));--hpb:clamp(2.25rem,4vw,3.5rem)}
.hero--home{--hero-h:78svh;--hero-min:33rem;--hero-max:54rem;
--hpt:calc(var(--hdr-h) + clamp(2.5rem,5vw,4rem));--hpb:clamp(3.25rem,5vw,4.5rem)}
.hero--quote{--hero-h:46svh;--hero-min:20rem;--hero-max:32rem}
.hero--policy{--hero-h:34svh;--hero-min:15rem;--hero-max:22rem}
/* NOTE: this second 900px background-image ties with the horizontal one above and wins on
 source order, so it is the desktop scrim that actually paints. The sticky panel is listed
 here for that reason: it must resolve to whatever a plain hero resolves to. See TODO. */
.hero--bg .hero__media::before{background-image:
linear-gradient(to top,#0a0a0a,#0a0a0a00 11%),
linear-gradient(#0008,#0006 22%,#00000000 50%),
linear-gradient(100deg,#000b,#000a 26%,#0009 52%,#0004 76%,#0002),
linear-gradient(to top,#0008,#0003 30%,#0002 62%,#0006)}}
/* HERO SCROLL (V7). Sticky media layer, text in normal document flow.
   The photograph is position:fixed and fills the viewport. The hero copy is an ordinary
   in-flow sibling, so it scrolls away at exactly the page rate, and .section--rise then
   climbs over the photograph. The photograph itself never moves: no parallax, no zoom, no
   scroll-linked translate, and no second-stage drift once the copy has gone.
   What replaced what: .hero--sticky, .hero__sticky and the hero-lift scroll animation are
   all deleted. The animation was the old way of cancelling a sticky pin, and cancelling a
   pin is exactly the second-stage movement this is meant to remove.
   The one requirement this places on the rest of the sheet is that EVERY section after the
   hero is opaque, or the fixed photograph shows through farther down the page. .section
   gained background-color above for that reason. */
.hero--bg{min-height:100svh}
.hero__media{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
@media (max-width:767px){.hero__media img{object-position:var(--fp-m,var(--fp,50% 50%))}}
/* the copy sits above the fixed photograph and below every following section */
.hero__inner{position:relative;z-index:1}
/* no-JS, no-support fallback is the same thing: fixed needs nothing to work */
/* 12 FORMS */
.form{display:grid;gap:1.5rem}
.form fieldset{border:0;margin:0;padding:0;min-width:0}
.form legend{padding:0}
.form__grid{display:grid;gap:1.15rem}
.field{display:grid;gap:.4rem;min-width:0}
.field__label{font-size:.9375rem;font-weight:600}
.field__input,.field__select,.field__textarea{width:100%;min-height:var(--tap);
padding:.75rem .9rem;background:var(--surface-2);color:var(--text);font-size:1rem;
border:1px solid var(--line);border-radius:var(--radius);line-height:1.5;
transition:border-color .2s,box-shadow .2s}
.field__input:focus,.field__select:focus,.field__textarea:focus{border-color:var(--gold);
box-shadow:0 0 0 1px var(--gold)}
.field__textarea{min-height:8.5rem;resize:vertical}
.field__select{appearance:none;padding-right:2.6rem;cursor:pointer;background-repeat:no-repeat;
background-position:right 1rem center;background-size:12px 8px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%23f4d47c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.field__hint{font-size:.875rem;color:var(--muted)}
.field__error{font-size:.875rem;font-weight:600;color:var(--err)}
[aria-invalid="true"]{border-color:var(--err)!important}
.form__status{padding:.9rem 1.1rem;border:1px solid var(--line);border-left-width:3px;
border-radius:var(--radius);background:var(--surface-2);font-size:.9375rem}
.form__status--ok{border-left-color:var(--ok);color:var(--ok)}
.form__status--err{border-left-color:var(--err);color:var(--err)}
.hp-field{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;
overflow:hidden;opacity:0;pointer-events:none} /* honeypot, never display:none */
/* conditional group: ships with `hidden`, the script removes it. [hidden] beats display. */
.quote-group{display:grid;gap:1.15rem;padding:1.15rem clamp(1rem,2.5vw,1.4rem);
border-left:2px solid var(--gold-soft)}
@media (min-width:640px){.form__grid{grid-template-columns:repeat(2,1fr)}
.field--full{grid-column:1/-1}}
/* 12b FORM PANEL (§27). The form never sits on a photograph: the hero is its own band,
 this is a flat opaque surface, --text on --surface at 15.3:1 */
.form-panel{background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);padding:clamp(1.35rem,4vw,2.75rem)}
.form__selected{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .8rem;
padding:.75rem 1rem;border:1px solid var(--gold-soft);border-left-width:3px;
border-radius:var(--radius);background:var(--surface-2);font-size:.9375rem;color:var(--muted)}
.form__selected strong{color:var(--gold);font-weight:600}
/* the floating .contactbar is 44px of target plus its own padding and safe area, so the
 submit row reserves that much below itself and the bar can never land on the button */
.form__submit{margin-bottom:calc(var(--tap) + 1.75rem + env(safe-area-inset-bottom,0px))}
.form__status,.form__fallback{margin-top:1.25rem}
.form__fallback{font-size:.9375rem}
@media (min-width:768px){.form__submit{margin-bottom:1.5rem}}
/* failure state. Gold beats the inherited --err colour of .form__status--err. */
.form__status-contact{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:.6rem 0 0;
padding:0;list-style:none}
.form__status-contact a{display:inline-flex;align-items:center;min-height:var(--tap);
font-weight:600;color:var(--gold)}
.form__status-contact a:hover{color:var(--text)}
/* 13 CONTACTBAR (§12, §31). Replaces .callbar. Call, Message, WhatsApp in one floating
 container, icon over label, equal weight by design; stacked on mobile so "WhatsApp"
 cannot squeeze the third column at 320px.
 HOOKS: `is-menu-open` on <body>, `contactbar--hidden` on the bar. */
.contactbar{position:fixed;left:0;right:0;bottom:0;z-index:150;
display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;
padding:.5rem var(--gutter);
padding-bottom:calc(.5rem + env(safe-area-inset-bottom,0px));
background:#0a0a0af5;border-top:1px solid var(--line);backdrop-filter:blur(12px)}
.contactbar__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:.18rem;min-width:var(--tap);min-height:var(--tap);padding:.45rem .3rem;
background:var(--surface-2);border:1px solid var(--gold-soft);border-radius:var(--radius);
color:var(--text);font-size:.8125rem;font-weight:600;line-height:1.25;letter-spacing:.02em;
text-decoration:none;transition:background-color .2s,border-color .2s,color .2s}
.contactbar__btn svg{flex:0 0 auto;width:20px;height:20px;color:var(--gold-2)}
.contactbar__label{white-space:nowrap}
.contactbar__btn:hover{background-color:var(--gold-1);background-image:var(--gold-gradient);
border-color:var(--gold-2);color:var(--ink)}
.contactbar__btn:hover svg{color:var(--ink)}
.contactbar__btn:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
body.is-menu-open .contactbar,.contactbar--hidden{display:none}
/* 13a THE BAR STANDS DOWN FOR THE FOOTER (§12). Pure CSS, no observer: the footer publishes
 a named view timeline, <html> scopes the name so a fixed element outside it can read it, the
 bar animates off against it. Without scroll-driven animation the bar simply stays, and the
 body/footer bottom padding already holds it clear of the links and the submit button. */
@supports (animation-timeline:view()){
html{timeline-scope:--ft}
.sitefooter{view-timeline:--ft block}
@keyframes cb-stand-down{to{opacity:0;visibility:hidden;translate:0 130%}}
.contactbar{animation:cb-stand-down linear both;animation-timeline:--ft;
animation-range:entry 0% entry 20%}}
/* desktop: one compact row parked bottom right, not a bar and not a tall stack, so the
 widget stays ~59px deep and covers far less of the page. The body padding trick goes with
 it, so the footer reserves its own clearance. */
@media (min-width:768px){
.contactbar{left:auto;right:clamp(1rem,2vw,1.75rem);bottom:clamp(1rem,2vw,1.75rem);
grid-template-columns:repeat(3,auto);gap:.3rem;padding:.4rem;
border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 16px 38px #0009}
.contactbar__btn{flex-direction:row;gap:.5rem;padding:.5rem .9rem;font-size:.9375rem}
body{padding-bottom:0}
.sitefooter{padding-bottom:5.5rem}}
/* 14 TEXTURE. Decoration only: pointer-events:none pseudos at z-index:-1 in sections that
 isolate themselves, so they paint above the section background, behind real content. */
.section,.hero{position:relative;isolation:isolate}
/* 14a grain, feTurbulence over every dark section */
.section::after,.hero::after{content:"";position:absolute;inset:0;z-index:-1;
pointer-events:none;opacity:.045;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
background-size:120px 120px}
/* 14b soft warm radial washes behind the hero and the alternating sections */
.hero::before,.section--alt::before{content:"";position:absolute;inset:0;z-index:-1;
pointer-events:none;
background-image:radial-gradient(70% 55% at 15% 0%,#d4a01717,transparent 68%),
radial-gradient(55% 50% at 92% 100%,#f4d47c0d,transparent 70%)}
/* 14c crest watermark, large and offset so it reads as texture. At .045 over --ink the
 backdrop is about #141310: body text 16.8:1, flat gold 7.8:1. */
.h-section::before{content:"";position:absolute;z-index:-1;pointer-events:none;
left:-5.5rem;top:50%;translate:0 -50%;width:15rem;height:21rem;opacity:.04;
background:var(--crest) center/contain no-repeat}
/* 14d .divider lived here. Unused on all 17 pages, so it went in the V5 sweep with .badge,
 .stat*, .btn--block and .fleet__reserve. Recover from git if a page ever needs one. */
/* 15 MOTION */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
/* A view-timeline animation is driven by scroll position, NOT by time, so
 animation-duration:.01ms above does nothing to it and 13a's stand-down still ran at full
 130% translate under reduce. Kill the animation itself. The bar then simply stays, which is
 the same state 13a already reserves body/footer clearance for when the timeline is missing.
 Source order does the work: this block is after the @supports in 13a, equal specificity. */
.contactbar{animation:none}}
/* 16 PRINT */
@media print{
.contactbar,.siteheader,.nav,.mobilenav,.navtoggle,.skiplink{display:none!important}
/* screen blend against white paper would print a black slab */
.sitefooter__logo{display:none!important}
.section::before,.section::after,.hero::before,.hero::after,.h-section::before,
.testimonial::before,.hero--bg picture,
.media-pending{display:none}
body{background:#fff;color:#000;padding:0;font-size:12pt}
.section,.hero{padding-block:1rem;background:none;isolation:auto}
.sitefooter{padding-bottom:1rem}
.hero--bg{min-height:0;display:block;padding-block:1rem}
.hero--bg .hero__content{max-width:none;text-shadow:none}
.hero__media{position:static;height:auto}
.section--rise{margin-top:0;padding-top:1rem;box-shadow:none;border-radius:0}
.card--link{transform:none;box-shadow:none}
.h-display,.h-section,.h-card,.card__title,.card__cta,.eyebrow,.muted,.lede,a,
.sitefooter__name,.sitefooter__tagline,.testimonial__quote,
.testimonial__attr,.trustpoint__title,.spec-table__row>*{color:#000}
.h-section::after,.eyebrow::before{background:#000}
.card,.section--alt,.sitefooter,.testimonial,.spec-table{background:transparent;border-color:#999}
.btn--gold,.contactbar__btn{background-image:none;background-color:transparent;color:#000}
}