@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations'),url('../fonts/inter-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations'),url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* CR Garage Care – shared design system (complements Tailwind utilities) */
:root {
  --navy: #1f3a52;
  --navy-dark: #162b3d;
  --orange: #f26a1b;
  --orange-hover: #d95a10;
  --mist: #eef3f7;
  --peach: #fdebdd;
  --ink: #2b3640;
  --muted: #5f6b76;
  --line: #dce4ea;
  --zebra: #f6f9fb;
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .font-head { font-family: 'Montserrat', 'Poppins', system-ui, sans-serif; letter-spacing: -0.01em; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--orange); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }

/* H2 with short orange underline bar */
.h2-bar { font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); line-height: 1.15; color: var(--navy); }
.h2-bar::after { content: ''; display: block; width: 48px; height: 4px; background: var(--orange); border-radius: 2px; margin-top: 10px; }
.on-navy .h2-bar, .h2-bar.light { color: #fff; }
.h2-bar.center::after { margin-left: auto; margin-right: auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; border-radius: 10px; padding: 12px 22px; line-height: 1.1; transition: background .2s, color .2s, transform .2s, box-shadow .2s; cursor: pointer; border: 2px solid transparent; white-space: nowrap; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 4px 12px rgba(242,106,27,.3); }
.btn-primary:hover { background: var(--orange-hover); transform: translateY(-1px); }
.btn-outline-light { border-color: #fff; color: #fff; background: transparent; }
.btn-outline-light:hover { background: #fff; color: var(--navy); }
.btn-outline-navy { border-color: var(--navy); color: var(--navy); background: #fff; }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-white { background: #fff; color: var(--orange-hover); }
.btn-white:hover { background: var(--navy); color: #fff; }
.btn-lg { padding: 16px 28px; font-size: 1.125rem; }

/* Cards */
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 14px rgba(31,58,82,.08); transition: transform .2s, box-shadow .2s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(31,58,82,.14); }

/* Icons */
.ico { width: 40px; height: 40px; stroke: var(--navy); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico .acc { stroke: var(--orange); }
.on-navy .ico, .ico.light { stroke: #fff; }
.on-navy .ico .acc, .ico.light .acc { stroke: var(--orange); }
.ico-sm { width: 20px; height: 20px; }

/* Tables */
.cr-table { width: 100%; border-collapse: collapse; font-size: .9rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.cr-table thead th { background: var(--navy); color: #fff; text-align: left; padding: 10px 14px; font-weight: 700; }
.cr-table td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.cr-table tbody tr:nth-child(even) td { background: var(--zebra); }
.cr-table td:first-child { font-weight: 600; color: var(--navy); }
.table-wrap { overflow-x: auto; border-radius: 10px; }

/* Callouts */
.callout { background: var(--peach); border: 1px solid var(--orange); border-radius: 12px; }

/* Checklist */
.checks li { position: relative; padding-left: 30px; margin: 8px 0; }
.checks li::before { content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f26a1b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E"); }

/* Accordion */
.acc-item { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.acc-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; font-weight: 600; font-size: .95rem; color: var(--navy); cursor: pointer; }
.acc-btn .pm { position: relative; width: 16px; height: 16px; flex: none; }
.acc-btn .pm::before, .acc-btn .pm::after { content: ''; position: absolute; background: var(--navy); border-radius: 2px; transition: transform .25s; }
.acc-btn .pm::before { left: 0; right: 0; top: 7px; height: 2px; }
.acc-btn .pm::after { top: 0; bottom: 0; left: 7px; width: 2px; }
.acc-btn[aria-expanded="true"] .pm::after { transform: rotate(90deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.acc-panel > div { overflow: hidden; }
.acc-panel.open { grid-template-rows: 1fr; }
.acc-panel p { padding: 0 16px 16px; color: var(--muted); font-size: .95rem; line-height: 1.6; }

/* Hero */
.hero-clip { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
@media (min-width: 1024px) {
  .hero-photo { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
}

/* Header dropdowns */
.nav-link { white-space: nowrap; position: relative; font-weight: 600; font-size: .95rem; color: var(--navy); padding: 8px 2px; display: inline-flex; align-items: center; gap: 4px; }
.nav-link:hover, .nav-link.active { color: var(--orange); }
.nav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--orange); border-radius: 2px; }
.dropdown { position: absolute; top: 100%; left: -12px; min-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 30px rgba(31,58,82,.16); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .18s; z-index: 60; }
.has-dd:hover > .dropdown, .has-dd:focus-within > .dropdown, .has-dd.open > .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; padding: 9px 12px; border-radius: 8px; font-size: .92rem; font-weight: 500; color: var(--ink); }
.dropdown a:hover { background: var(--mist); color: var(--orange-hover); }

/* Mobile drawer */
#drawer { transform: translateX(100%); transition: transform .3s ease; }
#drawer.open { transform: none; }
.m-sub { display: none; }
.m-sub.open { display: block; }

/* Modal */
#cb-modal { display: none; }
#cb-modal.open { display: flex; }

/* Steps arrow */
.step-arrow { color: var(--navy); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* Top bar rotator (mobile) */
.tb-item { display: none; }
@media (min-width: 1024px) { .tb-item { display: flex !important; } }
.tb-item.show { display: flex; }

/* Form fields */
.field { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; background: #fff; font-size: .95rem; }
.field:focus { outline: 3px solid rgba(242,106,27,.35); border-color: var(--orange); }
.label { display: block; font-weight: 600; font-size: .85rem; color: var(--navy); margin-bottom: 6px; }
.err { color: #b3261e; font-size: .8rem; margin-top: 4px; display: none; }
.has-error .field { border-color: #b3261e; }
.has-error .err { display: block; }

/* Masonry for reviews */
.masonry { columns: 1; column-gap: 20px; }
@media (min-width: 768px) { .masonry { columns: 2; } }
@media (min-width: 1024px) { .masonry { columns: 3; } }
.masonry > * { break-inside: avoid; margin-bottom: 20px; }

/* Mobile sticky bar spacing */
@media (max-width: 767px) { body { padding-bottom: 68px; } }

/* Orange-on-orange fix: accent strokes turn white inside orange surfaces */
.bg-brand .ico .acc, .btn-primary .ico .acc { stroke: #fff; }