:root {
--ink: #0a0a0a;
--ink-2: #1a1a1a;
--charcoal: #1e2028;
--charcoal-2: #2a2d36;
--navy: #0f2645;
--navy-2: #14315b;
--navy-deep: #06172e;
--blue: #1e6c99;
--blue-2: #2681b8;
--gold: #c9a35c;
--cream: #f5f1e8;
--off-white: #f8f7f3;
--slate: #3a4657;
--slate-2: #4a5768;
--panel-blue: #435264;
--panel-warm: #6b6353;
--text: #1a2332;
--text-2: #4a5468;
--text-muted: #6d7685; /* 2026-09-15 contrast pass - see theme.css */
--line: #e6e2d8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--text);
line-height: 1.6;
font-size: 16px;
background: #fff;
}
h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1360px; margin: 0 auto; padding: 0 40px; }
/* ============ PILL BUTTONS ============ */
.pill-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 32px;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 15px;
transition: all 0.2s;
cursor: pointer;
border: none;
text-align: center;
letter-spacing: 0.01em;
}
.pill-btn.dark { background: var(--navy-deep); color: #fff; }
.pill-btn.dark:hover { background: var(--navy); }
.pill-btn.blue { background: var(--blue); color: #fff; }
.pill-btn.blue:hover { background: var(--blue-2); }
.pill-btn.outline-white {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255,255,255,0.75);
}
.pill-btn.outline-white:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.pill-btn.outline-dark {
background: transparent;
color: var(--ink);
border: 1.5px solid var(--ink);
}
.pill-btn.outline-dark:hover { background: var(--ink); color: #fff; }
.pill-btn.sm { padding: 12px 22px; font-size: 14px; }
/* ============ FLOATING PILL NAV ============ */
.nav-wrap {
position: relative;
z-index: 50;
}
.nav-pill {
background: #fff;
border-radius: 20px;
padding: 14px 22px 14px 32px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
max-width: 1360px;
margin: 24px 40px 0;
}
.nav-pill .logo img { height: 56px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a {
padding: 10px 18px;
color: var(--ink);
font-weight: 500;
font-size: 15px;
border-radius: 999px;
transition: all 0.15s;
}
.nav-links a:hover { background: var(--off-white); }
.nav-links .drop-cue { font-size: 15px; margin-left: 5px; opacity: 0.9; font-weight: 700; line-height: 1; }
/* ============ HERO ============ */
.hero {
position: relative;
margin-top: -110px; /* pulls hero under the floating pill nav; the util-bar's z-index:60 stops the bleed at the top */
height: 780px;
background: url('../img/hero/mythic-enterprises-insurance-partnerships.webp') center/cover;
background-color: #0a0a0a;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.55) 100%);
filter: grayscale(0.75);
}
.hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(0,0,0,0.35) 100%);
}
.hero-content {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 130px 40px 40px;
color: #fff;
}
.hero-eyebrow {
font-size: 15px;
font-weight: 500;
color: rgba(255,255,255,0.95);
margin-bottom: 24px;
letter-spacing: 0.02em;
}
.hero h1 {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 82px;
line-height: 1.05;
max-width: 1100px;
margin-bottom: 60px;
font-weight: 600;
}
.hero-sub {
font-size: 20px;
color: rgba(255,255,255,0.92);
margin-bottom: 40px;
font-weight: 400;
}
.hero-ctas {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.hero-ctas .sep { color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; }
/* ============ WHO WE SERVE ============ */
.serve {
background: var(--charcoal);
padding: 110px 0 130px;
position: relative;
color: #fff;
}
.serve h2 {
font-family: 'Playfair Display', serif;
color: #fff;
text-align: center;
font-size: 62px;
line-height: 1.05;
margin-bottom: 60px;
font-weight: 600;
}
.serve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.serve-card {
background: var(--charcoal-2);
border-radius: 24px;
padding: 32px 36px;
display: flex;
flex-direction: column;
}
.serve-card-head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.serve-card-head .ic {
width: 52px; height: 52px;
background: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--blue);
font-size: 22px;
flex: none;
}
.serve-card-head h3 {
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 26px;
font-weight: 500;
letter-spacing: -0.005em;
}
.serve-image-collage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
border-radius: 16px;
overflow: hidden;
flex: 1; /* fill remaining card height so both serve-cards line up on the bottom */
min-height: 320px; /* but never collapse below a legible photo strip */
}
.serve-image-collage div { background-size: cover; background-position: center; }
.serve-image-collage div:nth-child(1) { background-image: url('../img/hero/about-couple.jpg'); }
.serve-image-collage div:nth-child(2) { background-image: url('../img/service/family-embrace.jpg'); }
.sub-card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: auto;
}
.sub-card {
background: var(--panel-blue);
border-radius: 16px;
padding: 20px 22px;
color: rgba(255,255,255,0.9);
font-size: 14px;
line-height: 1.55;
}
.sub-card.wide { grid-column: 1 / -1; background: var(--panel-warm); }
.sub-card .sc-ic {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.85);
font-size: 18px;
margin-bottom: 10px;
}
.sub-card h4 {
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
letter-spacing: -0.005em;
}
/* ============ WAVE DIVIDER ============ */
.wave-divider {
background: var(--charcoal);
position: relative;
height: 90px;
overflow: hidden;
}
.wave-divider svg {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 100%;
display: block;
}
/* ============ CARRIERS ============ */
.carriers {
background: #f7f6f2;
padding: 60px 0 100px;
text-align: center;
}
.carriers h2 {
font-family: 'Playfair Display', serif;
font-size: 52px;
margin-bottom: 14px;
font-weight: 600;
}
.carriers p.lede {
font-size: 17px;
color: var(--text-2);
margin-bottom: 60px;
}
.carriers-row {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
gap: 40px;
filter: grayscale(1) contrast(1.1);
opacity: 0.85;
}
.carrier-slot {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
font-family: 'Playfair Display', serif;
font-size: 30px;
font-weight: 700;
letter-spacing: -0.02em;
padding: 0 8px;
}
.carrier-slot.small { font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; font-family: 'Inter', sans-serif; }
/* ============ BLOG ============ */
.blog-section {
background: #fff;
padding: 100px 0 130px;
}
.blog-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 80px;
align-items: start;
}
.blog-left h2 {
font-family: 'Playfair Display', serif;
font-size: 88px;
line-height: 1;
margin-bottom: 40px;
font-weight: 500;
}
.blog-cards { display: flex; flex-direction: column; gap: 32px; }
.blog-card {
display: grid;
grid-template-columns: 220px 1fr;
gap: 28px;
align-items: start;
padding-bottom: 32px;
border-bottom: 1px solid var(--line);
}
.blog-card:last-child { border-bottom: none; }
.blog-thumb {
height: 180px;
background-size: cover;
background-position: center;
border-radius: 12px;
}
.blog-thumb.b1 { background-image: url('../img/service/business-handshake.jpg'); }
.blog-thumb.b2 { background-image: url('../img/hero/auto-road.jpg'); }
.blog-thumb.b3 { background-image: url('../img/service/home-umbrella.jpg'); }
.blog-info h3 {
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: -0.01em;
color: var(--ink);
}
.blog-info p {
color: var(--text-2);
font-size: 15px;
line-height: 1.55;
margin-bottom: 14px;
}
.blog-info .tag {
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
}
/* ============ CTA + FOOTER ============ */
.cta-footer {
background: #1a1a1a;
color: rgba(255,255,255,0.85);
padding: 100px 0 30px;
}
.cta-section {
text-align: center;
padding: 40px 0 80px;
max-width: 780px;
margin: 0 auto;
}
.cta-section h2 {
font-family: 'Playfair Display', serif;
color: #fff;
font-size: 62px;
line-height: 1.1;
margin-bottom: 24px;
font-weight: 600;
}
.cta-section p {
color: rgba(255,255,255,0.85);
font-size: 18px;
margin-bottom: 32px;
line-height: 1.55;
}
.footer-panel {
background: #262a30;
border-radius: 24px;
padding: 60px 60px 40px;
margin: 0 0 30px;
}
.footer-cols {
display: grid;
grid-template-columns: 1.4fr 1.2fr; /* was 3 cols; Specialty Lines removed 2026-08-19 */
gap: 50px;
margin-bottom: 40px;
}
.footer-panel h5 {
color: #fff;
font-family: 'Playfair Display', serif;
font-size: 24px;
font-weight: 500;
margin-bottom: 24px;
}
.footer-panel ul { list-style: none; }
.footer-panel ul li { margin-bottom: 12px; }
.footer-panel a { color: rgba(255,255,255,0.75); font-size: 14.5px; text-decoration: none; }
.footer-panel a:hover { color: #fff; text-decoration: underline; }
.footer-panel .desc {
color: rgba(255,255,255,0.65);
font-size: 14px;
line-height: 1.6;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-bottom {
display: grid;
grid-template-columns: 220px 1fr auto; /* brand | text | social */
gap: 40px;
align-items: center; /* vertically center the social icon against the text block */
padding: 20px 60px 0;
}
.footer-bottom .brand-mark {
display: flex;
align-items: center;
}
.footer-bottom-text { min-width: 0; } /* let the disclaimer wrap inside the middle column */
.footer-bottom-social {
display: flex;
justify-content: flex-end; /* pin to the right edge of the footer */
align-items: center;
}
.footer-bottom .brand-mark img {
height: 50px;
filter: brightness(0) invert(1);
opacity: 0.9;
}
.footer-bottom .legal-links {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.footer-bottom .legal-links a { color: rgba(255,255,255,0.85); font-size: 14px; text-decoration: none; }
.footer-bottom .legal-links a:hover { text-decoration: underline; }
.footer-bottom .legal-links .divider { color: rgba(255,255,255,0.35); }
.footer-bottom .disclaimer {
color: rgba(255,255,255,0.55);
font-size: 12.5px;
line-height: 1.55;
margin-bottom: 10px;
}
.footer-bottom .copy {
color: rgba(255,255,255,0.6);
font-size: 13px;
margin-top: 14px;
}
.footer-bottom .copy a { color: rgba(255,255,255,0.75); text-decoration: none; }
.footer-bottom .copy a:hover { text-decoration: underline; }
/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
.hero h1 { font-size: 60px; }
.blog-grid { grid-template-columns: 1fr; gap: 40px; }
.blog-left h2 { font-size: 60px; }
.serve-grid { grid-template-columns: 1fr; }
.footer-cols { grid-template-columns: 1fr; gap: 30px; }
.cta-section h2 { font-size: 40px; }
.serve h2 { font-size: 40px; }
}
@media (max-width: 720px) {
.container { padding: 0 20px; }
.nav-pill { margin: 16px 16px 0; padding: 12px 16px 12px 20px; }
.nav-links { display: none; }
/* util-bar padding is normalized in the consolidated block below */
.hero { height: 620px; margin-top: -70px; }
.hero h1 { font-size: 40px; }
.carriers h2 { font-size: 36px; }
.carriers-row { gap: 24px; }
.footer-panel { padding: 30px 24px; }
.footer-bottom { padding: 20px 24px 0; grid-template-columns: 1fr; }
.blog-card { grid-template-columns: 1fr; }
.blog-thumb { height: 200px; }
}
/* --- interior page styles (from service template) --- */
:root {
--ink:#0a0a0a; --ink-2:#1a1a1a; --charcoal:#1e2028; --charcoal-2:#2a2d36;
--navy:#0f2645; --navy-2:#14315b; --navy-deep:#06172e;
--blue:#1e6c99; --blue-2:#2681b8; --gold:#c9a35c;
--cream:#f5f1e8; --off-white:#f8f7f3;
--slate:#3a4657; --panel-blue:#435264; --panel-warm:#6b6353;
--text:#1a2332; --text-2:#4a5468; --text-muted:#7a8595; --line:#e6e2d8;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);line-height:1.6;font-size:16px;background:#fff;}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;font-weight:600;letter-spacing:-0.01em;color:var(--ink);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:1360px;margin:0 auto;padding:0 40px;}
.container-narrow{max-width:1120px;margin:0 auto;padding:0 40px;}
.pill-btn{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;border-radius:999px;font-family:'Inter',sans-serif;font-weight:500;font-size:15px;transition:all .2s;cursor:pointer;border:none;text-align:center;letter-spacing:.01em;}
.pill-btn.dark{background:var(--navy-deep);color:#fff;}
.pill-btn.dark:hover{background:var(--navy);}
.pill-btn.blue{background:var(--blue);color:#fff;}
.pill-btn.blue:hover{background:var(--blue-2);}
.pill-btn.outline-white{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.75);}
.pill-btn.outline-white:hover{background:rgba(255,255,255,.1);border-color:#fff;}
.pill-btn.outline-dark{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
.pill-btn.outline-dark:hover{background:var(--ink);color:#fff;}
.pill-btn.sm{padding:12px 22px;font-size:14px;}
.util-bar{background:#000;color:rgba(255,255,255,.9);padding:12px 40px;text-align:right;font-size:13.5px;}
.util-bar span{display:inline-flex;align-items:center;gap:8px;}
.util-bar .key-ic{color:var(--gold);}
.util-bar a{color:rgba(255,255,255,.9);}
.util-bar a:hover{color:var(--gold);}
.util-bar .divider{margin:0 16px;opacity:.35;}
.nav-wrap{position:relative;z-index:50;}
.nav-pill{background:#fff;border-radius:20px;padding:14px 22px 14px 32px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 12px 40px rgba(0,0,0,.25);max-width:1360px;margin:24px auto 0;width:calc(100% - 80px);}
.nav-pill .logo img{height:56px;width:auto;}
.nav-links{display:flex;align-items:center;gap:8px;}
.nav-links a{padding:10px 18px;color:var(--ink);font-weight:500;font-size:15px;border-radius:999px;transition:all .15s;}
.nav-links a:hover{background:var(--off-white);}
.nav-links .drop-cue{font-size:11px;margin-left:4px;opacity:.7;}
/* interior hero */
.page-hero{position:relative;height:540px;background:#0a0a0a center/cover no-repeat;overflow:hidden;margin-top:-110px;}
.page-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.36) 50%,rgba(0,0,0,.57) 100%);filter:grayscale(.7);}
.page-hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:170px 40px 60px;color:#fff;}
.page-hero .breadcrumb{font-size:13.5px;color:rgba(255,255,255,.85);letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px;}
.page-hero .breadcrumb a{color:rgba(255,255,255,.7);}
.page-hero .breadcrumb a:hover{color:#fff;}
.page-hero h1{font-family:'Playfair Display',serif;color:#fff;font-size:64px;line-height:1.05;max-width:900px;font-weight:600;margin-bottom:18px;}
.page-hero .lede{font-size:18px;color:rgba(255,255,255,.92);max-width:620px;font-weight:400;line-height:1.5;text-wrap:balance;}
/* content sections */
.section{padding:100px 0;}
.section-dark{background:var(--charcoal);color:#fff;padding:100px 0;}
.section-dark h2,.section-dark h3{color:#fff;}
.section-cream{background:var(--off-white);padding:100px 0;}
.section-title{font-family:'Playfair Display',serif;font-size:52px;line-height:1.1;margin-bottom:20px;font-weight:600;}
.section-title.center{text-align:center;}
.section-lede{font-size:18px;color:var(--text-2);max-width:780px;margin-bottom:50px;line-height:1.6;}
.section-lede.center{text-align:center;margin-left:auto;margin-right:auto;}
/* two-col article body */
.article-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:80px;align-items:start;}
.article-body p{font-size:16px;color:var(--text-2);margin-bottom:20px;line-height:1.7;}
.article-body h2{font-family:'Playfair Display',serif;font-size:34px;margin:36px 0 16px;font-weight:600;}
.article-body h3{font-family:'Playfair Display',serif;font-size:24px;margin:28px 0 12px;font-weight:600;}
.article-body ul{list-style:none;margin:16px 0 24px;}
.article-body ul li{padding:12px 0 12px 32px;border-bottom:1px solid var(--line);color:var(--text-2);position:relative;line-height:1.55;}
.article-body ul li::before{content:'';position:absolute;left:0;top:20px;width:18px;height:2px;background:var(--blue);}
.article-body ul li strong{color:var(--ink);display:block;margin-bottom:2px;font-weight:600;}
/* .article-body a.link rules removed 2026-08-19. The old rule painted a permanent border-bottom underline in the default state, and stacked with the newer .article-body a:hover text-decoration:underline. The site-wide in-content link rule (`.article-body a`) now handles the whole treatment: blue, no underline default, underline on hover. */
/* sidebar */
.sidebar{position:sticky;top:32px;display:flex;flex-direction:column;gap:20px;}
.side-card{background:var(--cream);border-radius:20px;padding:28px 26px;}
.side-card h4{font-family:'Playfair Display',serif;font-size:22px;margin-bottom:14px;font-weight:600;}
.side-card p{font-size:14.5px;color:var(--text-2);margin-bottom:16px;line-height:1.55;}
.side-card .call{background:var(--navy-deep);color:#fff;border-radius:14px;padding:18px 20px;margin-bottom:14px;text-align:center;}
.side-card .call .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.1em;opacity:.7;margin-bottom:4px;}
.side-card .call a{color:#fff;font-family:'Playfair Display',serif;font-size:26px;font-weight:600;letter-spacing:-.01em;}
.side-nav{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 26px;}
.side-nav h4{font-family:'Inter',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:14px;font-weight:700;}
.side-nav ul{list-style:none;}
.side-nav ul li a{display:block;padding:10px 0;color:var(--text);font-size:14.5px;border-bottom:1px solid var(--line);transition:all .15s;}
.side-nav ul li:last-child a{border-bottom:none;}
.side-nav ul li a:hover{color:var(--blue);padding-left:6px;}
.side-nav ul li a.active{color:var(--blue);font-weight:600;}
/* coverage cards grid */
.cov-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px;}
/* Card is a 2-col grid: icon in col 1 (spans both rows), title + paragraph in col 2.
Result: icon sits to the LEFT of the title, description flows under the title. */
.cov-card{background:var(--charcoal-2);border-radius:20px;padding:28px 26px;color:rgba(255,255,255,.9);
display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:10px;align-items:start;}
.cov-card .ic{grid-column:1;grid-row:1 / span 2;align-self:start;
width:64px;height:64px;background:var(--panel-blue);border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;margin:0;}
.cov-card h4{grid-column:2;align-self:center;color:#fff;font-family:'Inter',sans-serif;font-size:20px;font-weight:600;margin:0;letter-spacing:-.005em;line-height:1.2;}
.cov-card p{grid-column:2;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.75);margin:0;}
/* FAQ */
.faq-list{margin-top:20px;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:14px;overflow:hidden;}
.faq-item summary{padding:24px 30px;cursor:pointer;font-weight:600;font-size:21px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;list-style:none;font-family:'Playfair Display',serif;line-height:1.3;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:32px;color:var(--blue);font-weight:300;font-family:'Inter',sans-serif;line-height:1;}
.faq-item[open] summary::after{content:'−';}
.faq-item[open] summary{border-bottom:1px solid var(--line);}
.faq-item .faq-body{padding:22px 32px 28px;color:var(--text-2);font-size:16px;line-height:1.7;}
/* team grid */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 340px));gap:28px;justify-content:center;max-width:1120px;margin:0 auto;}
.team-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(10,10,10,.06);}
.team-photo{height:320px;background:linear-gradient(135deg,var(--slate),var(--navy));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);font-family:'Playfair Display',serif;font-size:80px;font-weight:600;}
.team-info{padding:28px 26px;}
.team-info h3, .team-info h4{font-family:'Playfair Display',serif;font-size:30px;line-height:1.15;margin-bottom:6px;font-weight:600;color:var(--ink);}
.team-info .role{color:var(--blue);font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:14px;}
.team-info p{color:var(--text-2);font-size:14.5px;line-height:1.6;}
/* community */
.community-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;}
.comm-col{background:var(--charcoal-2);border-radius:20px;padding:32px 30px;}
.comm-col h4{color:#fff;font-family:'Playfair Display',serif;font-size:24px;margin-bottom:20px;font-weight:600;}
.comm-col ul{list-style:none;}
.comm-col ul li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.85);font-size:15px;display:flex;justify-content:space-between;gap:14px;}
.comm-col ul li:last-child{border-bottom:none;}
.comm-col ul li .role{color:rgba(255,255,255,.5);font-size:13px;}
/* contact */
.contact-grid{display:grid;grid-template-columns:2fr 1fr;gap:48px;align-items:start;}
.contact-info-card{background:var(--cream);border-radius:20px;padding:36px 32px;}
.contact-info-card h3{font-family:'Playfair Display',serif;font-size:28px;margin-bottom:22px;font-weight:600;}
.contact-row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
.contact-row:last-child{border-bottom:none;}
.contact-row .ic{width:38px;height:38px;background:var(--navy-deep);color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;font-size:16px;}
.contact-row .content{flex:1;}
.contact-row .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600;margin-bottom:2px;}
.contact-row .val{font-size:15.5px;color:var(--ink);font-weight:500;line-height:1.5;}
.contact-row a{color:var(--blue);}
.contact-row a:hover{color:var(--blue-2);}
.form-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:40px 40px;}
.form-card h3{font-family:'Playfair Display',serif;font-size:32px;margin-bottom:8px;font-weight:600;}
.form-card .form-lede{color:var(--text-2);margin-bottom:28px;font-size:15px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.form-row.single{grid-template-columns:1fr;}
.form-field label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:600;margin-bottom:6px;}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);background:#fff;transition:border-color .15s;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--blue);}
.form-field textarea{resize:vertical;min-height:120px;}
.form-legal{font-size:12.5px;color:var(--text-muted);margin-top:14px;line-height:1.5;}
/* CTA + footer (reused from v2) */
.cta-footer{background:#1a1a1a;color:rgba(255,255,255,.85);padding:100px 0 30px;}
.cta-section{text-align:center;padding:40px 0 80px;max-width:780px;margin:0 auto;}
.cta-section h2{font-family:'Playfair Display',serif;color:#fff;font-size:62px;line-height:1.1;margin-bottom:24px;font-weight:600;}
.cta-section p{color:rgba(255,255,255,.85);font-size:18px;margin-bottom:32px;line-height:1.55;}
.footer-panel{background:#262a30;border-radius:24px;padding:60px 60px 40px;margin:0 0 30px;}
.footer-cols{display:grid;grid-template-columns:1.4fr 1.2fr;gap:50px;margin-bottom:40px;}
.footer-panel h5{color:#fff;font-family:'Playfair Display',serif;font-size:24px;font-weight:500;margin-bottom:24px;}
.footer-panel ul{list-style:none;}
.footer-panel ul li{margin-bottom:12px;}
.footer-panel a{color:rgba(255,255,255,.75);font-size:14.5px;text-decoration:none;}
.footer-panel a:hover{color:#fff;text-decoration:underline;}
.footer-panel .desc{color:rgba(255,255,255,.65);font-size:14px;line-height:1.6;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);}
.footer-bottom{display:grid;grid-template-columns:220px 1fr auto;gap:40px;align-items:center;padding:20px 60px 0;}
.footer-bottom-text{min-width:0;}
.footer-bottom-social{display:flex;justify-content:flex-end;align-items:center;}
.footer-bottom .brand-mark img{height:50px;}
.footer-bottom .legal-links{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px;}
.footer-bottom .legal-links a{color:rgba(255,255,255,.85);font-size:14px;text-decoration:none;}
.footer-bottom .legal-links a:hover{text-decoration:underline;}
.footer-bottom .legal-links .divider{color:rgba(255,255,255,.35);}
.footer-bottom .disclaimer{color:rgba(255,255,255,.55);font-size:12.5px;line-height:1.55;margin-bottom:10px;}
.footer-bottom .copy{color:rgba(255,255,255,.6);font-size:13px;margin-top:14px;}
.footer-bottom .copy a{color:rgba(255,255,255,.75);text-decoration:none;}
.footer-bottom .copy a:hover{text-decoration:underline;}
@media (max-width:1000px){
.article-grid,.contact-grid,.community-grid,.cov-grid,.footer-cols,.team-grid{grid-template-columns:1fr;}
.team-grid{gap:20px;}
.page-hero h1{font-size:44px;}
.section-title,.cta-section h2{font-size:38px;}
.nav-links{display:none;}
.container,.container-narrow{padding:0 20px;}
.nav-pill{margin:16px 16px 0;padding:12px 16px 12px 20px;}
.footer-panel{padding:30px 24px;}
.footer-bottom{padding:20px 24px 0;grid-template-columns:1fr;}
.form-card{padding:28px 24px;}
.form-row{grid-template-columns:1fr;}
}
/* ============ NAV DROPDOWNS (added for real site nav) ============ */
.nav-links ul { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.nav-links li.nav-item { position: relative; }
.nav-links li.nav-item > a {
display: block;
padding: 10px 16px;
color: var(--ink);
font-weight: 500;
font-size: 14px;
border-radius: 999px;
transition: all 0.15s;
white-space: nowrap;
letter-spacing: 0.01em;
}
.nav-links li.nav-item > a:hover { background: var(--off-white); color: var(--navy); }
.nav-links li.nav-item.active > a { color: var(--blue); font-weight: 600; }
.nav-links li.nav-item .drop-cue { font-size: 15px; opacity: 0.9; margin-left: 5px; font-weight: 700; line-height: 1; }
.nav-links li.nav-item .drop {
position: absolute;
top: calc(100% + 8px);
left: 0;
background: #fff;
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
padding: 12px;
min-width: 240px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: all 0.15s ease-out;
z-index: 100;
}
.nav-links li.nav-item.has-drop:hover > .drop,
.nav-links li.nav-item .drop:hover {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-links li.nav-item .drop a {
display: block;
padding: 9px 14px;
color: var(--ink);
font-size: 14px;
font-weight: 500;
border-radius: 6px;
white-space: nowrap;
}
.nav-links li.nav-item .drop a:hover { background: var(--off-white); color: var(--blue); }
/* Wide dropdown (Insurance = 2 columns) */
.nav-links li.nav-item .drop.drop-wide {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 24px;
min-width: 520px;
padding: 18px 20px;
}
.nav-links li.nav-item .drop-col { display: flex; flex-direction: column; gap: 2px; }
.nav-links li.nav-item .drop-head {
font-family: 'Inter', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--gold, #c9a35c);
font-weight: 700;
padding: 4px 14px 8px;
border-bottom: 1px solid var(--line, #e6e2d8);
margin-bottom: 4px;
}
/* ============ MOBILE NAV (hamburger + slide-down panel) ============ */
/* Hamburger button - hidden on desktop, shown below 1100px */
.hamburger {
display: none;
background: transparent;
border: none;
padding: 8px 10px;
cursor: pointer;
border-radius: 6px;
margin-left: auto;
margin-right: 8px;
}
.hamburger:hover { background: var(--off-white, #f8f7f3); }
.hamburger span {
display: block;
width: 26px;
height: 3px;
background: var(--ink, #0a0a0a);
border-radius: 2px;
margin: 4px 0;
transition: transform 0.2s, opacity 0.2s;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1100px) {
.hamburger { display: block; }
.nav-pill .pill-btn.dark.sm { display: none; } /* Get a Quote pill hides - moved into open menu */
/* Hide the inline nav */
.nav-links {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: #fff;
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0,0,0,0.16);
padding: 12px;
z-index: 100;
max-height: calc(100vh - 180px);
overflow-y: auto;
}
.nav-links.open {
display: block !important;
animation: fadeInDown 0.18s ease-out;
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.nav-links ul {
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 2px;
}
.nav-links li.nav-item { position: static; }
.nav-links li.nav-item > a {
padding: 14px 18px;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.nav-links li.nav-item.has-drop > a::after {
content: '';
}
.nav-links li.nav-item .drop-cue { float: right; font-size: 14px; opacity: 0.5; }
/* Dropdowns become inline expandable sub-lists on mobile */
.nav-links li.nav-item .drop,
.nav-links li.nav-item .drop.drop-wide {
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
display: block !important;
box-shadow: none !important;
background: var(--off-white, #f8f7f3);
border-radius: 10px;
padding: 6px 8px 10px;
margin: 4px 8px 8px;
min-width: 0 !important;
grid-template-columns: 1fr !important;
}
.nav-links li.nav-item .drop a {
padding: 10px 14px;
font-size: 14px;
text-transform: none;
letter-spacing: 0;
}
.nav-links li.nav-item .drop-head {
color: var(--gold, #c9a35c);
font-size: 10.5px;
padding: 8px 14px 4px;
border: none;
margin: 0;
}
/* Real Get a Quote link at the bottom of the open menu */
.nav-links li.mobile-only-cta { margin-top: 8px; padding: 0 8px; list-style: none; }
.nav-links li.mobile-only-cta a.mobile-quote-btn {
display: block;
background: var(--navy-deep, #06172e);
color: #fff !important;
text-align: center;
padding: 14px 18px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
text-transform: none;
letter-spacing: 0.01em;
text-decoration: none;
}
.nav-links li.mobile-only-cta a.mobile-quote-btn:hover {
background: var(--navy, #0f2645);
color: #fff !important;
}
}
/* Hide the mobile-only quote inside nav-links on desktop */
@media (min-width: 1101px) {
.nav-links li.mobile-only-cta { display: none !important; }
}
/* ============ MOBILE TYPOGRAPHY FIXES ============ */
@media (max-width: 720px) {
.hero h1 { font-size: 42px !important; }
.hero-sub { font-size: 16px !important; }
.serve h2, .cta-section h2, .carriers h2, .blog-left h2, .section-title { font-size: 32px !important; }
.blog-left h2 { font-size: 42px !important; line-height: 1.05; margin-bottom: 20px; }
.serve { padding: 60px 0 !important; }
.section, .section-dark, .section-cream { padding: 60px 0 !important; }
.cta-footer { padding: 60px 0 30px !important; }
.page-hero h1 { font-size: 36px !important; }
/* util-bar mobile behavior is consolidated in the block below */
}
@media (max-width: 400px) {
.hero h1 { font-size: 32px !important; }
.blog-left h2, .serve h2, .cta-section h2 { font-size: 28px !important; }
.page-hero h1 { font-size: 28px !important; }
.container, .container-narrow { padding: 0 16px !important; }
}
/* ============ MOBILE HEADER SPACING FIX ============ */
/* On mobile the floating pill effect creates an ugly gap between the black
util bar and the pill. Make the pill flush against the util bar with no
rounded corners, and remove the hero's negative margin (which was pulling
it under the floating pill on desktop but caused overlap issues on mobile). */
@media (max-width: 720px) {
.nav-pill {
margin: 0 !important;
border-radius: 0 !important;
box-shadow: 0 1px 8px rgba(0,0,0,0.08) !important;
padding: 10px 14px !important;
}
.nav-wrap {
/* Also strip the floating gap around the pill */
box-shadow: none;
}
.hero {
margin-top: 0 !important;
height: auto !important;
min-height: 520px;
}
.hero-content {
padding: 40px 20px !important;
}
.page-hero {
margin-top: 0 !important;
height: auto !important;
min-height: 280px;
}
.page-hero-content {
padding: 40px 20px !important;
}
.logo img {
height: 44px !important;
}
/* Tighten the mobile nav open panel positioning (it was calc'd from the floating pill) */
.nav-links.open {
top: 100% !important;
left: 0 !important;
right: 0 !important;
border-radius: 0 !important;
}
}
/* ============ UTIL BAR - CONSOLIDATED PADDING + LAYOUT ============
Bookended flex: tagline pinned left, phone pinned right, divider hidden.
That way it always looks balanced at every viewport width instead of
playing tricks with text-align.
Horizontal padding mirrors .container edges: 40px → 20px ≤720 → 16px ≤400. */
.util-bar {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 10px 40px !important;
font-size: 13.5px !important;
text-align: left !important;
}
.util-bar span { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; }
.util-bar .divider { display: none !important; }
@media (max-width: 720px) {
.util-bar { padding: 9px 20px !important; font-size: 12.5px !important; justify-content: center !important; flex-wrap: wrap; column-gap: 14px; row-gap: 2px; text-align: center !important; }
}
@media (max-width: 400px) {
.util-bar { padding: 8px 16px !important; font-size: 12px !important; }
.util-bar span { flex-basis: 100%; justify-content: center; }
}
/* ============ IN-CONTENT LINKS ============
Blog articles, service pages, prose paragraphs - links in body copy should
be blue and NOT underlined by default (matches the rest of the site's clean
look), then underline on hover so the affordance is still obvious.
Deliberately scoped to prose containers so nav/footer/button links are not
affected - those already have their own dedicated rules. */
.article-body a,
.section .container p a:not(.pill-btn),
.section .container-narrow p a:not(.pill-btn),
.section .container li a:not(.pill-btn),
.section .container-narrow li a:not(.pill-btn),
.section-cream .container p a:not(.pill-btn),
.section-cream .container li a:not(.pill-btn),
.comm-col a:not(.pill-btn) {
color: var(--blue);
text-decoration: none;
}
.article-body a:not(.pill-btn):hover,
.section .container p a:not(.pill-btn):hover,
.section .container-narrow p a:not(.pill-btn):hover,
.section .container li a:not(.pill-btn):hover,
.section .container-narrow li a:not(.pill-btn):hover,
.section-cream .container p a:not(.pill-btn):hover,
.section-cream .container li a:not(.pill-btn):hover,
.comm-col a:not(.pill-btn):hover {
color: var(--blue);
text-decoration: underline;
}
/* ============ FACEBOOK / SOCIAL ICON ============ */
.footer-bottom .social-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
color: rgba(255,255,255,0.9);
background: rgba(255,255,255,0.08);
transition: color 0.15s, background 0.15s, transform 0.15s;
text-decoration: none !important;
}
.footer-bottom .social-ic svg { display: block; }
.footer-bottom .social-ic:hover {
color: #fff;
background: rgba(255,255,255,0.18);
transform: translateY(-1px);
}
/* Privacy Policy link now lives inside the disclaimer paragraph - keep it
readable against the muted disclaimer text. */
.footer-bottom .disclaimer a {
color: rgba(255,255,255,0.85);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.25);
}
.footer-bottom .disclaimer a:hover {
color: #fff;
border-bottom-color: #fff;
}
/* Mobile: stack the three columns and re-center the social icon. */
@media (max-width: 720px) {
.footer-bottom { grid-template-columns: 1fr !important; text-align: center; gap: 20px !important; }
.footer-bottom .brand-mark { justify-content: center; }
.footer-bottom-social { justify-content: center; }
}
/* =====================================================================
RESTORED SECTIONS FROM THE ORIGINAL SITE (2026-08-19)
Three sections that lived on the original absoluteriskservices.com
homepage and needed to be re-added to the rebuild.
===================================================================== */
/* ---- WHY OUR INDEPENDENT AGENTS ARE SO SUCCESSFUL ---- */
/* Split panel: copy on the left (dark charcoal), full-bleed photo on the right. */
.why-agents {
background: var(--charcoal, #1e2028);
color: rgba(255,255,255,0.92);
}
.why-agents-inner {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 480px;
}
.why-agents-copy {
padding: 90px 60px 90px calc((100vw - 1360px)/2 + 40px); /* aligns with .container's left edge on wide screens */
display: flex;
flex-direction: column;
justify-content: center;
max-width: 720px;
margin-left: auto;
}
.why-agents-copy h2 {
font-family: 'Playfair Display', Georgia, serif;
color: #fff;
font-size: 44px;
line-height: 1.1;
font-weight: 600;
margin-bottom: 24px;
letter-spacing: -0.01em;
text-wrap: balance; /* let browser pick a balanced 2-line wrap so "Agents" doesn\'t orphan */
}
.why-agents-copy p {
color: rgba(255,255,255,0.82);
font-size: 16px;
line-height: 1.75;
margin-bottom: 30px;
}
.why-agents-copy .pill-btn { align-self: flex-start; }
.why-agents-photo {
background: url('../img/service/auto-dog.jpg') center/cover no-repeat;
background-color: #0a0a0a;
min-height: 480px;
}
/* ---- WHY TRUST ABSOLUTE RISK SERVICES ---- */
/* Plain white, centered blue headline + paragraph - same look as the original. */
.why-trust {
background: #fff;
padding: 90px 20px;
text-align: center;
}
.why-trust h2 {
color: var(--blue);
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 44px;
line-height: 1.15;
margin-bottom: 28px;
letter-spacing: -0.005em;
}
.why-trust p {
color: var(--text-2);
font-size: 18px;
line-height: 1.7;
max-width: 980px;
margin: 0 auto;
}
/* ---- THREE COVERAGE PILLARS (gold outline icons) ---- */
.pillars {
background: #fff;
padding: 80px 0 90px;
}
.pillar-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 60px;
}
.pillar {
display: flex;
align-items: flex-start;
gap: 20px;
color: inherit;
text-decoration: none;
transition: transform 0.15s;
}
.pillar:hover { transform: translateY(-2px); }
.pillar:hover h3 { color: var(--blue); }
.pillar-ic {
flex: none;
width: 68px;
height: 68px;
color: var(--gold); /* strokes inherit currentColor */
}
.pillar-ic svg { width: 100%; height: 100%; }
.pillar-body h3 {
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 500;
color: var(--ink);
margin-bottom: 10px;
letter-spacing: -0.005em;
transition: color 0.15s;
}
.pillar-body p {
color: var(--text-2);
font-size: 15px;
line-height: 1.55;
margin: 0;
}
/* ---- RESPONSIVE ---- */
@media (max-width: 1100px) {
.why-agents-inner { grid-template-columns: 1fr; }
.why-agents-copy { padding: 60px 40px; margin: 0; max-width: none; }
.why-agents-photo { min-height: 360px; }
.why-trust { padding: 70px 20px; }
.why-trust h2 { font-size: 36px; }
.pillar-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
.why-agents-copy { padding: 50px 24px; }
.why-agents-copy h2 { font-size: 34px; }
.why-agents-photo { min-height: 280px; }
.why-trust { padding: 60px 20px; }
.why-trust h2 { font-size: 30px; }
.why-trust p { font-size: 16px; }
.pillars { padding: 30px 0 70px; }
.pillar { gap: 16px; }
.pillar-ic { width: 56px; height: 56px; }
.pillar-body h3 { font-size: 20px; }
}
/* ============ 2026-08-20 typography + card additions ============ */
/* Prevent orphan words. HEADINGS get `balance` (browsers balance line
lengths across the whole heading, killing single-word tails). BODY
copy gets `pretty` (avoids widow on last line, respects flow). */
.section h1, .section h2, .section h3, .section h4,
.section-cream h1, .section-cream h2, .section-cream h3, .section-cream h4,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4,
.page-hero h1, .page-hero p.lede,
.section-title, .section-lede { text-wrap: balance; }
.section p, .section li, .section-cream p, .section-cream li,
.section-dark p, .section-dark li { text-wrap: pretty; }
/* Wider body wrapper for prose sections */
.prose-wide { max-width: 900px; margin: 0 auto; }
/* Styled "value card" grid - replaces boring bulleted lists */
.value-card-grid {
display: grid; gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
max-width: 1200px; margin: 32px auto 0;
}
.value-card {
background: #fff; border: 1px solid var(--line);
border-radius: 16px; padding: 30px 32px;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: 'num head' 'body body';
column-gap: 16px; row-gap: 10px;
}
.value-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(10,10,10,.08);
border-color: transparent;
}
.value-card .num {
grid-area: num; align-self: start;
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 10px;
background: var(--blue); color: #fff;
font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 600;
margin-bottom: 14px;
}
.value-card h4 {
grid-area: head; align-self: center;
font-family: 'Playfair Display', serif;
font-size: 24px; line-height: 1.2; font-weight: 600;
margin-bottom: 0; color: var(--ink);
}
.value-card p {
grid-area: body;
font-size: 15px; line-height: 1.65; color: var(--text-2); margin: 0;
}
/* Styled "check list" - for scannable credential/perk lists */
.check-list {
list-style: none; padding: 0; margin: 24px auto 0;
max-width: 780px;
display: grid; gap: 14px;
}
.check-list li {
position: relative; padding: 16px 20px 16px 56px;
background: #fff; border: 1px solid var(--line); border-radius: 12px;
font-size: 16.5px; line-height: 1.55; color: var(--ink);
}
.check-list li::before {
content: '';
position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
width: 24px; height: 24px; border-radius: 50%;
background: var(--blue) url("data:image/svg+xml;utf8,") center / 14px 14px no-repeat;
}
/* Slim helper for 2-col text blocks (e.g. Established 2010 story) */
.two-col-prose {
display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
max-width: 1040px; margin: 24px auto 0;
}
.two-col-prose p { font-size: 17px; line-height: 1.75; color: var(--text-2); }
@media (max-width: 720px) { .two-col-prose { grid-template-columns: 1fr; gap: 20px; } }
/* Team photo initials fallback (used when photo file is missing) */
.team-photo-initials {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--blue), var(--navy-deep));
color: #fff; font-family: 'Playfair Display', serif;
font-size: 64px; font-weight: 600; letter-spacing: .02em;
min-height: 260px;
}
/* 2026-08-20 tighten carriers copy so the last word does not orphan */
.carriers .lede { max-width: 780px; margin-left: auto; margin-right: auto; text-wrap: balance; }
/* Testimonials 2026-08-20 refresh */
.testimonial-card {
background: #fff; border-radius: 20px; padding: 66px 30px 32px;
box-shadow: 0 4px 24px rgba(10,10,10,.06);
position: relative; transition: transform .18s ease, box-shadow .18s ease;
}
.testimonial-card::before {
content: '\201C';
position: absolute; top: 6px; left: 22px;
font-family: 'Playfair Display', serif; font-size: 88px; line-height: 1;
color: var(--blue); opacity: .22;
}
.testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(10,10,10,.10); }
.testimonial-card blockquote, .testimonial-card p:first-of-type { margin: 0 0 18px; font-size: 16.5px; line-height: 1.6; color: var(--ink); position: relative; z-index: 1; }
.testimonial-card cite, .testimonial-card p.attr { font-style: normal; font-weight: 600; color: var(--text-muted); font-size: 14px; }
/* 2026-08-20 Coverage cards on the business-insurance page */
.coverage-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 40px rgba(10,10,10,.10);
}
.coverage-card h3 {
font-family: 'Playfair Display', serif;
font-size: 24px; margin-bottom: 12px; color: var(--ink);
}
.coverage-card p {
font-size: 15.5px; line-height: 1.6; color: var(--text-2); margin-bottom: 16px;
}
/* 2026-08-20 Mobile nav polish */
/* Kill the blue focus outline on hamburger tap (keeps it for keyboard users via :focus-visible) */
.hamburger:focus { outline: none; }
.hamburger:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.hamburger:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Guard :hover states so mobile taps don't "stick" a hover background on nav items */
@media (hover: none) {
.nav-links li.nav-item > a:hover { background: transparent !important; color: inherit !important; }
.nav-links li.nav-item .drop a:hover { background: transparent !important; color: var(--ink) !important; }
.pill-btn:hover { transform: none !important; }
}
/* Explicit tap highlight color kill for iOS/Android */
.nav-links a, .hamburger, .pill-btn { -webkit-tap-highlight-color: transparent; }
/* ============================================================
2026-08-21 Mobile nav polish -- pill width + active state
============================================================
Fixes:
1. Nav-pill was "width: calc(100% - 80px)" from the desktop
rule; mobile overrides only reset margin, so on phones the
white pill background stopped 80px short of the right edge
(the visible "hard line"). Reset width on mobile.
2. Mobile dropdown containers had a beige background which read
as an "active" highlight, while the real .active parent only
changed text colour (too subtle to notice). Make the drop
container quiet, and give .active a real filled treatment.
3. Belt-and-braces on the hamburger focus ring for touch.
============================================================ */
/* --- 1. Nav pill fills the viewport on tablet + phone --- */
@media (max-width: 1100px) {
.nav-pill { width: auto !important; }
}
@media (max-width: 720px) {
/* At <=720 the pill goes edge-to-edge (see MOBILE HEADER SPACING FIX).
Margin becomes 0 there, so width must be a full 100% (not calc-80). */
.nav-pill { width: 100% !important; }
}
/* --- 2. Mobile active-state + drop container polish --- */
@media (max-width: 1100px) {
/* Real, unambiguous active treatment for the currently-open section */
.nav-links li.nav-item.active > a {
background: var(--navy-deep, #06172e) !important;
color: #fff !important;
font-weight: 700 !important;
}
.nav-links li.nav-item.active > a .drop-cue { color: #fff !important; opacity: .8 !important; }
/* Quiet the dropdown container so it doesn't look "highlighted".
Indent + thin left rule signals "sub-menu" without competing
with the real .active fill above. */
.nav-links li.nav-item .drop,
.nav-links li.nav-item .drop.drop-wide {
background: transparent !important;
border-radius: 0 !important;
border-left: 2px solid var(--line, #e6e2d8) !important;
margin: 4px 0 8px 20px !important;
padding: 4px 0 4px 10px !important;
}
.nav-links li.nav-item .drop a { background: transparent !important; }
.nav-links li.nav-item .drop a:hover { background: transparent !important; color: var(--blue, #1e6c99) !important; }
}
/* --- 3. Hamburger tap: no ring, ever, on touch devices --- */
.hamburger { -webkit-tap-highlight-color: transparent; }
@media (hover: none), (pointer: coarse) {
.hamburger:focus,
.hamburger:focus-visible { outline: none !important; box-shadow: none !important; }
}
/* 2026-08-21 Page-hero size adjustment (global — matches Oxford Risk).
H1 was 64px which shouted; lede was 620px wide which forced awkward line
breaks. Pull H1 down to a still-editorial 48px and widen the lede to
~820px so 2-3 line descriptions read comfortably. Mobile step-down below. */
.page-hero h1 {
font-size: 48px;
max-width: 1000px;
line-height: 1.1;
}
.page-hero .lede {
max-width: 820px;
font-size: 17.5px;
line-height: 1.55;
}
@media (max-width: 1000px) {
.page-hero h1 { font-size: 40px !important; }
.page-hero .lede { max-width: 700px; }
}
@media (max-width: 720px) {
.page-hero h1 { font-size: 32px !important; }
.page-hero .lede { font-size: 16px; }
}
/* 2026-08-21 Dan 7-point design refresh: cream cov-cards, tighter hero spacing, why-choose card grid, testimonial carousel, cta heading */
/* 1. Kill blue/charcoal cov-cards - cream + gold-accent card style (Oxford cov-lp-card language) */
.cov-grid .cov-card {
background: linear-gradient(180deg, #fbf9f2 0%, #f7f5ed 100%);
color: var(--ink);
position: relative;
overflow: hidden;
box-shadow: 0 1px 2px rgba(15,20,30,0.04);
transition: box-shadow .2s, border-color .2s, transform .2s, background .2s;
border: 1px solid var(--line);
}
.cov-grid .cov-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--gold), rgba(201,163,92,0.35));
border-radius: 20px 20px 0 0;
}
.cov-grid .cov-card:hover {
background: #ffffff;
border-color: var(--gold);
box-shadow: 0 12px 28px rgba(15,20,30,0.09);
transform: translateY(-3px);
}
.cov-grid .cov-card .ic {
background: rgba(201,163,92,0.14);
color: var(--gold);
}
.cov-grid .cov-card h4 { color: var(--ink); }
.cov-grid .cov-card p { color: var(--text-2); }
/* 2. Hero - tighter top padding, centered 900px-capped subhead */
.hero-content { padding-top: 82px; }
.hero-sub { max-width: 900px; margin-left: auto; margin-right: auto; }
/* 6. CTA footer - larger, width-capped lede paragraph under the two-line heading */
.cta-section p:first-of-type {
font-size: 18.5px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* 2026-08-21 Mobile fixes: footer stacking, hero CTAs stacked without OR, util-bar wrap */
.footer-cols.footer-cols-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
@media (max-width: 900px) {
.footer-cols.footer-cols-3 { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 720px) {
.hero-ctas {
flex-direction: column;
align-items: stretch;
gap: 12px;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.hero-ctas .pill-btn { width: 100%; justify-content: center; text-align: center; }
.hero-ctas .sep { display: none; }
.util-bar {
flex-direction: column;
gap: 4px;
text-align: center;
padding: 10px 16px;
text-wrap: balance;
}
.util-bar .divider { display: none; }
.util-bar span { display: block; }
}
/* 2026-08-21 Inline article images */
.article-inline {
margin: 32px 0 28px;
}
.article-inline img {
width: 100%;
max-width: 720px;
height: auto;
border-radius: 12px;
display: block;
box-shadow: 0 4px 20px rgba(15,20,30,0.09);
}
/* 2026-08-21 Morales-inspired components: text-image split, full-width callout, blue-gradient section, vehicle slideshow */
/* --- 1. Text/image split (used inside coverage pages) --- */
.tis-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 40px 0;
}
.tis-split.tis-reverse { direction: rtl; }
.tis-split.tis-reverse > * { direction: ltr; }
.tis-text h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 40px;
font-weight: 500;
line-height: 1.15;
color: var(--ink);
margin: 0 0 22px;
text-wrap: balance;
}
.tis-text p {
font-size: 17px;
line-height: 1.7;
color: var(--text-2);
margin: 0 0 16px;
}
.tis-image img {
width: 100%;
height: auto;
border-radius: 16px;
display: block;
box-shadow: 0 12px 40px rgba(15,20,30,0.14);
}
@media (max-width: 900px) {
.tis-split { grid-template-columns: 1fr; gap: 32px; padding: 24px 0; }
.tis-split.tis-reverse { direction: ltr; }
.tis-text h2 { font-size: 30px; }
}
/* --- 2. Full-width callout with background image and dark scrim --- */
.fw-callout {
position: relative;
min-height: 520px;
display: flex;
align-items: center;
color: #fff;
background-size: cover;
background-position: center;
overflow: hidden;
margin: 0;
}
.fw-callout::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(10,15,25,0.75) 0%, rgba(10,15,25,0.55) 50%, rgba(10,15,25,0.15) 100%);
}
.fw-callout .fw-inner {
position: relative;
z-index: 1;
max-width: 620px;
padding: 80px 60px;
margin-left: 8vw;
}
.fw-callout h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 52px;
font-weight: 500;
line-height: 1.1;
color: #fff;
margin: 0 0 20px;
text-wrap: balance;
}
.fw-callout p {
font-size: 18px;
line-height: 1.65;
color: rgba(255,255,255,0.85);
margin: 0 0 28px;
}
@media (max-width: 900px) {
.fw-callout { min-height: 420px; }
.fw-callout .fw-inner { padding: 60px 24px; margin-left: 0; max-width: 100%; }
.fw-callout h2 { font-size: 36px; }
.fw-callout::before {
background: linear-gradient(180deg, rgba(10,15,25,0.75) 0%, rgba(10,15,25,0.65) 100%);
}
}
/* --- 3. Blue-gradient section background (for team + testimonials) --- */
.section-gradient-blue {
background: linear-gradient(135deg, #12294a 0%, #081a30 100%);
color: #fff;
padding: 90px 0;
}
.section-gradient-blue h2,
.section-gradient-blue .section-title { color: #fff; }
.section-gradient-blue .section-lede,
.section-gradient-blue p { color: rgba(255,255,255,0.82); }
.section-gradient-blue .team-card { background: #ffffff; color: var(--ink); }
.section-gradient-blue .testimonial-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; }
.section-gradient-blue .testimonial-card p { color: rgba(255,255,255,0.9); }
.section-gradient-blue .testimonial-card .attr { color: rgba(255,255,255,0.65); }
/* --- 4. Vehicle / coverage slideshow (used on commercial-auto pages) --- */
.vsg-wrap { position: relative; padding: 60px 0 40px; }
.vsg-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px; padding: 0 24px; max-width: 1400px; margin-left: auto; margin-right: auto; }
.vsg-header h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 44px;
font-weight: 500;
line-height: 1.1;
margin: 0;
max-width: 520px;
color: #fff;
text-wrap: balance;
}
.vsg-scroller {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, 340px);
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 0 24px 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.vsg-scroller::-webkit-scrollbar { height: 4px; }
.vsg-scroller::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 2px; }
.vsg-card {
scroll-snap-align: start;
position: relative;
aspect-ratio: 3/4;
border-radius: 14px;
overflow: hidden;
background: #222;
}
.vsg-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.vsg-card:hover img { transform: scale(1.04); }
.vsg-card .vsg-label {
position: absolute;
top: 16px;
left: 16px;
background: rgba(255,255,255,0.95);
color: var(--ink);
padding: 8px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
@media (max-width: 720px) {
.vsg-header { flex-direction: column; align-items: start; gap: 16px; }
.vsg-header h2 { font-size: 32px; }
.vsg-scroller { grid-auto-columns: 78%; }
}
/* 2026-08-21 Batch design fixes: 3-col grid, why cards, blog cards, mobile buttons, hero height, testimonial carousel */
/* --- 3. Fix 3-block sections: force 30/30/30 (repeat 3 fr) so 3rd block doesn't wrap alone --- */
.cov-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .cov-grid { grid-template-columns: 1fr; } }
.cov-lp-grid.grid-3, .cov-lp-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cov-lp-grid.grid-3, .cov-lp-grid[data-count="3"] { grid-template-columns: 1fr; } }
/* --- 6. Why-choose cards: bigger circle number,
centered {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
align-items: stretch;
}
/* --- 7. Blog cards equal height --- */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 28px;
align-items: stretch;
}
.blog-card { display: flex; flex-direction: column; height: 100%; }
.blog-card > div:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.blog-card h3 { flex: 1 1 auto; }
/* --- 8. Mobile stacked-button spacing: ensure margin-bottom on stacked pills --- */
@media (max-width: 720px) {
.hero-ctas { gap: 10px; }
.hero-ctas .pill-btn + .pill-btn { margin-top: 8px; }
.pill-btn + .pill-btn { margin-top: 8px; }
.btn-row { display: flex; flex-direction: column; gap: 8px; }
.btn-row .pill-btn { width: 100%; justify-content: center; }
/* Hover-only styles disabled on mobile to avoid stuck-hover states */
.pill-btn:hover { transition: none; }
}
/* --- 11. Reduce hero height slightly --- */
.hero, .hero-inner { min-height: auto; }
.hero-content { padding-top: 60px; padding-bottom: 60px; }
@media (max-width: 720px) {
.hero-content { padding-top: 40px; padding-bottom: 40px; }
}
/* --- 9. Testimonial carousel: pull arrows outside the card, faster auto-scroll (JS side), taller card equal-height --- */
.tc-carousel { padding: 4px 70px; }
.tc-arrow { width: 44px; height: 44px; }
.tc-prev { left: 4px; }
.tc-next { right: 4px; }
.testimonial-card {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 30px 28px;
box-shadow: 0 4px 20px rgba(15,20,30,0.05);
}
.testimonial-card p { flex: 1 1 auto; }
.tc-page { align-items: stretch; }
@media (max-width: 640px) {
.tc-carousel { padding: 4px 8px; }
.tc-arrow { display: none; }
}
/* --- Locations styling parity with Builders Risk card --- */
.location-card.cov-lp-card, .loc-card.cov-lp-card {
padding: 28px 26px 22px;
display: flex;
flex-direction: column;
height: 100%;
}
.location-card.cov-lp-card h3, .loc-card.cov-lp-card h3 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: 22px;
margin: 6px 0 12px;
color: var(--ink);
}
.location-card.cov-lp-card .loc-address,
.loc-card.cov-lp-card .loc-address {
color: var(--text-2);
font-size: 14.5px;
line-height: 1.55;
margin: 0 0 12px;
}
.location-card.cov-lp-card .pill-btn,
.loc-card.cov-lp-card .pill-btn {
margin-top: auto;
align-self: flex-start;
}
/* 2026-08-21 value-card treatment (used on locations + contact info cards) */
.value-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
align-items: stretch;
}
.value-card {
position: relative;
background: linear-gradient(180deg, #fbf9f2 0%, #f7f5ed 100%);
border: 1px solid var(--line);
border-radius: 14px;
padding: 34px 26px 22px;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.value-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--gold), rgba(201,163,92,0.35));
border-radius: 14px 14px 0 0;
}
.value-card .num {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--gold);
color: #fff;
font-family: 'Playfair Display', Georgia, serif;
font-size: 18px;
font-weight: 500;
margin: 0 0 14px;
line-height: 1;
}
.value-card h4 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 20px;
font-weight: 500;
margin: 0 0 8px;
color: var(--ink);
}
.value-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
/* 2026-08-21 Testimonial carousel rebuild: 1-up, seamless continuous, elegant style */
.tc-carousel {
position: relative;
max-width: 900px;
margin: 40px auto 0;
overflow: hidden;
padding: 4px 64px;
}
.tc-track {
display: flex;
transition: transform .6s cubic-bezier(.22,.61,.36,1);
will-change: transform;
}
.tc-track.tc-no-anim { transition: none; }
.tc-page {
flex: 0 0 100%;
min-width: 100%;
display: flex;
padding: 0 8px;
box-sizing: border-box;
}
.tc-carousel .testimonial-card {
flex: 1 1 auto;
width: 100%;
background: linear-gradient(180deg, #fbf9f2 0%, #f7f5ed 100%);
border: 1px solid var(--line);
border-radius: 20px;
padding: 72px 56px 42px;
position: relative;
overflow: hidden;
box-shadow: 0 8px 32px rgba(15,20,30,0.06);
}
.tc-carousel .testimonial-card::before {
content: '\201C';
position: absolute;
top: 8px;
left: 40px;
font-family: 'Playfair Display', Georgia, serif;
font-size: 140px;
line-height: 1;
color: var(--gold);
opacity: 0.55;
z-index: 0;
pointer-events: none;
}
.tc-carousel .testimonial-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--gold), rgba(201,163,92,0.35));
border-radius: 20px 20px 0 0;
}
.tc-carousel .testimonial-card p,
.tc-carousel .testimonial-card blockquote {
position: relative;
z-index: 1;
margin: 0 0 22px;
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
font-weight: 400;
font-style: italic;
line-height: 1.55;
color: var(--ink);
text-wrap: pretty;
}
.tc-carousel .testimonial-card .attr,
.tc-carousel .testimonial-card cite {
position: relative;
z-index: 1;
display: block;
font-family: 'Inter', system-ui, sans-serif;
font-style: normal;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
color: var(--text-muted);
text-transform: none;
}
.tc-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px; height: 46px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--line);
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 14px rgba(10,10,10,0.08);
transition: border-color .15s, color .15s, transform .15s;
font-size: 20px;
z-index: 3;
padding: 0;
line-height: 1;
}
.tc-arrow:hover {
border-color: var(--gold);
color: var(--gold);
transform: translateY(-50%) scale(1.08);
}
.tc-prev { left: 6px; }
.tc-next { right: 6px; }
.tc-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 26px;
}
.tc-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: var(--line);
cursor: pointer;
padding: 0;
transition: background .2s, transform .2s, width .2s;
}
.tc-dot.active {
background: var(--gold);
width: 24px;
border-radius: 4px;
}
@media (max-width: 720px) {
.tc-carousel { padding: 4px 8px; }
.tc-carousel .testimonial-card { padding: 60px 28px 32px; }
.tc-carousel .testimonial-card::before { font-size: 100px; left: 20px; top: 4px; }
.tc-carousel .testimonial-card p,
.tc-carousel .testimonial-card blockquote { font-size: 18px; }
.tc-arrow { display: none; }
}
/* 2026-08-21 Check-list redesign: 2-col card grid, gold accent, cream card (used on coverage pages) */
ul.check-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
max-width: 1000px !important;
margin: 24px auto 0 !important;
padding: 0 !important;
list-style: none;
}
ul.check-list li {
position: relative;
background: linear-gradient(180deg, #fbf9f2 0%, #f7f5ed 100%);
border: 1px solid var(--line);
border-radius: 12px;
padding: 18px 20px 18px 56px;
color: var(--ink);
font-size: 15.5px;
line-height: 1.55;
margin: 0 !important;
transition: box-shadow .2s, border-color .2s, transform .2s;
}
ul.check-list li::before {
content: '';
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
background: var(--gold);
border-radius: 50%;
display: block;
}
ul.check-list li::after {
content: '';
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-56%) rotate(45deg);
width: 6px;
height: 12px;
border-right: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
display: block;
}
ul.check-list li:hover {
border-color: var(--gold);
box-shadow: 0 6px 18px rgba(15,20,30,0.07);
transform: translateY(-2px);
}
@media (max-width: 720px) {
ul.check-list { grid-template-columns: 1fr; gap: 10px; }
ul.check-list li { padding: 16px 18px 16px 52px; font-size: 15px; }
}
/* 2026-08-21 vsg-wrap: self-contain the dark gradient so slideshow always renders correctly */
.vsg-wrap {
background: linear-gradient(135deg, #12294a 0%, #081a30 100%);
color: #fff;
padding: 60px 0 40px;
border-radius: 0;
}
.vsg-header h2 { color: #fff; }
.vsg-card .vsg-label { color: var(--ink); }
/* 2026-08-21 Kill dead-space on text/image split sections */
.tis-split {
padding: 20px 0 !important;
align-items: center !important;
gap: 48px !important;
}
.tis-image {
display: flex;
align-items: center;
justify-content: center;
}
.tis-image img {
max-height: 420px !important;
object-fit: cover !important;
object-position: center !important;
width: 100%;
}
/* Also tighten the enclosing section that hosts a .tis-split */
section.section:has(> .container > .tis-split) {
padding-top: 30px;
padding-bottom: 30px;
}
@media (max-width: 900px) {
.tis-split { gap: 24px !important; padding: 16px 0 !important; }
.tis-image img { max-height: 320px !important; }
}
/* 2026-08-21 Editorial split: prose sections show body left, big heading right with thin separator */
.container-narrow:has(.section-title.center):has(> .prose-wide > p),
.container-narrow:has(.section-title.center):has(> .prose-wide > p:first-child),
section.section > .container-narrow:has(> h2 + .prose-wide > p) {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 56px;
align-items: center;
max-width: 1180px !important;
margin: 0 auto;
padding: 20px 24px;
}
.container-narrow:has(.section-title.center):has(> .prose-wide > p) > .section-title,
.container-narrow:has(.section-title.center):has(> .prose-wide > p) > h2,
section.section > .container-narrow:has(> h2 + .prose-wide > p) > h2 {
order: 2;
text-align: left !important;
border-left: 1px solid var(--line);
padding-left: 56px;
margin: 0 !important;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 500;
font-size: 52px;
line-height: 1.1;
color: var(--ink);
text-wrap: balance;
}
.container-narrow:has(.section-title.center):has(> .prose-wide > p) > .prose-wide,
section.section > .container-narrow:has(> h2 + .prose-wide > p) > .prose-wide {
order: 1;
padding-right: 8px;
margin: 0 !important;
}
.container-narrow:has(.section-title.center):has(> .prose-wide > p) > .prose-wide p,
section.section > .container-narrow:has(> h2 + .prose-wide > p) > .prose-wide p {
font-size: 17px;
line-height: 1.7;
color: var(--text-2);
margin: 0 0 14px;
text-wrap: pretty;
}
@media (max-width: 900px) {
.container-narrow:has(.section-title.center):has(> .prose-wide > p),
section.section > .container-narrow:has(> h2 + .prose-wide > p) {
grid-template-columns: 1fr;
gap: 20px;
padding: 16px 24px;
}
.container-narrow:has(.section-title.center):has(> .prose-wide > p) > .section-title,
.container-narrow:has(.section-title.center):has(> .prose-wide > p) > h2,
section.section > .container-narrow:has(> h2 + .prose-wide > p) > h2 {
order: 1;
border-left: none;
border-bottom: 1px solid var(--line);
padding-left: 0;
padding-bottom: 16px;
font-size: 34px;
text-align: left !important;
}
.container-narrow:has(.section-title.center):has(> .prose-wide > p) > .prose-wide,
section.section > .container-narrow:has(> h2 + .prose-wide > p) > .prose-wide {
order: 2;
padding-right: 0;
}
}
/* 2026-08-21 Kill wave divider, swap blue backgrounds -> black, add glossy sheen */
/* Wave divider - hide anywhere it survives */
.wave-divider, .wave-divider svg { display: none !important; }
/* Blue gradient sections -> black glossy */
.section-gradient-blue,
.vsg-wrap {
background: linear-gradient(135deg, #0f0f10 0%, #050505 100%) !important;
color: #fff;
position: relative;
overflow: hidden;
}
/* Subtle glossy sheen on dark sections: top-left radial highlight */
.section-gradient-blue::before,
.vsg-wrap::before {
content: '';
position: absolute;
top: -20%; left: -10%;
width: 60%; height: 80%;
background: radial-gradient(ellipse at top left, rgba(255,255,255,0.06) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.section-gradient-blue > *,
.vsg-wrap > * { position: relative; z-index: 1; }
/* Cards: subtle top gloss line for cream cards */
.cov-lp-card,
.value-card,
ul.check-list li {
background-image: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 40%), linear-gradient(180deg, #fbf9f2 0%, #f7f5ed 100%);
background-blend-mode: normal;
}
/* Buttons: subtle inner top highlight */
.pill-btn.blue,
.pill-btn.dark {
background-image: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 55%);
background-color: var(--blue);
box-shadow: 0 6px 18px rgba(15,20,30,0.14), inset 0 1px 0 rgba(255,255,255,0.2);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.pill-btn.dark { background-color: var(--ink); }
.pill-btn.blue:hover, .pill-btn.dark:hover {
filter: brightness(1.1);
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(15,20,30,0.2), inset 0 1px 0 rgba(255,255,255,0.25);
}
/* Testimonial card: add subtle top gloss */
.tc-carousel .testimonial-card {
background-image: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 30%), linear-gradient(180deg, #fbf9f2 0%, #f7f5ed 100%);
}
/* Full-width callout: swap the blue-tinted scrim for a clean black scrim */
.fw-callout::before {
background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.1) 100%) !important;
}
/* 2026-08-21 Auto-fit grid columns by child count so 4 cards go 2x2 (not 3+1) */
.cov-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr) !important; }
.cov-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr) !important; }
.cov-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr) !important; }
.cov-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, 1fr) !important; }
/* Same rule for the cov-lp-grid used on landing pages */
.cov-lp-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr) !important; }
.cov-lp-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 900px) {
.cov-grid, .cov-lp-grid { grid-template-columns: 1fr !important; }
}
/* 2026-08-21 Heading color scoping (narrowly targeted, replaces old universal !important rule) */
/* Only these specific headings were rendering blue on light bg before: */
.why-trust h2,
.why-trust h3,
.section-cream h2 {
color: var(--ink) !important;
}
/* 2026-08-21 Footer contrast fixes.
Column headers use in the footer markup, but only was whitened.
And the
broke
the inline flow of Oxford's "Instant Bond" link.) */
.why-editorial-list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: why-ed;
}
.why-editorial-list li {
counter-increment: why-ed;
position: relative;
padding: 22px 0 22px 60px;
border-top: 1px solid var(--line);
color: var(--text-2);
font-size: 17px;
line-height: 1.65;
}
.why-editorial-list li:last-child { border-bottom: 1px solid var(--line); }
.why-editorial-list li::before {
content: counter(why-ed, decimal-leading-zero);
position: absolute;
left: 0;
top: 24px;
font-family: 'Playfair Display', Georgia, serif;
color: var(--gold);
font-size: 20px;
font-weight: 600;
letter-spacing: 0.06em;
}
.why-editorial-list a {
color: var(--blue);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgba(30, 108, 153, 0.4);
text-underline-offset: 3px;
font-weight: 600;
}
.why-editorial-list a:hover { text-decoration-color: var(--blue); }
/* Prestige - extra-restrained variant: navy numerals + headline */
.why-editorial.is-premium .why-editorial-list li::before { color: var(--navy); font-weight: 700; }
@media (max-width: 900px) {
.why-editorial {
grid-template-columns: 1fr;
gap: 32px;
padding: 0 32px;
}
.why-editorial-headline { position: static; }
.why-editorial-headline h2 { font-size: 34px; }
}
@media (max-width: 560px) {
.why-editorial { padding: 0 20px; gap: 24px; }
.why-editorial-headline h2 { font-size: 28px; }
.why-editorial-list li {
padding: 20px 0 20px 44px;
font-size: 16px;
}
.why-editorial-list li::before {
font-size: 17px;
top: 22px;
}
}
/* 2026-09-03 Editorial-split mobile collapse fix — the 1fr 1.4fr !important
rule above blocks the earlier @media 1fr override; this restores single-column
at ≤900px. */
@media (max-width: 900px) {
.container-narrow:has(.section-title.center):has(> .prose-wide > p),
section.section > .container-narrow:has(> h2 + .prose-wide > p) {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
}
/* 2026-09-03/4 Text-led editorial blog pattern.
Applied portfolio-wide across the 6 newer Mythic agency sites. Adopts the
NC Coastal design PRINCIPLE — text-led, no per-article thumbnail — while
picking up each agency's own tokens (--ink, --text-2, --line, --gold,
--blue, --cream) so no colours are hard-coded here.
Surfaces styled:
• .editorial-blog — homepage "Latest from the Blog" section
• .editorial-index — /blog list page
Featured images render only when present. No gradient placeholders,
no card shadows, no oversized rounded rectangles. */
/* ── HOMEPAGE section ────────────────────────────────────────────────── */
.editorial-blog { padding: 72px 0; background: transparent; }
.editorial-blog .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.editorial-blog__head { max-width: 720px; margin: 0 0 40px; }
.editorial-blog__head h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 44px; line-height: 1.1; color: var(--ink); margin: 0 0 12px; text-wrap: balance; }
.editorial-blog__head .lede { font-size: 16.5px; line-height: 1.6; color: var(--text-2); margin: 0; text-wrap: pretty; }
.editorial-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 44px; align-items: start; }
.editorial-blog__grid > .editorial-item { min-width: 0; }
.editorial-item { position: relative; padding-top: 20px; }
.editorial-item::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: var(--gold); border-radius: 2px; }
.editorial-item__link { display: block; text-decoration: none; color: inherit; }
.editorial-item__cat { display: inline-block; font-family: 'Inter', -apple-system, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin: 0 0 12px; }
.editorial-item__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 22px; line-height: 1.28; color: var(--ink); margin: 0 0 12px; text-wrap: balance; transition: color .18s ease; }
.editorial-item__excerpt { font-family: 'Inter', -apple-system, sans-serif; font-size: 15.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 16px; text-wrap: pretty; }
.editorial-item__more { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', -apple-system, sans-serif; font-weight: 600; font-size: 14px; color: var(--blue); transition: gap .18s ease, color .18s ease; }
.editorial-item__more::after { content: '\2192'; transition: transform .18s ease; }
.editorial-item__link:hover .editorial-item__title { color: var(--blue); }
.editorial-item__link:hover .editorial-item__more { gap: 10px; }
.editorial-item__link:hover .editorial-item__more::after { transform: translateX(2px); }
.editorial-blog__cta { margin-top: 44px; }
@media (max-width: 960px) {
.editorial-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
.editorial-blog__head h2 { font-size: 36px; }
}
@media (max-width: 640px) {
.editorial-blog { padding: 52px 0; }
.editorial-blog__grid { grid-template-columns: 1fr; gap: 32px; }
.editorial-blog__head { margin-bottom: 28px; }
.editorial-blog__head h2 { font-size: 30px; }
.editorial-blog__head .lede { font-size: 15.5px; }
.editorial-item__title { font-size: 20px; }
.editorial-blog__cta { margin-top: 28px; text-align: left; }
}
/* ── BLOG INDEX list ─────────────────────────────────────────────────── */
.editorial-index { padding: 24px 0 96px; }
.editorial-index__list { list-style: none; padding: 0; margin: 0; }
.editorial-index__row { padding: 32px 0; border-top: 1px solid var(--line); }
.editorial-index__row:last-child { border-bottom: 1px solid var(--line); }
.editorial-index__row a { text-decoration: none; color: inherit; display: block; }
.editorial-index__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; font-family: 'Inter', -apple-system, sans-serif; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); font-weight: 600; margin: 0 0 10px; }
.editorial-index__meta .dot { color: var(--line); font-weight: 400; letter-spacing: 0; }
.editorial-index__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 28px; line-height: 1.22; color: var(--ink); margin: 0 0 12px; text-wrap: balance; transition: color .18s ease; }
.editorial-index__excerpt { font-family: 'Inter', -apple-system, sans-serif; font-size: 16px; line-height: 1.65; color: var(--text-2); margin: 0 0 14px; text-wrap: pretty; max-width: 780px; }
.editorial-index__more { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', -apple-system, sans-serif; font-weight: 600; font-size: 14px; color: var(--blue); transition: gap .18s ease; }
.editorial-index__more::after { content: '\2192'; transition: transform .18s ease; }
.editorial-index__row a:hover .editorial-index__title { color: var(--blue); }
.editorial-index__row a:hover .editorial-index__more { gap: 10px; }
.editorial-index__row a:hover .editorial-index__more::after { transform: translateX(2px); }
.editorial-index__empty { padding: 60px 0; text-align: center; color: var(--text-2); }
.editorial-index__empty h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 26px; color: var(--ink); margin: 0 0 10px; }
@media (max-width: 640px) {
.editorial-index { padding: 16px 0 60px; }
.editorial-index__row { padding: 24px 0; }
.editorial-index__title { font-size: 22px; }
.editorial-index__excerpt { font-size: 15px; }
.editorial-index__meta { font-size: 11.5px; gap: 8px 12px; }
}
/* ── ARTICLE byline (used on article.php under the h1) ────────────── */
.editorial-byline { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-family: 'Inter', -apple-system, sans-serif; font-size: 13.5px; color: var(--text-2); margin: 0 0 32px; }
.editorial-byline .dot { color: var(--line); }
.editorial-byline .cat { text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--gold); font-size: 12px; }
/* 2026-09-04/2 Staff/team portrait responsive crop fix.
The base `.team-photo { height: 320px }` combined with the shared mobile
rule that collapses `.team-grid` to 1fr on ≤1000px viewports made each
photo container wide-and-short at tablet widths (~700w × 320h), which
forced background-size/object-fit:cover to zoom past the face and clip
the top of the head. Two changes, both scoped to `.team-photo` /
`.team-grid`, no other selectors:
1. Keep the auto-fit grid on tablet so cards stay ~260–340 wide
instead of stretching to viewport width. Overrides only .team-grid
inside the existing @media, not the sibling grids in that rule.
2. Replace the fixed pixel height on .team-photo with an aspect-ratio
that matches how staff portraits are shot (4:5 portrait). Bias the
object-position toward the top so any residual cover-crop clips
below the collarbone, never above the eyes. */
@media (max-width: 1000px) {
.team-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 340px)) !important; justify-content: center; }
}
.team-photo { aspect-ratio: 4 / 5; height: auto; background-position: center 15%; }
.team-photo > img { object-position: center 15%; }
/* =============================================================================
SHELL v2 — CLONED-AGENCY BASELINE IMPROVEMENTS (2026-09-10)
=============================================================================
Reusable improvements Mythic agency sites inherit going forward. Uses
SEMANTIC theme tokens already declared at the top of this file
(--line, --ink, --text-2, --off-white, --gold). NO Prestige literals
(#052D45 / #006B8C / #00C7D1 / #E8F4F7) appear in this block — an
agency's own theme.css chooses the actual colors by remapping tokens.
Contents:
- .faq-grid / .faq-card always-visible Q&A card grid
- .why-agents-copy override center copy inside its 50% column
The old .faq-list + .faq-item accordion rules earlier in this file
remain in place for interior pages that still use them.
========================================================================= */
.faq-section {
background: var(--off-white);
padding-top: 72px;
padding-bottom: 88px;
}
.faq-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
margin-top: 40px;
align-items: stretch;
}
.faq-card {
background: #FFFFFF;
border: 1px solid var(--line);
border-radius: 16px;
padding: 32px 32px 30px;
box-shadow: 0 2px 6px rgba(15, 20, 30, 0.04);
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
}
.faq-card::before {
content: '';
display: block;
width: 36px;
height: 3px;
border-radius: 2px;
background: var(--gold);
margin-bottom: 2px;
}
.faq-card__q {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 600;
font-size: 20px;
line-height: 1.28;
color: var(--ink);
margin: 0;
letter-spacing: -0.005em;
text-wrap: balance;
}
.faq-card__a {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 400;
font-size: 15.5px;
line-height: 1.65;
color: var(--text-2);
margin: 0;
text-wrap: pretty;
}
@media (max-width: 900px) {
.faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.faq-card { padding: 28px 26px 26px; }
}
@media (max-width: 640px) {
.faq-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
.faq-section { padding-top: 56px; padding-bottom: 64px; }
.faq-card__q { font-size: 19px; }
}
/* Relationship-section centered copy — overrides the earlier rule at
~line 1061 (padding: 90px 60px 90px calc((100vw - 1360px)/2 + 40px);
max-width: 720px; margin-left: auto), which drifts the copy toward
the image seam on wide viewports. Later source order wins — no
!important needed. */
.why-agents-copy {
padding: 90px clamp(32px, 5vw, 80px);
max-width: 640px;
margin: 0 auto;
}
/* ── Footer theme tokens (agency-scoped brand-neutral defaults) ─────
Adds a semantic token layer for the three footer surfaces. Each
agency's theme.css can now brand the footer by assigning these
three tokens (or the four including --footer-border) without
overriding any selector directly.
Default values here are the SHELL's CURRENT visual colors so ARS
and every existing clone renders identically until an agency
theme re-maps them.
Prestige compatibility: Prestige theme.css currently overrides
.cta-footer / .footer-panel / .footer-bottom directly with
!important. Those overrides continue to win against these
token-driven declarations. A future Prestige simplification could
drop the three !important overrides and just reassign
--footer-bg / --footer-panel-bg / --footer-bottom-bg to Prestige
Primary Navy / darker Navy — the shell rules below would then
paint the footer correctly with no per-selector override.
NOTE on CTA/footer DOM: