/* ============================================================================
JNZ Insurance — Shared Design System
============================================================================
This stylesheet is loaded on EVERY page. It owns the design tokens, reset,
base typography, layout primitives, and components that appear in more than
one place (header, footer, button, section backgrounds, scroll-reveal, team
card, location card).
Page-specific section styles live in /[page].css (e.g. /home.css).
----------------------------------------------------------------------------
COLOR PALETTE — never introduce a color outside this list
----------------------------------------------------------------------------
--jnz-navy #123A5C primary brand. Headlines, primary CTA fill,
filled pill borders, link hover ring.
--jnz-blue #2E6F95 links, secondary brand accent, icon tint inside
cards and pill outlines.
--jnz-teal #178F8B eyebrow labels, accent rule on cards, star
ratings, focus ring base.
--jnz-champagne #7FAF87 green accent fills, footer eyebrows, halo glow
on hero CTA hover.
--jnz-mist #F7FAFA subtle alt section backgrounds, hover wash on
quiet UI.
--jnz-charcoal #263238 primary body text, card titles.
--jnz-slate #60727C secondary text, lede copy, meta rows.
--jnz-white #FFFFFF base canvas, text on dark.
Semantic aliases:
--bg / --bg-alt / --bg-warm / --bg-deep — page-level fills
--fg / --fg-strong / --fg-muted / --fg-on-deep — text levels
--action / --action-hover / --action-press — primary CTA states
--link / --link-hover — text-link states
--border / --border-strong / --divider — line work
--warning / --warning-bg — placeholder/warn callouts
----------------------------------------------------------------------------
TYPOGRAPHY SCALE
----------------------------------------------------------------------------
Family: Source Sans 3 (loaded via in HTML )
Weights: 400 regular (body), 600 semibold (UI labels, buttons),
700 bold (display, headlines). Do NOT introduce 300 / 500 / 800.
Sizes: Display 56px / H1 44px / H2 32px / H3 24px / H4 20px /
Body-LG 18px / Body 16px / Small 14px / Micro 12px
Line heights: tight 1.15, snug 1.25, normal 1.5, loose 1.65
Letter spacing: tight -0.01em (headings), eyebrow 0.12em (uppercase labels)
----------------------------------------------------------------------------
SHARED COMPONENT CLASSES — usage notes for future pages
----------------------------------------------------------------------------
.container / .container-narrow ..... centered max-width wrappers (1200/920)
.section / .section-tight .......... vertical rhythm wrappers (96 / 64 px)
.section-mist / -champagne /
-soft-champagne / -navy .......... section background variants
.section-navy-stripes .............. animated diagonal overlay; insert as
first child of any .section-navy
.eyebrow ........................... uppercase teal label above headings
.section-head ...................... title block (eyebrow + h2 + lede)
.btn / .btn-primary / .btn-secondary
/ .btn-lg ........................ button system
.field / .label / .input /
.select / .textarea /
.form-row / .form-actions /
.form-disclaimer ................. form input system; use on /contact, /quote
.header / .header-inner /
.header-nav / .header-phone ...... top navigation (use partials/header.html)
.footer / .footer-* ................ site footer (use partials/footer.html)
.hero / .hero-inner / .hero-text /
.hero-eyebrow / .hero-sub /
.hero-cta / .hero-trust /
.hero-watermark .................. full-screen page hero with animated
diagonal stripes; reuse on every page
that needs a hero
.team-card and children ............ staff card pattern; reuse on /team
.team-grid ......................... 4-up grid wrapper for team-cards;
override columns per page if needed
.location-card and children ........ office card pattern; reuse on
/locations and /locations/
.locations-grid .................... 2-up grid for two location cards
.coverage-card and children ........ basic coverage info tile (icon /
name / desc); use with .coverage-grid
on /locations and /coverage detail
.coverage-grid ..................... 4-up grid for coverage cards
.coverage-icon-auto / -home /
-protect / -biz .................. 4 category color tints for the
coverage card icon background
.faq / .faq-item / .faq-a .......... native -based accordion;
first child can carry [open]
.reveal / .reveal-stagger .......... scroll-triggered fade-up; observer
lives in /script.js
----------------------------------------------------------------------------
FUTURE-PAGE TODOs (extract into this file when first needed)
----------------------------------------------------------------------------
- Generic tab control (.tabs, .tab) — pattern currently embedded in home.css
as .coverage-tabs / .coverage-tab
- Utility helpers (.text-center, .mt-*, .visually-hidden) when first needed
----------------------------------------------------------------------------
CONSTRAINTS — read before editing
----------------------------------------------------------------------------
1. Do NOT introduce colors outside the design system. If you need a new
tint, add it to :root with a name and document its usage above.
2. Do NOT introduce font weights beyond 400 / 600 / 700.
3. Every new page must reference both /styles.css and a page-specific
/[page].css file. The page CSS only contains styles unique to that page.
4. Header and footer markup live in /partials/header.html and
/partials/footer.html — copy them verbatim into every page; do not
edit a copy in place, edit the partial and re-propagate.
5. No CSS @import statements. Use tags in HTML .
============================================================================ */
/* ============ Tokens ============ */
:root {
--jnz-navy: #123A5C;
--jnz-blue: #2E6F95;
--jnz-teal: #178F8B;
--jnz-champagne: #7FAF87;
/* Green system (2026 de-beige): replaces the former champagne/gold accents */
--jnz-green: #5E8C6A;
--jnz-green-hover: #46724F;
--jnz-green-press: #385B3F;
--jnz-mist: #F7FAFA;
--jnz-charcoal: #263238;
--jnz-slate: #60727C;
--jnz-white: #FFFFFF;
--bg: #FFFFFF;
--bg-alt: #F7FAFA;
--bg-warm: #EAF2EB;
--bg-deep: #123A5C;
--fg: #263238;
--fg-strong: #111A22;
--fg-muted: #60727C;
--fg-on-deep: #FFFFFF;
--action: #123A5C;
--action-hover: #0D2A44;
--action-press: #081C30;
--link: #2E6F95;
--link-hover: #245B7C;
--border: #E3E8EC;
--border-strong: #C8D1D7;
--divider: #EEF2F4;
--warning: #B5781F;
--warning-bg: #FBF1DE;
--font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--fw-regular: 400; --fw-semibold: 600; --fw-bold: 700;
--fs-display: 56px; --fs-h1: 44px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px;
--fs-body-lg: 18px; --fs-body: 16px; --fs-small: 14px; --fs-micro: 12px;
--lh-tight: 1.15; --lh-snug: 1.25; --lh-normal: 1.5; --lh-loose: 1.65;
--ls-tight: -0.01em; --ls-eyebrow: 0.12em;
--r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-pill: 999px;
--shadow-1: 0 1px 2px rgba(18, 58, 92, 0.06);
--shadow-2: 0 2px 8px rgba(18, 58, 92, 0.08);
--shadow-3: 0 8px 24px rgba(18, 58, 92, 0.10);
--shadow-focus: 0 0 0 3px rgba(46, 111, 149, 0.35);
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 380ms;
--header-h: 80px;
}
/* ============ Reset ============ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
/* ============ Base typography ============ */
body {
font-family: var(--font-sans);
font-weight: var(--fw-regular);
font-size: var(--fs-body);
line-height: var(--lh-normal);
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 {
font-family: var(--font-sans); font-weight: var(--fw-bold);
color: var(--fg-strong); line-height: var(--lh-tight);
letter-spacing: var(--ls-tight); margin: 0;
}
p { margin: 0 0 16px; line-height: var(--lh-normal); }
a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }
/* ============ Layout primitives ============ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 920px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.section-mist { background: var(--bg-alt); }
.section-champagne { background: var(--bg-warm); }
.section-soft-champagne { background: #F3F8F1; }
.eyebrow {
display: inline-block;
font-size: 13px;
font-weight: var(--fw-semibold);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--jnz-teal);
}
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { margin: 0 0 16px; font-size: 40px; letter-spacing: -0.02em; color: var(--jnz-navy); }
.section-head .lede { font-size: 18px; line-height: 1.6; color: var(--jnz-slate); max-width: 620px; margin: 0; }
/* ============ Buttons ============ */
.btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-sans);
font-size: 15px; font-weight: var(--fw-semibold);
padding: 13px 22px;
border-radius: 12px;
border: 1.5px solid transparent;
cursor: pointer; line-height: 1;
text-decoration: none;
transition:
background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
box-shadow 280ms var(--ease-premium),
transform 280ms var(--ease-premium);
white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--action); color: var(--fg-on-deep); }
.btn-primary:hover {
background: var(--action-hover); color: var(--fg-on-deep);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.12) inset,
0 10px 24px -8px rgba(18, 58, 92, 0.55),
0 0 32px rgba(18, 58, 92, 0.28);
transform: translateY(-1px);
}
.btn-primary:active { background: var(--action-press); transform: translateY(0); box-shadow: none; }
.btn-secondary { background: transparent; color: var(--jnz-navy); border-color: var(--jnz-navy); }
.btn-secondary:hover {
background: var(--jnz-navy); color: var(--fg-on-deep);
box-shadow:
0 8px 20px -8px rgba(18, 58, 92, 0.45),
0 0 24px rgba(18, 58, 92, 0.20);
transform: translateY(-1px);
}
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@media (prefers-reduced-motion: reduce) {
.btn { transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.btn-primary:hover, .btn-secondary:hover { transform: none; }
}
/* ============ Forms ============ */
.field { display: flex; flex-direction: column; gap: 8px; }
.label {
font-size: 13px; font-weight: var(--fw-semibold);
color: var(--jnz-charcoal);
letter-spacing: 0.02em;
}
.input, .select, .textarea {
font-family: var(--font-sans);
font-size: 16px; font-weight: var(--fw-regular);
color: var(--jnz-charcoal);
background: var(--jnz-white);
border: 1.5px solid var(--border);
border-radius: var(--r-lg);
padding: 12px 16px;
width: 100%;
box-sizing: border-box;
transition:
border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
background var(--dur-base) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--jnz-slate); opacity: 0.7; }
.input:hover:not(:focus),
.select:hover:not(:focus),
.textarea:hover:not(:focus) { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--jnz-blue);
box-shadow: var(--shadow-focus);
}
.textarea { resize: vertical; min-height: 120px; line-height: 1.5; font-family: var(--font-sans); }
.select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360727C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
padding-right: 44px;
cursor: pointer;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.form-disclaimer {
font-size: 13px; line-height: 1.5;
color: var(--jnz-slate);
margin: 0;
max-width: 460px;
}
@media (max-width: 600px) {
.form-row { grid-template-columns: 1fr; }
}
/* ============ Header ============ */
.header {
position: sticky; top: 0; z-index: 50;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.header-inner {
height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
position: relative;
}
.header-logo { flex-shrink: 0; }
.header-actions { flex-shrink: 0; }
.header-logo img { height: 44px; width: auto; }
/* Centered in the space between the logo and the actions group (flex: 1),
so the gap on each side of the links reads evenly. */
.header-nav {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
}
.header-nav a {
font-size: 15px; font-weight: var(--fw-semibold);
color: var(--jnz-charcoal); text-decoration: none;
position: relative;
display: inline-flex;
align-items: center;
transition: color var(--dur-fast) var(--ease-out);
}
.header-nav a:hover,
.header-nav a:focus-visible { color: var(--jnz-navy); outline: none; }
.header-nav a.active { color: var(--jnz-navy); }
/* Animated underline — scales out on hover and stays full when active */
.header-nav a::after {
content: '';
position: absolute;
left: 0; right: 0;
bottom: -28px;
height: 2px;
background: var(--jnz-navy);
transform: scaleX(0);
transform-origin: center;
transition: transform 220ms var(--ease-premium);
}
.header-nav a:hover::after,
.header-nav a:focus-visible::after,
.header-nav a.active::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.header-nav a::after { transition: none; }
}
/* ====== Dropdown menu (used on Locations) ====== */
.has-dropdown {
position: relative;
display: flex;
align-items: center;
}
.header-nav-chevron {
display: inline-block;
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
margin-left: 6px;
vertical-align: middle;
transition: transform var(--dur-base) var(--ease-out);
}
.has-dropdown:hover .header-nav-chevron,
.has-dropdown:focus-within .header-nav-chevron {
transform: rotate(180deg);
}
.header-dropdown {
position: absolute;
top: calc(100% + 36px);
left: 50%;
transform: translateX(-50%) translateY(-8px);
min-width: 220px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: 0 14px 40px rgba(18, 58, 92, 0.14);
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 60;
transition:
opacity 200ms var(--ease-out),
transform 200ms var(--ease-out),
visibility 0s 200ms;
}
/* Invisible bridge fills the gap above the panel so hover persists during transit */
.header-dropdown::before {
content: '';
position: absolute;
top: -36px;
left: 0; right: 0;
height: 36px;
}
.has-dropdown:hover .header-dropdown,
.has-dropdown:focus-within .header-dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition:
opacity 200ms var(--ease-out),
transform 200ms var(--ease-out),
visibility 0s;
}
.header-dropdown a {
padding: 10px 14px;
border-radius: var(--r-md);
font-size: 14px; font-weight: var(--fw-semibold);
color: var(--jnz-charcoal);
text-decoration: none;
white-space: nowrap;
display: block;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.header-dropdown a::after { display: none; }
.header-dropdown a:hover,
.header-dropdown a:focus-visible {
background: var(--jnz-mist);
color: var(--jnz-navy);
outline: none;
}
.header-dropdown a.active {
background: rgba(18, 58, 92, 0.06);
color: var(--jnz-navy);
}
@media (prefers-reduced-motion: reduce) {
.header-nav-chevron,
.header-dropdown { transition: none; }
}
/* ====== Mega-menu variant of .header-dropdown — wider 5-col panel for Coverage ======
Restructured to 5 short columns (3 Personal + 2 Commercial sub-categories)
instead of 2 tall columns with nested sub-groups. Drops panel height from
~840px to ~360px so it doesn't dominate the viewport. Anchored to the LEFT
of the trigger so the wider panel doesn't overflow the left edge. */
.has-dropdown .header-dropdown--mega {
min-width: 920px;
padding: 22px 26px 16px;
left: 0;
transform: translateY(-8px);
text-align: left;
}
.has-dropdown:hover .header-dropdown--mega,
.has-dropdown:focus-within .header-dropdown--mega {
transform: translateY(0);
}
.header-megamenu-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: auto;
column-gap: 20px;
row-gap: 6px;
}
/* Section labels (Personal / Commercial) sit on row 1, spanning their column groups */
.header-megamenu-section-label {
display: block;
font-size: 11px;
font-weight: var(--fw-bold);
color: var(--jnz-teal);
text-transform: uppercase;
letter-spacing: 0.18em;
padding: 0 8px 8px;
border-bottom: 1px solid var(--divider);
margin-bottom: 4px;
}
.header-megamenu-section--personal { grid-column: 1 / 4; grid-row: 1; }
.header-megamenu-section--commercial { grid-column: 4 / 6; grid-row: 1; }
/* Category columns sit on row 2 */
.header-megamenu-col {
grid-row: 2;
min-width: 0;
}
.header-megamenu-col-title {
display: block;
font-size: 10.5px;
font-weight: var(--fw-semibold);
color: var(--jnz-slate);
text-transform: uppercase;
letter-spacing: 0.14em;
margin: 0 0 6px;
padding: 0 8px;
}
.header-dropdown--mega a {
padding: 5px 8px;
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--jnz-charcoal);
border-radius: var(--r-md);
display: block;
text-decoration: none;
white-space: normal;
line-height: 1.3;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.header-dropdown--mega a::after { display: none; }
.header-dropdown--mega a:hover,
.header-dropdown--mega a:focus-visible {
background: var(--jnz-mist);
color: var(--jnz-navy);
outline: none;
}
.header-megamenu-footer {
margin-top: 14px;
padding: 12px 8px 0;
border-top: 1px solid var(--divider);
display: flex;
justify-content: flex-end;
}
.header-dropdown--mega .header-megamenu-viewall {
font-size: 12.5px;
font-weight: var(--fw-semibold);
color: var(--jnz-blue);
padding: 4px 0;
background: transparent;
}
.header-dropdown--mega .header-megamenu-viewall:hover {
color: var(--jnz-navy);
background: transparent;
}
.header-actions { display: flex; align-items: center; gap: 18px; }
.header-phone {
display: inline-flex; align-items: center; gap: 8px;
font-size: 15px; font-weight: var(--fw-semibold);
color: var(--jnz-navy); text-decoration: none;
padding: 10px 16px;
border-radius: 12px;
border: 1.5px solid rgba(46, 111, 149, 0.30);
background: rgba(46, 111, 149, 0.04);
white-space: nowrap;
transition:
background var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out),
box-shadow 280ms var(--ease-premium),
transform 280ms var(--ease-premium);
}
.header-phone:hover {
background: rgba(46, 111, 149, 0.10);
border-color: var(--jnz-blue);
color: var(--jnz-blue);
box-shadow:
0 0 0 1px rgba(46, 111, 149, 0.20),
0 8px 20px -8px rgba(46, 111, 149, 0.40),
0 0 28px rgba(46, 111, 149, 0.35);
transform: translateY(-1px);
}
.header-phone svg { width: 18px; height: 18px; color: var(--jnz-blue); }
/* Header CTA "Get a Free Quote" — champagne treatment for navbar prominence.
Override only the .btn-primary inside .header so other primary buttons stay navy. */
.header .btn-primary {
background: var(--jnz-green);
color: var(--jnz-white);
box-shadow: 0 4px 12px -4px rgba(70, 114, 79, 0.40);
}
.header .btn-primary:hover {
background: var(--jnz-green-hover);
color: var(--jnz-white);
box-shadow: 0 10px 24px -6px rgba(56, 91, 63, 0.50);
transform: translateY(-1px);
}
.header .btn-primary:active {
background: var(--jnz-green-press);
color: var(--jnz-white);
transform: translateY(0);
box-shadow: 0 2px 6px -2px rgba(56, 91, 63, 0.40);
}
.header .btn-primary:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(46, 111, 149, 0.40), 0 4px 12px -4px rgba(70, 114, 79, 0.40);
}
@media (prefers-reduced-motion: reduce) {
.header-phone { transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.header-phone:hover { transform: none; }
}
/* ============ Section-navy (with animated stripe overlay) ============ */
.section-navy {
background: var(--jnz-navy);
position: relative;
overflow: hidden;
}
.section-navy::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 12% 18%, rgba(243,232,213,0.06) 0%, transparent 42%),
radial-gradient(circle at 88% 82%, rgba(46,111,149,0.32) 0%, transparent 50%);
pointer-events: none;
}
.section-navy-stripes {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.section-navy-stripes::before,
.section-navy-stripes::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
transform-origin: bottom center;
transform: translateY(100%);
opacity: 0;
}
.section-navy-stripes::before {
background: linear-gradient(118deg, transparent 0%, transparent 8%, rgba(110, 156, 251, 0.30) 8%, rgba(110, 156, 251, 0.30) 22%, transparent 22%, transparent 100%) top left / 100% 100% no-repeat;
}
.section-navy-stripes::after {
background: linear-gradient(118deg, transparent 0%, transparent 70%, rgba(110, 156, 251, 0.32) 70%, rgba(110, 156, 251, 0.32) 88%, transparent 88%, transparent 100%) bottom right / 100% 60% no-repeat;
}
.section-navy.is-revealed .section-navy-stripes::before {
animation: heroStripeUp 1300ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}
.section-navy.is-revealed .section-navy-stripes::after {
animation: heroStripeUp 1100ms cubic-bezier(0.22, 1, 0.36, 1) 380ms both;
}
@media (prefers-reduced-motion: reduce) {
.section-navy-stripes::before,
.section-navy-stripes::after { animation: none; transform: none; opacity: 1; }
}
.section-navy > .container { position: relative; z-index: 1; }
.section-navy .section-head h2 { color: var(--jnz-white); }
.section-navy .section-head .eyebrow { color: var(--jnz-champagne); }
.section-navy .section-head .lede { color: rgba(255,255,255,0.78); }
/* Filled navy button on a navy section needs to invert — borrow the hero's
white-button-with-champagne-glow treatment so CTAs read on dark. */
.section-navy .btn-primary {
background: var(--jnz-white);
color: var(--jnz-navy);
border-color: var(--jnz-white);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.section-navy .btn-primary:hover {
background: var(--jnz-white);
color: var(--jnz-navy);
border-color: var(--jnz-white);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.6),
0 14px 32px rgba(0, 0, 0, 0.28),
0 0 36px rgba(255, 255, 255, 0.45),
0 0 72px rgba(127, 175, 135, 0.55);
transform: translateY(-2px);
}
.section-navy .btn-primary:active {
background: var(--jnz-white);
transform: translateY(-1px);
}
/* Outlined ghost button on navy — white border, transparent fill, white text. */
.section-navy .btn-secondary {
background: transparent;
color: var(--jnz-white);
border-color: rgba(255, 255, 255, 0.6);
}
.section-navy .btn-secondary:hover {
background: rgba(255, 255, 255, 0.14);
color: var(--jnz-white);
border-color: var(--jnz-white);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.35),
0 12px 28px rgba(0, 0, 0, 0.22),
0 0 40px rgba(255, 255, 255, 0.30);
transform: translateY(-2px);
}
.section-navy .btn-secondary:active { transform: translateY(-1px); }
/* ============ Quote CTA (centered navy banner with stripe overlay) ============
Pair with .section.section-navy + insert .section-navy-stripes overlay.
Used on each location page and on the homepage between Locations and Team. */
.quote-cta { text-align: center; }
.quote-cta h2 {
font-size: 36px; font-weight: var(--fw-bold);
color: var(--jnz-white);
margin: 0 0 16px;
letter-spacing: -0.015em;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.quote-cta p {
font-size: 17px; line-height: 1.55;
color: rgba(255, 255, 255, 0.85);
margin: 0 auto 28px;
max-width: 560px;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.20);
}
/* Wrapper for two CTAs side-by-side inside .quote-cta. Single-button banners
skip the wrapper. */
.quote-cta-actions {
display: inline-flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 820px) {
.quote-cta h2 { font-size: 28px; }
}
/* ============ Hero (full-screen page hero with animated stripes) ============ */
.hero {
position: relative;
min-height: 100vh;
padding: 0;
background: linear-gradient(135deg, #0F3252 0%, #123A5C 50%, #1A4870 100%);
color: var(--fg-on-deep);
overflow: hidden;
border-bottom: none;
display: flex;
align-items: center;
}
.hero::before, .hero::after {
content: ''; position: absolute; pointer-events: none; z-index: 0;
inset: 0;
transform-origin: bottom center;
}
/* Long diagonal stripe — anchored to LEFT */
.hero::before {
background: linear-gradient(118deg, transparent 0%, transparent 8%, rgba(110, 156, 251, 0.30) 8%, rgba(110, 156, 251, 0.30) 22%, transparent 22%, transparent 100%) top left / 100% 100% no-repeat;
animation: heroStripeUp 1300ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}
/* Short diagonal stripe — anchored to RIGHT, lower portion */
.hero::after {
background: linear-gradient(118deg, transparent 0%, transparent 70%, rgba(110, 156, 251, 0.32) 70%, rgba(110, 156, 251, 0.32) 88%, transparent 88%, transparent 100%) bottom right / 100% 60% no-repeat;
animation: heroStripeUp 1100ms cubic-bezier(0.22, 1, 0.36, 1) 380ms both;
}
@media (prefers-reduced-motion: reduce) {
.hero::before, .hero::after { animation: none; }
}
.hero-watermark {
position: absolute;
top: 36px;
right: 40px;
width: 440px;
height: 220px;
background: url('assets/jnz-logo.png') no-repeat center / contain;
filter: brightness(0) invert(1);
opacity: 0;
z-index: 1;
pointer-events: none;
animation: heroWatermarkFade 900ms ease-out 700ms forwards;
}
@keyframes heroWatermarkFade {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 0.22; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-watermark { opacity: 0.22; animation: none; }
}
.hero-inner {
position: relative; z-index: 1;
display: block;
width: 100%;
padding-top: 60px;
padding-bottom: 60px;
}
.hero-text { max-width: 760px; }
.hero-media { display: none; }
.hero-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
color: rgba(255, 255, 255, 0.65);
margin-bottom: 20px;
opacity: 0;
transform: translateY(16px);
animation: heroFadeUp 700ms var(--ease-out) both;
animation-delay: 100ms;
}
.hero-breadcrumb a {
color: var(--jnz-champagne);
text-decoration: none;
font-weight: var(--fw-semibold);
transition: color var(--dur-fast) var(--ease-out);
}
.hero-breadcrumb a:hover {
color: var(--jnz-white);
text-decoration: underline;
text-underline-offset: 2px;
}
.hero-breadcrumb span[aria-hidden] { color: rgba(255, 255, 255, 0.40); }
.hero-breadcrumb span[aria-current] { color: var(--jnz-white); font-weight: var(--fw-semibold); }
.hero-eyebrow {
font-size: 13px; font-weight: var(--fw-semibold);
letter-spacing: 0.16em; text-transform: uppercase;
color: #7FD8D4; margin-bottom: 24px;
}
.hero h1 {
font-size: clamp(36px, 4.5vw, 56px);
font-weight: var(--fw-bold);
line-height: 1.05; letter-spacing: -0.025em;
color: var(--jnz-white);
margin: 0 0 24px; max-width: none;
text-wrap: balance;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero-sub {
font-size: 18px; line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
font-weight: var(--fw-regular);
max-width: 580px;
margin: 0 0 36px;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.hero .btn-primary {
background: var(--jnz-green);
color: var(--jnz-white);
border-color: var(--jnz-green);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(94, 140, 106, 0.40);
}
.hero .btn-primary:hover {
background: var(--jnz-green-hover);
color: var(--jnz-white);
border-color: var(--jnz-green-hover);
box-shadow:
0 0 0 1px rgba(70, 114, 79, 0.7),
0 14px 32px rgba(0, 0, 0, 0.35),
0 0 36px rgba(127, 175, 135, 0.55),
0 0 72px rgba(56, 91, 63, 0.45);
transform: translateY(-2px);
}
.hero .btn-primary:active { background: var(--jnz-green-press); border-color: var(--jnz-green-press); transform: translateY(-1px); }
/* CTA banner "Get a Free Quote" buttons — same champagne treatment as hero +
navbar. Scoped to /quote/ links inside .quote-cta only, so the Call (primary)
button and other navy-context primary buttons keep their existing styles. */
.section-navy.quote-cta a.btn[href="/quote/"] {
background: var(--jnz-green);
color: var(--jnz-white);
border-color: var(--jnz-green);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(94, 140, 106, 0.40);
}
.section-navy.quote-cta a.btn[href="/quote/"]:hover {
background: var(--jnz-green-hover);
color: var(--jnz-white);
border-color: var(--jnz-green-hover);
box-shadow:
0 0 0 1px rgba(70, 114, 79, 0.7),
0 14px 32px rgba(0, 0, 0, 0.35),
0 0 36px rgba(127, 175, 135, 0.55),
0 0 72px rgba(56, 91, 63, 0.45);
transform: translateY(-2px);
}
.section-navy.quote-cta a.btn[href="/quote/"]:active {
background: var(--jnz-green-press);
border-color: var(--jnz-green-press);
transform: translateY(-1px);
}
.hero .btn-secondary {
background: transparent;
color: var(--jnz-white);
border-color: rgba(255, 255, 255, 0.6);
}
.hero .btn-secondary:hover {
background: rgba(255, 255, 255, 0.14);
color: var(--jnz-white);
border-color: var(--jnz-white);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.35),
0 12px 28px rgba(0, 0, 0, 0.22),
0 0 40px rgba(255, 255, 255, 0.30);
transform: translateY(-2px);
}
.hero .btn-secondary:active { transform: translateY(-1px); }
.hero-trust {
display: flex; gap: 14px 36px; flex-wrap: wrap; align-items: center;
max-width: 720px;
}
.hero-trust-item {
display: inline-flex; align-items: center; gap: 12px;
font-size: 14px; font-weight: var(--fw-regular);
color: rgba(255, 255, 255, 0.92);
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}
.hero-trust-item svg {
width: 30px; height: 30px;
padding: 6px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.4);
color: var(--jnz-white);
flex-shrink: 0;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.06);
}
/* Hero entrance animation — staggered fade-up on page load */
.hero-eyebrow,
.hero h1,
.hero-sub,
.hero-cta,
.hero-trust {
opacity: 0;
transform: translateY(16px);
animation: heroFadeUp 700ms var(--ease-out) both;
}
.hero-eyebrow { animation-delay: 200ms; }
.hero h1 { animation-delay: 320ms; }
.hero-sub { animation-delay: 480ms; }
.hero-cta { animation-delay: 600ms; }
.hero-trust { animation-delay: 760ms; }
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* Used by the logo click handler — disables hero animations briefly so they can be replayed from frame 0. */
.hero.replay-reset::before,
.hero.replay-reset::after,
.hero.replay-reset .hero-watermark,
.hero.replay-reset .hero-eyebrow,
.hero.replay-reset h1,
.hero.replay-reset .hero-sub,
.hero.replay-reset .hero-cta,
.hero.replay-reset .hero-trust {
animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
.hero-eyebrow, .hero h1, .hero-sub, .hero-cta, .hero-trust {
opacity: 1;
transform: none;
animation: none;
}
}
/* ============ Location card (reusable on /locations and detail pages) ============ */
.location-card {
background: var(--bg);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--shadow-1);
border: 1px solid rgba(18, 58, 92, 0.08);
display: flex; flex-direction: column;
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.location-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 44px rgba(18, 58, 92, 0.18);
border-color: rgba(18, 58, 92, 0.16);
}
@media (prefers-reduced-motion: reduce) {
.location-card { transition: none; }
.location-card:hover { transform: none; }
}
.location-map { height: 220px; position: relative; background: #E8EEF1; overflow: hidden; }
.location-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.location-body { padding: 32px 32px 28px; }
.location-eyebrow {
font-size: 12px; font-weight: var(--fw-bold);
color: var(--jnz-teal);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
margin-bottom: 10px;
display: flex; align-items: center; gap: 8px;
}
.location-eyebrow svg { width: 14px; height: 14px; }
.location-name {
font-size: 24px; font-weight: var(--fw-bold);
color: var(--jnz-navy); margin: 0 0 6px;
letter-spacing: -0.01em;
}
.location-addr { font-size: 15px; line-height: 1.5; color: var(--jnz-charcoal); margin-bottom: 20px; }
.location-meta {
display: flex; flex-direction: column; gap: 10px;
padding-top: 18px; border-top: 1px solid var(--divider);
}
.location-meta-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--jnz-charcoal); }
.location-meta-row svg { width: 16px; height: 16px; color: var(--jnz-blue); flex-shrink: 0; }
.location-meta-row a { color: var(--jnz-charcoal); text-decoration: none; font-weight: var(--fw-semibold); }
.location-meta-row a:hover { color: var(--jnz-blue); }
.location-meta-placeholder { font-size: 12px; color: var(--jnz-slate); font-style: italic; }
.location-directions {
margin-top: 18px;
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: var(--fw-semibold);
color: var(--jnz-blue); text-decoration: none;
}
.location-directions svg { width: 14px; height: 14px; }
.location-directions:hover { color: var(--link-hover); text-decoration: underline; }
/* 2-up grid for two location cards side by side. Collapses to 1-col under 820px. */
.locations-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
/* ============ Team card (reusable on /team) ============ */
.team-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--shadow-1);
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.team-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.team-photo {
aspect-ratio: 1 / 1;
background: linear-gradient(135deg, #DBE5EC 0%, #C6D4DE 100%);
display: flex; align-items: center; justify-content: center;
color: var(--jnz-navy);
font-size: 44px; font-weight: var(--fw-bold);
letter-spacing: -0.02em;
position: relative;
overflow: hidden;
}
.team-photo img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.team-body { padding: 22px 22px 24px; }
.team-name { font-size: 17px; font-weight: var(--fw-bold); color: var(--jnz-navy); margin: 0 0 4px; letter-spacing: -0.01em; }
.team-title {
font-size: 13px; color: var(--jnz-teal);
font-weight: var(--fw-semibold);
text-transform: uppercase; letter-spacing: 0.06em;
margin-bottom: 16px;
}
.team-meta {
font-size: 13px; color: var(--jnz-slate);
display: flex; flex-direction: column; gap: 6px;
padding-top: 14px; border-top: 1px solid var(--divider);
}
.team-meta-row { display: flex; align-items: center; gap: 8px; }
.team-meta-row svg { width: 13px; height: 13px; color: var(--jnz-slate); flex-shrink: 0; }
.team-meta-row.license { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; }
.team-meta-row a { color: var(--jnz-charcoal); text-decoration: none; }
.team-meta-row a:hover { color: var(--jnz-blue); }
/* 4-up grid wrapper for team cards. Override per page if you want 3-up. */
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
/* "View all team members" link, used below the grid on any team teaser. */
.team-cta {
display: inline-flex; align-items: center; gap: 8px;
font-size: 15px; font-weight: var(--fw-semibold);
color: var(--jnz-navy); text-decoration: none;
padding: 12px 0;
transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.team-cta:hover { color: var(--jnz-blue); gap: 12px; }
.team-cta svg { width: 16px; height: 16px; }
/* ============ Coverage card (basic info-tile pattern) ============ */
.coverage-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.coverage-card {
position: relative;
overflow: hidden;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 28px 24px 24px;
display: flex; flex-direction: column;
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
text-decoration: none;
color: inherit;
}
/* Anchor cards get a teal accent stripe + lift on hover. Non-anchor info
tiles (no [href]) stay quiet. */
.coverage-card[href] { cursor: pointer; }
.coverage-card[href]::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: var(--jnz-teal);
transform: translateX(-3px);
transition: transform 200ms var(--ease-out);
}
.coverage-card[href]:hover {
box-shadow: 0 14px 36px rgba(13,29,46,0.14);
transform: translateY(-4px);
border-color: var(--border-strong);
color: inherit;
}
.coverage-card[href]:hover::before { transform: translateX(0); }
.coverage-card-icon {
width: 44px; height: 44px;
border-radius: var(--r-md);
background: rgba(18, 58, 92, 0.06);
color: var(--jnz-navy);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
}
/* Tile color groups — category-based, 15% saturation on white */
.coverage-card-icon.coverage-icon-auto { background: #DDE9F0; }
.coverage-card-icon.coverage-icon-home { background: #DCEDDF; }
.coverage-card-icon.coverage-icon-protect { background: #DCEEED; }
.coverage-card-icon.coverage-icon-biz { background: #D0D8E0; }
.coverage-card-icon svg { width: 22px; height: 22px; }
.coverage-card-name { font-size: 17px; font-weight: var(--fw-semibold); color: var(--jnz-charcoal); margin-bottom: 8px; }
.coverage-card-desc { font-size: 14px; line-height: 1.5; color: var(--jnz-slate); margin-bottom: 0; flex: 1; }
@media (prefers-reduced-motion: reduce) {
.coverage-card[href] { transition: none; }
.coverage-card[href]:hover { transform: none; }
.coverage-card[href]::before, .coverage-card[href]:hover::before { transition: none; }
}
/* ============ Coverage section (full pattern: tabs + featured cards
+ grouped accordion + standalone CTA card). Used on homepage and on
each /locations// page. JS handlers in /script.js. ============ */
.coverage-tabs {
display: inline-flex;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 4px; margin-bottom: 40px; gap: 4px;
}
.coverage-tab {
font-family: var(--font-sans);
font-size: 14px; font-weight: var(--fw-semibold);
padding: 10px 22px;
border-radius: 4px;
border: none; background: transparent;
color: var(--jnz-slate); cursor: pointer;
transition: all var(--dur-fast) var(--ease-out);
}
.coverage-tab:hover { color: var(--jnz-navy); }
.coverage-tab.active { background: var(--jnz-navy); color: var(--fg-on-deep); }
.coverage-tab .count { margin-left: 8px; font-size: 12px; opacity: 0.75; font-weight: var(--fw-regular); }
.coverage-panel { display: none; }
.coverage-panel.active { display: block; }
.coverage-card-featured {
grid-column: span 2;
padding: 32px 30px 28px;
}
.coverage-card-featured::before {
background: var(--jnz-teal);
width: 3px;
transform: translateX(0);
}
.coverage-card-featured .coverage-card-name { font-size: 20px; }
.coverage-card-featured .coverage-card-desc { font-size: 15px; line-height: 1.55; }
.coverage-card-link {
font-size: 13px; font-weight: var(--fw-semibold);
color: var(--jnz-blue);
display: inline-flex; align-items: center; gap: 4px;
transition: gap var(--dur-fast) var(--ease-out);
}
.coverage-card-link svg { width: 14px; height: 14px; }
.coverage-card:hover .coverage-card-link { gap: 8px; }
.coverage-card-more { background: var(--jnz-mist); border-style: dashed; }
.coverage-card-more .coverage-card-icon.coverage-icon-biz,
.coverage-card-more .coverage-card-icon { background: var(--jnz-white); }
.coverage-card-cta::before { display: none; }
.coverage-card-cta {
background: var(--jnz-navy);
border-color: var(--jnz-navy);
color: var(--jnz-white);
grid-column: span 2;
}
.coverage-card-cta .coverage-card-icon {
background: rgba(255,255,255,0.08);
color: var(--jnz-white);
}
.coverage-card-cta .coverage-card-icon svg { width: 22px; height: 22px; }
.coverage-card-cta .coverage-card-name { color: var(--jnz-white); }
.coverage-card-cta .coverage-card-desc { color: rgba(255,255,255,0.78); }
.coverage-card-cta .coverage-card-link {
color: var(--jnz-white);
margin-top: auto;
font-weight: var(--fw-semibold);
}
.coverage-card-cta .coverage-card-link svg { width: 18px; height: 18px; }
.coverage-card-cta:hover {
border-color: var(--jnz-white);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(13,29,46,0.32);
}
.coverage-card-cta:hover .coverage-card-link { gap: 10px; }
/* ---- Featured-plus-grouped pattern ---- */
.coverage-featured-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
.coverage-featured-card {
position: relative;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 36px 36px 32px 38px;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-2);
overflow: hidden;
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.coverage-featured-card::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: var(--jnz-teal);
}
.coverage-featured-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 44px rgba(13, 29, 46, 0.14);
border-color: var(--border-strong);
}
.coverage-card-icon.coverage-featured-icon {
width: 64px; height: 64px;
margin-bottom: 24px;
border-radius: var(--r-lg);
}
.coverage-card-icon.coverage-featured-icon svg { width: 30px; height: 30px; }
.coverage-featured-name {
font-size: 24px;
font-weight: var(--fw-bold);
color: var(--jnz-navy);
margin: 0 0 12px;
letter-spacing: -0.01em;
line-height: var(--lh-snug);
}
.coverage-featured-desc {
font-size: 15px;
line-height: 1.6;
color: var(--jnz-slate);
margin: 0 0 28px;
flex: 1;
}
.coverage-featured-actions {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.coverage-featured-link {
font-size: 14px;
font-weight: var(--fw-semibold);
color: var(--jnz-blue);
display: inline-flex;
align-items: center;
gap: 4px;
text-decoration: none;
transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.coverage-featured-link svg { width: 14px; height: 14px; }
.coverage-featured-link:hover { gap: 8px; color: var(--link-hover); text-decoration: none; }
.coverage-groups {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.coverage-group {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-1);
}
.coverage-group-header {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
background: transparent;
border: 0;
padding: 18px 22px;
font-family: inherit;
cursor: pointer;
text-align: left;
color: inherit;
transition: background var(--dur-fast) var(--ease-out);
}
.coverage-group-header:hover { background: var(--jnz-mist); }
.coverage-group-header:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
border-radius: var(--r-md);
}
.coverage-group-icon {
width: 38px; height: 38px;
border-radius: var(--r-md);
background: rgba(18, 58, 92, 0.06);
color: var(--jnz-navy);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.coverage-group-icon svg { width: 18px; height: 18px; }
.coverage-group-name {
font-size: 16px;
font-weight: var(--fw-semibold);
color: var(--jnz-navy);
letter-spacing: -0.005em;
}
.coverage-group-count {
font-size: 13px;
font-weight: var(--fw-regular);
color: var(--jnz-slate);
margin-left: 6px;
}
.coverage-group-chevron {
margin-left: auto;
color: var(--jnz-slate);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.coverage-group-chevron svg { width: 18px; height: 18px; display: block; }
.coverage-group-header[aria-expanded="true"] .coverage-group-chevron {
transform: rotate(180deg);
color: var(--jnz-navy);
}
.coverage-group-content {
max-height: 0;
overflow: hidden;
transition: max-height var(--dur-slow) var(--ease-premium);
}
.coverage-group-inner {
padding: 4px 22px 8px;
border-top: 1px solid var(--divider);
opacity: 0;
transform: translateY(-6px);
transition: opacity 260ms var(--ease-out), transform 300ms var(--ease-out);
}
.coverage-group.is-open .coverage-group-inner {
opacity: 1;
transform: translateY(0);
transition: opacity 320ms var(--ease-out) 100ms, transform 360ms var(--ease-out) 80ms;
}
.coverage-group-inner-text {
padding: 18px 22px 22px;
}
.coverage-line {
display: grid;
grid-template-columns: 38px 1fr auto;
align-items: center;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--divider);
text-decoration: none;
color: inherit;
transition: opacity var(--dur-fast) var(--ease-out);
}
.coverage-line:last-child { border-bottom: none; }
.coverage-line-icon {
width: 38px; height: 38px;
border-radius: var(--r-md);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--jnz-navy);
flex-shrink: 0;
}
.coverage-line-icon svg { width: 18px; height: 18px; }
.coverage-line-icon.coverage-icon-auto { background: #DDE9F0; }
.coverage-line-icon.coverage-icon-home { background: #DCEDDF; }
.coverage-line-icon.coverage-icon-protect { background: #DCEEED; }
.coverage-line-icon.coverage-icon-biz { background: #D0D8E0; }
.coverage-line-name {
font-size: 15px;
font-weight: var(--fw-semibold);
color: var(--jnz-charcoal);
margin-bottom: 3px;
}
.coverage-line-desc {
font-size: 13px;
line-height: 1.5;
color: var(--jnz-slate);
}
.coverage-line-link {
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--jnz-blue);
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.coverage-line-link svg { width: 14px; height: 14px; }
.coverage-line:hover .coverage-line-link { gap: 8px; color: var(--link-hover); }
.coverage-group-explainer {
font-size: 15px;
line-height: 1.6;
color: var(--jnz-slate);
margin: 0 0 16px;
}
.coverage-group-cta {
font-size: 14px;
font-weight: var(--fw-semibold);
color: var(--jnz-blue);
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.coverage-group-cta svg { width: 14px; height: 14px; }
.coverage-group-cta:hover { gap: 10px; color: var(--link-hover); }
.coverage-card-cta-standalone {
display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center;
gap: 24px;
padding: 28px 32px;
border: 1px solid var(--jnz-navy);
border-radius: var(--r-lg);
background: var(--jnz-navy);
color: var(--jnz-white);
text-decoration: none;
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.coverage-card-cta-standalone:hover {
color: var(--jnz-white);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(13, 29, 46, 0.32);
}
.coverage-card-cta-standalone .coverage-card-icon {
margin-bottom: 0;
background: rgba(255, 255, 255, 0.08);
color: var(--jnz-white);
}
.coverage-card-cta-standalone .coverage-card-icon svg { width: 24px; height: 24px; }
.coverage-card-cta-standalone .coverage-card-name { color: var(--jnz-white); margin-bottom: 4px; font-size: 18px; }
.coverage-card-cta-standalone .coverage-card-desc { color: rgba(255, 255, 255, 0.78); font-size: 14px; line-height: 1.5; margin-bottom: 0; }
.coverage-card-cta-standalone .coverage-card-cta-body { min-width: 0; }
.coverage-card-cta-standalone .coverage-card-link {
color: var(--jnz-white);
font-weight: var(--fw-semibold);
font-size: 14px;
}
.coverage-card-cta-standalone .coverage-card-link svg { width: 16px; height: 16px; }
.coverage-card-cta-standalone:hover .coverage-card-link { gap: 10px; }
@media (prefers-reduced-motion: reduce) {
.coverage-group-content { transition: none; }
.coverage-group-chevron { transition: none; }
.coverage-group-inner,
.coverage-group.is-open .coverage-group-inner { transition: none; transform: none; }
.coverage-featured-card { transition: none; }
.coverage-featured-card:hover { transform: none; }
.coverage-card-cta-standalone { transition: none; }
.coverage-card-cta-standalone:hover { transform: none; }
}
/* ============ FAQ accordion (native ) ============ */
.faq {
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
background: var(--bg);
box-shadow: var(--shadow-1);
}
.faq-item {
border-bottom: 1px solid var(--divider);
interpolate-size: allow-keywords;
}
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
padding: 24px 28px;
font-size: 17px; font-weight: var(--fw-semibold);
color: var(--jnz-navy);
display: flex; justify-content: space-between; align-items: center;
gap: 16px; cursor: pointer;
list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '';
width: 12px; height: 12px;
border-right: 2px solid var(--jnz-slate);
border-bottom: 2px solid var(--jnz-slate);
transform: rotate(45deg);
transition: transform var(--dur-base) var(--ease-out);
flex-shrink: 0;
margin-bottom: 4px;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 4px; margin-bottom: 0; border-color: var(--jnz-navy); }
.faq-a {
padding: 0 28px 24px; font-size: 15px; line-height: 1.65; color: var(--jnz-slate); max-width: 760px;
}
.faq-item::details-content {
height: 0;
overflow: clip;
opacity: 0;
transform: translateY(-6px);
transition:
height 320ms var(--ease-premium),
opacity 220ms var(--ease-premium),
transform 280ms var(--ease-premium),
content-visibility 320ms var(--ease-premium) allow-discrete;
}
.faq-item[open]::details-content {
height: auto;
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.faq-item::details-content,
.faq-item[open]::details-content { transition: none; }
}
/* ============ Pillars (Why JNZ — used on home + quote pages) ============ */
.pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.pillar {
position: relative;
padding: 32px 28px;
background: rgba(255,255,255,0.04);
border-radius: var(--r-xl);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(2px);
overflow: hidden;
isolation: isolate;
transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.pillar::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 35%, transparent 65%);
opacity: 0;
transition: opacity var(--dur-base) var(--ease-out);
pointer-events: none;
z-index: -1;
}
.pillar::after {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.4));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity var(--dur-base) var(--ease-out);
pointer-events: none;
}
.pillar:hover {
border-color: rgba(255,255,255,0.28);
transform: translateY(-4px);
box-shadow: 0 18px 48px rgba(0,0,0,0.28);
}
.pillar:hover::before { opacity: 1; }
.pillar:hover::after { opacity: 1; }
.pillar:hover .pillar-icon {
background: var(--jnz-white);
transform: translateY(-2px) rotate(-3deg);
}
.pillar-icon {
width: 56px; height: 56px;
border-radius: var(--r-lg);
background: rgba(255,255,255,0.92);
color: var(--jnz-navy);
display: flex; align-items: center; justify-content: center;
margin-bottom: 24px;
transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.pillar-icon svg { width: 26px; height: 26px; }
.pillar h3 {
font-size: 22px; font-weight: var(--fw-bold);
color: var(--jnz-white);
margin: 0 0 12px; letter-spacing: -0.01em;
}
.pillar p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0; }
/* ============ Testimonials (used on home + quote pages) ============ */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.testimonial {
background: var(--bg);
border-radius: var(--r-lg);
padding: 32px;
box-shadow: var(--shadow-2);
border: 1px solid rgba(18, 58, 92, 0.04);
display: flex; flex-direction: column;
position: relative;
}
.testimonial-stars { display: flex; gap: 3px; color: var(--jnz-teal); margin-bottom: 18px; }
.testimonial-stars svg { width: 16px; height: 16px; fill: currentColor; }
.testimonial-quote { font-size: 16px; line-height: 1.6; color: var(--jnz-charcoal); flex: 1; margin-bottom: 24px; }
.testimonial-author {
display: flex; align-items: center; gap: 12px;
padding-top: 18px; border-top: 1px solid var(--divider);
}
.testimonial-avatar {
width: 40px; height: 40px;
border-radius: 999px;
background: var(--jnz-champagne);
color: var(--jnz-navy);
font-weight: var(--fw-bold); font-size: 14px;
display: flex; align-items: center; justify-content: center;
}
.testimonial-name { font-size: 14px; font-weight: var(--fw-semibold); color: var(--jnz-navy); }
.testimonial-placeholder {
position: absolute; top: 12px; right: 12px;
font-size: 9px; font-weight: var(--fw-semibold);
letter-spacing: 0.12em;
color: var(--jnz-slate);
background: var(--jnz-mist);
padding: 4px 8px; border-radius: 999px;
border: 1px solid var(--border);
}
.section-navy .testimonial {
border-color: rgba(127, 175, 135, 0.10);
box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.25);
}
.testimonial-google-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: var(--fw-semibold);
color: var(--jnz-blue);
text-decoration: none;
margin-top: 10px;
min-height: 44px; /* >=44px touch target (mobile) */
align-self: flex-start;
transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.testimonial-google-link:hover { color: var(--jnz-navy); gap: 10px; }
.testimonial-google-link svg { width: 12px; height: 12px; }
/* ============ Stats strip — animated count-up cards ============
4-up grid of large bold navy numbers with a slate label below. JS hooks
onto .stat-number[data-count-to] and animates from 0 → target on scroll
into view. Uses tabular-nums so digits don't shift width during the count. */
.stats-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.stat-card {
text-align: center;
padding: 24px 16px;
}
.stat-number {
font-size: 56px;
font-weight: var(--fw-bold);
color: var(--jnz-navy);
letter-spacing: -0.025em;
line-height: 1;
margin-bottom: 12px;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.stat-label {
font-size: 14px;
color: var(--jnz-slate);
line-height: 1.5;
font-weight: var(--fw-regular);
}
@media (max-width: 820px) {
.stats-strip { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
.stat-number { font-size: 44px; }
}
/* 3-up modifier (used on /index/ and /quote/ trust strips) */
.stats-strip--3up { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) {
.stats-strip--3up { grid-template-columns: 1fr; gap: 24px; }
}
/* ============ Footer ============ */
.footer { background: var(--bg-deep); color: var(--fg-on-deep); padding: 80px 0 32px; }
.footer-top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-logo { display: inline-block; cursor: pointer; }
.footer-brand img {
height: 56px; width: auto;
filter: brightness(0) invert(1);
opacity: 0.95;
margin-bottom: 18px;
}
.footer-brand p { font-size: 14px; line-height: 1.6; opacity: 0.75; margin: 0 0 18px; max-width: 280px; }
.footer-phone {
display: inline-flex; align-items: center; gap: 8px;
font-size: 18px; font-weight: var(--fw-bold);
color: var(--fg-on-deep); text-decoration: none;
}
.footer-phone svg { width: 18px; height: 18px; color: var(--jnz-champagne); }
.footer-email {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14px; color: var(--fg-on-deep);
text-decoration: none;
margin-top: 10px; opacity: 0.85;
}
.footer-email svg { width: 14px; height: 14px; }
.footer-email:hover { opacity: 1; color: var(--fg-on-deep); }
.footer-col h4 {
font-size: 12px; font-weight: var(--fw-bold);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--jnz-champagne); margin: 0 0 18px;
}
.footer-col p, .footer-col a {
font-size: 14px; line-height: 1.6;
color: var(--fg-on-deep); opacity: 0.8;
margin: 0 0 6px;
text-decoration: none; display: block;
}
.footer-col a:hover { opacity: 1; color: var(--fg-on-deep); text-decoration: underline; }
.footer-col .meta { font-size: 12px; opacity: 0.55; margin-top: 8px; }
.footer-bottom {
padding-top: 28px;
display: flex; justify-content: space-between; align-items: flex-start;
gap: 32px; flex-wrap: wrap;
}
.footer-legal { font-size: 12px; line-height: 1.65; opacity: 0.55; max-width: 720px; }
.footer-legal p { margin: 0 0 6px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
width: 38px; height: 38px;
border-radius: var(--r-md);
background: rgba(255,255,255,0.08);
display: flex; align-items: center; justify-content: center;
color: var(--fg-on-deep);
transition: background var(--dur-fast) var(--ease-out);
opacity: 1;
}
.footer-social a:hover { background: rgba(255,255,255,0.15); }
.footer-social svg { width: 16px; height: 16px; }
.footer-sitemap { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; }
.footer-sitemap a { color: var(--fg-on-deep); opacity: 0.6; text-decoration: none; display: inline; }
.footer-sitemap a:hover { opacity: 1; }
/* ============ Footer service-area band (18 city pills) ============ */
.footer-service-area {
margin-top: 36px;
padding: 22px 0 26px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-service-area-heading {
margin: 0 0 14px;
font-size: 12px;
font-weight: var(--fw-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
}
.footer-service-area-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.footer-service-area-list a {
display: inline-block;
padding: 6px 13px;
font-size: 13px;
line-height: 1.2;
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(127, 175, 135, 0.22);
border-radius: 999px;
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.footer-service-area-list a:hover {
color: #D6EFD9;
background: rgba(127, 175, 135, 0.10);
border-color: rgba(127, 175, 135, 0.50);
}
/* ============ Footer credit line (vymetrics) — bright champagne link ============ */
.footer-credit { margin-top: 10px; font-size: 12px; opacity: 0.9; }
.footer-credit-link {
color: #7FAF87;
text-decoration: none;
font-weight: var(--fw-semibold);
opacity: 1;
transition: color var(--dur-fast) var(--ease-out);
}
.footer-credit-link:hover {
color: #D6EFD9;
text-decoration: underline;
}
/* ============ Scroll-reveal utilities ============ */
/* Single element fade-up — JS adds .is-visible when in viewport */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered children of a grid/list — JS adds .is-visible to the parent */
.reveal-stagger > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}
.reveal-stagger.is-visible > * {
opacity: 1;
transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-stagger > * {
opacity: 1;
transform: none;
transition: none;
}
}
/* ============ Back-to-top floating button ============
Champagne circle pinned to bottom-right of viewport. Hidden until the user
scrolls > 400px, then fades in. Smooth-scrolls to top on click (respects
prefers-reduced-motion). Injected into every page by /script.js. */
.back-to-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
border-radius: 999px;
background: var(--jnz-champagne);
color: var(--jnz-navy);
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px -6px rgba(18, 58, 92, 0.30), 0 2px 6px rgba(18, 58, 92, 0.10);
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), background 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
z-index: 50;
}
.back-to-top.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.back-to-top:hover {
background: var(--jnz-green);
transform: translateY(-2px);
box-shadow: 0 14px 28px -8px rgba(18, 58, 92, 0.40), 0 2px 6px rgba(18, 58, 92, 0.12);
}
.back-to-top:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(46, 111, 149, 0.40), 0 8px 20px -6px rgba(18, 58, 92, 0.30);
}
.back-to-top svg { width: 22px; height: 22px; }
@media (max-width: 600px) {
.back-to-top { bottom: 18px; right: 18px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.back-to-top { transition: opacity 0ms; }
.back-to-top:hover { transform: none; }
}
/* ============ Shared keyframes ============ */
/* Used by .section-navy stripes (here) and by .hero stripes (in home.css). */
@keyframes heroStripeUp {
0% { transform: translateY(100%); opacity: 0; }
60% { opacity: 1; }
100% { transform: translateY(0); opacity: 1; }
}
/* ============ Shared responsive ============ */
@media (max-width: 1100px) {
.footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
.hero-inner { gap: 40px; }
.hero h1 { font-size: clamp(36px, 4vw, 48px); }
.coverage-grid { grid-template-columns: repeat(3, 1fr); }
.team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
.section { padding: 64px 0; }
.container, .container-narrow { padding: 0 20px; }
.header-nav, .header-phone { display: none; }
.header-inner { grid-template-columns: auto auto; justify-content: space-between; }
.footer-top { grid-template-columns: 1fr; gap: 32px; }
.footer-bottom { flex-direction: column; }
.section-head h2 { font-size: 30px; }
.hero { padding: 64px 0 80px; min-height: auto; }
.hero-inner { grid-template-columns: 1fr; gap: 32px; padding-top: 0; padding-bottom: 0; }
.hero-text { max-width: 100%; }
.hero-media { order: 2; }
.hero-trust { gap: 20px 28px; }
.locations-grid { grid-template-columns: 1fr; }
.coverage-grid { grid-template-columns: repeat(2, 1fr); }
.team-grid { grid-template-columns: 1fr; }
.pillars { grid-template-columns: 1fr; gap: 20px; }
.testimonials-grid { grid-template-columns: 1fr; }
.coverage-featured-grid { grid-template-columns: 1fr; gap: 16px; }
.coverage-featured-card { padding: 28px 24px 24px 26px; }
.coverage-featured-name { font-size: 22px; }
.coverage-featured-actions { gap: 14px; }
.coverage-group-header { padding: 16px 18px; gap: 12px; }
.coverage-group-icon { width: 34px; height: 34px; }
.coverage-group-inner { padding: 4px 18px 8px; }
.coverage-group-inner-text { padding: 16px 18px 18px; }
.coverage-line {
grid-template-columns: 34px 1fr;
grid-template-rows: auto auto;
column-gap: 12px;
row-gap: 6px;
padding: 14px 0;
}
.coverage-line-icon { width: 34px; height: 34px; }
.coverage-line-link { grid-column: 2; grid-row: 2; font-size: 12px; }
.coverage-card-cta-standalone {
grid-template-columns: 48px 1fr;
grid-template-rows: auto auto;
gap: 14px 16px;
padding: 22px 22px 24px;
}
.coverage-card-cta-standalone .coverage-card-icon { width: 48px; height: 48px; }
.coverage-card-cta-standalone .coverage-card-cta-body { grid-column: 2; grid-row: 1; }
.coverage-card-cta-standalone .coverage-card-link { grid-column: 1 / -1; grid-row: 2; }
}
/* ============================================================================
MOBILE OPTIMIZATIONS — hamburger nav, hero/heading scale, tap targets.
Scoped to ≤820 (drawer + header) and ≤600 (typography, hero) so desktop
layout is untouched.
============================================================================ */
/* Global safety net: clip horizontal overflow so no stray element ever produces a sideways scrollbar. */
html, body { overflow-x: clip; }
/* Desktop mega-menu: viewport-bound positioning + responsive width so it never overflows narrower laptops. */
@media (min-width: 821px) {
.has-dropdown .header-dropdown--mega {
position: fixed;
top: var(--header-h);
left: 50%;
right: auto;
transform: translateX(-50%) translateY(-8px);
min-width: 0;
width: min(920px, calc(100vw - 40px));
margin-top: 0;
}
.has-dropdown:hover .header-dropdown--mega,
.has-dropdown:focus-within .header-dropdown--mega {
transform: translateX(-50%) translateY(0);
}
}
/* ====== Hamburger toggle (hidden on desktop; visible ≤820) ====== */
.header-menu-toggle {
display: none;
background: transparent;
border: 0;
width: 44px;
height: 44px;
padding: 10px;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
margin-left: auto;
border-radius: 8px;
transition: background var(--dur-fast) var(--ease-out);
}
.header-menu-toggle:hover { background: rgba(18, 58, 92, 0.06); }
.header-menu-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--jnz-navy);
border-radius: 2px;
transition: transform 220ms var(--ease-out), opacity 180ms var(--ease-out);
}
body.menu-open .header-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .header-menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .header-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile-only CTA block lives inside the drawer; hidden on desktop. */
.header-mobile-cta { display: none; }
/* Tight desktop range: not enough room for logo + nav + phone + button, so the
phone pill drops (number stays in the CTA sections, drawer, and footer). */
@media (min-width: 821px) and (max-width: 1080px) {
.header-nav { gap: 20px; }
.header-phone { display: none; }
}
@media (max-width: 820px) {
/* Show hamburger; collapse desktop quote button + phone (they live inside the drawer). */
.header-menu-toggle { display: inline-flex; }
.header-actions { display: none; }
.header-inner { gap: 12px; }
.header-logo img { height: 38px; }
/* Mobile drawer: absolute panel below header, content-height (page scrolls naturally). */
body.menu-open .header-nav {
display: flex;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding: 4px 20px 28px;
transform: none;
z-index: 49;
border-top: 1px solid var(--border);
box-shadow: 0 14px 28px rgba(18, 58, 92, 0.10);
animation: drawerSlideDown 220ms var(--ease-out);
}
@keyframes drawerSlideDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
body.menu-open .header-nav a {
font-size: 17px;
font-weight: var(--fw-semibold);
padding: 16px 4px;
border-bottom: 1px solid var(--border);
width: 100%;
color: var(--jnz-charcoal);
min-height: 52px;
display: flex;
align-items: center;
}
body.menu-open .header-nav a::after { display: none; }
/* Simple block layout — dropdowns toggle display, fade in on appear. */
body.menu-open .has-dropdown {
display: block;
width: 100%;
}
body.menu-open .has-dropdown > a {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Dropdowns: hidden by default; on open they snap in with a subtle fade-in animation. */
body.menu-open .header-dropdown,
body.menu-open .header-dropdown--mega {
display: none;
position: static !important;
transform: none !important;
left: auto !important;
top: auto !important;
right: auto !important;
visibility: visible !important;
pointer-events: auto !important;
background: transparent;
box-shadow: none;
border-radius: 0;
border: 0;
margin: 0;
width: 100%;
min-width: 0;
padding: 6px 0 12px 12px;
opacity: 1;
}
body.menu-open .has-dropdown.is-open > .header-dropdown,
body.menu-open .has-dropdown.is-open > .header-dropdown--mega {
display: block;
animation: dropdownFadeIn 180ms ease-out;
}
@keyframes dropdownFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
body.menu-open .header-dropdown::before,
body.menu-open .header-dropdown--mega::before { display: none; }
body.menu-open .header-dropdown a,
body.menu-open .header-dropdown--mega a {
font-size: 15px;
font-weight: var(--fw-regular);
color: var(--jnz-slate);
padding: 12px 6px;
border-bottom: 1px solid rgba(0,0,0,0.06);
min-height: 44px;
display: flex;
align-items: center;
width: 100%;
}
/* Chevron flips instantly to keep the motion noise to a single moving element (the dropdown). */
body.menu-open .has-dropdown > a .header-nav-chevron { transition: none; }
body.menu-open .has-dropdown.is-open > a .header-nav-chevron { transform: rotate(180deg); }
/* Mega-menu grid: each .header-megamenu-col is its own collapsible sub-section. */
body.menu-open .header-megamenu-grid { display: block; }
body.menu-open .header-megamenu-section-label { display: none; }
body.menu-open .header-megamenu-col {
margin: 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
display: block;
}
/* Category items wrap: use a max-height that's just past content, with a stagger for sleek reveal. */
body.menu-open .header-megamenu-col:last-of-type { border-bottom: 0; }
/* Category title is the sub-accordion trigger: large tap area + chevron. */
body.menu-open .header-megamenu-col-title {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
font-weight: var(--fw-semibold);
text-transform: none;
letter-spacing: 0;
color: var(--jnz-charcoal);
padding: 14px 4px;
margin: 0;
min-height: 48px;
cursor: pointer;
user-select: none;
}
body.menu-open .header-megamenu-col-title::after {
content: '';
display: inline-block;
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
margin-left: 8px;
transition: transform 200ms var(--ease-out);
flex-shrink: 0;
}
body.menu-open .header-megamenu-col.is-open .header-megamenu-col-title::after {
transform: rotate(180deg);
}
/* Category items: snap in/out on tap — no inner animation to avoid jitter. */
body.menu-open .header-dropdown--mega .header-megamenu-col > a {
display: none;
}
body.menu-open .header-dropdown--mega .header-megamenu-col.is-open > a {
display: flex;
align-items: center;
padding: 11px 6px 11px 16px;
margin: 0;
border: 0;
border-bottom: 1px solid rgba(0,0,0,0.04);
color: var(--jnz-slate);
font-size: 14px;
}
body.menu-open .header-dropdown--mega .header-megamenu-col.is-open > a:last-of-type { border-bottom: 0; }
body.menu-open .header-megamenu-footer {
padding: 12px 4px 0;
margin-top: 4px;
border-top: 1px solid var(--border);
}
body.menu-open .header-megamenu-viewall {
color: var(--jnz-navy);
font-weight: var(--fw-semibold);
}
/* Drawer-bottom CTAs: generous spacing, no extra separator. */
body.menu-open .header-mobile-cta {
display: flex;
flex-direction: column;
gap: 14px;
margin: 28px 0 12px;
padding: 0;
border: 0;
}
body.menu-open .header-mobile-cta .btn {
width: 100%;
justify-content: center;
min-height: 54px;
padding: 14px 20px;
font-size: 15px;
gap: 8px;
box-sizing: border-box;
border-style: solid;
border-width: 1.5px;
margin: 0;
outline: 0;
}
/* Explicit border-color so the .btn-secondary navy outline can't be lost to specificity. */
body.menu-open .header-mobile-cta .btn-secondary {
border-color: var(--jnz-navy);
}
body.menu-open .header-mobile-cta .btn-primary {
border-color: var(--action);
}
body.menu-open .header-mobile-cta .btn svg { width: 18px; height: 18px; }
/* Last menu item (Contact) doesn't need a bottom border — drops the extra hairline above the CTAs. */
body.menu-open .header-nav > a:last-of-type { border-bottom: 0; }
}
/* ====== Mobile typography + hero scale (≤600) ====== */
@media (max-width: 600px) {
/* Hero: smaller H1, hide watermark, stack CTAs full-width */
.hero h1 { font-size: clamp(26px, 7.5vw, 34px); line-height: 1.12; letter-spacing: -0.02em; }
.hero-sub { font-size: 16px; margin-bottom: 28px; }
.hero-eyebrow { font-size: 11px; }
.hero-cta { flex-direction: column; gap: 12px; margin-bottom: 36px; }
.hero-cta .btn { width: 100%; justify-content: center; min-height: 52px; }
.hero-trust { flex-direction: column; align-items: flex-start; gap: 12px; }
.hero-watermark { display: none; }
.hero-inner { padding-top: 28px; padding-bottom: 28px; }
.hero { padding: 40px 0 56px; }
/* Section headings */
.section-head { margin-bottom: 36px; }
.section-head h2 { font-size: 24px; line-height: 1.18; }
.section-head .lede { font-size: 16px; }
.section { padding: 48px 0; }
/* Generic h2 fallback for sections without .section-head wrapper */
.section h2:not(.section-head h2) { font-size: 24px; line-height: 1.2; }
/* Form CTAs full-width on mobile */
.form-actions .btn { width: 100%; justify-content: center; min-height: 52px; }
}
/* ====== Ultra-narrow phones (≤380) ====== */
@media (max-width: 380px) {
.container, .container-narrow { padding: 0 14px; }
.hero h1 { font-size: 22px; }
.section-head h2,
.section h2:not(.section-head h2) { font-size: 22px; }
.header-logo img { height: 32px; }
}
/* ====== Footer service-area pills — tighter at narrow widths ====== */
@media (max-width: 600px) {
.footer-service-area { padding: 18px 0 20px; margin-top: 28px; }
.footer-service-area-list { gap: 6px; }
.footer-service-area-list a {
padding: 8px 12px;
font-size: 13px;
min-height: 36px;
display: inline-flex;
align-items: center;
}
.footer-top { gap: 28px; padding-bottom: 36px; }
.footer { padding: 56px 0 24px; }
.footer-sitemap { gap: 14px 18px; }
.footer-sitemap a { padding: 6px 0; }
}
/* Accessibility: skip-to-content link (WCAG 2.4.1 Bypass Blocks) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--jnz-navy,#123A5C);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 6px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}