/* ============================================================
McCabe Lander — design tokens + sections
Breakpoints: 1440 / 1200 / 1024 / 768 / 480
============================================================ */
:root{
--mc-brand: #016b3a;
--mc-brand-2: #008145;
--mc-ink: #0e1510;
--mc-ink-2: #2a312c;
--mc-muted: #6b726d;
--mc-muted-2: #a0a6a2;
--mc-line: #e4e7e3;
--mc-bg: #ffffff;
--mc-bg-soft: #f6f7f5;
--mc-bg-tint: #f5faf7;
--mc-accent: #ffc107;
--mc-navy: #111853;
--mc-radius: 16px;
--mc-radius-sm: 10px;
--mc-shadow: 0 10px 40px rgba(14,21,16,.06);
--mc-container: 1400px;
--mc-gutter: 40px;
--mc-font-h: 'Instrument Sans', system-ui, sans-serif;
--mc-font-b: 'Inter', system-ui, sans-serif;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
margin:0;
font-family:var(--mc-font-b);
color:var(--mc-ink);
background:var(--mc-bg);
font-size:16px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
.mc-h2{
font-family:var(--mc-font-h); font-weight:600; color:var(--mc-ink);
font-size:clamp(32px, 3.4vw, 52px); line-height:1.08; letter-spacing:-.01em;
margin:0 0 16px;
}
.mc-sec-head{ max-width:760px; margin:0 0 48px; }
.mc-sec-head__sub{ color:var(--mc-muted); font-size:17px; line-height:1.6; margin:0; }
/* Buttons */
.mc-btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:14px 24px; border-radius:999px; font-weight:600; font-size:15px;
border:1px solid transparent; cursor:pointer; transition:.2s ease;
}
.mc-btn--primary{
background:linear-gradient(275deg, #008145 0.32%, #049351 99.68%);
border:1px solid #016b3a;
color:#fff;
}
.mc-btn--primary:hover{ filter:brightness(1.06); }
.mc-btn--ghost{ background:transparent; color:var(--mc-ink); border-color:rgba(14,21,16,.16); }
.mc-btn--ghost:hover{ border-color:var(--mc-ink); }
.mc-btn--dark{ background:var(--mc-ink); color:#fff; }
.mc-btn--dark:hover{ background:#000; }
.mc-btn--glass{
background:rgba(255,255,255,0.12);
color:#fff;
border:1px solid #C9CFC9;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.mc-btn--glass:hover{ background:rgba(255,255,255,0.2); }
/* ============================================================
HEADER — Figma 29:14947 (72px solid white, flush to top)
============================================================ */
.mc-hdr{
position:sticky; top:0; left:0; right:0; z-index:50;
background:#fffefe; border-bottom:1px solid rgba(14,21,16,.06);
}
.mc-hdr__inner{
max-width:1400px; margin:0 auto; padding:0 20px;
display:flex; align-items:center; gap:32px;
height:72px;
}
.mc-hdr__logo{ display:flex; align-items:center; gap:12px; color:var(--mc-ink); }
.mc-hdr__logo-mark{ width:44px; height:44px; object-fit:contain; flex-shrink:0; }
.mc-hdr__logo-txt{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.mc-hdr__brand{ font-family:var(--mc-font-h); font-weight:600; font-size:18px; color:var(--mc-ink); letter-spacing:-.005em; }
.mc-hdr__tag{ font-family:var(--mc-font-b); font-weight:400; font-size:10.5px; color:var(--mc-muted); letter-spacing:.01em; }
.mc-hdr__nav{ display:flex; gap:28px; margin:0 auto; font-size:14px; font-weight:500; color:var(--mc-ink-2); }
.mc-hdr__nav a{ transition:color .2s; }
.mc-hdr__nav a:hover{ color:var(--mc-brand); }
.mc-hdr__cta{ display:flex; gap:18px; align-items:center; }
.mc-hdr__phone{ display:inline-flex; align-items:center; gap:8px; color:var(--mc-ink); font-weight:600; font-size:15px; transition:color .2s; }
.mc-hdr__phone:hover{ color:var(--mc-brand); }
.mc-hdr__phone-lb{ color:var(--mc-muted); font-weight:500; font-size:11px; letter-spacing:.02em; }
.mc-hdr__phone-num{ font-weight:600; font-size:15px; color:var(--mc-ink); }
.mc-hdr__btn{ padding:10px 18px; font-size:14px; gap:6px; border-radius:12px; }
.mc-hdr__btn svg{ flex-shrink:0; }
.mc-hdr__burger{ display:none; background:transparent; border:0; width:40px; height:40px; flex-direction:column; justify-content:center; gap:5px; align-items:center; }
.mc-hdr__burger span{ width:20px; height:2px; background:var(--mc-ink); border-radius:2px; }
@media (max-width: 1100px){
.mc-hdr__nav{ gap:20px; }
.mc-hdr__phone-lb{ display:none; }
}
@media (max-width: 1023px){
.mc-hdr__nav{ display:none; }
.mc-hdr__burger{ display:flex; }
.mc-hdr__phone{ display:none; }
}
@media (max-width: 520px){
.mc-hdr__tag{ display:none; }
.mc-hdr__brand{ font-size:16px; }
.mc-hdr__btn{ padding:8px 14px; font-size:13px; }
}
/* ============================================================
HERO — Figma 29:14981 (truck bg, 2-col split, white card form)
============================================================ */
.mc-hero{ position:relative; background:#0e1510; overflow:hidden; padding:0 0 60px; }
.mc-hero__bg{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.mc-hero__media{ width:100%; height:100%; object-fit:cover; object-position:50% 35%; display:block; }
.mc-hero__scrim{
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(14,21,16,.0) 0%, rgba(14,21,16,.08) 35%, rgba(14,21,16,.55) 65%, rgba(14,21,16,.95) 100%),
linear-gradient(90deg, rgba(14,21,16,.38) 0%, rgba(14,21,16,.12) 50%, rgba(14,21,16,.0) 100%);
pointer-events:none;
}
.mc-hero__inner{
position:relative; z-index:1;
max-width:1440px; margin:0 auto; padding:0 54px;
}
.mc-hero__content{ padding:280px 0 56px; color:#fff; }
.mc-hero__badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:44px; }
.mc-hero__badge{
display:inline-flex; align-items:center; padding:9px 17px; border-radius:100px;
background:rgba(255,255,255,.21); color:#fff; border:1px solid rgba(228,231,227,.32);
box-shadow:0 1px 2px 0 rgba(14,21,16,.04);
-webkit-backdrop-filter:blur(4.1px); backdrop-filter:blur(4.1px);
font-size:12px; font-weight:600; letter-spacing:.01em; height:35px;
}
.mc-hero__split{ display:grid; grid-template-columns: minmax(0, 1fr) 556px; gap:54px; align-items:end; }
.mc-hero__title{
font-family:var(--mc-font-h); font-weight:600; color:#fff;
font-size:clamp(40px, 4vw, 56px); line-height:1.05; letter-spacing:-.02em;
margin:0; max-width:780px;
}
.mc-hero__right{ display:flex; flex-direction:column; gap:32px; padding-bottom:4px; }
.mc-hero__sub{ font-size:18px; line-height:1.5; margin:0; color:rgba(255,255,255,.92); }
.mc-hero__ctas{ display:flex; gap:10px; flex-wrap:wrap; }
.mc-hero__ctas .mc-btn{ padding:0 24px; height:47px; min-width:273px; font-size:14px; font-weight:500; justify-content:center; border-radius:12px; gap:10px; }
.mc-hero__ctas .mc-btn svg{ margin-left:4px; }
/* White card with form + stats */
.mc-hero__card{
position:relative; margin-top:38px;
background:#fff; border-radius:20px;
box-shadow:0 24px 60px rgba(14,21,16,.18);
overflow:hidden;
}
.mc-hero__form{ padding:26px 20px 22px; }
.mc-hero__form-title{
font-family:var(--mc-font-h); font-weight:600; font-size:28px; color:var(--mc-ink);
padding:0 0 14px 0; line-height:1.1;
}
.mc-hero__form-row{
display:grid; grid-template-columns: 1fr 24px 1fr 24px 1.3fr auto;
gap:12px; align-items:end;
}
.mc-hero__fld{ display:flex; flex-direction:column; gap:10px; }
.mc-hero__fld > span{ font-family:var(--mc-font-b); font-weight:600; font-size:14px; color:var(--mc-ink); }
.mc-hero__input{
position:relative;
background:#f2f2f2; border-radius:12px; height:69px;
display:flex; align-items:center; padding:0 14px 0 16px;
}
.mc-hero__input input{
width:100%; background:transparent; border:0; outline:none;
font:inherit; font-weight:500; font-size:15px; color:var(--mc-ink);
padding:0;
}
.mc-hero__input input::placeholder{ color:var(--mc-ink); }
.mc-hero__input select{ flex:1; min-width:0; background:transparent; border:0; outline:0; font-family:var(--mc-font-b); font-size:15px; color:var(--mc-ink); appearance:none; -webkit-appearance:none; cursor:pointer; }
.mc-hero__chev{ color:var(--mc-muted); flex-shrink:0; }
.mc-hero__sep{
display:flex; align-items:center; justify-content:center;
color:var(--mc-muted); padding-bottom:26px;
}
.mc-hero__fld--ft .mc-hero__pills{
display:flex; align-items:center; gap:6px;
background:#f2f2f2; border-radius:12px; height:69px; padding:0 14px;
}
.mc-hero__pill{
display:inline-flex; align-items:center; justify-content:center;
padding:8px 14px; min-height:37px;
border-radius:999px; background:#fff; color:var(--mc-ink-2);
font-family:var(--mc-font-b); font-weight:500; font-size:13px;
cursor:pointer; transition:background .2s, color .2s;
border:1px solid transparent;
}
.mc-hero__pill input{ position:absolute; opacity:0; width:0; height:0; }
.mc-hero__pill.is-active,
.mc-hero__pill:has(input:checked){ background:var(--mc-brand); color:#fff; }
.mc-hero__pill:hover{ border-color:rgba(14,21,16,.12); }
.mc-hero__pill.is-active:hover,
.mc-hero__pill:has(input:checked):hover{ border-color:transparent; background:var(--mc-brand-2); }
.mc-hero__submit{
height:69px; padding:0 22px; border-radius:12px;
font-size:15px; font-weight:500; min-width:178px; gap:10px;
}
.mc-hero__submit svg{ flex-shrink:0; }
/* Stats row inside card */
.mc-hero__stats{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(4, 1fr);
border-top:1px solid #e4e7e3;
}
.mc-hero__stats li{
padding:20px 24px;
display:flex; flex-direction:column; gap:6px;
border-right:1px solid #e4e7e3;
}
.mc-hero__stats li:last-child{ border-right:0; }
.mc-hero__stat-row{ display:flex; align-items:baseline; gap:10px; }
.mc-hero__stat-val{ font-family:var(--mc-font-h); font-weight:600; font-size:32px; line-height:1; color:var(--mc-ink); letter-spacing:-.01em; }
.mc-hero__stat-unit{ font-family:var(--mc-font-b); font-weight:500; font-size:20px; color:var(--mc-muted); }
.mc-hero__stat-note{ font-size:14px; color:var(--mc-muted); font-weight:400; }
@media (max-width: 1200px){
.mc-hero__inner{ padding:0 32px; }
.mc-hero__content{ padding:220px 0 48px; }
.mc-hero__split{ gap:48px; grid-template-columns: 1.25fr 1fr; }
.mc-hero__title{ font-size:clamp(42px, 5.2vw, 64px); }
.mc-hero__form-row{ grid-template-columns: 1fr 18px 1fr 18px 1.3fr auto; }
.mc-hero__ctas .mc-btn{ min-width:0; flex:1; }
}
@media (max-width: 1024px){
.mc-hero__bg{ height:560px; }
.mc-hero__content{ padding:160px 0 40px; }
.mc-hero__split{ grid-template-columns:1fr; gap:28px; }
.mc-hero__form-row{
grid-template-columns:1fr 1fr;
gap:14px;
}
.mc-hero__fld--ft{ grid-column:1 / -1; }
.mc-hero__submit{ grid-column:1 / -1; width:100%; }
.mc-hero__sep{ display:none; }
.mc-hero__stats{ grid-template-columns:repeat(2, 1fr); }
.mc-hero__stats li:nth-child(2){ border-right:0; }
.mc-hero__stats li:nth-child(1),
.mc-hero__stats li:nth-child(2){ border-bottom:1px solid #e4e7e3; }
}
@media (max-width: 640px){
.mc-hero__inner{ padding:0 16px; }
.mc-hero__content{ padding:120px 0 32px; }
.mc-hero__badges{ margin-bottom:28px; }
.mc-hero__badge{ font-size:11px; padding:8px 14px; height:32px; }
.mc-hero__title{ font-size:38px; }
.mc-hero__sub{ font-size:16px; }
.mc-hero__ctas{ flex-direction:column; }
.mc-hero__ctas .mc-btn{ width:100%; }
.mc-hero__form{ padding:20px 16px 16px; }
.mc-hero__form-title{ font-size:22px; }
.mc-hero__form-row{ grid-template-columns:1fr; }
.mc-hero__fld--ft .mc-hero__pills{ flex-wrap:wrap; height:auto; padding:10px; gap:6px; }
.mc-hero__stats{ grid-template-columns:1fr; }
.mc-hero__stats li{ border-right:0 !important; border-bottom:1px solid #e4e7e3; }
.mc-hero__stats li:last-child{ border-bottom:0; }
}
/* ============================================================
EVERY MODE
============================================================ */
.mc-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.mc-chips li{ padding:8px 14px; background:var(--mc-bg-tint); color:var(--mc-brand); border-radius:999px; font-size:13px; font-weight:500; }
@media (max-width: 1024px){ .mc-modes__grid{ grid-template-columns:1fr; gap:24px; } }
/* ============================================================
WHY US
============================================================ */
/* ==== Four Things (Why Us) — Figma 29:15205 ==== */
.mc-ft{ padding:96px 0; background:#016B3A; position:relative; overflow:hidden; }
/* Figma 1:1 dot textures — top (125:4419), bottom (125:5924), side (125:5332) */
.mc-ft::before{ content:""; position:absolute; left:50%; top:-127px; transform:translateX(-50%);
width:1330px; height:334px; pointer-events:none;
background:var(--mc-ft-tex-top, url("../img/why-tex-top.svg")) no-repeat center / 100% 100%; }
.mc-ft::after{ content:""; position:absolute; left:50%; bottom:-127px; transform:translateX(-50%);
width:1330px; height:334px; pointer-events:none;
background:var(--mc-ft-tex-bot, url("../img/why-tex-bot.svg")) no-repeat center / 100% 100%; }
.mc-ft__side-tex{ position:absolute; left:0; top:80px; width:198px; height:1168px; pointer-events:none;
background:var(--mc-ft-tex-side, url("../img/why-tex-side.svg")) no-repeat center / 100% 100%; z-index:0; }
.mc-ft__inner{ max-width:1440px; margin:0 auto; padding:0 55px; position:relative; z-index:1; }
.mc-ft__head{ text-align:center; max-width:1234px; margin:0 auto 56px; display:flex; flex-direction:column; align-items:center; gap:24px; }
.mc-ft__eyebrow{
display:inline-flex; align-items:center;
padding:6px 14px; border-radius:999px;
background:#D4EFE0; color:#016B3A;
font:600 12px/1 Inter,sans-serif; letter-spacing:0.04em; text-transform:uppercase;
}
.mc-ft__title{
font-family:var(--mc-font-h);
font-size:69px; line-height:1.05; letter-spacing:-2.42px;
font-weight:600; color:#fff; margin:0; text-align:center;
}
.mc-ft__title .is-green{ color:#fff; display:inline; }
.mc-ft__sub{
font-family:var(--mc-font-b);
font-size:16px; line-height:24px; color:rgba(255,255,255,0.85);
margin:0; max-width:668px;
}
.mc-ft__grid{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;
}
.mc-ft__card{
background:#fff; border:1px solid #E4E7E3; border-radius:18px;
padding:44px 48px;
display:flex; flex-direction:column; gap:32px;
}
.mc-ft__card-head{
display:flex; align-items:center; justify-content:space-between; gap:16px;
min-height:30px;
}
.mc-ft__icon{ display:inline-flex; width:30px; height:30px; flex:0 0 auto; }
.mc-ft__icon svg{ width:100%; height:100%; display:block; }
.mc-ft__num{
font-family:var(--mc-font-h); font-size:18px; font-weight:400;
line-height:30px; color:#6B726D;
}
.mc-ft__card-body{ display:flex; flex-direction:column; gap:14px; }
.mc-ft__h{
font-family:var(--mc-font-h); font-size:26px; font-weight:500;
line-height:1.15; color:#0E1510; margin:0;
}
.mc-ft__b{
font-family:var(--mc-font-b); font-size:15px; font-weight:400;
line-height:21px; color:#6B726D; margin:0;
}
/* Tablet */
@media (max-width: 1100px){
.mc-ft__inner{ padding:0 32px; }
.mc-ft__title{ font-size:52px; letter-spacing:-1.6px; }
.mc-ft__card{ padding:32px; }
}
/* Mobile */
@media (max-width: 640px){
.mc-ft{ padding:56px 0; }
.mc-ft__inner{ padding:0 16px; }
.mc-ft__head{ margin:0 auto 28px; gap:14px; text-align:left; align-items:stretch; }
.mc-ft__title{ font-size:38px; letter-spacing:-1.1px; text-align:left; }
.mc-ft__sub{ font-size:15px; line-height:22px; text-align:left; max-width:none; }
.mc-ft__grid{ grid-template-columns:1fr; gap:12px; }
.mc-ft__card{ padding:24px; gap:20px; border-radius:16px; }
.mc-ft__h{ font-size:20px; }
.mc-ft__b{ font-size:14.5px; line-height:20px; }
}
/* ==== /Four Things ==== */
/* ==== Warehousing — Figma 29:15244 ==== */
.mc-wh{ position:relative; overflow:hidden; padding:80px 0; background:#016B3A; }
.mc-wh::before{
content:""; position:absolute; top:-57px; left:81px;
width:1257px; height:316px;
background:var(--wh-dots-top, url(/wp-content/uploads/2026/04/mcc-wh-dots-top.png)) no-repeat left top/contain;
pointer-events:none;
}
.mc-wh::after{
content:""; position:absolute; bottom:-79px; left:-22px;
width:1104px; height:188px;
background:var(--wh-dots-bot, url(/wp-content/uploads/2026/04/mcc-wh-dots-bottom.png)) no-repeat left bottom/contain;
pointer-events:none;
}
.mc-wh__inner{ position:relative; z-index:1; max-width:1440px; margin:0 auto; padding:0 55px; }
.mc-wh__title{
font-family:var(--mc-font-h); font-size:69px; line-height:1; letter-spacing:-2.42px;
font-weight:600; color:#fff; margin:0 0 42px; text-align:center;
}
.mc-wh__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:21px; }
.mc-wh__card{
background:#fff; border-radius:18px; padding:28px;
display:flex; flex-direction:column; gap:32px;
}
.mc-wh__card-hd{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.mc-wh__city-block{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.mc-wh__city{
font-family:var(--mc-font-h); font-size:30px; line-height:1; font-weight:600;
color:#0E1510; margin:0;
}
.mc-wh__addr{
font-family:var(--mc-font-b); font-size:11px; line-height:17px; font-weight:500;
color:#6B726D; margin:0; display:flex; align-items:center; gap:5px;
}
.mc-wh__pin{ display:inline-flex; width:10px; height:10px; flex:0 0 auto; }
.mc-wh__pin svg{ width:100%; height:100%; display:block; }
.mc-wh__stats{ display:flex; gap:28px; flex:0 0 auto; align-items:flex-start; margin-left:auto; }
.mc-wh__stat{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; min-width:0; }
.mc-wh__stat-num{
font-family:var(--mc-font-h); font-size:44px; line-height:1; font-weight:600; letter-spacing:-1px;
color:#016B3A;
}
.mc-wh__stat-lbl{
font-family:var(--mc-font-b); font-size:11px; line-height:17px; font-weight:500;
color:#6B726D;
}
.mc-wh__feats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; row-gap:6px; column-gap:48px; }
.mc-wh__feat{
display:flex; align-items:center; gap:12px;
font-family:var(--mc-font-b); font-size:12px; line-height:18.6px; font-weight:500; color:#2A312C;
}
.mc-wh__feat-check{ display:inline-flex; width:15px; height:12px; flex:0 0 auto; }
.mc-wh__feat-check svg{ width:100%; height:100%; display:block; }
.mc-wh__btn{
display:inline-flex; align-items:center; justify-content:center; gap:12px;
align-self:flex-start;
padding:15px 24px; border-radius:12px;
background:linear-gradient(135deg, #008145 0%, #049351 100%);
color:#fff; font-family:var(--mc-font-b); font-size:15px; line-height:1; font-weight:500;
text-decoration:none; transition:opacity .15s ease, transform .15s ease;
}
.mc-wh__btn:hover{ opacity:.92; transform:translateY(-1px); }
.mc-wh__btn-arrow{ display:inline-flex; width:14px; height:13px; }
.mc-wh__btn-arrow svg{ width:100%; height:100%; display:block; }
/* Tablet */
@media (max-width: 1100px){
.mc-wh__inner{ padding:0 32px; }
.mc-wh__title{ font-size:52px; letter-spacing:-1.6px; }
.mc-wh__grid{ grid-template-columns:1fr; gap:16px; }
}
/* Mobile */
@media (max-width: 640px){
.mc-wh{ padding:56px 0; }
.mc-wh__inner{ padding:0 16px; }
.mc-wh__title{ font-size:38px; letter-spacing:-1.1px; text-align:left; margin:0 0 28px; }
.mc-wh__card{ padding:22px; gap:22px; border-radius:16px; }
.mc-wh__card-hd{ flex-direction:column; align-items:stretch; gap:18px; }
.mc-wh__stats{ gap:28px; }
.mc-wh__city{ font-size:26px; }
.mc-wh__stat-num{ font-size:30px; }
.mc-wh__feats{ grid-template-columns:1fr; }
.mc-wh__btn{ width:100%; }
.mc-wh::before, .mc-wh::after{ display:none; }
}
/* ==== /Warehousing ==== */
/* ==== Nationwide — Figma 29:16829 ==== */
.mc-nat{ padding:64px 0; background:#fff; }
.mc-nat__inner{ max-width:1440px; margin:0 auto; padding:0 55px; }
.mc-nat__head{ max-width:1330px; margin:0 auto 28px; display:grid; grid-template-columns: minmax(0,1fr) 416px; gap:48px; align-items:end; text-align:left; }
.mc-nat__head-left{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.mc-nat__eyebrow{ display:inline-flex; padding:6px 14px; border-radius:999px; background:#D4EFE0; color:#016B3A; font:600 13px/1 var(--mc-font-h),Inter,sans-serif; letter-spacing:0.04em; }
.mc-nat__title{ font-family:var(--mc-font-h); font-size:69px; line-height:1.05; letter-spacing:-2.42px; font-weight:600; color:#0E1510; margin:0; text-align:left; }
.mc-nat__title .is-green{ color:#016B3A; display:block; }
.mc-nat__sub{ font-family:var(--mc-font-b); font-size:16px; line-height:24px; color:#2A312C; margin:0; max-width:540px; text-align:left; padding-bottom:8px; }
.mc-nat__cta-row{ max-width:1330px; margin:20px auto 0; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.mc-nat__cta-text{ font:400 16px/1.4 var(--mc-font-b); color:#2A312C; margin:0; }
.mc-nat__cta-btn{ display:inline-flex; align-items:center; gap:10px; padding:0 22px; height:44px; border-radius:10px; background:#016B3A; color:#fff; font:500 15px/1 var(--mc-font-b); text-decoration:none; }
.mc-nat__cta-btn:hover{ background:#015A30; color:#fff; }
.mc-nat__grid{ display:grid; grid-template-columns:minmax(0,1fr) 627px; gap:18px; align-items:stretch; }
/* Left column: two stacked cards */
.mc-nat__left{ background:transparent; border:0; border-radius:0; padding:0; display:flex; flex-direction:column; gap:18px; }
/* Featured state card */
.mc-nat__featured-card{ background:#fff; border:1px solid #E4E7E3; border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:14px; }
.mc-nat__featured-name{ font-family:var(--mc-font-h); font-size:28px; line-height:1.1; font-weight:600; color:#016B3A; margin:0; }
.mc-nat__featured-hubs{ font-family:var(--mc-font-b); font-size:13px; font-weight:400; color:#6B726D; margin:0; }
.mc-nat__featured-hubs[hidden]{ display:none; }
.mc-nat__metrics{ display:grid; grid-template-columns:1fr 1fr; gap:14px 14px; margin:4px 0 0; padding:0; border:0; }
.mc-nat__metric{ display:flex; flex-direction:column; gap:6px; }
.mc-nat__metric dt{ font-family:var(--mc-font-b); font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:#0E1510; }
.mc-nat__metric dd{ font-family:var(--mc-font-h); font-size:14px; line-height:1.2; font-weight:600; color:#0E1510; margin:0; background:#F3F4F2; border-radius:10px; padding:10px 14px; text-align:center; }
/* Table card */
.mc-nat__table-card{ background:#fff; border:1px solid #E4E7E3; border-radius:18px; padding:18px 18px 12px; display:flex; flex-direction:column; gap:6px; flex:1 1 auto; min-height:0; }
.mc-nat__table-head{ display:grid; grid-template-columns:minmax(0,1fr) 90px 90px; gap:14px; padding:0 14px 10px; border-bottom:1px solid #EEF0ED; font-family:var(--mc-font-b); font-size:12px; font-weight:500; color:#6B726D; }
.mc-nat__table-head span:nth-child(2), .mc-nat__table-head span:nth-child(3){ text-align:center; }
.mc-nat__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; flex:1 1 auto; justify-content:space-between; }
.mc-nat__row{
display:grid; grid-template-columns:36px minmax(0,1fr) 90px 90px;
align-items:center; gap:14px;
padding:12px 14px; border-radius:10px;
cursor:pointer; user-select:none;
font-family:var(--mc-font-b); font-size:14px; color:#0E1510;
transition:background .15s ease, color .15s ease;
position:relative;
}
.mc-nat__row:hover{ background:#F7FBF8; }
.mc-nat__row.is-active{ background:#EAF4EE; color:#016B3A; }
.mc-nat__row-code{ font-family:var(--mc-font-h); font-weight:500; font-size:13px; color:#B7BCB6; letter-spacing:.02em; }
.mc-nat__row.is-active .mc-nat__row-code{ color:#016B3A; font-weight:600; }
.mc-nat__row-name{ font-weight:600; color:inherit; position:relative; padding-right:14px; }
.mc-nat__row-name::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:14px; background:#E4E7E3; }
.mc-nat__row-transit{ font-size:13px; color:#0E1510; text-align:center; position:relative; padding-right:14px; }
.mc-nat__row-transit::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:14px; background:#E4E7E3; }
.mc-nat__row.is-active .mc-nat__row-transit{ color:#016B3A; }
.mc-nat__row-lanes{ font-size:13px; font-weight:500; color:#0E1510; text-align:center; }
.mc-nat__row.is-active .mc-nat__row-lanes{ color:#016B3A; }
/* Right map card */
.mc-nat__right{ background:#fff; border:1px solid #E4E7E3; color:#0E1510; border-radius:18px; padding:18px; display:flex; flex-direction:column; gap:14px; overflow:hidden; }
.mc-nat__map-head{ display:flex; flex-direction:column; gap:8px; }
.mc-nat__map-h{ font-family:var(--mc-font-h); font-size:22px; line-height:1.2; font-weight:600; color:#0E1510; margin:0; }
.mc-nat__map-sub{ font-family:var(--mc-font-b); font-size:13px; line-height:20px; color:#6B726D; margin:0; max-width:540px; }
.mc-nat__map-stage{
position:relative; width:100%; aspect-ratio: 627 / 480;
border-radius:14px;
background:linear-gradient(138deg, #05240E 0.03%, #054618 100.59%);
overflow:hidden;
}
.mc-nat__map-img{
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
}
.mc-nat__map-img svg{
width:100%; height:100%; display:block;
}
/* State paths: default 0.24, hover/active 0.82 (Bohdan spec) */
.mc-nat__map-img svg .mc-nat__st,
.mc-nat__map-img svg .mc-nat__st-any{
transition: fill-opacity .2s ease;
cursor: pointer;
}
.mc-nat__map-img svg .mc-nat__st:hover,
.mc-nat__map-img svg .mc-nat__st-any:hover,
.mc-nat__map-img svg .mc-nat__st.is-active{
fill-opacity: 0.82 !important;
}
/* Pulsing dots */
.mc-nat__dot{
position:absolute; transform:translate(-50%,-50%);
width:18px; height:18px; padding:0; margin:0;
background:none; border:0; cursor:pointer; z-index:2;
display:flex; align-items:center; justify-content:center;
}
.mc-nat__dot-core{
position:absolute; width:10px; height:10px; border-radius:50%;
background:#049351; box-shadow:0 0 0 3px rgba(4,147,81,.25);
transition:background .2s, box-shadow .2s;
}
.mc-nat__dot-ring{
position:absolute; width:18px; height:18px; border-radius:50%;
border:2px solid #049351; opacity:0; pointer-events:none;
}
.mc-nat__dot.is-active .mc-nat__dot-core{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.4); }
.mc-nat__dot.is-active .mc-nat__dot-ring{
opacity:1;
animation:mc-nat-pulse 1.6s ease-out infinite;
}
.mc-nat__dot:hover .mc-nat__dot-ring,
.mc-nat__dot:focus .mc-nat__dot-ring{ opacity:1; }
@keyframes mc-nat-pulse{
0%{ transform:scale(1); opacity:.9; }
100%{ transform:scale(3.2); opacity:0; }
}
/* Tooltip */
.mc-nat__tip{
position:absolute; transform:translate(-50%, calc(-100% - 18px));
background:#fff; color:#0E1510;
border-radius:12px; padding:12px 14px;
min-width:180px; box-shadow:0 10px 30px rgba(0,0,0,.25);
z-index:3; pointer-events:none;
font-family:var(--mc-font-b);
}
.mc-nat__tip[hidden]{ display:none; }
.mc-nat__tip::after{
content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
width:14px; height:14px; background:#fff; border-radius:2px;
clip-path:polygon(0 0, 100% 0, 50% 100%);
}
.mc-nat__tip[data-tip-pos="bottom"]::after{
top:-7px; bottom:auto;
clip-path:polygon(50% 0, 100% 100%, 0 100%);
}
.mc-nat__tip-hd{ display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.mc-nat__tip-code{ font-family:var(--mc-font-h); font-weight:600; font-size:15px; color:#016B3A; }
.mc-nat__tip-name{ font-size:13px; font-weight:500; color:#0E1510; }
.mc-nat__tip-row{ display:flex; justify-content:space-between; gap:14px; font-size:12px; line-height:18px; }
.mc-nat__tip-row span{ color:#6B726D; }
.mc-nat__tip-row b{ font-weight:600; color:#0E1510; }
/* Pills */
.mc-nat__pills{ display:flex; flex-wrap:wrap; gap:8px; }
.mc-nat__pill{
display:inline-flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:999px;
background:#fff; color:#0E1510; border:1px solid #E4E7E3;
font-family:var(--mc-font-h); font-size:13px; font-weight:500; letter-spacing:.04em;
cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.mc-nat__pill-arrow{ display:inline-flex; width:12px; height:12px; color:#6B726D; }
.mc-nat__pill-arrow svg{ width:100%; height:100%; display:block; }
.mc-nat__pill:hover{ background:#EEF4EF; border-color:#C7D8CB; }
.mc-nat__pill.is-active{ background:#049351; border-color:#049351; color:#fff; }
.mc-nat__pill.is-active .mc-nat__pill-arrow{ color:#fff; }
/* Bottom stats strip */
.mc-nat__stats{ list-style:none; margin:32px 0 0; padding:0; border-top:1px solid #E4E7E3; border-bottom:1px solid #E4E7E3; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.mc-nat__stats li{ display:flex; flex-direction:column; gap:6px; padding:22px 0; }
.mc-nat__stats li:not(:first-child){ border-left:1px solid #E4E7E3; padding-left:24px; }
.mc-nat__stat-v{ font-family:var(--mc-font-h); font-size:44px; line-height:1; font-weight:600; color:#016B3A; letter-spacing:-.02em; margin-bottom:6px; }
.mc-nat__stat-l{ font-family:var(--mc-font-b); font-size:14px; font-weight:500; color:#0E1510; letter-spacing:0; text-transform:none; }
.mc-nat__stat-sub{ font-family:var(--mc-font-b); font-size:13px; color:#6B726D; line-height:1.4; }
/* Tablet */
@media (max-width: 1100px){
.mc-nat__inner{ padding:0 32px; }
.mc-nat__title{ font-size:52px; letter-spacing:-1.6px; }
.mc-nat__grid{ grid-template-columns:1fr; }
.mc-nat__map-stage{ aspect-ratio: 627 / 657; }
}
/* Mobile */
@media (max-width: 640px){
.mc-nat{ padding:56px 0; }
.mc-nat__inner{ padding:0 16px; }
.mc-nat__head{ margin:0 auto 28px; gap:14px; text-align:left; align-items:stretch; }
.mc-nat__title{ font-size:38px; letter-spacing:-1.1px; text-align:left; }
.mc-nat__sub{ text-align:left; max-width:none; font-size:15px; line-height:22px; }
.mc-nat__left, .mc-nat__right{ padding:22px; border-radius:16px; }
.mc-nat__featured-name{ font-size:30px; }
.mc-nat__metrics{ grid-template-columns:1fr 1fr; gap:14px 20px; padding:16px 0; }
.mc-nat__metric:nth-child(3), .mc-nat__metric:nth-child(4){ grid-column: 1 / -1; }
.mc-nat__metrics dd{ font-size:18px; }
.mc-nat__row{ grid-template-columns:42px 1fr auto; gap:10px; padding:10px; font-size:13px; }
.mc-nat__row-transit{ display:none; }
.mc-nat__map-stage{ aspect-ratio: 627 / 657; }
.mc-nat__tip{ min-width:150px; padding:10px 12px; }
.mc-nat__pill{ font-size:12px; padding:7px 12px; }
.mc-nat__stats{ grid-template-columns:1fr 1fr; gap:0; margin-top:36px; padding:0; }
.mc-nat__stats li{ padding:20px 0; }
.mc-nat__stats li:not(:first-child){ border-left:0; padding-left:0; }
.mc-nat__stats li:nth-child(even){ border-left:1px solid #E4E7E3; padding-left:20px; }
.mc-nat__stats li:nth-child(n+3){ border-top:1px solid #E4E7E3; }
.mc-nat__stat-v{ font-size:32px; }
}
/* ==== /Nationwide ==== */
/* ============================================================
QUOTE FORM — Figma "Submit your load" (v2 — compact tabs)
============================================================ */
.mc-quote{ position:relative; overflow:hidden; padding:110px 0 120px; background:#016B3A; color:#fff; }
.mc-quote::before{
content:""; position:absolute; top:-57px; left:81px;
width:1257px; height:316px;
background:var(--wh-dots-top, url(/wp-content/uploads/2026/04/mcc-wh-dots-top.png)) no-repeat left top/contain;
pointer-events:none; z-index:0;
}
.mc-quote::after{
content:""; position:absolute; bottom:-79px; left:-22px;
width:1104px; height:188px;
background:var(--wh-dots-bot, url(/wp-content/uploads/2026/04/mcc-wh-dots-bottom.png)) no-repeat left bottom/contain;
pointer-events:none; z-index:0;
}
.mc-quote__bg{ display:none; }
.mc-quote__inner{ position:relative; max-width:var(--mc-container); margin:0 auto; padding:0 var(--mc-gutter); }
.mc-quote__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:40px; flex-wrap:wrap; }
.mc-quote__h2{ font-family:var(--mc-font-h); font-size:69px; line-height:1.05; letter-spacing:-2.42px; font-weight:600; color:#fff; margin:0; max-width:720px; }
.mc-quote__sub{ font-family:var(--mc-font-b); font-size:15px; line-height:22px; color:rgba(255,255,255,.75); margin:0; text-align:right; max-width:260px; }
.mc-quote__grid{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:24px; align-items:start; }
/* Form card */
.mc-quote__card{ background:#fff; color:var(--mc-ink); border-radius:18px; padding:0; }
/* Top row: compact tabs + inline action button */
.mc-quote__card-top{
display:flex; justify-content:space-between; align-items:flex-start;
padding:26px 28px 0;
gap:24px;
}
.mc-quote__tabs{
display:flex; gap:40px; flex:1 1 auto; min-width:0;
border:0; background:transparent;
}
.mc-quote__tab{
appearance:none; border:0; background:transparent;
padding:0 0 14px; cursor:pointer; text-align:left;
font-family:var(--mc-font-b); font-size:15px; font-weight:500;
color:#9AA19C;
position:relative;
display:flex; flex-direction:column; gap:10px;
flex:0 0 auto;
transition:color .15s;
}
.mc-quote__tab-l{ position:relative; padding-left:0; display:inline-block; }
.mc-quote__tab.is-active .mc-quote__tab-l{ color:#016B3A; font-weight:600; }
.mc-quote__tab.is-active .mc-quote__tab-l::before{
content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
background:#016B3A; margin-right:8px; vertical-align:middle;
position:relative; top:-2px;
}
.mc-quote__tab-bar{
display:block; width:120px; height:6px; border-radius:99px;
background:#F2F2F2;
}
.mc-quote__tab.is-active .mc-quote__tab-bar{
background: linear-gradient(to right, #016B3A 0%, #016B3A 50%, #F2F2F2 50%, #F2F2F2 100%);
}
.mc-quote__tab.is-done .mc-quote__tab-bar{ background:#016B3A; }
.mc-quote__top-action{ flex-shrink:0; }
.mc-quote__btn--top{ padding:12px 22px; font-size:14px; }
/* Body: divider then fields grid */
.mc-quote__card-body{ padding:0 28px 26px; position:relative; }
.mc-quote__card-body::before{
content:""; display:block; height:1px; background:#E4E7E3;
margin:24px -28px 28px;
}
.mc-quote__step{ display:none; grid-template-columns:repeat(2,1fr); gap:18px 20px; }
.mc-quote__step.is-active{ display:grid; }
.mc-quote__field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.mc-quote__field--full{ grid-column:1 / -1; }
.mc-quote__lbl{ font-family:var(--mc-font-b); font-size:13px; font-weight:500; color:#0E1510; }
.mc-quote__field label{ display:flex; flex-direction:column; gap:8px; }
.mc-quote__input-wrap{ position:relative; display:block; }
.mc-quote__input-wrap--chevron::after{
content:""; position:absolute; right:16px; top:50%;
width:12px; height:8px; transform:translateY(-50%);
background-image: url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-size:contain;
pointer-events:none;
}
.mc-quote__step input, .mc-quote__card--single input,
.mc-quote__step select, .mc-quote__card--single select,
.mc-quote__step textarea, .mc-quote__card--single textarea{
font:inherit; font-size:14px; color:#0E1510;
padding:14px 16px; border-radius:10px;
border:1px solid #E6E8E5; background:#F5F6F4;
width:100%; box-sizing:border-box;
transition:border-color .15s, box-shadow .15s, background .15s;
}
.mc-quote__step input:hover, .mc-quote__card--single input:hover,
.mc-quote__step select:hover, .mc-quote__card--single select:hover,
.mc-quote__step textarea:hover, .mc-quote__card--single textarea:hover{ border-color:#D4D8D3; }
.mc-quote__input-wrap--chevron input,
.mc-quote__input-wrap--chevron select{ padding-right:40px; }
.mc-quote__step select, .mc-quote__card--single select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:none; }
.mc-quote__step input::placeholder, .mc-quote__card--single input::placeholder,
.mc-quote__step textarea::placeholder, .mc-quote__card--single textarea::placeholder{ color:#6B726D; }
.mc-quote__step input:focus, .mc-quote__card--single input:focus,
.mc-quote__step select:focus, .mc-quote__card--single select:focus,
.mc-quote__step textarea:focus, .mc-quote__card--single textarea:focus{ outline:0; border-color:#016B3A; box-shadow:0 0 0 3px rgba(1,107,58,.12); }
.mc-quote__step textarea, .mc-quote__card--single textarea{ resize:vertical; min-height:96px; }
/* Pills (single & multi) */
.mc-quote__pills{ display:flex; flex-wrap:wrap; gap:8px; }
.mc-quote__pill{
appearance:none; cursor:pointer;
padding:10px 18px; border-radius:999px;
background:#F3F4F2; color:#0E1510;
border:1px solid transparent;
font-family:var(--mc-font-b); font-size:13px; font-weight:500;
transition:background .15s, color .15s, border-color .15s;
}
.mc-quote__pill:hover{ background:#E4E7E3; }
.mc-quote__pill.is-active{ background:#016B3A; color:#fff; }
.mc-quote__pill{ background:#F5F6F4; border:1px solid #E6E8E5; }
.mc-quote__pills--outline .mc-quote__pill{ background:#fff; border-color:#D4D8D3; }
.mc-quote__pills--outline .mc-quote__pill:hover{ border-color:#016B3A; color:#016B3A; background:#fff; }
.mc-quote__pills--outline .mc-quote__pill.is-active{ background:#016B3A; color:#fff; border-color:#016B3A; }
/* Foot row */
.mc-quote__foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:20px; padding-top:4px; }
.mc-quote__foot-text{ font-family:var(--mc-font-b); font-size:12px; color:#6B726D; }
/* Buttons */
.mc-quote__btn{
display:inline-flex; align-items:center; gap:10px;
padding:14px 22px; border-radius:10px;
font-family:var(--mc-font-b); font-size:14px; font-weight:600;
cursor:pointer; border:1px solid transparent;
transition:background .15s, color .15s, border-color .15s, transform .1s;
}
.mc-quote__btn svg{ display:block; }
.mc-quote__btn[hidden]{ display:none; }
.mc-quote__foot [data-prev][hidden]{ display:none; }
.mc-quote__btn--primary{ background:#016B3A; color:#fff; }
.mc-quote__btn--primary:hover{ background:#028A49; }
.mc-quote__btn--ghost{ background:transparent; color:#0E1510; border-color:#D4D8D3; }
.mc-quote__btn--ghost:hover{ border-color:#016B3A; color:#016B3A; }
/* Side cards */
.mc-quote__side{ display:flex; flex-direction:column; gap:16px; align-self:start; }
.mc-quote__side-card{ background:#fff; color:#0E1510; border-radius:16px; padding:24px; display:flex; flex-direction:column; gap:14px; }
.mc-quote__side-h{ font-family:var(--mc-font-h); font-size:16px; font-weight:600; color:#0E1510; margin:0 0 4px; letter-spacing:-.2px; }
.mc-quote__side-row{ display:flex; gap:14px; align-items:flex-start; }
.mc-quote__side-ico{ flex-shrink:0; width:26px; height:26px; display:flex; align-items:center; justify-content:center; }
.mc-quote__side-ico--solid{ background:#016B3A; border-radius:50%; width:26px; height:26px; }
.mc-quote__side-row a{ font-family:var(--mc-font-b); font-size:14px; line-height:20px; color:#0E1510; text-decoration:underline; text-underline-offset:3px; word-break:break-word; white-space:pre-line; }
.mc-quote__side-row a.mc-quote__phone{ font-family:var(--mc-font-h); font-size:20px; font-weight:700; letter-spacing:-.3px; text-decoration:underline; text-underline-offset:4px; }
.mc-quote__side-sub{ font-family:var(--mc-font-b); font-size:12px; color:#6B726D; margin:-6px 0 0 40px; display:block; }
/* Responsive */
@media (max-width: 1100px){
.mc-quote__grid{ grid-template-columns:1fr; }
.mc-quote__side{ flex-direction:row; }
.mc-quote__side-card{ flex:1; }
}
@media (max-width: 800px){
.mc-quote__head{ flex-direction:column; align-items:flex-start; gap:14px; }
.mc-quote__h2{ font-size:52px; letter-spacing:-1.6px; }
.mc-quote__sub{ text-align:left; max-width:none; }
.mc-quote__card-top{ padding:20px 20px 0; flex-direction:column; gap:16px; }
.mc-quote__tabs{ gap:24px; }
.mc-quote__card-body{ padding:0 20px 22px; }
.mc-quote__top-action{ align-self:flex-end; }
}
@media (max-width: 540px){
.mc-quote{ padding:64px 0 72px; }
.mc-quote__h2{ font-size:38px; letter-spacing:-1.1px; }
.mc-quote__step{ grid-template-columns:1fr; gap:14px; }
.mc-quote__tab-bar{ width:60px; }
.mc-quote__side{ flex-direction:column; }
.mc-quote__foot{ flex-direction:column-reverse; align-items:stretch; gap:12px; }
.mc-quote__foot .mc-quote__btn{ width:100%; justify-content:center; }
.mc-quote__btn--top{ width:100%; justify-content:center; }
}
/* Inline form error states */
.mc-err{ display:none; color:#d0342c; font-size:12px; font-style:normal; margin-top:2px; min-height:1em; }
label.has-err .mc-err{ display:block; }
label.has-err input, label.has-err select, label.has-err textarea{ border-color:#d0342c!important; box-shadow:0 0 0 2px rgba(208,52,44,.12); }
.mc-hero__qq label.has-err .mc-err{ color:#ffb3ad; }
.mc-hero__qq label.has-err input, .mc-hero__qq label.has-err select{ border-color:#ff7a70!important; }
/* ============================================================
TESTIMONIALS
============================================================ */
.mc-tt{ padding:120px 0 140px; }
.mc-tt__inner{ max-width:var(--mc-container); margin:0 auto; padding:0 var(--mc-gutter); }
.mc-tt__title{ text-align:left; font-family:var(--mc-font-h); font-weight:600; font-size:69px; line-height:1.05; letter-spacing:-2.42px; margin:0 0 56px; max-width:1100px; }
.mc-tt__title-accent{ color:var(--mc-brand); }
.mc-tt__title-plain{ color:var(--mc-ink); }
.mc-tt__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mc-tt__card{ padding:28px; border:0; border-radius:14px; background:#F1F2EE; display:flex; flex-direction:column; gap:18px; }
.mc-tt__stars{ display:flex; gap:4px; color:#F5B301; line-height:1; }
.mc-tt__stars svg{ width:16px; height:16px; fill:currentColor; }
.mc-tt__q{ font-family:var(--mc-font-b); font-size:15px; line-height:1.55; color:var(--mc-ink); margin:0; font-style:normal; }
.mc-tt__q::before{ content:"\201C"; }
.mc-tt__q::after{ content:"\201D"; }
.mc-tt__f{ display:flex; gap:12px; align-items:center; margin-top:auto; padding-top:16px; border-top:1px solid rgba(14,21,16,.10); }
.mc-tt__avatar{ width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--mc-bg-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mc-tt__avatar img{ width:100%; height:100%; object-fit:cover; }
.mc-tt__avatar span{ font-family:var(--mc-font-h); font-weight:600; color:var(--mc-brand); font-size:16px; }
.mc-tt__role{ font-size:14px; font-weight:600; color:var(--mc-ink); line-height:1.25; }
.mc-tt__org{ font-size:13px; color:var(--mc-muted); line-height:1.3; margin-top:2px; }
@media (max-width: 900px){
.mc-tt{ padding:80px 0 90px; }
.mc-tt__title{ font-size:52px; letter-spacing:-1.6px; margin-bottom:36px; }
.mc-tt__grid{ grid-template-columns:1fr; }
}
@media (max-width:540px){ .mc-tt__title{ font-size:38px; letter-spacing:-1.1px; margin-bottom:28px; } }
/* ============================================================
FAQ
============================================================ */
.mc-faq{ padding:120px 0; background:#fff; }
.mc-faq__inner{ max-width:var(--mc-container); margin:0 auto; padding:0 var(--mc-gutter); display:grid; grid-template-columns:minmax(0,600px) minmax(0,1fr); gap:72px; align-items:start; }
.mc-faq__title{ font-family:var(--mc-font-h); font-weight:600; font-size:69px; line-height:1.05; letter-spacing:-2.42px; color:var(--mc-ink); margin:0; text-align:left; }
.mc-faq__title-accent{ color:var(--mc-brand); }
.mc-faq__list{ display:flex; flex-direction:column; }
.mc-faq__item{ border-top:1px solid rgba(14,21,16,.10); }
.mc-faq__item:last-child{ border-bottom:1px solid rgba(14,21,16,.10); }
.mc-faq__q{
all:unset; cursor:pointer; width:100%; box-sizing:border-box;
display:flex; align-items:center; justify-content:space-between; gap:24px;
padding:22px 4px; font-family:var(--mc-font-h); font-weight:600; font-size:17px;
color:var(--mc-ink); transition:color .2s;
}
.mc-faq__q:hover{ color:var(--mc-brand); }
.mc-faq__item[data-open="true"] > .mc-faq__q{ color:var(--mc-brand); }
.mc-faq__q-txt{ flex:1; text-align:left; }
.mc-faq__icon{ flex-shrink:0; width:20px; height:20px; color:var(--mc-brand); display:inline-flex; align-items:center; justify-content:center; }
.mc-faq__icon svg{ width:18px; height:18px; }
.mc-faq__icon-v{ transition: opacity .3s ease, transform .3s ease; transform-origin:center; }
.mc-faq__item[data-open="true"] > .mc-faq__q .mc-faq__icon-v{ opacity:0; transform:rotate(90deg); }
.mc-faq__body{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .35s ease; }
.mc-faq__body > .mc-faq__a{ overflow:hidden; min-height:0; color:var(--mc-muted); line-height:1.6; font-size:15px; padding:0 4px; }
.mc-faq__item[data-open="true"] > .mc-faq__body{ grid-template-rows:1fr; }
.mc-faq__item[data-open="true"] > .mc-faq__body > .mc-faq__a{ padding:0 4px 22px; }
@media (max-width: 1024px){
.mc-faq__inner{ grid-template-columns:1fr; gap:40px; }
.mc-faq__title{ font-size:52px; letter-spacing:-1.6px; }
}
@media (max-width: 540px){
.mc-faq{ padding:72px 0; }
.mc-faq__title{ font-size:38px; letter-spacing:-1.1px; }
.mc-faq__q{ font-size:15px; padding:18px 4px; }
}
/* ============================================================
FOOTER — light cream bg per Figma Page 3
============================================================ */
.mc-ftr{ background:#fff; color:var(--mc-ink-2); padding:72px 0 28px; border-top:1px solid rgba(14,21,16,.08); }
.mc-ftr__inner{ max-width:var(--mc-container); margin:0 auto; padding:0 var(--mc-gutter); display:flex; flex-direction:column; gap:48px; }
.mc-ftr a{ color:inherit; text-decoration:none; transition:color .2s; }
.mc-ftr a:hover{ color:var(--mc-brand); }
/* Head: 2-column — big CTA left, 3 link columns right */
.mc-ftr__head{ display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap:64px; padding-bottom:48px; border-bottom:1px solid rgba(14,21,16,.12); }
.mc-ftr__lead{ display:flex; flex-direction:row; align-items:flex-start; gap:28px; }
.mc-ftr__lead-text{ display:flex; flex-direction:column; gap:20px; }
.mc-ftr__lead-logo img{ width:177px; height:177px; display:block; }
.mc-ftr__lead-logo span{ font-family:var(--mc-font-h); font-size:28px; font-weight:700; color:var(--mc-ink); }
.mc-ftr__lead-title{ font-family:var(--mc-font-h); font-size:80px; line-height:1; font-weight:600; color:var(--mc-ink); letter-spacing:-.02em; margin-top:8px; }
.mc-ftr__lead-link{ display:inline-flex; align-items:center; gap:16px; color:var(--mc-brand)!important; font-family:var(--mc-font-h); font-size:56px; line-height:1; font-weight:600; letter-spacing:-.02em; text-decoration:underline; text-underline-offset:10px; text-decoration-thickness:3px; width:max-content; }
.mc-ftr__lead-link:hover{ color:var(--mc-brand-2)!important; }
.mc-ftr__lead-link svg{ transition:transform .2s; width:52px; height:52px; }
.mc-ftr__lead-link:hover svg{ transform:translateX(6px); }
.mc-ftr__lead-btn{ padding:16px 32px; font-size:16px; margin-top:4px; align-self:flex-start; min-width:220px; border-radius:12px; color:#fff; }
.mc-ftr a.mc-ftr__lead-btn,.mc-ftr a.mc-ftr__lead-btn:hover{ color:#fff; }
.mc-ftr__lead-btn svg{ transition:transform .2s; }
.mc-ftr__lead-btn:hover svg{ transform:translateX(4px); }
/* 3 columns on the right */
.mc-ftr__cols{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; align-content:start; }
.mc-ftr__col-title{ font-family:var(--mc-font-h); font-size:13px; font-weight:600; color:var(--mc-ink); text-transform:uppercase; letter-spacing:.1em; margin-bottom:18px; }
.mc-ftr__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--mc-ink-2); }
.mc-ftr__col--contact{ display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--mc-ink-2); }
.mc-ftr__col--contact .mc-ftr__link{ color:var(--mc-ink-2); }
.mc-ftr__col--contact .mc-ftr__link:hover{ color:var(--mc-brand); }
.mc-ftr__addr{ font-size:13px; line-height:1.5; color:var(--mc-muted); margin-top:4px; }
/* Bottom bar — single row: brand | creds | copy+legal */
.mc-ftr__bar{ display:grid; grid-template-columns: auto 1fr auto; gap:40px; align-items:center; padding-top:4px; }
.mc-ftr__bar-brand{ display:flex; align-items:center; gap:14px; min-width:0; }
.mc-ftr__bar-logo{ height:40px; width:auto; flex-shrink:0; }
.mc-ftr__brand-name{ font-family:var(--mc-font-h); font-size:15px; font-weight:600; color:var(--mc-ink); line-height:1.2; }
.mc-ftr__brand-note{ font-size:12px; color:var(--mc-muted); margin-top:2px; }
.mc-ftr__creds{ list-style:none; padding:0; margin:0; display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
.mc-ftr__creds li{ display:flex; flex-direction:column; gap:2px; line-height:1.1; text-align:left; }
.mc-ftr__cred-k{ color:var(--mc-muted); text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:700; }
.mc-ftr__cred-v{ color:var(--mc-ink); font-weight:600; font-size:13px; }
.mc-ftr__bar-end{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:flex-end; }
.mc-ftr__copy{ font-size:12px; color:var(--mc-muted); }
.mc-ftr__legal{ list-style:none; padding:0; margin:0; display:flex; gap:18px; font-size:12px; color:var(--mc-ink-2); }
@media (max-width: 1200px){
.mc-ftr__lead-title{ font-size:64px; }
.mc-ftr__lead-link{ font-size:44px; }
.mc-ftr__lead-link svg{ width:40px; height:40px; }
}
@media (max-width: 1024px){
.mc-ftr__head{ grid-template-columns:1fr; gap:40px; }
.mc-ftr__lead-logo img{ width:140px; height:140px; }
.mc-ftr__lead-title{ font-size:56px; }
.mc-ftr__lead-link{ font-size:36px; }
.mc-ftr__bar{ grid-template-columns:1fr; gap:24px; text-align:left; }
.mc-ftr__creds{ justify-content:flex-start; }
.mc-ftr__bar-end{ justify-content:flex-start; }
}
@media (max-width: 640px){
.mc-ftr{ padding:48px 0 24px; }
.mc-ftr__lead{ flex-direction:column; gap:16px; }
.mc-ftr__lead-logo img{ width:110px; height:110px; }
.mc-ftr__lead-title{ font-size:40px; }
.mc-ftr__lead-link{ font-size:28px; }
.mc-ftr__lead-link svg{ width:32px; height:32px; }
.mc-ftr__cols{ grid-template-columns:1fr; gap:28px; }
/* Bottom bar: clean stacked groups with dividers, centered */
.mc-ftr__bar{ gap:24px; padding-top:20px; text-align:center; }
.mc-ftr__bar-brand{ gap:12px; justify-content:center; }
.mc-ftr__bar-logo{ height:36px; }
.mc-ftr__brand-name{ font-size:14px; }
.mc-ftr__brand-note{ font-size:11px; line-height:1.4; }
.mc-ftr__creds{
display:grid; grid-template-columns:1fr 1fr; gap:14px 20px;
padding:16px 0; border-top:1px solid #ECEFEC; border-bottom:1px solid #ECEFEC;
justify-content:center; justify-items:center;
}
.mc-ftr__creds li{ text-align:center; align-items:center; }
.mc-ftr__bar-end{ flex-direction:column; align-items:center; gap:12px; }
.mc-ftr__copy{ font-size:11px; }
.mc-ftr__legal{ gap:16px; font-size:12px; justify-content:center; }
}
/* ---- Choices.js overrides — match hero form input style ---- */
.mc-hero__fld .choices{ margin:0; width:100%; }
.mc-hero__fld .choices__inner{
min-height:auto; padding:14px 40px 14px 16px; border-radius:12px;
background:#fff; border:1px solid #e5e7e2; display:flex; align-items:center;
font-family:var(--mc-font-b); font-size:15px; color:var(--mc-ink); line-height:1.2;
}
.mc-hero__fld .choices[data-type*="select-one"]::after{
border:0; width:12px; height:8px; right:16px; margin:0; top:50%; transform:translateY(-50%);
background:url("data:image/svg+xml;utf8,") no-repeat center;
}
.mc-hero__fld .choices[data-type*="select-one"].is-open::after{ transform:translateY(-50%) rotate(180deg); }
.mc-hero__fld .choices__list--single{ padding:0; }
.mc-hero__fld .choices__list--single .choices__item{ color:var(--mc-ink); }
.mc-hero__fld .choices__placeholder{ opacity:1; color:var(--mc-muted); }
.mc-hero__fld .choices.is-focused .choices__inner,
.mc-hero__fld .choices.is-open .choices__inner{ border-color:#008145; box-shadow:0 0 0 3px rgba(0,129,69,.12); }
.mc-hero__fld .choices__list--dropdown,
.mc-hero__fld .choices__list[aria-expanded]{
border:1px solid #e5e7e2; border-radius:12px; margin-top:6px; box-shadow:0 12px 32px rgba(16,32,24,.12); overflow:hidden;
}
.mc-hero__fld .choices__list--dropdown .choices__input{
margin:10px; padding:10px 12px; background:#f5f6f3; border:1px solid #e5e7e2; border-radius:8px;
font-family:var(--mc-font-b); font-size:14px; color:var(--mc-ink);
}
.mc-hero__fld .choices__list--dropdown .choices__list{ max-height:260px; }
.mc-hero__fld .choices__list--dropdown .choices__item--selectable{
padding:10px 16px; font-family:var(--mc-font-b); font-size:14px; color:var(--mc-ink);
}
.mc-hero__fld .choices__list--dropdown .choices__item--selectable.is-highlighted{
background:#effaf2; color:#008145;
}
/* Hide the legacy chev from .mc-hero__input wrapper when Choices takes over */
.mc-hero__fld .choices + .mc-hero__chev{ display:none; }
/* Remove inner input wrapper box since Choices renders its own */
.mc-hero__fld .mc-hero__input:has(.choices){ background:transparent; border:0; padding:0; height:auto; }
/* ============================================================
MOBILE ADAPTIVE FIXES (Header + Hero)
============================================================ */
@media (max-width: 640px){
.mc-hdr__inner{ padding:0 16px; gap:12px; height:64px; }
.mc-hdr__brand{ font-size:15px; white-space:nowrap; }
.mc-hdr__logo-mark{ width:36px; height:36px; }
.mc-hdr__btn{ padding:8px 14px; font-size:13px; white-space:nowrap; }
.mc-hdr__burger{ width:36px; height:36px; }
.mc-hero__content{ padding:88px 0 28px; }
.mc-hero__badges{ margin-bottom:20px; gap:6px; }
.mc-hero__title{ font-size:40px; line-height:1.04; max-width:none; }
.mc-hero__right{ gap:20px; }
.mc-hero__sub{ font-size:15px; }
.mc-hero__card{ margin-top:24px; border-radius:16px; }
}
@media (max-width: 420px){
.mc-hdr__btn .mc-btn-label,
.mc-hdr__btn svg{ /* keep as-is */ }
.mc-hdr__btn{ padding:8px 12px; font-size:12px; }
.mc-hero__title{ font-size:36px; }
.mc-hero__inner{ padding:0 14px; }
}
/* Full-width sticky header (edge-to-edge white bar) */
.mc-hdr{ width:100%; }
.mc-hdr__inner{ max-width:none; padding:0 48px; }
@media (max-width: 1200px){ .mc-hdr__inner{ padding:0 32px; } }
@media (max-width: 1023px){ .mc-hdr__inner{ padding:0 24px; } }
@media (max-width: 640px){ .mc-hdr__inner{ padding:0 16px; } }
/* ============================================================
MOBILE ADAPTIVE v2 — better button padding + header refinement
============================================================ */
@media (max-width: 900px){
.mc-hdr__inner{ padding:0 24px; }
}
@media (max-width: 640px){
.mc-hdr{ border-bottom:1px solid rgba(14,21,16,.08); }
.mc-hdr__inner{ padding:0 16px; height:64px; gap:10px; }
.mc-hdr__logo{ gap:10px; }
.mc-hdr__logo-mark{ width:36px; height:36px; }
.mc-hdr__brand{ font-size:15px; white-space:nowrap; }
.mc-hdr__tag{ display:none; }
.mc-hdr__btn{ padding:9px 14px; font-size:13px; height:36px; border-radius:12px; }
.mc-hdr__btn svg{ width:12px; height:12px; }
.mc-hero__ctas{ gap:12px; }
.mc-hero__ctas .mc-btn{ height:52px; padding:0 20px; border-radius:12px; font-size:14px; }
}
@media (max-width: 420px){
.mc-hdr__inner{ padding:0 14px; gap:8px; }
.mc-hdr__brand{ font-size:14px; }
.mc-hdr__logo-mark{ width:32px; height:32px; }
.mc-hdr__btn{ padding:8px 12px; font-size:12px; height:34px; }
}
/* Ensure form inputs dont overflow on narrow screens */
@media (max-width: 640px){
.mc-hero__form{ padding:22px 18px 18px; }
.mc-hero__form-row{ gap:14px; }
.mc-hero__fld .choices__inner{ padding:12px 40px 12px 14px; }
}
/* ============================================================
MOBILE ADAPTIVE v3 — final fix
Header: logo left, nav/CTA in center, burger right. Proper padding.
Buttons: unified radius + real paddings.
============================================================ */
@media (max-width: 1023px){
.mc-hdr__cta{ margin-left:auto; }
}
@media (max-width: 640px){
.mc-hdr__inner{ padding:0 20px; height:68px; gap:12px; justify-content:space-between; }
.mc-hdr__logo{ gap:10px; flex-shrink:1; min-width:0; }
.mc-hdr__logo-mark{ width:38px; height:38px; flex-shrink:0; }
.mc-hdr__logo-txt{ min-width:0; overflow:hidden; }
.mc-hdr__brand{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-hdr__cta{ gap:10px; margin-left:auto; }
.mc-hdr__phone{ display:none; }
.mc-hdr__btn{
padding:0 18px !important; height:40px !important;
font-size:13px; border-radius:12px !important;
min-width:auto; white-space:nowrap;
}
.mc-hdr__btn svg{ width:13px; height:13px; }
.mc-hdr__burger{ width:40px; height:40px; border-radius:10px; flex-shrink:0; }
.mc-hero__ctas{ gap:12px; }
.mc-hero__ctas .mc-btn{
height:52px !important; padding:0 22px !important;
border-radius:12px !important; font-size:14px;
width:100%; min-width:0;
}
}
@media (max-width: 420px){
.mc-hdr__inner{ padding:0 16px; height:64px; }
.mc-hdr__logo-mark{ width:34px; height:34px; }
.mc-hdr__brand{ font-size:14px; }
.mc-hdr__btn{ padding:0 14px !important; height:38px !important; font-size:12px; }
.mc-hdr__burger{ width:38px; height:38px; }
}
/* ============================================================
MOBILE ADAPTIVE v4 — fix button height collapse in column flex
============================================================ */
@media (max-width: 640px){
.mc-hero__ctas{ flex-direction:column; align-items:stretch; }
.mc-hero__ctas .mc-btn{
flex:0 0 auto !important;
flex-shrink:0 !important;
min-height:52px !important;
height:52px !important;
padding:14px 22px !important;
border-radius:12px !important;
line-height:1 !important;
}
/* Darken hero video on mobile */
.mc-hero__scrim{
background:
linear-gradient(180deg, rgba(14,21,16,.25) 0%, rgba(14,21,16,.45) 35%, rgba(14,21,16,.75) 65%, rgba(14,21,16,.98) 100%),
linear-gradient(90deg, rgba(14,21,16,.45) 0%, rgba(14,21,16,.25) 50%, rgba(14,21,16,.15) 100%) !important;
}
}
/* ============================================================
Choices.js — refined search + item styling
============================================================ */
.mc-hero__fld .choices__list--dropdown{
border:1px solid #e5e7e2; border-radius:14px; margin-top:8px;
padding:8px; box-shadow:0 16px 40px rgba(16,32,24,.14);
background:#fff;
}
.mc-hero__fld .choices__list--dropdown .choices__input,
.mc-hero__fld .choices__list[aria-expanded] .choices__input{
margin:0 0 8px 0; padding:11px 14px 11px 38px;
background:#f5f6f3 url("data:image/svg+xml;utf8,") no-repeat 12px 50%;
border:1px solid #e5e7e2; border-radius:10px;
font-family:var(--mc-font-b); font-size:14px; color:var(--mc-ink);
transition:.15s ease;
}
.mc-hero__fld .choices__list--dropdown .choices__input:focus{
background-color:#fff; border-color:#008145;
box-shadow:0 0 0 3px rgba(0,129,69,.15);
outline:none;
}
.mc-hero__fld .choices__list--dropdown .choices__input::placeholder{
color:#8a918b; font-weight:500;
}
.mc-hero__fld .choices__list--dropdown .choices__list{
max-height:240px; padding:2px 0;
}
.mc-hero__fld .choices__list--dropdown .choices__item--selectable{
padding:10px 14px; border-radius:8px; margin:2px 0;
font-family:var(--mc-font-b); font-size:14px; color:var(--mc-ink);
transition:background .12s ease, color .12s ease;
}
.mc-hero__fld .choices__list--dropdown .choices__item--selectable:hover,
.mc-hero__fld .choices__list--dropdown .choices__item--selectable.is-highlighted{
background:rgba(0,129,69,.08); color:#008145;
}
.mc-hero__fld .choices__list--dropdown .choices__item.is-selected{
background:transparent; color:#6d7570; font-weight:500;
}
.mc-hero__fld .choices__list--dropdown .choices__item.is-selected::after{
content:"✓"; float:right; color:#008145; font-weight:700;
}
/* Custom scrollbar inside dropdown list */
.mc-hero__fld .choices__list--dropdown .choices__list::-webkit-scrollbar{ width:6px; }
.mc-hero__fld .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb{ background:#d7dcd6; border-radius:3px; }
.mc-hero__fld .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb:hover{ background:#008145; }
/* Tighten the closed select (align with placeholder look) */
.mc-hero__fld .choices__inner{
padding:13px 40px 13px 16px;
min-height:48px;
line-height:1.2;
font-weight:500;
}
.mc-hero__fld .choices__list--single .choices__item{ font-weight:500; }
/* No results state */
.mc-hero__fld .choices__list--dropdown .has-no-results,
.mc-hero__fld .choices__list--dropdown .has-no-choices{
padding:14px; color:#8a918b; font-size:14px; text-align:center;
}
/* Let Choices dropdown escape the card + form containers */
.mc-hero__card{ overflow:visible; }
.mc-hero__form{ overflow:visible; }
.mc-hero__form-row{ overflow:visible; }
.mc-hero__fld{ position:relative; }
.mc-hero__fld .choices.is-open{ z-index:30; }
.mc-hero__fld .choices.is-open .choices__list--dropdown,
.mc-hero__fld .choices.is-open .choices__list[aria-expanded]{ z-index:30; }
/* Stats list inside card keeps its own rounded bottom corners */
.mc-hero__stats{ border-radius:0 0 20px 20px; overflow:hidden; }
/* ==== Every Mode section — Figma-exact (29:15090) ==== */
.mc-modes{ padding:80px 0; background:#fff; }
.mc-modes__inner{ max-width:1440px; margin:0 auto; padding:0 55px; }
.mc-modes__head{
display:grid; grid-template-columns: minmax(0,1fr) 416px; gap:48px;
align-items:end; margin:0 0 42px;
}
.mc-modes__head-left{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.mc-modes__eyebrow{
display:inline-flex; padding:6px 14px; border-radius:999px;
background:#D4EFE0; color:#016B3A;
font:600 13px/1 var(--mc-font-h),Inter,sans-serif;
letter-spacing:0.04em;
}
.mc-modes__title{
font-family:var(--mc-font-h);
font-size:69px; line-height:1.05; letter-spacing:-2.42px;
font-weight:600; color:#0E1510; margin:0;
}
.mc-modes__title .is-green, .mc-modes__title span[style*="#016B3A"]{
color:#016B3A !important; font-weight:600; display:inline;
}
.mc-modes__sub{
font-family:var(--mc-font-b);
font-size:16px; line-height:24px; color:#2A312C;
margin:0; max-width:540px;
}
.mc-modes__sub--2{ text-align:left; padding-bottom:4px; }
.mc-modes__grid{
display:grid; grid-template-columns:448px 1fr;
gap:20px; align-items:stretch;
}
.mc-modes__lists{ display:flex; flex-direction:column; gap:18px; }
.mc-modes__list--warehousing{ flex:0 0 auto; }
/* ---- Left: list card ---- */
.mc-modes__list{
list-style:none; margin:0; padding:12px;
background:#fff; border:1px solid #E4E7E3; border-radius:18px;
display:flex; flex-direction:column; gap:0;
}
.mc-modes__list li{ margin:0; }
.mc-modes__tab{
width:100%; display:flex; align-items:center;
gap:32px; padding:20px 32px;
background:transparent; border:1px solid transparent; border-radius:18px;
cursor:pointer; text-align:left;
transition:background .18s ease, border-color .18s ease;
}
.mc-modes__tab:hover{ background:#FAFBF9; }
.mc-modes__num{
font-family:var(--mc-font-h); font-size:18px; font-weight:500;
color:#A0A6A2; line-height:1; flex:0 0 auto; min-width:22px;
}
.mc-modes__txt{ display:flex; flex-direction:column; gap:6px; flex:1 1 auto; min-width:0; }
.mc-modes__name{
font-family:var(--mc-font-h); font-size:22px; font-weight:700;
line-height:1.1; color:#0E1510;
}
.mc-modes__subt{
font-family:var(--mc-font-b); font-size:13px; font-weight:400;
line-height:1.1; color:#6B726D;
}
.mc-modes__arr{ color:#008145; opacity:0; flex:0 0 auto; transition:opacity .18s ease; }
.mc-modes__tab.is-active{
background:#F5FAF7; border-color:#E4E7E3;
}
.mc-modes__tab.is-active .mc-modes__name{ color:#008145; }
.mc-modes__tab.is-active .mc-modes__arr{ opacity:1; }
/* ---- Right: detail card ---- */
.mc-modes__panels{ position:relative; display:flex; }
.mc-modes__panel{
display:none;
background:#fff; border:1px solid #E4E7E3; border-radius:18px;
padding:42px;
}
.mc-modes__panel.is-active{ display:flex; flex-direction:column; gap:22px; flex:1 1 auto; width:100%; }
.mc-modes__panel-head{
display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
margin:0;
}
.mc-modes__panel-head-left{ flex:1 1 auto; min-width:0; }
.mc-modes__h3{
font-family:var(--mc-font-h);
font-size:46px; line-height:1.05; letter-spacing:-1px;
font-weight:600; color:#0E1510; margin:0 0 16px;
}
.mc-modes__badge{
flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
width:34px; height:34px; background:#016B3A; color:#fff;
border-radius:6px; text-decoration:none; padding:8px; box-sizing:border-box;
transition:background .18s ease;
}
.mc-modes__badge:hover{ background:#00582E; }
.mc-modes__badge svg{ width:18px; height:18px; }
.mc-modes__desc{
font-family:var(--mc-font-b); font-size:16px; line-height:24px;
color:#2A312C; margin:0;
}
.mc-modes__pills{
list-style:none; margin:0; padding:0;
display:flex; flex-wrap:wrap; gap:8px;
}
.mc-modes__pill{
display:inline-flex; align-items:center; height:33px; padding:8px 16px;
font-family:var(--mc-font-b); font-size:12px; font-weight:600; line-height:1;
border-radius:999px; letter-spacing:0;
background:#008145; color:#fff; border:1px solid #008145;
}
.mc-modes__pill--outline{
background:#fff; color:#008145; border:1px solid #008145;
}
.mc-modes__img-wrap{ position:relative; width:100%; aspect-ratio: 16 / 10;
border-radius:23px; overflow:hidden;
background:#eef0ea; margin:0;
}
.mc-modes__img{ position:absolute; inset:0;
display:block; width:100%; height:100%; object-fit:cover;
}
/* 3-cell stats strip (used when no KPI has a subtitle) */
.mc-modes__kpis{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(3, 1fr);
background:#fff; border:1px solid #E4E7E3; border-radius:18px;
overflow:hidden;
}
.mc-modes__kpi{
display:flex; flex-direction:column; gap:4px;
padding:16px 20px;
border-right:1px solid #E4E7E3;
min-height:73px; justify-content:center;
}
.mc-modes__kpi:last-child{ border-right:0; }
.mc-modes__kpi-lab{
font-family:var(--mc-font-b); font-size:13px; font-weight:500; line-height:1;
color:#6B726D;
}
.mc-modes__kpi-val{
font-family:var(--mc-font-h); font-size:18px; font-weight:600; line-height:1.1;
color:#0E1510;
}
/* Row-card layout (matches mockup .cd-loc — used when at least one KPI has subtitle) */
.mc-modes__rows{
list-style:none; margin:0; padding:0;
display:flex; flex-direction:column; gap:14px;
}
.mc-modes__row{
padding:16px 20px;
border:1px solid #E4E7E3;
border-radius:6px;
background:#F7F7F4;
}
.mc-modes__row-top{
display:flex; justify-content:space-between; align-items:baseline;
margin-bottom:5px; flex-wrap:wrap; gap:8px;
}
.mc-modes__row-h{
font-family:var(--mc-font-h); font-size:15px; font-weight:700; line-height:1.2;
color:#0E1510;
}
.mc-modes__row-v{
font-family:var(--mc-font-h); font-size:12px; font-weight:600; line-height:1.2;
color:#0F4A2A;
}
.mc-modes__row-s{
font-family:var(--mc-font-b); font-size:12px; font-weight:400; line-height:1.5;
color:#8A8A86; margin:0;
}
/* Mode panel — bottom CTA row (Figma 123:146) */
.mc-modes__cta{
display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
margin-top:18px;
}
.mc-modes__cta-btn{
display:inline-flex; align-items:center; gap:10px;
background:#016B3A; color:#fff; text-decoration:none;
padding:13px 22px; border-radius:12px;
font-family:var(--mc-font-b); font-size:15px; font-weight:600; line-height:1;
transition:background .18s ease;
}
.mc-modes__cta-btn:hover{ background:#015A30; color:#fff; }
.mc-modes__cta-btn svg{ flex:0 0 auto; }
.mc-modes__cta-note{
font-family:var(--mc-font-b); font-size:14px; font-weight:400; line-height:1.3;
color:#6B726D;
}
/* Tablet */
@media (max-width: 1100px){
.mc-modes__inner{ padding:0 32px; }
.mc-modes__head{ flex-direction:column; align-items:flex-start; gap:20px; }
.mc-modes__title{ font-size:52px; letter-spacing:-1.6px; }
.mc-modes__grid{ grid-template-columns:1fr; }
.mc-modes__img-wrap{ aspect-ratio: 16 / 10; }
}
/* Desktop: inline (mobile) panels hidden; chevron hidden */
.mc-modes__panel--inline{ display:none !important; }
.mc-modes__chev{ display:none; }
/* Mobile */
@media (max-width: 640px){
.mc-modes{ padding:56px 0; }
.mc-modes__inner{ padding:0 16px; }
.mc-modes__title{ font-size:38px; letter-spacing:-1.1px; }
.mc-modes__sub{ font-size:15px; line-height:22px; }
/* Hide the desktop panel column on mobile */
.mc-modes__panels{ display:none; }
/* List card becomes the accordion */
.mc-modes__list{ padding:4px; gap:0; }
.mc-modes__list li{ display:block; border-bottom:1px solid #E4E7E3; }
.mc-modes__list li:last-child{ border-bottom:0; }
.mc-modes__list li:has(.mc-modes__tab.is-active){ border-bottom-color:transparent; background:#F5FAF7; border-radius:14px; }
.mc-modes__tab{ gap:18px; padding:16px 18px; border-radius:14px; }
.mc-modes__num{ font-size:15px; }
.mc-modes__name{ font-size:18px; }
.mc-modes__subt{ font-size:12.5px; }
.mc-modes__arr{ display:none; }
.mc-modes__chev{ display:inline-block; color:#008145; opacity:.6; transition:transform .2s ease, opacity .2s ease; flex:0 0 auto; margin-left:auto; }
.mc-modes__tab.is-active .mc-modes__chev{ transform:rotate(180deg); opacity:1; }
.mc-modes__tab.is-active{ border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:transparent; }
/* Inline accordion panel (only show on mobile when active) */
.mc-modes__panel--inline{ display:none !important; }
.mc-modes__panel--inline.is-active{
display:flex !important; flex-direction:column; gap:14px;
padding:6px 18px 20px;
background:#F5FAF7;
border:1px solid #E4E7E3; border-top:0;
border-radius:0 0 14px 14px;
margin-top:-1px;
animation:mcModesFade .18s ease-out;
}
.mc-modes__panel--inline .mc-modes__panel-head{ gap:12px; }
.mc-modes__panel--inline .mc-modes__h3{ font-size:22px; margin:0 0 6px; letter-spacing:-0.3px; }
.mc-modes__panel--inline .mc-modes__desc{ font-size:14px; line-height:20px; }
.mc-modes__panel--inline .mc-modes__badge{ width:30px; height:30px; padding:7px; }
.mc-modes__panel--inline .mc-modes__pill{ height:auto; padding:7px 14px; font-size:11.5px; line-height:1; box-sizing:border-box; border:1px solid #008145; }
.mc-modes__panel--inline .mc-modes__pill--outline{ border:1px solid #008145; background:#fff; color:#008145; }
.mc-modes__panel--inline .mc-modes__img-wrap{ min-height:0; position:relative; border-radius:14px; }
.mc-modes__panel--inline .mc-modes__img{ position:relative; inset:auto; height:200px; width:100%; border-radius:14px; object-fit:cover; display:block; }
.mc-modes__panel--inline .mc-modes__kpis{ grid-template-columns:1fr; }
.mc-modes__panel--inline .mc-modes__kpi{ border-right:0; border-bottom:1px solid #E4E7E3; min-height:56px; padding:12px 14px; align-items:center; text-align:center; }
.mc-modes__panel--inline .mc-modes__kpi:last-child{ border-bottom:0; }
.mc-modes__panel--inline .mc-modes__kpi-lab{ font-size:12px; }
.mc-modes__panel--inline .mc-modes__kpi-val{ font-size:16px; }
.mc-modes__row{ padding:14px 16px; }
.mc-modes__row-h{ font-size:14px; }
/* CTA stacks vertically on mobile */
.mc-modes__cta{ flex-direction:column; align-items:flex-start; gap:12px; }
.mc-modes__cta-btn{ width:auto; align-self:flex-start; }
.mc-modes__cta-note{ font-size:13px; line-height:18px; }
}
@keyframes mcModesFade{
from{ opacity:0; transform:translateY(-4px); }
to{ opacity:1; transform:translateY(0); }
}
/* ==== /Every Mode ==== */
/* Choices.js on quote form selects */
.mc-quote__field .choices{ margin:0; width:100%; position:relative; }
.mc-quote__field .choices__inner{
background:#fff; border:1px solid #D4D8D3; border-radius:10px;
padding:12px 40px 12px 16px; min-height:48px; font-size:14px; color:#0E1510;
}
.mc-quote__field .choices[data-type*="select-one"]::after{
right:16px; border-color:#0E1510 transparent transparent;
}
.mc-quote__field .choices[data-type*="select-one"].is-open::after{
transform:translateY(-50%) rotate(180deg);
border-color:#0E1510 transparent transparent;
}
.mc-quote__field .choices__list--single{ padding:0; }
.mc-quote__field .choices__list--single .choices__item{ color:#0E1510; }
.mc-quote__field .choices__placeholder{ opacity:1; color:#6B726D; }
.mc-quote__field .choices.is-focused .choices__inner,
.mc-quote__field .choices.is-open .choices__inner{
border-color:#016B3A; box-shadow:0 0 0 3px rgba(1,107,58,.12);
}
.mc-quote__field .choices__list--dropdown,
.mc-quote__field .choices__list[aria-expanded]{
border:1px solid #D4D8D3; border-radius:10px; margin-top:6px;
background:#fff; z-index:20;
}
.mc-quote__field .choices__list--dropdown .choices__input{
border:1px solid #E4E7E3; border-radius:8px; padding:8px 10px; font-size:14px;
}
.mc-quote__field .choices__list--dropdown .choices__list{ max-height:260px; }
.mc-quote__field .choices__list--dropdown .choices__item--selectable.is-highlighted{
background:#F3F4F2; color:#016B3A;
}
.mc-quote__input-wrap--chevron:has(.choices)::after{ display:none; }
.mc-quote__input-wrap:has(.choices){ border:0; padding:0; }
/* ============================================================
STATUS PAGES — 404 / Thank You
============================================================ */
.mc-stat{ position:relative; padding:140px 0 160px; background:#016B3A; color:#fff; min-height:calc(100vh - 200px); display:flex; align-items:center; }
.mc-stat__bg{
position:absolute; inset:0; pointer-events:none; opacity:.5;
background-image: radial-gradient(circle, rgba(255,255,255,.35) 1.3px, transparent 1.7px);
background-size: 14px 14px;
mask-image: radial-gradient(ellipse 55% 60% at 50% 50%, transparent 25%, rgba(0,0,0,.6) 70%, #000 95%);
-webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 50%, transparent 25%, rgba(0,0,0,.6) 70%, #000 95%);
}
.mc-stat__inner{ position:relative; max-width:var(--mc-container); margin:0 auto; padding:0 var(--mc-gutter); text-align:center; display:flex; flex-direction:column; gap:22px; align-items:center; }
.mc-stat__eyebrow{
display:inline-block; font-family:var(--mc-font-b); font-size:13px; font-weight:600;
letter-spacing:.08em; text-transform:uppercase;
padding:8px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.3);
background:rgba(255,255,255,.08); color:#fff;
}
.mc-stat__h1{ font-family:var(--mc-font-h); font-size:72px; line-height:1.02; letter-spacing:-2px; font-weight:600; color:#fff; margin:0; max-width:820px; }
.mc-stat__sub{ font-family:var(--mc-font-b); font-size:17px; line-height:26px; color:rgba(255,255,255,.8); margin:0; max-width:580px; }
.mc-stat__actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.mc-stat__btn{
display:inline-flex; align-items:center; gap:8px;
padding:14px 26px; border-radius:10px;
font-family:var(--mc-font-b); font-size:14px; font-weight:600;
text-decoration:none; border:1px solid transparent;
transition:background .15s, color .15s, border-color .15s;
}
.mc-stat__btn--primary{ background:#fff; color:#016B3A; }
.mc-stat__btn--primary:hover{ background:#E4E7E3; }
.mc-stat__btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.mc-stat__btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
@media (max-width: 800px){
.mc-stat{ padding:80px 0 100px; }
.mc-stat__h1{ font-size:44px; letter-spacing:-1px; }
.mc-stat__sub{ font-size:15px; line-height:22px; }
}
@media (max-width: 540px){
.mc-stat__h1{ font-size:32px; }
.mc-stat__actions{ flex-direction:column; align-items:stretch; width:100%; max-width:280px; }
.mc-stat__btn{ justify-content:center; }
}
/* === Hero inline calculator: autocomplete + result + lead modal === */
.mc-hero__card{ overflow:visible; }
.mc-hero__form{ position:relative; }
/* Autocomplete input wrapper */
.mc-hero__ac{ position:relative; z-index:1; }
.mc-hero__ac:focus-within{ z-index:20; }
.mc-hero__ac input{
width:100%; background:transparent; border:0; outline:none;
font:inherit; font-weight:500; font-size:15px; color:var(--mc-ink);
padding:0;
}
.mc-hero__ac input::placeholder{ color:rgba(14,21,16,.45); font-weight:400; }
/* Autocomplete dropdown — floats above card, can overflow outside */
.mc-hero__dropdown{
position:absolute; top:calc(100% + 8px); left:0; right:0;
list-style:none; margin:0; padding:4px;
background:#fff;
border:1px solid #E4E7E3;
border-radius:12px;
box-shadow:0 14px 32px rgba(14,21,16,.14);
max-height:280px; overflow-y:auto;
z-index:60;
}
.mc-hero__dropdown li{
padding:10px 12px;
border-radius:8px;
font-size:14px; color:#0E1510;
cursor:pointer;
font-family:var(--mc-font-b), 'Inter', system-ui, sans-serif;
}
.mc-hero__dropdown li:hover{ background:#F2F5F1; }
.mc-hero__dropdown-empty{ color:#9AA39E; cursor:default; }
.mc-hero__dropdown-empty:hover{ background:transparent !important; }
/* Pills as buttons (no native radio anymore) */
.mc-hero__pill{ border:0; }
.mc-hero__pill span{ display:inline-flex; align-items:center; }
/* Inline error below form row */
.mc-hero__error{
display:none;
margin:12px 0 0;
padding:10px 14px;
background:#FEEBEB; color:#8B1E1E;
border:1px solid #F3B4B4;
border-radius:10px;
font-size:13px; font-style:normal;
}
.mc-hero__error.is-visible{ display:block; }
/* Inline result panel — below form, within card */
.mc-hero__result{
margin:0 20px 20px;
padding:22px;
background:#F2F5F1;
border-radius:14px;
animation:mcHeroFade .22s ease-out;
}
.mc-hero__result[hidden]{ display:none; }
.mc-hero__result-lane{
font-size:13px; color:#5A6560; margin-bottom:14px; font-weight:500;
font-family:var(--mc-font-b), 'Inter', system-ui, sans-serif;
}
.mc-hero__result-grid{
display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
margin-bottom:16px;
}
.mc-hero__result-cell{
background:#fff; border-radius:10px; padding:14px 16px;
display:flex; flex-direction:column;
}
.mc-hero__result-lbl{
font-size:11px; text-transform:uppercase; letter-spacing:.08em;
color:#5A6560; font-weight:600;
font-family:var(--mc-font-b), 'Inter', system-ui, sans-serif;
}
.mc-hero__result-val{
font-size:24px; font-weight:600; color:#0E1510;
margin:4px 0 2px; line-height:1.1;
font-family:var(--mc-font-h), 'Instrument Sans', sans-serif;
}
.mc-hero__result-unit{
font-size:11px; color:#9AA39E;
}
.mc-hero__result-cell--hero{ background:#016B3A; }
.mc-hero__result-cell--hero .mc-hero__result-lbl{ color:rgba(255,255,255,.75); }
.mc-hero__result-cell--hero .mc-hero__result-val{ color:#fff; }
.mc-hero__result-cell--hero .mc-hero__result-unit{ color:rgba(255,255,255,.6); }
.mc-hero__result-actions{
display:flex; gap:16px; align-items:center; justify-content:space-between;
flex-wrap:wrap;
}
.mc-hero__result-note{
margin:0; font-size:12px; color:#7A857F; line-height:1.5; flex:1; min-width:260px;
}
.mc-hero__result-btn{
padding:0 22px; height:46px; border-radius:10px;
font-size:14px; font-weight:500;
display:inline-flex; align-items:center; gap:8px;
}
@keyframes mcHeroFade { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:translateY(0) } }
/* === Lead-capture modal (contact only) === */
.mcc-lead-lock{ overflow:hidden; }
.mcc-lead{
position:fixed; inset:0; z-index:9000;
display:none;
font-family:'Instrument Sans', 'Inter', system-ui, sans-serif;
}
.mcc-lead.is-open{ display:block; }
.mcc-lead__backdrop{
position:absolute; inset:0;
background:rgba(8,24,16,.6);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
animation:mccLeadFade .18s ease-out;
}
.mcc-lead__panel{
position:absolute; top:50%; left:50%;
transform:translate(-50%, -50%);
width:min(520px, calc(100vw - 32px));
max-height:calc(100vh - 32px);
overflow-y:auto;
background:#fff;
border-radius:20px;
padding:36px 36px 28px;
box-shadow:0 30px 80px rgba(0,0,0,.28);
animation:mccLeadPop .22s cubic-bezier(.2,.8,.2,1);
}
.mcc-lead__close{
position:absolute; top:14px; right:14px;
width:36px; height:36px;
border-radius:50%; border:0;
background:#F2F5F1; color:#0E1510;
display:inline-flex; align-items:center; justify-content:center;
cursor:pointer;
transition:background .15s;
}
.mcc-lead__close:hover{ background:#E4E7E3; }
.mcc-lead__head{ margin-bottom:18px; }
.mcc-lead__eyebrow{
font-size:11px; letter-spacing:.12em; text-transform:uppercase;
color:#016B3A; font-weight:600; margin-bottom:8px;
}
.mcc-lead__title{
font-size:24px; line-height:1.2; font-weight:600;
color:#0E1510; margin:0 0 6px;
}
.mcc-lead__sub{
font-size:14px; color:#5A6560; margin:0; line-height:1.5;
}
.mcc-lead__summary{
margin:18px 0 22px;
padding:14px 16px;
background:#F2F5F1;
border-radius:12px;
display:flex; justify-content:space-between; align-items:center;
gap:14px; flex-wrap:wrap;
}
.mcc-lead__summary-lane{
font-size:13px; color:#5A6560; font-weight:500;
}
.mcc-lead__summary-total{
font-size:22px; font-weight:600; color:#016B3A;
}
.mcc-lead__form{ display:flex; flex-direction:column; gap:14px; }
.mcc-lead__form.is-hidden{ display:none; }
.mcc-lead__field{ display:flex; flex-direction:column; gap:6px; }
.mcc-lead__field > span{
font-size:12px; color:#5A6560; font-weight:500;
}
.mcc-lead__field input{
width:100%; height:46px;
border:1px solid #E4E7E3; border-radius:10px;
padding:0 14px;
font-size:15px; color:#0E1510;
background:#fff;
font-family:inherit;
transition:border-color .15s, box-shadow .15s;
}
.mcc-lead__field input:focus{
outline:none;
border-color:#016B3A;
box-shadow:0 0 0 3px rgba(1,107,58,.12);
}
.mcc-lead__error{
display:none;
margin:0;
padding:10px 14px;
background:#FEEBEB; color:#8B1E1E;
border:1px solid #F3B4B4;
border-radius:10px;
font-size:13px;
}
.mcc-lead__error.is-visible{ display:block; }
.mcc-lead__submit{
margin-top:4px;
height:50px;
border:0; border-radius:10px;
background:#016B3A; color:#fff;
font-size:15px; font-weight:600;
cursor:pointer;
display:inline-flex; align-items:center; justify-content:center; gap:8px;
transition:background .15s;
}
.mcc-lead__submit:hover{ background:#014d29; }
.mcc-lead__submit:disabled{ background:#9AA39E; cursor:wait; }
.mcc-lead__fineprint{
margin:10px 0 0;
font-size:11px; color:#9AA39E; text-align:center;
}
.mcc-lead__done{
display:none;
text-align:center; padding:12px 0;
}
.mcc-lead__done.is-visible{ display:block; animation:mccLeadFade .2s ease-out; }
.mcc-lead__done-ico{ margin:8px 0 18px; }
.mcc-lead__done h4{
font-size:22px; font-weight:600; color:#0E1510; margin:0 0 10px;
}
.mcc-lead__done p{
font-size:14px; color:#5A6560; margin:0; line-height:1.5;
}
@keyframes mccLeadFade { from { opacity:0 } to { opacity:1 } }
@keyframes mccLeadPop { from { opacity:0; transform:translate(-50%, -48%) } to { opacity:1; transform:translate(-50%, -50%) } }
@media (max-width: 960px) {
.mc-hero__result-grid{ grid-template-columns:repeat(2, 1fr); }
.mc-hero__result-val{ font-size:20px; }
}
@media (max-width: 720px) {
.mc-hero__result{ margin:0 16px 16px; padding:16px; }
.mc-hero__result-actions{ flex-direction:column; align-items:stretch; }
.mc-hero__result-btn{ width:100%; justify-content:center; }
.mcc-lead__panel{ padding:28px 22px 20px; }
.mcc-lead__title{ font-size:20px; }
}
/* Quote form: vertically center fields in grid row so date input aligns with pills */
.mc-quote__step{ align-items:stretch; }
.mc-quote__field{ justify-content:center; }
.mc-quote__field > label{ height:100%; justify-content:center; }
.mc-quote__step input[type="date"]{ min-height:52px; }
/* ===========================================================
v0.9 — scroll-aware header + right-slide drawer
=========================================================== */
.mc-hdr{ transition: transform .28s ease; will-change: transform; }
.mc-hdr.is-hidden{ transform: translateY(-100%); }
/* Drawer shell */
.mc-drawer{
position:fixed; inset:0; z-index:9000;
visibility:hidden;
transition: visibility .28s;
}
.mc-drawer.is-open{ visibility:visible; }
.mc-drawer__backdrop{
position:absolute; inset:0;
background:rgba(10,18,15,.55);
opacity:0;
transition: opacity .28s ease;
}
.mc-drawer.is-open .mc-drawer__backdrop{ opacity:1; }
.mc-drawer__panel{
position:absolute; top:0; right:0; bottom:0;
width:min(380px, 86vw);
background:#fff;
box-shadow:-24px 0 60px rgba(0,0,0,.18);
display:flex; flex-direction:column;
transform: translateX(100%);
transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
.mc-drawer.is-open .mc-drawer__panel{ transform: translateX(0); }
.mc-drawer__top{
display:flex; align-items:center; justify-content:space-between;
padding:18px 22px;
border-bottom:1px solid #ECEFEC;
}
.mc-drawer__brand{
font-weight:700; font-size:16px; color:#0F1512; letter-spacing:.02em;
}
.mc-drawer__close{
width:40px; height:40px; border-radius:10px;
background:transparent; border:1px solid #E4E7E3;
display:inline-flex; align-items:center; justify-content:center;
color:#2E3633; cursor:pointer;
transition: background .15s, color .15s;
}
.mc-drawer__close:hover{ background:#F4F6F2; color:#016B3A; }
.mc-drawer__nav{
display:flex; flex-direction:column;
padding:14px 12px;
gap:2px;
flex:1 1 auto;
overflow-y:auto;
}
.mc-drawer__nav a{
padding:14px 14px;
font-size:17px; font-weight:500; color:#0F1512;
border-radius:10px;
text-decoration:none;
transition: background .15s, color .15s;
}
.mc-drawer__nav a:hover{ background:#F4F6F2; color:#016B3A; }
.mc-drawer__foot{
padding:16px 22px 22px;
border-top:1px solid #ECEFEC;
display:flex; flex-direction:column; gap:12px;
}
.mc-drawer__phone{
display:flex; flex-direction:column;
text-decoration:none; color:#0F1512;
}
.mc-drawer__phone-lb{ font-size:12px; color:#5E6862; text-transform:uppercase; letter-spacing:.08em; }
.mc-drawer__phone-num{ font-size:20px; font-weight:700; color:#016B3A; }
.mc-drawer__btn{ width:100%; justify-content:center; text-align:center; }
body.mc-nav-lock{ overflow:hidden; }
/* ===========================================================
v0.9.7 — drawer radius, form full-width btns, wh stats, line overflow
=========================================================== */
.mc-drawer__btn{ border-radius:12px !important; }
@media (max-width: 540px){
/* Quote form: top Continue button full width */
.mc-quote__card-top{ align-items:stretch; }
.mc-quote__top-action{ align-self:stretch; display:flex; }
.mc-quote__top-action .mc-quote__btn{ flex:1 1 auto; width:100%; justify-content:center; }
/* Quote form: Back button full width */
.mc-quote__foot{ align-items:stretch; }
.mc-quote__foot .mc-quote__btn{ width:100%; justify-content:center; }
/* Fix divider line overflowing card on mobile (reduced padding 20px, line had -28px) */
.mc-quote__card-body::before{ margin-left:-20px; margin-right:-20px; }
/* Warehousing hub stats — left align on mobile */
.mc-wh__stats{ margin-left:0; margin-right:auto; justify-content:flex-start; }
.mc-wh__stat{ align-items:flex-start; text-align:left; }
}
/* v0.9.9 — popup triggers as divs */
[data-mcc-quote-open]{ cursor: pointer; user-select: none; }
[data-mcc-quote-open]:focus-visible{ outline: 2px solid #016B3A; outline-offset: 2px; }
/* ===========================================================
v0.9.12 — Legal pages (privacy / terms / cookie)
=========================================================== */
.mc-legal{ padding:72px 0 96px; background:#fff; }
.mc-legal__inner{ max-width:820px; margin:0 auto; padding:0 24px; }
.mc-legal__head{ margin-bottom:28px; border-bottom:1px solid #ECEFEC; padding-bottom:20px; }
.mc-legal__h1{
font-family:var(--mc-font-h);
font-size:44px; line-height:1.1; font-weight:700;
letter-spacing:-0.02em; color:#0E1510; margin:0;
}
.mc-legal__body{ font-family:var(--mc-font-b); color:#0E1510; }
.mc-legal__body p{ font-size:15px; line-height:26px; margin:0 0 14px; }
.mc-legal__body em{ color:#5E6862; font-style:italic; }
.mc-legal__body h2{
font-family:var(--mc-font-h);
font-size:22px; line-height:1.25; font-weight:700;
color:#016B3A; margin:28px 0 10px;
}
.mc-legal__body ul{ margin:0 0 16px 18px; padding:0; }
.mc-legal__body li{ font-size:15px; line-height:24px; margin:0 0 6px; }
.mc-legal__body a{ color:#016B3A; text-decoration:underline; }
.mc-legal__body strong{ color:#0E1510; }
@media (max-width: 640px){
.mc-legal{ padding:48px 0 72px; }
.mc-legal__inner{ padding:0 16px; }
.mc-legal__h1{ font-size:32px; letter-spacing:-0.01em; }
.mc-legal__body h2{ font-size:19px; margin-top:22px; }
}
/* === McCabe hp-new (Figma 123:2) — added 2026-05-01 === */
/* How it works — 3 steps grid */
.mc-how{ background:#fff; padding:96px 0; }
.mc-how__inner{ max-width:1280px; margin:0 auto; padding:0 32px; }
.mc-how__head{ text-align:center; margin-bottom:48px; }
.mc-how__pill{ display:inline-block; padding:6px 14px; border-radius:999px; background:#E8F4ED; color:#016B3A; font:600 13px/1 var(--mc-font-h),Inter,sans-serif; letter-spacing:0.02em; margin-bottom:16px; }
.mc-how__title{ font-family:var(--mc-font-h); font-size:69px; line-height:1.05; letter-spacing:-2.42px; font-weight:600; color:#0B1A14; margin:0; }
.mc-how__title-accent{ color:#016B3A; }
.mc-how__steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.mc-how__step{ background:#F7F8F7; border:1px solid rgba(11,26,20,0.08); border-radius:20px; padding:32px; }
.mc-how__num{ display:block; font:700 42px/1 var(--mc-font-h),Inter,sans-serif; color:#008045; letter-spacing:-0.5px; margin-bottom:14px; }
.mc-how__step-h{ font:600 22px/1.3 Inter,sans-serif; color:#0B1A14; margin:0 0 12px; }
.mc-how__step-b{ font:400 15px/1.55 Inter,sans-serif; color:#52615A; margin:0; }
@media (max-width:900px){
.mc-how{ padding:64px 0; }
.mc-how__title{ font-size:38px; letter-spacing:-1.1px; }
.mc-how__steps{ grid-template-columns:1fr; gap:16px; }
.mc-how__step{ padding:24px; }
}
/* Modes — group sublist headers (TRANSPORTATION / WAREHOUSING) */
.mc-modes__group{ list-style:none; padding:0 4px 8px; }
.mc-modes__group-wrap{ display:flex; flex-direction:column; }
.mc-modes__group-h{ display:inline-block; width:fit-content; font:600 12px/1 Inter,sans-serif; letter-spacing:0.18em; text-transform:uppercase; color:#52615A; background:#EFEFEC; padding:8px 14px; border-radius:8px; }
.mc-modes__group--warehousing{}
/* Why us — corner badge replaces num */
.mc-ft__badge{
display:inline-flex; align-items:center;
padding:6px 14px; border-radius:999px;
background:#D4EFE0; color:#016B3A;
font:600 13px/1.4 Inter,sans-serif; letter-spacing:0.01em;
white-space:nowrap;
}
/* Quote — single-page (no tabs) */
.mc-quote__card--single .mc-quote__card-top{ display:none; }
.mc-quote__card--single .mc-quote__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:14px; }
.mc-quote__card--single .mc-quote__field{ margin:0; }
.mc-quote__card--single .mc-quote__field--full{ margin-top:14px; }
.mc-quote__card--single .mc-quote__foot{ margin-top:24px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.mc-quote__card--single .mc-quote__foot .mc-quote__btn{ margin-left:auto; }
@media (max-width:720px){
.mc-quote__card--single .mc-quote__row{ grid-template-columns:1fr; gap:14px; }
}
/* ============ PRE-FOOTER CTA ============ */
.mc-precta{ padding:56px 0; background:#fff; border-top:1px solid #E4E7E3; }
.mc-precta__inner{
max-width:var(--mc-container); margin:0 auto; padding:0 var(--mc-gutter);
display:flex; align-items:center; gap:48px; flex-wrap:wrap;
}
.mc-precta__brand{ flex-shrink:0; display:block; }
.mc-precta__brand img{ display:block; width:96px; height:96px; }
.mc-precta__cta{
display:inline-flex; align-items:center; gap:24px;
text-decoration:none; color:#0E1510;
font-family:var(--mc-font-h);
}
.mc-precta__txt{
font-size:40px; line-height:1.1; letter-spacing:-1px; font-weight:600;
border-bottom:2px solid #0E1510; padding-bottom:6px;
transition:color .15s, border-color .15s;
}
.mc-precta__cta:hover .mc-precta__txt{ color:#016B3A; border-color:#016B3A; }
.mc-precta__cta:hover .mc-precta__arrow{ color:#016B3A; transform:translateX(4px); }
.mc-precta__arrow{
display:inline-flex; align-items:center; justify-content:center;
width:48px; height:48px; border-radius:999px;
background:#016B3A; color:#fff;
transition:transform .15s, background .15s;
}
@media (max-width: 760px){
.mc-precta{ padding:40px 0; }
.mc-precta__inner{ gap:24px; }
.mc-precta__brand img{ width:64px; height:64px; }
.mc-precta__txt{ font-size:28px; }
.mc-precta__arrow{ width:40px; height:40px; }
}
/* Testimonials & FAQ eyebrow pills (Figma 123:3703 / 123:3760) */
.mc-tt__eyebrow,
.mc-faq__eyebrow{
display:inline-flex; padding:6px 14px; border-radius:999px;
background:#D4EFE0; color:#016B3A;
font:600 13px/1 var(--mc-font-h),Inter,sans-serif;
letter-spacing:0.04em;
margin:0 0 18px;
}
.mc-faq__inner > .mc-faq__eyebrow{ grid-column:1 / -1; margin-bottom:14px; }
/* Quote section eyebrow pill (Figma 123:2101) */
.mc-quote__eyebrow{
display:inline-flex; padding:6px 14px; border-radius:999px;
background:#D4EFE0; color:#016B3A;
font:600 13px/1 var(--mc-font-h),Inter,sans-serif;
letter-spacing:0.04em;
margin:0 0 18px;
}
/* Eyebrow badges over headings — fit-content (request 2026-05-01) */
.mc-ft__eyebrow,
.mc-nat__eyebrow,
.mc-modes__eyebrow,
.mc-stat__eyebrow,
.mcc-lead__eyebrow,
.mc-tt__eyebrow,
.mc-faq__eyebrow,
.mc-quote__eyebrow{ width:fit-content; }
/* === Mobile overflow fix: collapse 2-col headers to single column ≤640px === */
@media (max-width: 640px){
.mc-modes__head{ grid-template-columns: 1fr; gap:14px; align-items:flex-start; }
.mc-modes__sub--2{ max-width:none; }
.mc-nat__head{ grid-template-columns: 1fr; }
}
/* === Mobile fix: Quote section gutter too wide on small screens === */
@media (max-width: 640px){
.mc-quote__inner{ padding: 0 16px; }
.mc-quote__card-body{ padding: 0 18px 22px; }
.mc-quote__card--single .mc-quote__card-body{ padding-top: 22px; }
}
/* === Mobile: uniform 15px L/R gutter across sections === */
@media (max-width: 640px){
:root{ --mc-gutter: 15px; }
}
/* Force uniform 15px L/R gutter on mobile across ALL sections (override per-section mobile rules) */
@media (max-width: 640px){
.mc-hero__inner,
.mc-modes__inner,
.mc-nat__inner,
.mc-quote__inner,
.mc-tt__inner,
.mc-faq__inner,
.mc-ftr__inner,
.mc-stat__inner,
.mc-why__inner,
.mc-how__inner{
padding-left: 15px !important;
padding-right: 15px !important;
}
}